ngx-histaff-alpha 5.4.2 → 5.4.4
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-histaff-alpha-ai-hint-for-table.component-D-1OoRtu.mjs → ngx-histaff-alpha-ai-hint-for-table.component-BavQgrZw.mjs} +3 -3
- package/fesm2022/{ngx-histaff-alpha-ai-hint-for-table.component-D-1OoRtu.mjs.map → ngx-histaff-alpha-ai-hint-for-table.component-BavQgrZw.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-core-form-design.component-DpiJjjyj.mjs → ngx-histaff-alpha-core-form-design.component-Dz7G6A21.mjs} +74 -12
- package/fesm2022/ngx-histaff-alpha-core-form-design.component-Dz7G6A21.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-core-sticker-collection.component-lbrKF_1o.mjs → ngx-histaff-alpha-core-sticker-collection.component-BtVAU8T4.mjs} +3 -3
- package/fesm2022/{ngx-histaff-alpha-core-sticker-collection.component-lbrKF_1o.mjs.map → ngx-histaff-alpha-core-sticker-collection.component-BtVAU8T4.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-core-toast-loading.component-A_2smp_J.mjs → ngx-histaff-alpha-core-toast-loading.component-CvK2lFP0.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-core-toast-loading.component-A_2smp_J.mjs.map → ngx-histaff-alpha-core-toast-loading.component-CvK2lFP0.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-core-workflow-consume.component-C1NlCp2w.mjs → ngx-histaff-alpha-core-workflow-consume.component-BibJY7DQ.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-core-workflow-consume.component-C1NlCp2w.mjs.map → ngx-histaff-alpha-core-workflow-consume.component-BibJY7DQ.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-db-settings.component-PsMm1ua8.mjs → ngx-histaff-alpha-db-settings.component-CM_yYOW8.mjs} +5 -5
- package/fesm2022/{ngx-histaff-alpha-db-settings.component-PsMm1ua8.mjs.map → ngx-histaff-alpha-db-settings.component-CM_yYOW8.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-design-wrapper.component-CLLZgHlx.mjs → ngx-histaff-alpha-design-wrapper.component-BV82PsM8.mjs} +40 -42
- package/fesm2022/ngx-histaff-alpha-design-wrapper.component-BV82PsM8.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-design-wrapper.route-C7ZFlsuK.mjs → ngx-histaff-alpha-design-wrapper.route-CF9FAp4f.mjs} +5 -5
- package/fesm2022/{ngx-histaff-alpha-design-wrapper.route-C7ZFlsuK.mjs.map → ngx-histaff-alpha-design-wrapper.route-CF9FAp4f.mjs.map} +1 -1
- package/fesm2022/ngx-histaff-alpha-live-form.component-C4m3hdmg.mjs +724 -0
- package/fesm2022/ngx-histaff-alpha-live-form.component-C4m3hdmg.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-ngx-histaff-alpha-DaLAEUPM.mjs → ngx-histaff-alpha-ngx-histaff-alpha-Do1LUNeT.mjs} +27693 -27721
- package/fesm2022/ngx-histaff-alpha-ngx-histaff-alpha-Do1LUNeT.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-wf-form-assign.component-BEVzvgMC.mjs → ngx-histaff-alpha-wf-form-assign.component-SRbHloOV.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-wf-form-assign.component-BEVzvgMC.mjs.map → ngx-histaff-alpha-wf-form-assign.component-SRbHloOV.mjs.map} +1 -1
- package/fesm2022/ngx-histaff-alpha-wf-instance-status.component-2Nw-zaL7.mjs +110 -0
- package/fesm2022/ngx-histaff-alpha-wf-instance-status.component-2Nw-zaL7.mjs.map +1 -0
- package/fesm2022/ngx-histaff-alpha-wf-instance-step-react.component-2NmYSLxz.mjs +76 -0
- package/fesm2022/ngx-histaff-alpha-wf-instance-step-react.component-2NmYSLxz.mjs.map +1 -0
- package/fesm2022/ngx-histaff-alpha.mjs +1 -1
- package/lib/app/enum/EnumSignalRType.d.ts +2 -1
- package/lib/app/libraries/core-control-value-only/core-control-value-only.component.d.ts +2 -0
- package/lib/app/libraries/core-form/core-form/core-form.component.d.ts +2 -1
- package/lib/app/libraries/core-form-design/core-form-design.component.d.ts +6 -0
- package/lib/app/libraries/core-form-design/field-setting/calculated-props/calculated-props.component.d.ts +1 -0
- package/lib/app/libraries/core-form-design/live-form/live-form.component.d.ts +19 -4
- package/lib/app/libraries/core-radio-group/core-radio-group/core-radio-group.component.d.ts +7 -3
- package/lib/app/libraries/core-rule-tree/EnumCoreRuleTreeOparator.d.ts +16 -0
- package/lib/app/libraries/core-rule-tree/core-rule-tree.component.d.ts +1 -16
- package/lib/app/libraries/core-rule-tree/interfaces.d.ts +11 -0
- package/lib/app/libraries/core-terminal-spinner/core-terminal-spinner.component.d.ts +5 -0
- package/lib/app/libraries/core-workflow-builder/core-workflow.service.d.ts +3 -1
- package/lib/app/libraries/core-workflow-builder/enums/EnumActorResolvedStatus.d.ts +6 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IGenerateWorkflowRoutingRequest.d.ts +0 -1
- package/lib/app/libraries/core-workflow-builder/interfaces/IInitialDebugSubmitRequest.d.ts +5 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IInitialSubmitRequest.d.ts +5 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IPlannedActor.d.ts +2 -1
- package/lib/app/libraries/core-workflow-builder/interfaces/IRoutingStep.d.ts +19 -8
- package/lib/app/libraries/core-workflow-builder/interfaces/IStepConfig.d.ts +2 -1
- package/lib/app/libraries/core-workflow-builder/interfaces/IWorkflowInstance.d.ts +24 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IWorkflowReactContext.d.ts +10 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IWorkflowStepProgress.d.ts +14 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IWorkflowStepProgressActor.d.ts +18 -0
- package/lib/app/libraries/core-workflow-builder/routing-preview/routing-preview.component.d.ts +14 -0
- package/lib/app/libraries/core-workflow-builder/routing-preview-panel/routing-preview-panel.component.d.ts +0 -4
- package/lib/app/libraries/core-workflow-builder/runtime-routing/runtime-routing.component.d.ts +11 -0
- package/lib/app/libraries/core-workflow-builder/wf-instance-status/wf-instance-status.component.d.ts +27 -0
- package/lib/app/libraries/core-workflow-builder/wf-instance-step-react/wf-instance-step-react.component.d.ts +23 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-step-config-shell/wf-approver-config/wf-approver-config.component.d.ts +4 -2
- package/lib/app/services/app-config.service.d.ts +1 -1
- package/lib/app/services/json.service.d.ts +1 -0
- package/lib/app/services/socket.service.d.ts +4 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/fesm2022/ngx-histaff-alpha-core-form-design.component-DpiJjjyj.mjs.map +0 -1
- package/fesm2022/ngx-histaff-alpha-design-wrapper.component-CLLZgHlx.mjs.map +0 -1
- package/fesm2022/ngx-histaff-alpha-live-form.component-yStqGBbA.mjs +0 -600
- package/fesm2022/ngx-histaff-alpha-live-form.component-yStqGBbA.mjs.map +0 -1
- package/fesm2022/ngx-histaff-alpha-ngx-histaff-alpha-DaLAEUPM.mjs.map +0 -1
- package/lib/app/libraries/core-workflow-builder/interfaces/IResolvedStepRouting.d.ts +0 -15
- package/lib/app/libraries/core-workflow-builder/routing-preview-panel/d3-renderer.d.ts +0 -5
- package/lib/app/libraries/core-workflow-builder/routing-preview-panel/graph-transformer.d.ts +0 -15
|
@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, signal, inject, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import { c as BaseComponent, C as CoreWorkflowService, T as TranslatePipe, f as TooltipDirective } from './ngx-histaff-alpha-ngx-histaff-alpha-
|
|
6
|
-
import { D as DbService } from './ngx-histaff-alpha-core-toast-loading.component-
|
|
5
|
+
import { c as BaseComponent, C as CoreWorkflowService, T as TranslatePipe, f as TooltipDirective } from './ngx-histaff-alpha-ngx-histaff-alpha-Do1LUNeT.mjs';
|
|
6
|
+
import { D as DbService } from './ngx-histaff-alpha-core-toast-loading.component-CvK2lFP0.mjs';
|
|
7
7
|
import { take } from 'rxjs';
|
|
8
8
|
|
|
9
9
|
class AiHintForTableComponent extends BaseComponent {
|
|
@@ -51,4 +51,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
51
51
|
}] });
|
|
52
52
|
|
|
53
53
|
export { AiHintForTableComponent };
|
|
54
|
-
//# sourceMappingURL=ngx-histaff-alpha-ai-hint-for-table.component-
|
|
54
|
+
//# sourceMappingURL=ngx-histaff-alpha-ai-hint-for-table.component-BavQgrZw.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngx-histaff-alpha-ai-hint-for-table.component-
|
|
1
|
+
{"version":3,"file":"ngx-histaff-alpha-ai-hint-for-table.component-BavQgrZw.mjs","sources":["../../../projects/ngx-histaff-alpha/src/lib/app/libraries/core-workflow-builder/db-settings/ai-hint-for-table/ai-hint-for-table.component.ts","../../../projects/ngx-histaff-alpha/src/lib/app/libraries/core-workflow-builder/db-settings/ai-hint-for-table/ai-hint-for-table.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, input, signal } from '@angular/core';\r\nimport { IWorkflowSchemaTable } from '../../interfaces/IWorkflowSchema';\r\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { TranslatePipe } from '../../../../app-pipes/translate.pipe';\r\nimport { TooltipDirective } from '../../../tooltip/tooltip.directive';\r\nimport { BaseComponent } from '../../../base-component/base/base.component';\r\nimport { DbService } from '../../../../services/db.service';\r\nimport { CoreWorkflowService } from '../../core-workflow.service';\r\nimport { take } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'ai-hint-for-table',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [\r\n TranslatePipe,\r\n TooltipDirective,\r\n ReactiveFormsModule,\r\n ],\r\n templateUrl: './ai-hint-for-table.component.html',\r\n styleUrl: './ai-hint-for-table.component.scss'\r\n})\r\nexport class AiHintForTableComponent extends BaseComponent {\r\n $table = input.required<IWorkflowSchemaTable>()\r\n\r\n $editing = signal(false);\r\n hintControl = new FormControl('');\r\n\r\n dbs = inject(DbService);\r\n wfs = inject(CoreWorkflowService);\r\n\r\n override ngOnInit() {\r\n this.subscriptions.push(\r\n this.mls.lang$.subscribe(x => this.lang = x)\r\n )\r\n this.hintControl.setValue(this.$table().hintForAi || '');\r\n }\r\n\r\n startEditing(): void {\r\n this.$editing.set(true);\r\n }\r\n\r\n save(): void {\r\n this.$editing.set(false);\r\n this.wfs.$workflowDbSchema.update(current => {\r\n const founds = current.filter(x => x.id === this.$table().id);\r\n if (founds) {\r\n founds[0].hintForAi = this.hintControl.getRawValue() ?? ''\r\n }\r\n return [...current];\r\n })\r\n this.dbs.updateTableHint(this.$table().table, this.hintControl.getRawValue() ?? '')\r\n .pipe(take(1))\r\n .subscribe({\r\n next: () => console.log('Hint saved'),\r\n error: err => console.error('Failed to save hint', err)\r\n });\r\n }\r\n}\r\n","<span class=\"ai-table-hint-wrapper\">\r\n @if (!$editing()) {\r\n <i\r\n class=\"feather feather-more-vertical ai-table-icon\"\r\n [appTooltip]=\"'Edit Hint for AI' | translate : lang\" [showAnyway]=\"true\"\r\n (click)=\"startEditing()\">\r\n </i>\r\n } @else {\r\n <input\r\n type=\"text\"\r\n class=\"form-control form-control-sm ai-table-hint-input\"\r\n [formControl]=\"hintControl\"\r\n (blur)=\"save()\"\r\n (keydown.enter)=\"save()\" />\r\n }\r\n</span>\r\n"],"names":[],"mappings":";;;;;;;;AAqBM,MAAO,uBAAwB,SAAQ,aAAa,CAAA;AAX1D,IAAA,WAAA,GAAA;;AAYE,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAwB;AAE/C,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;AACxB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC;AAEjC,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC;AACvB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,mBAAmB,CAAC;AA6BlC;IA3BU,QAAQ,GAAA;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CACrB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAC7C;AACD,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;;IAG1D,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;;IAGzB,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACxB,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,OAAO,IAAG;YAC1C,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC;YAC7D,IAAI,MAAM,EAAE;AACV,gBAAA,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,IAAI,EAAE;;AAE5D,YAAA,OAAO,CAAC,GAAG,OAAO,CAAC;AACrB,SAAC,CAAC;QACI,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,IAAI,EAAE;AACjF,aAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACZ,aAAA,SAAS,CAAC;YACT,IAAI,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;AACrC,YAAA,KAAK,EAAE,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,GAAG;AACvD,SAAA,CAAC;;8GAlCC,uBAAuB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,0OCrBpC,8gBAgBA,EAAA,MAAA,EAAA,CAAA,4RAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EDFI,aAAa,EACb,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gBAAgB,sIAChB,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKV,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAXnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EACZ,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACP,aAAa;wBACb,gBAAgB;wBAChB,mBAAmB;AACpB,qBAAA,EAAA,QAAA,EAAA,8gBAAA,EAAA,MAAA,EAAA,CAAA,4RAAA,CAAA,EAAA;;;;;"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, ChangeDetectorRef, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, computed, ViewContainerRef, Input, EventEmitter, Output, Renderer2, input, viewChild, isDevMode } from '@angular/core';
|
|
3
3
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
4
|
-
import {
|
|
4
|
+
import { m as CoreFormDesignService, C as CoreWorkflowService, B as BaseEditComponent, k as AlertService, z as AppConfigService, K as EnumCorePageEditMode, L as EnumCoreButtonVNSCode, R as READONLY_WORKFLOW_FIELDS, O as noneAutoClosedAlertOptions, o as DialogService, M as MultiLanguageService, d as CorePageHeaderComponent, P as CoreFormComponent, Q as CoreButtonGroupVnsComponent, T as TranslatePipe, E as EnumFormBaseContolType, c as BaseComponent, U as EnumCoreTablePipeType, V as CoreCheckboxComponent, q as CoreDropdownComponent, f as TooltipDirective, G as GptService, j as alertOptions, x as CoreRadioGroupComponent, W as HtmlTooltipDirective, X as EnumFormDesignMode, p as DomService, J as JsonService, y as ApplicationHelpService, a as EnumCoreFormControlSeekerSourceType, H as HotKeysDirective, Y as CoreControlComponent, h as TableCellPipe, r as CoreChecklistComponent, t as CoreFormControlSeekerComponent, Z as CoreAttachmentComponent, s as CoreDatePickerComponent, _ as CoreMonthSelectorComponent, u as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-Do1LUNeT.mjs';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
|
-
import { FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
-
import { NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
6
|
+
import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import { NgStyle, AsyncPipe, NgTemplateOutlet } from '@angular/common';
|
|
8
8
|
import { BehaviorSubject, catchError, of, filter, distinctUntilChanged, tap, switchMap } from 'rxjs';
|
|
9
9
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
10
|
-
import { CoreStickerCollectionComponent } from './ngx-histaff-alpha-core-sticker-collection.component-
|
|
11
|
-
import { D as DbService, C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-
|
|
10
|
+
import { CoreStickerCollectionComponent } from './ngx-histaff-alpha-core-sticker-collection.component-BtVAU8T4.mjs';
|
|
11
|
+
import { D as DbService, C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-CvK2lFP0.mjs';
|
|
12
12
|
import { EnumTranslateKey } from 'alpha-global-constants';
|
|
13
|
-
import { L as LiveFormComponent } from './ngx-histaff-alpha-live-form.component-
|
|
13
|
+
import { L as LiveFormComponent } from './ngx-histaff-alpha-live-form.component-C4m3hdmg.mjs';
|
|
14
14
|
|
|
15
15
|
const slideFromTopFadeIn = trigger('slideFromTopFadeIn', [
|
|
16
16
|
state('in', style({ opacity: 1, transform: 'translateY(0)' })),
|
|
@@ -235,7 +235,7 @@ class FormMetadataComponent extends BaseEditComponent {
|
|
|
235
235
|
});
|
|
236
236
|
}
|
|
237
237
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormMetadataComponent, deps: [{ token: DialogService }, { token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: FormMetadataComponent, isStandalone: true, selector: "form-metadata", host: { listeners: { "document:keydown.escape": "onEscape($event)", "window:click": "onWindowClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-metadata-container\">\r\n\r\n <div class=\"metadata-body\">\r\n\r\n <div class=\"header-n-form\">\r\n\r\n @if (!$isInWorkflowDesign()) {\r\n\r\n <div class=\"h15\"></div>\r\n\r\n <div class=\"d-flex d-flex-start w-100 pr1rem\">\r\n <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\" (buttonClick)=\"onButtonClick($event)\"\r\n [shownItems]=\"customButtons\" class=\"buttonGroupCustom\"></core-button-group-vns>\r\n </div>\r\n <div class=\"h15\"></div>\r\n\r\n <div class=\"header-wrapper\">\r\n <core-page-header [title]=\"'FORM OVERVIEW'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n <div class=\"close-wrapper\" (click)=\"onClose()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n\r\n } \r\n\r\n\r\n\r\n <div class=\"af-instance\">\r\n\r\n <div class=\"af-instance-left\">\r\n <core-form \r\n [inputSections]=\"$sections()\" \r\n [width]=\"800\" \r\n [mode$]=\"mode$\" \r\n [checkError$]=\"coreFormDesignService.formMetadataCheckError$\"\r\n [hideButtons]=\"true\" \r\n [forceCreateNewForm]=\"true\"\r\n [hideDevSector]=\"!!$isInWorkflowDesign()\"\r\n (onFormCreated)=\"onFormCreated($event)\" />\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n @if (!$isInWorkflowDesign()) {\r\n <div class=\"af-instance-right\">\r\n <save-live-json></save-live-json>\r\n </div>\r\n }\r\n\r\n\r\n </div>\r\n\r\n</div>", styles: [".form-metadata-container .header-wrapper{padding:0 15px}.form-metadata-container .header-wrapper .close-wrapper{display:flex;position:absolute;right:7px;top:8px;width:24px;height:24px;color:#848484;cursor:pointer}.form-metadata-container .header-wrapper .close-wrapper i{font-size:24px}.form-metadata-container .af-instance{display:flex}.form-metadata-container .h15{height:15px!important}.form-metadata-container .pr1rem{padding-right:1rem}.form-metadata-container .metadata-body{display:flex;align-items:flex-start;justify-content:space-between}.form-metadata-container .af-instance-right{margin-top:45px;margin-right:15px}\n"], dependencies: [{ kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup", "htmlTooltipRef"], outputs: ["buttonClick"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons", "forceCreateNewForm", "secondBottomTemplateRef", "hideDevSector", "hideCalculatedSection"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: SaveLiveJsonComponent, selector: "save-live-json" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: FormMetadataComponent, isStandalone: true, selector: "form-metadata", host: { listeners: { "document:keydown.escape": "onEscape($event)", "window:click": "onWindowClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-metadata-container\">\r\n\r\n <div class=\"metadata-body\">\r\n\r\n <div class=\"header-n-form\">\r\n\r\n @if (!$isInWorkflowDesign()) {\r\n\r\n <div class=\"h15\"></div>\r\n\r\n <div class=\"d-flex d-flex-start w-100 pr1rem\">\r\n <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\" (buttonClick)=\"onButtonClick($event)\"\r\n [shownItems]=\"customButtons\" class=\"buttonGroupCustom\"></core-button-group-vns>\r\n </div>\r\n <div class=\"h15\"></div>\r\n\r\n <div class=\"header-wrapper\">\r\n <core-page-header [title]=\"'FORM OVERVIEW'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n <div class=\"close-wrapper\" (click)=\"onClose()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n\r\n } \r\n\r\n\r\n\r\n <div class=\"af-instance\">\r\n\r\n <div class=\"af-instance-left\">\r\n <core-form \r\n [inputSections]=\"$sections()\" \r\n [width]=\"800\" \r\n [mode$]=\"mode$\" \r\n [checkError$]=\"coreFormDesignService.formMetadataCheckError$\"\r\n [hideButtons]=\"true\" \r\n [forceCreateNewForm]=\"true\"\r\n [hideDevSector]=\"!!$isInWorkflowDesign()\"\r\n (onFormCreated)=\"onFormCreated($event)\" />\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n @if (!$isInWorkflowDesign()) {\r\n <div class=\"af-instance-right\">\r\n <save-live-json></save-live-json>\r\n </div>\r\n }\r\n\r\n\r\n </div>\r\n\r\n</div>", styles: [".form-metadata-container .header-wrapper{padding:0 15px}.form-metadata-container .header-wrapper .close-wrapper{display:flex;position:absolute;right:7px;top:8px;width:24px;height:24px;color:#848484;cursor:pointer}.form-metadata-container .header-wrapper .close-wrapper i{font-size:24px}.form-metadata-container .af-instance{display:flex}.form-metadata-container .h15{height:15px!important}.form-metadata-container .pr1rem{padding-right:1rem}.form-metadata-container .metadata-body{display:flex;align-items:flex-start;justify-content:space-between}.form-metadata-container .af-instance-right{margin-top:45px;margin-right:15px}\n"], dependencies: [{ kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup", "htmlTooltipRef"], outputs: ["buttonClick"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons", "forceCreateNewForm", "secondBottomTemplateRef", "hideDevSector", "hideCalculatedSection", "buttonGroupTemplateRef"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: SaveLiveJsonComponent, selector: "save-live-json" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
239
239
|
}
|
|
240
240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormMetadataComponent, decorators: [{
|
|
241
241
|
type: Component,
|
|
@@ -1019,8 +1019,10 @@ class CalculatedPropsComponent extends BasePropsComponent {
|
|
|
1019
1019
|
ngAfterViewInit() {
|
|
1020
1020
|
setTimeout(() => this.loadDbSchema());
|
|
1021
1021
|
}
|
|
1022
|
+
openHintEditor(table, e) {
|
|
1023
|
+
}
|
|
1022
1024
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CalculatedPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1023
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CalculatedPropsComponent, isStandalone: true, selector: "calculated-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group calculated-group\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n <div class=\"setting-row evaluation-mode-row\">\r\n <label class=\"setting-label\">Evaluation Mode</label>\r\n <core-radio-group\r\n [options$]=\"radioOptions$\"\r\n [vertical]=\"true\"\r\n [gapY]=\"8\"\r\n [ngModel]=\"$currentControl()?.evaluationMode\"\r\n (ngModelChange)=\"setControlProp('evaluationMode', $event)\">\r\n </core-radio-group>\r\n </div>\r\n\r\n <div class=\"setting-row depends-on-row\">\r\n <label class=\"setting-label\">Depends On</label>\r\n <core-sticker-collection\r\n [$items]=\"$fields()\"\r\n [$shownFrom]=\"'field'\"\r\n [$initialChecked]=\"$currentControl()?.dependsOn || []\"\r\n ($checkedChange)=\"setControlProp('dependsOn', $event)\"
|
|
1025
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CalculatedPropsComponent, isStandalone: true, selector: "calculated-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group calculated-group\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n <div class=\"setting-row evaluation-mode-row\">\r\n <label class=\"setting-label\">Evaluation Mode</label>\r\n <core-radio-group\r\n [options$]=\"radioOptions$\"\r\n [vertical]=\"true\"\r\n [gapY]=\"8\"\r\n [ngModel]=\"$currentControl()?.evaluationMode\"\r\n (ngModelChange)=\"setControlProp('evaluationMode', $event)\">\r\n </core-radio-group>\r\n </div>\r\n\r\n <div class=\"setting-row depends-on-row\">\r\n <label class=\"setting-label\">Depends On</label>\r\n <core-sticker-collection\r\n [$items]=\"$fields()\"\r\n [$shownFrom]=\"'field'\"\r\n [$initialChecked]=\"$currentControl()?.dependsOn || []\"\r\n ($checkedChange)=\"setControlProp('dependsOn', $event)\"\r\n />\r\n </div>\r\n\r\n <div class=\"setting-row return-type-row\">\r\n <label class=\"setting-label\">Return Type</label>\r\n <select\r\n class=\"form-control setting-input\"\r\n [ngModel]=\"$currentControl()?.returnType || 'number'\"\r\n (ngModelChange)=\"setControlProp('returnType', $event)\"\r\n >\r\n <option value=\"boolean\">Boolean</option>\r\n <option value=\"number\">Number</option>\r\n <option value=\"string\">String</option>\r\n <option value=\"number[]\">Number[]</option>\r\n <option value=\"string[]\">String[]</option>\r\n <!-- Omitting 'Date' and 'object' -->\r\n </select>\r\n </div>\r\n\r\n @if (!!$currentControl()?.dependsOn && !!$currentControl()?.dependsOn!.length) {\r\n\r\n\r\n <div class=\"setting-row script-row\">\r\n <label class=\"setting-label\">Script {{ $beingValidated() ? 'is being validated...' : '' }}</label>\r\n <textarea\r\n [ngStyle]=\"{ minHeight: '150px', borderRadius: '8px' }\"\r\n [readonly]=\"!$currentControl()?.evaluationMode\"\r\n [disabled]=\"!$currentControl()?.evaluationMode\"\r\n class=\"form-control\"\r\n [class.form-control-disabled]=\"!$currentControl()?.evaluationMode\"\r\n rows=\"20\"\r\n [ngModel]=\"$currentControl()?.script\"\r\n (ngModelChange)=\"onScriptChange($event)\"\r\n [placeholder]=\"$placeholderForScriptInput()\">\r\n </textarea>\r\n @if (!!$sqlScriptError()) {\r\n <small class=\"text-danger\">{{ $sqlScriptError() }}</small>\r\n }\r\n \r\n\r\n @if (!!$currentControl()?.evaluationMode) {\r\n <div class=\"button-group\">\r\n <button class=\"btn btn-secondary validate-btn\" (click)=\"validateScript($event)\">Validate with AI</button>\r\n <button class=\"btn btn-primary validate-btn\" (click)=\"generateScript()\">\r\n {{ $aiGeneratorOn() ? 'Hide AI Prompt Editor' : 'Show AI Prompt Editor' }}\r\n </button>\r\n </div>\r\n }\r\n\r\n @if ($aiGeneratorOn()) {\r\n <div class=\"sql-generator-panel\">\r\n <div class=\"alert alert-info\" style=\"margin-top: 1rem;\">\r\n <strong>SQL Generator:</strong> Describe what you want the script to do, and AI will generate SQL for you.\r\n </div>\r\n\r\n @if ($currentControl()?.evaluationMode==='sql-query') {\r\n <div class=\"sql-generator-panel mt-4\">\r\n <label class=\"fw-bold mb-2\">Select Related Tables</label>\r\n\r\n <core-sticker-collection\r\n [$enableFilter]=\"true\"\r\n [$items]=\"wfs.$workflowDbSchema()\"\r\n [$shownFrom]=\"'table'\"\r\n [$tooltipFrom]=\"'hintForAi'\"\r\n [$initialChecked]=\"[]\"\r\n ($checkedChange)=\"tableCheckedChange($event)\">\r\n </core-sticker-collection>\r\n\r\n </div>\r\n }\r\n\r\n @if (!!$currentControl()?.evaluationMode) {\r\n <textarea\r\n class=\"form-control\"\r\n style=\"min-height: 100px; margin-top: 0.5rem; border-radius: 8px;\"\r\n [(ngModel)]=\"$sqlPrompt\"\r\n placeholder=\"e.g., Calculate leave days between FROM_DATE and TO_DATE\">\r\n </textarea>\r\n\r\n <div class=\"mt-2 d-flex gap-2 justify-content-end\">\r\n <button class=\"btn btn-success\" (click)=\"submitScriptPrompt()\">\r\n Generate Script\r\n </button>\r\n </div>\r\n }\r\n\r\n @if ($generatedScript()) {\r\n <div class=\"generated-sql-box mt-3\">\r\n <label class=\"fw-bold\">Generated by AI:</label>\r\n <pre class=\"bg-light p-3 rounded\" style=\"white-space: pre-wrap;\">{{$generatedScript()}}</pre>\r\n <button class=\"btn btn-sm btn-primary mt-2\" (click)=\"applyGeneratedSql()\">Apply to Script</button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n\r\n\r\n }\r\n\r\n\r\n\r\n</div>\r\n\r\n", styles: [".setting-row{margin:30px 0}.button-group{margin-top:15px}.button-group button{height:35px;font-size:13px;border-radius:17.5px;margin-right:8px}.setting-divider{margin:1.5rem 0 .75rem;color:#555;border-top:1px dashed #ccc;padding-top:.5rem}.evaluation-mode-row{background-color:#ffecb3;border-radius:8px;width:180px;height:110px;padding:15px}.evaluation-mode-row label{margin-bottom:8px}.script-row{margin:30px 0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreStickerCollectionComponent, selector: "core-sticker-collection", inputs: ["$items", "$shownFrom", "$tooltipFrom", "$initialChecked", "$showMore", "$showMoreTooltip", "$hideShowMoreIfNotSelected", "$enableFilter"], outputs: ["$checkedChange", "$onShowMore"] }, { kind: "component", type: CoreRadioGroupComponent, selector: "core-radio-group", inputs: ["options$", "vertical", "columnCount", "gapY", "defaultValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1024
1026
|
}
|
|
1025
1027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CalculatedPropsComponent, decorators: [{
|
|
1026
1028
|
type: Component,
|
|
@@ -1029,7 +1031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1029
1031
|
FormsModule,
|
|
1030
1032
|
CoreStickerCollectionComponent,
|
|
1031
1033
|
CoreRadioGroupComponent,
|
|
1032
|
-
], template: "<div class=\"setting-group calculated-group\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n <div class=\"setting-row evaluation-mode-row\">\r\n <label class=\"setting-label\">Evaluation Mode</label>\r\n <core-radio-group\r\n [options$]=\"radioOptions$\"\r\n [vertical]=\"true\"\r\n [gapY]=\"8\"\r\n [ngModel]=\"$currentControl()?.evaluationMode\"\r\n (ngModelChange)=\"setControlProp('evaluationMode', $event)\">\r\n </core-radio-group>\r\n </div>\r\n\r\n <div class=\"setting-row depends-on-row\">\r\n <label class=\"setting-label\">Depends On</label>\r\n <core-sticker-collection\r\n [$items]=\"$fields()\"\r\n [$shownFrom]=\"'field'\"\r\n [$initialChecked]=\"$currentControl()?.dependsOn || []\"\r\n ($checkedChange)=\"setControlProp('dependsOn', $event)\"
|
|
1034
|
+
], template: "<div class=\"setting-group calculated-group\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n <div class=\"setting-row evaluation-mode-row\">\r\n <label class=\"setting-label\">Evaluation Mode</label>\r\n <core-radio-group\r\n [options$]=\"radioOptions$\"\r\n [vertical]=\"true\"\r\n [gapY]=\"8\"\r\n [ngModel]=\"$currentControl()?.evaluationMode\"\r\n (ngModelChange)=\"setControlProp('evaluationMode', $event)\">\r\n </core-radio-group>\r\n </div>\r\n\r\n <div class=\"setting-row depends-on-row\">\r\n <label class=\"setting-label\">Depends On</label>\r\n <core-sticker-collection\r\n [$items]=\"$fields()\"\r\n [$shownFrom]=\"'field'\"\r\n [$initialChecked]=\"$currentControl()?.dependsOn || []\"\r\n ($checkedChange)=\"setControlProp('dependsOn', $event)\"\r\n />\r\n </div>\r\n\r\n <div class=\"setting-row return-type-row\">\r\n <label class=\"setting-label\">Return Type</label>\r\n <select\r\n class=\"form-control setting-input\"\r\n [ngModel]=\"$currentControl()?.returnType || 'number'\"\r\n (ngModelChange)=\"setControlProp('returnType', $event)\"\r\n >\r\n <option value=\"boolean\">Boolean</option>\r\n <option value=\"number\">Number</option>\r\n <option value=\"string\">String</option>\r\n <option value=\"number[]\">Number[]</option>\r\n <option value=\"string[]\">String[]</option>\r\n <!-- Omitting 'Date' and 'object' -->\r\n </select>\r\n </div>\r\n\r\n @if (!!$currentControl()?.dependsOn && !!$currentControl()?.dependsOn!.length) {\r\n\r\n\r\n <div class=\"setting-row script-row\">\r\n <label class=\"setting-label\">Script {{ $beingValidated() ? 'is being validated...' : '' }}</label>\r\n <textarea\r\n [ngStyle]=\"{ minHeight: '150px', borderRadius: '8px' }\"\r\n [readonly]=\"!$currentControl()?.evaluationMode\"\r\n [disabled]=\"!$currentControl()?.evaluationMode\"\r\n class=\"form-control\"\r\n [class.form-control-disabled]=\"!$currentControl()?.evaluationMode\"\r\n rows=\"20\"\r\n [ngModel]=\"$currentControl()?.script\"\r\n (ngModelChange)=\"onScriptChange($event)\"\r\n [placeholder]=\"$placeholderForScriptInput()\">\r\n </textarea>\r\n @if (!!$sqlScriptError()) {\r\n <small class=\"text-danger\">{{ $sqlScriptError() }}</small>\r\n }\r\n \r\n\r\n @if (!!$currentControl()?.evaluationMode) {\r\n <div class=\"button-group\">\r\n <button class=\"btn btn-secondary validate-btn\" (click)=\"validateScript($event)\">Validate with AI</button>\r\n <button class=\"btn btn-primary validate-btn\" (click)=\"generateScript()\">\r\n {{ $aiGeneratorOn() ? 'Hide AI Prompt Editor' : 'Show AI Prompt Editor' }}\r\n </button>\r\n </div>\r\n }\r\n\r\n @if ($aiGeneratorOn()) {\r\n <div class=\"sql-generator-panel\">\r\n <div class=\"alert alert-info\" style=\"margin-top: 1rem;\">\r\n <strong>SQL Generator:</strong> Describe what you want the script to do, and AI will generate SQL for you.\r\n </div>\r\n\r\n @if ($currentControl()?.evaluationMode==='sql-query') {\r\n <div class=\"sql-generator-panel mt-4\">\r\n <label class=\"fw-bold mb-2\">Select Related Tables</label>\r\n\r\n <core-sticker-collection\r\n [$enableFilter]=\"true\"\r\n [$items]=\"wfs.$workflowDbSchema()\"\r\n [$shownFrom]=\"'table'\"\r\n [$tooltipFrom]=\"'hintForAi'\"\r\n [$initialChecked]=\"[]\"\r\n ($checkedChange)=\"tableCheckedChange($event)\">\r\n </core-sticker-collection>\r\n\r\n </div>\r\n }\r\n\r\n @if (!!$currentControl()?.evaluationMode) {\r\n <textarea\r\n class=\"form-control\"\r\n style=\"min-height: 100px; margin-top: 0.5rem; border-radius: 8px;\"\r\n [(ngModel)]=\"$sqlPrompt\"\r\n placeholder=\"e.g., Calculate leave days between FROM_DATE and TO_DATE\">\r\n </textarea>\r\n\r\n <div class=\"mt-2 d-flex gap-2 justify-content-end\">\r\n <button class=\"btn btn-success\" (click)=\"submitScriptPrompt()\">\r\n Generate Script\r\n </button>\r\n </div>\r\n }\r\n\r\n @if ($generatedScript()) {\r\n <div class=\"generated-sql-box mt-3\">\r\n <label class=\"fw-bold\">Generated by AI:</label>\r\n <pre class=\"bg-light p-3 rounded\" style=\"white-space: pre-wrap;\">{{$generatedScript()}}</pre>\r\n <button class=\"btn btn-sm btn-primary mt-2\" (click)=\"applyGeneratedSql()\">Apply to Script</button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n\r\n\r\n }\r\n\r\n\r\n\r\n</div>\r\n\r\n", styles: [".setting-row{margin:30px 0}.button-group{margin-top:15px}.button-group button{height:35px;font-size:13px;border-radius:17.5px;margin-right:8px}.setting-divider{margin:1.5rem 0 .75rem;color:#555;border-top:1px dashed #ccc;padding-top:.5rem}.evaluation-mode-row{background-color:#ffecb3;border-radius:8px;width:180px;height:110px;padding:15px}.evaluation-mode-row label{margin-bottom:8px}.script-row{margin:30px 0}\n"] }]
|
|
1033
1035
|
}] });
|
|
1034
1036
|
|
|
1035
1037
|
class FieldSettingComponent extends BaseComponent {
|
|
@@ -1141,6 +1143,7 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1141
1143
|
this.$id = input();
|
|
1142
1144
|
this.$settingPanel = viewChild('settingPanel');
|
|
1143
1145
|
this.$jsonMode = signal('selectedField');
|
|
1146
|
+
this.injectedFields$ = new BehaviorSubject([]);
|
|
1144
1147
|
this.enumType = EnumFormDesignMode;
|
|
1145
1148
|
this.enumLeftPanelMode = EnumLeftPanelMode;
|
|
1146
1149
|
this.$leftPanelMode = computed(() => {
|
|
@@ -1152,6 +1155,7 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1152
1155
|
}
|
|
1153
1156
|
});
|
|
1154
1157
|
this.ds = inject(DomService);
|
|
1158
|
+
this.js = inject(JsonService);
|
|
1155
1159
|
this.$zIndex = computed(() => {
|
|
1156
1160
|
if (this.coreFormDesignService.$fieldSettingPanelOpen()) {
|
|
1157
1161
|
return this.ds.getMaxZIndex() + 1;
|
|
@@ -1171,6 +1175,7 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1171
1175
|
this.applicationHelpService = inject(ApplicationHelpService);
|
|
1172
1176
|
this.wfs = inject(CoreWorkflowService);
|
|
1173
1177
|
this.dbs = inject(DbService);
|
|
1178
|
+
this.appConfigService = inject(AppConfigService);
|
|
1174
1179
|
this.$hasCalculatedSection = computed(() => {
|
|
1175
1180
|
return this.coreFormDesignService.$placeholderSections().some(s => !!s.forCalculatedFields);
|
|
1176
1181
|
});
|
|
@@ -1438,6 +1443,62 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1438
1443
|
}
|
|
1439
1444
|
});
|
|
1440
1445
|
}
|
|
1446
|
+
ngOnInit() {
|
|
1447
|
+
this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
|
|
1448
|
+
if (this.appConfigService.WORKFLOW_ENABLE_DEBUG_MODE) {
|
|
1449
|
+
this.injectedFields$.next([
|
|
1450
|
+
{
|
|
1451
|
+
field: '___requesterId',
|
|
1452
|
+
flexSize: 12,
|
|
1453
|
+
type: 'number',
|
|
1454
|
+
controlType: EnumFormBaseContolType.SEEKER,
|
|
1455
|
+
seekerSourceType: EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK,
|
|
1456
|
+
getByIdApi: '',
|
|
1457
|
+
getByIdObject$: new BehaviorSubject({}),
|
|
1458
|
+
label: 'Simulated Requester',
|
|
1459
|
+
boundFrom: 'id',
|
|
1460
|
+
shownFrom: 'fullname',
|
|
1461
|
+
value: null,
|
|
1462
|
+
},
|
|
1463
|
+
{
|
|
1464
|
+
field: "___reason",
|
|
1465
|
+
type: "text",
|
|
1466
|
+
value: '',
|
|
1467
|
+
label: "UI_FORM_CONTROL_LABEL.REASON",
|
|
1468
|
+
flexSize: 12,
|
|
1469
|
+
controlType: EnumFormBaseContolType.TEXTAREA,
|
|
1470
|
+
textareaRows: 5,
|
|
1471
|
+
validators: [
|
|
1472
|
+
{
|
|
1473
|
+
name: 'required',
|
|
1474
|
+
validator: Validators.required,
|
|
1475
|
+
errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
|
|
1476
|
+
}
|
|
1477
|
+
],
|
|
1478
|
+
}
|
|
1479
|
+
]);
|
|
1480
|
+
}
|
|
1481
|
+
else {
|
|
1482
|
+
this.injectedFields$.next([
|
|
1483
|
+
{
|
|
1484
|
+
field: "___reason",
|
|
1485
|
+
type: "text",
|
|
1486
|
+
value: '',
|
|
1487
|
+
label: "UI_FORM_CONTROL_LABEL.REASON",
|
|
1488
|
+
flexSize: 12,
|
|
1489
|
+
controlType: EnumFormBaseContolType.TEXTAREA,
|
|
1490
|
+
textareaRows: 5,
|
|
1491
|
+
validators: [
|
|
1492
|
+
{
|
|
1493
|
+
name: 'required',
|
|
1494
|
+
validator: Validators.required,
|
|
1495
|
+
errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
|
|
1496
|
+
}
|
|
1497
|
+
],
|
|
1498
|
+
}
|
|
1499
|
+
]);
|
|
1500
|
+
}
|
|
1501
|
+
}
|
|
1441
1502
|
switchJson() {
|
|
1442
1503
|
if (this.$jsonMode() === 'full') {
|
|
1443
1504
|
this.$jsonMode.set('selectedField');
|
|
@@ -1875,12 +1936,13 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1875
1936
|
this.coreFormDesignService.$showFormMetadata.set(true);
|
|
1876
1937
|
}
|
|
1877
1938
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormDesignComponent, isStandalone: true, selector: "core-form-design", inputs: { $idAsInput: { classPropertyName: "$idAsInput", publicName: "$idAsInput", isSignal: true, isRequired: false, transformFunction: null }, $id: { classPropertyName: "$id", publicName: "$id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "$settingPanel", first: true, predicate: ["settingPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n <ng-template #formMetadata>\r\n <form-metadata></form-metadata>\r\n </ng-template>\r\n\r\n @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n </aside>\r\n }\r\n\r\n <div \r\n class=\"field-setting-panel\" \r\n [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n #settingPanel\r\n >\r\n @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n <field-setting></field-setting>\r\n }\r\n </div>\r\n\r\n <div class=\"form-design-left\">\r\n\r\n @switch ($leftPanelMode()) {\r\n @case (enumLeftPanelMode.FieldCollection) {\r\n @for (category of controlCategories; track $index) {\r\n <div class=\"category-name\">\r\n {{ category.name }}\r\n </div>\r\n <ul>\r\n @for (control of category.controls; track $index) {\r\n <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT'\">\r\n <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n </li>\r\n <div class=\"space\"></div>\r\n }\r\n </ul>\r\n }\r\n }\r\n @case (enumLeftPanelMode.Json) {\r\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n @if ($jsonMode()==='selectedField') {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n } @else {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n }\r\n \r\n }\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"form-design-right\">\r\n @if (coreFormDesignService.$mode() === enumType.Default) {\r\n <div class=\"form-wrapper\">\r\n\r\n @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n <form-metadata></form-metadata>\r\n }\r\n\r\n <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n <div class=\"form-cells\">\r\n\r\n <div class=\"form-tool-bar\">\r\n <!-- @if (!coreFormDesignService.$afInstance().normalMode) {\r\n <button class=\"core-button-vns-container\" (click)=\"showMetadata()\">Show Metadata</button>\r\n } -->\r\n @if (!$hasCalculatedSection()) {\r\n <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n }\r\n <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n </div>\r\n \r\n @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n <div class=\"form-section-placeholder\">\r\n\r\n <div class=\"section-header\">\r\n\r\n <div class=\"section-img-wrapper\">\r\n <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n </div>\r\n\r\n <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n >{{ section.caption }}</label>\r\n\r\n <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n \r\n </div>\r\n \r\n @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n <div class=\"form-row-wrapper\">\r\n <div class=\"form-row\">\r\n @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n <div class=\"form-cell drop-target\" \r\n [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n [class.selected]=\"cell?.selected\"\r\n [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n >\r\n\r\n\r\n @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n <label contenteditable=\"true\"\r\n (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n >{{ cell.control.label || 'label' }}</label>\r\n\r\n @if (cell.control.controlType==='CALCULATED') {\r\n <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n </div>\r\n } @else {\r\n <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n }\r\n \r\n <div class=\"field-toolbar\">\r\n <ul>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n <i class=\"feather-settings\"></i>\r\n </div>\r\n </li>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n } @else {\r\n <div class=\"placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n </div>\r\n }\r\n\r\n @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n <div class=\"merge-toolbar\">\r\n <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n </div>\r\n }\r\n \r\n }\r\n\r\n </div>\r\n }\r\n </div>\r\n <div class=\"row-tool-bar\">\r\n <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n </div>\r\n </div>\r\n\r\n }\r\n </div>\r\n }\r\n \r\n \r\n </div>\r\n </form>\r\n </div>\r\n } @else if (!!$sections()) {\r\n\r\n\r\n @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n <live-form [$designMode]=\"true\" />\r\n } @else {\r\n <live-form [$designMode]=\"true\" ($onClose)=\"closePreview()\"></live-form>\r\n }\r\n\r\n\r\n } @else {\r\n <h2>$sections() empty / null / undefined</h2>\r\n }\r\n\r\n\r\n \r\n </div>\r\n @if ($loading()) {\r\n <core-toast-loading></core-toast-loading>\r\n }\r\n\r\n <ng-template #calculatedFieldsTooltip>\r\n <div style=\"max-width: 280px;\">\r\n <strong>Calculated Fields</strong><br />\r\n <p></p>\r\n These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n - They are computed automatically during workflow execution.<br />\r\n - Each field depends on one or more standard input fields.<br />\r\n - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n These results can be used to influence workflow logic, rule trees, or approval paths.\r\n </div>\r\n </ng-template>\r\n \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoreToastLoadingComponent, selector: "core-toast-loading" }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup", "htmlTooltipRef"], outputs: ["buttonClick"] }, { kind: "component", type: FormMetadataComponent, selector: "form-metadata" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting" }, { kind: "component", type: LiveFormComponent, selector: "live-form", inputs: ["$designMode"], outputs: ["$onClose"] }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor"] }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1939
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormDesignComponent, isStandalone: true, selector: "core-form-design", inputs: { $idAsInput: { classPropertyName: "$idAsInput", publicName: "$idAsInput", isSignal: true, isRequired: false, transformFunction: null }, $id: { classPropertyName: "$id", publicName: "$id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "$settingPanel", first: true, predicate: ["settingPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n <ng-template #formMetadata>\r\n <form-metadata></form-metadata>\r\n </ng-template>\r\n\r\n @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n </aside>\r\n }\r\n\r\n <div \r\n class=\"field-setting-panel\" \r\n [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n #settingPanel\r\n >\r\n @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n <field-setting></field-setting>\r\n }\r\n </div>\r\n\r\n <div class=\"form-design-left\">\r\n\r\n @switch ($leftPanelMode()) {\r\n @case (enumLeftPanelMode.FieldCollection) {\r\n @for (category of controlCategories; track $index) {\r\n <div class=\"category-name\">\r\n {{ category.name }}\r\n </div>\r\n <ul>\r\n @for (control of category.controls; track $index) {\r\n <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT'\">\r\n <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n </li>\r\n <div class=\"space\"></div>\r\n }\r\n </ul>\r\n }\r\n }\r\n @case (enumLeftPanelMode.Json) {\r\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n @if ($jsonMode()==='selectedField') {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n } @else {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n }\r\n \r\n }\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"form-design-right\">\r\n <!-- <pre>{{ $injectedFieldsJson() }}</pre> -->\r\n\r\n @if (coreFormDesignService.$mode() === enumType.Default) {\r\n <div class=\"form-wrapper\">\r\n\r\n @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n <form-metadata></form-metadata>\r\n }\r\n\r\n <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n <div class=\"form-cells\">\r\n\r\n <div class=\"form-tool-bar\">\r\n @if (!$hasCalculatedSection()) {\r\n <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n }\r\n <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n </div>\r\n \r\n @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n <div class=\"form-section-placeholder\">\r\n\r\n <div class=\"section-header\">\r\n\r\n <div class=\"section-img-wrapper\">\r\n <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n </div>\r\n\r\n <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n >{{ section.caption }}</label>\r\n\r\n <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n \r\n </div>\r\n \r\n @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n <div class=\"form-row-wrapper\">\r\n <div class=\"form-row\">\r\n @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n <div class=\"form-cell drop-target\" \r\n [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n [class.selected]=\"cell?.selected\"\r\n [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n >\r\n\r\n\r\n @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n <label contenteditable=\"true\"\r\n (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n >{{ cell.control.label || 'label' }}</label>\r\n\r\n @if (cell.control.controlType==='CALCULATED') {\r\n <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n </div>\r\n } @else {\r\n <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n }\r\n \r\n <div class=\"field-toolbar\">\r\n <ul>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n <i class=\"feather-settings\"></i>\r\n </div>\r\n </li>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n } @else {\r\n <div class=\"placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n </div>\r\n }\r\n\r\n @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n <div class=\"merge-toolbar\">\r\n <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n </div>\r\n }\r\n \r\n }\r\n\r\n </div>\r\n }\r\n </div>\r\n <div class=\"row-tool-bar\">\r\n <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n </div>\r\n </div>\r\n\r\n }\r\n </div>\r\n }\r\n \r\n \r\n </div>\r\n </form>\r\n </div>\r\n } @else if (!!$sections()) {\r\n\r\n @if(!!(injectedFields$ | async) && !!(injectedFields$ | async)!.length) {\r\n\r\n @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" />\r\n } @else {\r\n <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" ($onClose)=\"closePreview()\" />\r\n }\r\n\r\n } @else {\r\n <h2>COULD NOT UPDATE injectedFields$</h2>\r\n }\r\n\r\n } @else {\r\n <h2>$sections() empty / null / undefined</h2>\r\n }\r\n\r\n\r\n \r\n </div>\r\n @if ($loading()) {\r\n <core-toast-loading></core-toast-loading>\r\n }\r\n\r\n <ng-template #calculatedFieldsTooltip>\r\n <div style=\"max-width: 280px;\">\r\n <strong>Calculated Fields</strong><br />\r\n <p></p>\r\n These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n - They are computed automatically during workflow execution.<br />\r\n - Each field depends on one or more standard input fields.<br />\r\n - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n These results can be used to influence workflow logic, rule trees, or approval paths.\r\n </div>\r\n </ng-template>\r\n \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoreToastLoadingComponent, selector: "core-toast-loading" }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup", "htmlTooltipRef"], outputs: ["buttonClick"] }, { kind: "component", type: FormMetadataComponent, selector: "form-metadata" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting" }, { kind: "component", type: LiveFormComponent, selector: "live-form", inputs: ["$designMode", "$forKickOff", "$workflowReactContext"], outputs: ["$onClose"] }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor"] }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1879
1940
|
}
|
|
1880
1941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, decorators: [{
|
|
1881
1942
|
type: Component,
|
|
1882
1943
|
args: [{ selector: 'core-form-design', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1883
1944
|
NgStyle,
|
|
1945
|
+
AsyncPipe,
|
|
1884
1946
|
NgTemplateOutlet,
|
|
1885
1947
|
CoreToastLoadingComponent,
|
|
1886
1948
|
CorePageHeaderComponent,
|
|
@@ -1905,8 +1967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1905
1967
|
FieldSettingComponent,
|
|
1906
1968
|
LiveFormComponent,
|
|
1907
1969
|
HtmlTooltipDirective,
|
|
1908
|
-
], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n <ng-template #formMetadata>\r\n <form-metadata></form-metadata>\r\n </ng-template>\r\n\r\n @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n </aside>\r\n }\r\n\r\n <div \r\n class=\"field-setting-panel\" \r\n [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n #settingPanel\r\n >\r\n @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n <field-setting></field-setting>\r\n }\r\n </div>\r\n\r\n <div class=\"form-design-left\">\r\n\r\n @switch ($leftPanelMode()) {\r\n @case (enumLeftPanelMode.FieldCollection) {\r\n @for (category of controlCategories; track $index) {\r\n <div class=\"category-name\">\r\n {{ category.name }}\r\n </div>\r\n <ul>\r\n @for (control of category.controls; track $index) {\r\n <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT'\">\r\n <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n </li>\r\n <div class=\"space\"></div>\r\n }\r\n </ul>\r\n }\r\n }\r\n @case (enumLeftPanelMode.Json) {\r\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n @if ($jsonMode()==='selectedField') {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n } @else {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n }\r\n \r\n }\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"form-design-right\">\r\n @if (coreFormDesignService.$mode() === enumType.Default) {\r\n <div class=\"form-wrapper\">\r\n\r\n @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n <form-metadata></form-metadata>\r\n }\r\n\r\n <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n <div class=\"form-cells\">\r\n\r\n <div class=\"form-tool-bar\">\r\n <!-- @if (!coreFormDesignService.$afInstance().normalMode) {\r\n <button class=\"core-button-vns-container\" (click)=\"showMetadata()\">Show Metadata</button>\r\n } -->\r\n @if (!$hasCalculatedSection()) {\r\n <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n }\r\n <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n </div>\r\n \r\n @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n <div class=\"form-section-placeholder\">\r\n\r\n <div class=\"section-header\">\r\n\r\n <div class=\"section-img-wrapper\">\r\n <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n </div>\r\n\r\n <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n >{{ section.caption }}</label>\r\n\r\n <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n \r\n </div>\r\n \r\n @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n <div class=\"form-row-wrapper\">\r\n <div class=\"form-row\">\r\n @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n <div class=\"form-cell drop-target\" \r\n [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n [class.selected]=\"cell?.selected\"\r\n [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n >\r\n\r\n\r\n @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n <label contenteditable=\"true\"\r\n (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n >{{ cell.control.label || 'label' }}</label>\r\n\r\n @if (cell.control.controlType==='CALCULATED') {\r\n <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n </div>\r\n } @else {\r\n <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n }\r\n \r\n <div class=\"field-toolbar\">\r\n <ul>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n <i class=\"feather-settings\"></i>\r\n </div>\r\n </li>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n } @else {\r\n <div class=\"placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n </div>\r\n }\r\n\r\n @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n <div class=\"merge-toolbar\">\r\n <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n </div>\r\n }\r\n \r\n }\r\n\r\n </div>\r\n }\r\n </div>\r\n <div class=\"row-tool-bar\">\r\n <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n </div>\r\n </div>\r\n\r\n }\r\n </div>\r\n }\r\n \r\n \r\n </div>\r\n </form>\r\n </div>\r\n } @else if (!!$sections()) {\r\n\r\n\r\n @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n <live-form [$designMode]=\"true\" />\r\n } @else {\r\n <live-form [$designMode]=\"true\" ($onClose)=\"closePreview()\"></live-form>\r\n }\r\n\r\n\r\n } @else {\r\n <h2>$sections() empty / null / undefined</h2>\r\n }\r\n\r\n\r\n \r\n </div>\r\n @if ($loading()) {\r\n <core-toast-loading></core-toast-loading>\r\n }\r\n\r\n <ng-template #calculatedFieldsTooltip>\r\n <div style=\"max-width: 280px;\">\r\n <strong>Calculated Fields</strong><br />\r\n <p></p>\r\n These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n - They are computed automatically during workflow execution.<br />\r\n - Each field depends on one or more standard input fields.<br />\r\n - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n These results can be used to influence workflow logic, rule trees, or approval paths.\r\n </div>\r\n </ng-template>\r\n \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"] }]
|
|
1970
|
+
], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n <ng-template #formMetadata>\r\n <form-metadata></form-metadata>\r\n </ng-template>\r\n\r\n @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n </aside>\r\n }\r\n\r\n <div \r\n class=\"field-setting-panel\" \r\n [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n #settingPanel\r\n >\r\n @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n <field-setting></field-setting>\r\n }\r\n </div>\r\n\r\n <div class=\"form-design-left\">\r\n\r\n @switch ($leftPanelMode()) {\r\n @case (enumLeftPanelMode.FieldCollection) {\r\n @for (category of controlCategories; track $index) {\r\n <div class=\"category-name\">\r\n {{ category.name }}\r\n </div>\r\n <ul>\r\n @for (control of category.controls; track $index) {\r\n <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT'\">\r\n <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n </li>\r\n <div class=\"space\"></div>\r\n }\r\n </ul>\r\n }\r\n }\r\n @case (enumLeftPanelMode.Json) {\r\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n @if ($jsonMode()==='selectedField') {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n } @else {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n }\r\n \r\n }\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"form-design-right\">\r\n <!-- <pre>{{ $injectedFieldsJson() }}</pre> -->\r\n\r\n @if (coreFormDesignService.$mode() === enumType.Default) {\r\n <div class=\"form-wrapper\">\r\n\r\n @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n <form-metadata></form-metadata>\r\n }\r\n\r\n <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n <div class=\"form-cells\">\r\n\r\n <div class=\"form-tool-bar\">\r\n @if (!$hasCalculatedSection()) {\r\n <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n }\r\n <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n </div>\r\n \r\n @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n <div class=\"form-section-placeholder\">\r\n\r\n <div class=\"section-header\">\r\n\r\n <div class=\"section-img-wrapper\">\r\n <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n </div>\r\n\r\n <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n >{{ section.caption }}</label>\r\n\r\n <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n \r\n </div>\r\n \r\n @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n <div class=\"form-row-wrapper\">\r\n <div class=\"form-row\">\r\n @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n <div class=\"form-cell drop-target\" \r\n [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n [class.selected]=\"cell?.selected\"\r\n [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n >\r\n\r\n\r\n @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n <label contenteditable=\"true\"\r\n (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n >{{ cell.control.label || 'label' }}</label>\r\n\r\n @if (cell.control.controlType==='CALCULATED') {\r\n <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n </div>\r\n } @else {\r\n <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n }\r\n \r\n <div class=\"field-toolbar\">\r\n <ul>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n <i class=\"feather-settings\"></i>\r\n </div>\r\n </li>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n } @else {\r\n <div class=\"placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n </div>\r\n }\r\n\r\n @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n <div class=\"merge-toolbar\">\r\n <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n </div>\r\n }\r\n \r\n }\r\n\r\n </div>\r\n }\r\n </div>\r\n <div class=\"row-tool-bar\">\r\n <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n </div>\r\n </div>\r\n\r\n }\r\n </div>\r\n }\r\n \r\n \r\n </div>\r\n </form>\r\n </div>\r\n } @else if (!!$sections()) {\r\n\r\n @if(!!(injectedFields$ | async) && !!(injectedFields$ | async)!.length) {\r\n\r\n @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" />\r\n } @else {\r\n <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" ($onClose)=\"closePreview()\" />\r\n }\r\n\r\n } @else {\r\n <h2>COULD NOT UPDATE injectedFields$</h2>\r\n }\r\n\r\n } @else {\r\n <h2>$sections() empty / null / undefined</h2>\r\n }\r\n\r\n\r\n \r\n </div>\r\n @if ($loading()) {\r\n <core-toast-loading></core-toast-loading>\r\n }\r\n\r\n <ng-template #calculatedFieldsTooltip>\r\n <div style=\"max-width: 280px;\">\r\n <strong>Calculated Fields</strong><br />\r\n <p></p>\r\n These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n - They are computed automatically during workflow execution.<br />\r\n - Each field depends on one or more standard input fields.<br />\r\n - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n These results can be used to influence workflow logic, rule trees, or approval paths.\r\n </div>\r\n </ng-template>\r\n \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"] }]
|
|
1909
1971
|
}], ctorParameters: () => [{ type: MultiLanguageService }] });
|
|
1910
1972
|
|
|
1911
1973
|
export { CoreFormDesignComponent };
|
|
1912
|
-
//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-
|
|
1974
|
+
//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-Dz7G6A21.mjs.map
|