ngx-histaff-alpha 5.8.8 → 5.9.0
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-DkR68g_D.mjs → ngx-histaff-alpha-ai-hint-for-table.component-BEJPXipC.mjs} +3 -3
- package/fesm2022/{ngx-histaff-alpha-ai-hint-for-table.component-DkR68g_D.mjs.map → ngx-histaff-alpha-ai-hint-for-table.component-BEJPXipC.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-core-form-design.component-BdhATAGQ.mjs → ngx-histaff-alpha-core-form-design.component-PXmIWw_y.mjs} +171 -13
- package/fesm2022/ngx-histaff-alpha-core-form-design.component-PXmIWw_y.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-core-sticker-collection.component-BpGs-DPS.mjs → ngx-histaff-alpha-core-sticker-collection.component-0ugr1j-a.mjs} +3 -3
- package/fesm2022/{ngx-histaff-alpha-core-sticker-collection.component-BpGs-DPS.mjs.map → ngx-histaff-alpha-core-sticker-collection.component-0ugr1j-a.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-core-toast-loading.component-DgkCGcO3.mjs → ngx-histaff-alpha-core-toast-loading.component-BWihKjC_.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-core-toast-loading.component-DgkCGcO3.mjs.map → ngx-histaff-alpha-core-toast-loading.component-BWihKjC_.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-core-workflow-consume.component-DcW5-ccd.mjs → ngx-histaff-alpha-core-workflow-consume.component-DrQHJfwa.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-core-workflow-consume.component-DcW5-ccd.mjs.map → ngx-histaff-alpha-core-workflow-consume.component-DrQHJfwa.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-db-settings.component--A9LF6qi.mjs → ngx-histaff-alpha-db-settings.component-HZpqrGn1.mjs} +5 -5
- package/fesm2022/{ngx-histaff-alpha-db-settings.component--A9LF6qi.mjs.map → ngx-histaff-alpha-db-settings.component-HZpqrGn1.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-design-wrapper.component-C7KFfwIO.mjs → ngx-histaff-alpha-design-wrapper.component-DOWaBKbT.mjs} +5 -5
- package/fesm2022/{ngx-histaff-alpha-design-wrapper.component-C7KFfwIO.mjs.map → ngx-histaff-alpha-design-wrapper.component-DOWaBKbT.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-design-wrapper.route-BwqRICHr.mjs → ngx-histaff-alpha-design-wrapper.route-pj-38Cdb.mjs} +5 -5
- package/fesm2022/{ngx-histaff-alpha-design-wrapper.route-BwqRICHr.mjs.map → ngx-histaff-alpha-design-wrapper.route-pj-38Cdb.mjs.map} +1 -1
- package/fesm2022/ngx-histaff-alpha-form-array-props.component-Df_gc4y9.mjs +28 -0
- package/fesm2022/ngx-histaff-alpha-form-array-props.component-Df_gc4y9.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-live-form.component-CResWrTN.mjs → ngx-histaff-alpha-live-form.component-awOXOZCF.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-live-form.component-CResWrTN.mjs.map → ngx-histaff-alpha-live-form.component-awOXOZCF.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-ngx-histaff-alpha-KQfMzGte.mjs → ngx-histaff-alpha-ngx-histaff-alpha-Cbe09AO4.mjs} +918 -457
- package/fesm2022/ngx-histaff-alpha-ngx-histaff-alpha-Cbe09AO4.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-tracker-studio.component-CrOqWArR.mjs → ngx-histaff-alpha-tracker-studio.component-BmhaBTLn.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-tracker-studio.component-CrOqWArR.mjs.map → ngx-histaff-alpha-tracker-studio.component-BmhaBTLn.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-wf-form-assign.component-zmq-EMFu.mjs → ngx-histaff-alpha-wf-form-assign.component-BR4s070F.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-wf-form-assign.component-zmq-EMFu.mjs.map → ngx-histaff-alpha-wf-form-assign.component-BR4s070F.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-wf-instance-status.component-D0gG67sV.mjs → ngx-histaff-alpha-wf-instance-status.component-BsIAEqxC.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-wf-instance-status.component-D0gG67sV.mjs.map → ngx-histaff-alpha-wf-instance-status.component-BsIAEqxC.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-wf-instance-step-react.component-DtkWD_Rl.mjs → ngx-histaff-alpha-wf-instance-step-react.component-BUDlrylJ.mjs} +3 -3
- package/fesm2022/{ngx-histaff-alpha-wf-instance-step-react.component-DtkWD_Rl.mjs.map → ngx-histaff-alpha-wf-instance-step-react.component-BUDlrylJ.mjs.map} +1 -1
- package/fesm2022/ngx-histaff-alpha.mjs +1 -1
- package/lib/app/enum/EnumFormBaseContolType.d.ts +1 -0
- package/lib/app/libraries/core-control/core-control/core-control.component.d.ts +2 -1
- package/lib/app/libraries/core-control-no-form-array/core-control-no-form-array.component.d.ts +44 -0
- package/lib/app/libraries/core-date-picker/core-date-picker/core-date-picker.component.d.ts +1 -0
- package/lib/app/libraries/core-dropdown/core-dropdown/core-dropdown.component.d.ts +1 -0
- package/lib/app/libraries/core-form/core-control.service.d.ts +1 -1
- package/lib/app/libraries/core-form/core-form/enum-interfaces.d.ts +7 -1
- package/lib/app/libraries/core-form/core-form-array/core-form-array.component.d.ts +23 -0
- package/lib/app/libraries/core-form-control-seeker/core-form-control-seeker/core-form-control-seeker.component.d.ts +1 -0
- package/lib/app/libraries/core-form-design/core-form-array-control-palette/core-form-array-control-palette.component.d.ts +8 -0
- package/lib/app/libraries/core-form-design/core-form-array-layout-editor/core-form-array-layout-editor.component.d.ts +13 -0
- package/lib/app/libraries/core-form-design/core-form-design.service.d.ts +3 -1
- package/lib/app/libraries/core-form-design/field-setting/type-specific/form-array-props/form-array-props.component.d.ts +7 -0
- package/lib/app/libraries/core-grid-buffer/core-grid-buffer/core-grid-buffer.component.d.ts +5 -1
- package/lib/app/libraries/core-month-selector/core-month-selector/core-month-selector.component.d.ts +3 -1
- package/lib/app/libraries/core-org-param/core-org-param.component.d.ts +3 -1
- package/lib/app/libraries/core-org-unit-seeker/core-org-unit-seeker/core-org-unit-seeker.component.d.ts +4 -2
- package/lib/app/libraries/core-page-list/core-page-list.component.d.ts +4 -2
- package/lib/app/libraries/core-table/core-table.component.d.ts +2 -1
- package/lib/app/root/at-worksign/at-worksign.component.d.ts +19 -20
- package/package.json +1 -1
- package/fesm2022/ngx-histaff-alpha-core-form-design.component-BdhATAGQ.mjs.map +0 -1
- package/fesm2022/ngx-histaff-alpha-ngx-histaff-alpha-KQfMzGte.mjs.map +0 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, ChangeDetectorRef, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, computed, viewChild, ViewContainerRef, Input, EventEmitter, Output, Renderer2, input, isDevMode } from '@angular/core';
|
|
3
3
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
4
|
-
import { n as CoreFormDesignService, b as CoreWorkflowService, B as BaseEditComponent, i as AlertService, L as AppConfigService, O as EnumCorePageEditMode, P as EnumCoreButtonVNSCode, R as READONLY_WORKFLOW_FIELDS, Q as noneAutoClosedAlertOptions, p as DialogService, M as MultiLanguageService, C as CorePageHeaderComponent, U as CoreFormComponent, V as CoreButtonGroupVnsComponent, T as TranslatePipe, E as EnumFormBaseContolType, e as BaseComponent, W as EnumCoreTablePipeType, J as CoreCheckboxComponent, r as CoreDropdownComponent, g as TooltipDirective, G as GptService, l as alertOptions, y as CoreRadioGroupComponent, X as HtmlTooltipDirective, Y as EnumFormDesignMode, q as DomService, K as JsonService, z as ApplicationHelpService, c as EnumCoreFormControlSeekerSourceType, H as HotKeysDirective,
|
|
4
|
+
import { n as CoreFormDesignService, b as CoreWorkflowService, B as BaseEditComponent, i as AlertService, L as AppConfigService, O as EnumCorePageEditMode, P as EnumCoreButtonVNSCode, R as READONLY_WORKFLOW_FIELDS, Q as noneAutoClosedAlertOptions, p as DialogService, M as MultiLanguageService, C as CorePageHeaderComponent, U as CoreFormComponent, V as CoreButtonGroupVnsComponent, T as TranslatePipe, E as EnumFormBaseContolType, e as BaseComponent, W as EnumCoreTablePipeType, J as CoreCheckboxComponent, r as CoreDropdownComponent, g as TooltipDirective, G as GptService, l as alertOptions, y as CoreRadioGroupComponent, X as HtmlTooltipDirective, Y as CoreControlNoFormArrayComponent, Z as EnumFormDesignMode, q as DomService, K as JsonService, z as ApplicationHelpService, c as EnumCoreFormControlSeekerSourceType, H as HotKeysDirective, _ as CoreControlComponent, j as TableCellPipe, s as CoreChecklistComponent, u as CoreFormControlSeekerComponent, $ as CoreAttachmentComponent, t as CoreDatePickerComponent, a0 as CoreMonthSelectorComponent, v as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-Cbe09AO4.mjs';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
|
-
import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
6
|
+
import { FormsModule, FormGroup, FormArray, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
7
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-0ugr1j-a.mjs';
|
|
11
|
+
import { D as DbService, C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-BWihKjC_.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-awOXOZCF.mjs';
|
|
14
14
|
|
|
15
15
|
const slideFromTopFadeIn = trigger('slideFromTopFadeIn', [
|
|
16
16
|
state('in', style({ opacity: 1, transform: 'translateY(0)' })),
|
|
@@ -361,11 +361,11 @@ class MandatoryPropsComponent extends BasePropsComponent {
|
|
|
361
361
|
}
|
|
362
362
|
}
|
|
363
363
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MandatoryPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
364
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: MandatoryPropsComponent, isStandalone: true, selector: "mandatory-props", viewQueries: [{ propertyName: "$fieldInputRef", first: true, predicate: ["fieldInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group mandatory-group\" [ngStyle]=\"{ padding: '15px', maxWidth: '352px' }\">\r\n\r\n <div class=\"setting-row\">\r\n <label>Field
|
|
364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: MandatoryPropsComponent, isStandalone: true, selector: "mandatory-props", viewQueries: [{ propertyName: "$fieldInputRef", first: true, predicate: ["fieldInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group mandatory-group\" [ngStyle]=\"{ padding: '15px', maxWidth: '352px' }\">\r\n\r\n <div class=\"setting-row\">\r\n <label>Field</label>\r\n <!-- <input class=\"form-control\" type=\"text\" \r\n [ngModel]=\"$typedField()\" \r\n (focus)=\"capturePreviousField()\"\r\n (ngModelChange)=\"setControlProp('field', $event, previousFieldName)\" /> -->\r\n <input #fieldInput class=\"form-control\" type=\"text\" \r\n [ngModel]=\"$typedField()\" \r\n (ngModelChange)=\"onFieldChange($event)\" />\r\n </div>\r\n\r\n <div class=\"setting-row\">\r\n <label>Label</label>\r\n <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.label\" (ngModelChange)=\"setControlProp('label', $event)\" />\r\n </div>\r\n\r\n @if ($isNormalField()) {\r\n\r\n <div class=\"setting-row\">\r\n <label>Flex Size</label>\r\n <input class=\"form-control\" type=\"number\" [ngModel]=\"$control()?.flexSize\" (ngModelChange)=\"setControlProp('flexSize', $event)\" />\r\n </div>\r\n\r\n @if ($control()?.controlType !== 'FORM_ARRAY') {\r\n <div class=\"setting-row\">\r\n <label>Default</label>\r\n <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.value\" (ngModelChange)=\"setControlProp('value', $event)\" />\r\n </div>\r\n }\r\n }\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
365
365
|
}
|
|
366
366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MandatoryPropsComponent, decorators: [{
|
|
367
367
|
type: Component,
|
|
368
|
-
args: [{ selector: 'mandatory-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, FormsModule], template: "<div class=\"setting-group mandatory-group\" [ngStyle]=\"{ padding: '15px', maxWidth: '352px' }\">\r\n\r\n <div class=\"setting-row\">\r\n <label>Field
|
|
368
|
+
args: [{ selector: 'mandatory-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, FormsModule], template: "<div class=\"setting-group mandatory-group\" [ngStyle]=\"{ padding: '15px', maxWidth: '352px' }\">\r\n\r\n <div class=\"setting-row\">\r\n <label>Field</label>\r\n <!-- <input class=\"form-control\" type=\"text\" \r\n [ngModel]=\"$typedField()\" \r\n (focus)=\"capturePreviousField()\"\r\n (ngModelChange)=\"setControlProp('field', $event, previousFieldName)\" /> -->\r\n <input #fieldInput class=\"form-control\" type=\"text\" \r\n [ngModel]=\"$typedField()\" \r\n (ngModelChange)=\"onFieldChange($event)\" />\r\n </div>\r\n\r\n <div class=\"setting-row\">\r\n <label>Label</label>\r\n <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.label\" (ngModelChange)=\"setControlProp('label', $event)\" />\r\n </div>\r\n\r\n @if ($isNormalField()) {\r\n\r\n <div class=\"setting-row\">\r\n <label>Flex Size</label>\r\n <input class=\"form-control\" type=\"number\" [ngModel]=\"$control()?.flexSize\" (ngModelChange)=\"setControlProp('flexSize', $event)\" />\r\n </div>\r\n\r\n @if ($control()?.controlType !== 'FORM_ARRAY') {\r\n <div class=\"setting-row\">\r\n <label>Default</label>\r\n <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.value\" (ngModelChange)=\"setControlProp('value', $event)\" />\r\n </div>\r\n }\r\n }\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"] }]
|
|
369
369
|
}] });
|
|
370
370
|
|
|
371
371
|
class OptionalPropsComponent extends BasePropsComponent {
|
|
@@ -1098,6 +1098,7 @@ class FieldSettingComponent extends BaseComponent {
|
|
|
1098
1098
|
'number-props': () => Promise.resolve().then(function () { return numberProps_component; }).then(m => m.NumberPropsComponent),
|
|
1099
1099
|
'email-props': () => import('./ngx-histaff-alpha-email-props.component-Cf35Pexq.mjs').then(m => m.EmailPropsComponent),
|
|
1100
1100
|
'dropdown-props': () => Promise.resolve().then(function () { return dropdownProps_component; }).then(m => m.DropdownPropsComponent),
|
|
1101
|
+
'form-array-props': () => import('./ngx-histaff-alpha-form-array-props.component-Df_gc4y9.mjs').then(m => m.FormArrayPropsComponent),
|
|
1101
1102
|
// etc...
|
|
1102
1103
|
};
|
|
1103
1104
|
}
|
|
@@ -1146,7 +1147,7 @@ class FieldSettingComponent extends BaseComponent {
|
|
|
1146
1147
|
this.listenerFn();
|
|
1147
1148
|
}
|
|
1148
1149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FieldSettingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: FieldSettingComponent, isStandalone: true, selector: "field-setting", usesInheritance: true, ngImport: i0, template: "<div class=\"field-setting-container\">\r\n\r\n @if (!!$control()) {\r\n
|
|
1150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: FieldSettingComponent, isStandalone: true, selector: "field-setting", usesInheritance: true, ngImport: i0, template: "<div class=\"field-setting-container\">\r\n\r\n @if (!!$control()) {\r\n <div class=\"panel-caption-header\">\r\n <div class=\"panel-caption\">\r\n Editing: {{ $control().type !== 'calculated' ? $control()?.controlType + ' - ' : '' }}{{ $control()?.field ||\r\n 'Unnamed' }}\r\n </div>\r\n <div class=\"close-wrapper pointer\" (click)=\"closeFieldSettingPanel()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"field-setting-content\">\r\n\r\n\r\n @if ($control().type === 'calculated') {\r\n\r\n <div class=\"group-title mandatory\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-lock\"></i>\r\n </div>\r\n <div class=\"group-name\">Mandatory</div>\r\n </div>\r\n <mandatory-props></mandatory-props>\r\n\r\n <div class=\"group-title calculated\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-lock\"></i>\r\n </div>\r\n <div class=\"group-name\">Calculated Rule<i class=\"feather-help-circle\" [htmlTooltip]=\"aboutCalculatedField\"\r\n [maxWidthUnset]=\"true\"></i></div>\r\n </div>\r\n <calculated-props></calculated-props>\r\n\r\n\r\n } @else {\r\n\r\n <div class=\"group-title mandatory\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-lock\"></i>\r\n </div>\r\n <div class=\"group-name\">Mandatory</div>\r\n </div>\r\n <mandatory-props></mandatory-props>\r\n\r\n <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n @if ($control().controlType !== 'FORM_ARRAY') {\r\n <div class=\"group-title optional\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-sliders\"></i>\r\n </div>\r\n <div class=\"group-name\">Optional</div>\r\n </div>\r\n <optional-props></optional-props>\r\n\r\n <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n <div class=\"group-title validators\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-check-square\"></i>\r\n </div>\r\n <div class=\"group-name\">Validators</div>\r\n </div>\r\n <validator-editor></validator-editor>\r\n }\r\n\r\n @if (!($control().controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control().type ||\r\n '').toLowerCase()))) {\r\n\r\n <div class=\"group-title\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-check-square\"></i>\r\n </div>\r\n <div class=\"group-name\">{{ getFriendlyControlLabel($control()) }} Settings</div>\r\n </div>\r\n\r\n <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$currentPropsComponent()]\"\r\n [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n </props-host>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n\r\n\r\n</div>\r\n\r\n<ng-template #aboutCalculatedField>\r\n\r\n <div class=\"calculated-field-rule\" style=\"padding: 1rem; border-radius: 8px; background: #000; width: 800px;\">\r\n <h4 style=\"margin-top: 0; color: #fff;\">Calculated Field Rule</h4>\r\n <p><strong>Calculated fields</strong> are invisible boolean fields evaluated based on form inputs and logic. They\r\n help drive dynamic workflow behavior, such as conditional routing or validation triggers.</p>\r\n\r\n <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Key Properties</h5>\r\n <ul style=\"margin-top: 0;\">\r\n <li><strong>script:</strong> Expression to evaluate (e.g.,\r\n <code>leaveDays > 3 && status == 'Approved'</code>)</li>\r\n <li><strong>evaluationMode:</strong> <code>\"in-memory\"</code> or <code>\"sql-query\"</code></li>\r\n <li><strong>dependsOn[]:</strong> List of field names the script depends on</li>\r\n <li><strong>filterMode:</strong> <code>\"HardBlock\"</code> or <code>\"SoftWarn\"</code></li>\r\n </ul>\r\n\r\n <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Evaluation Modes</h5>\r\n <ul style=\"margin-top: 0;\">\r\n <li>\r\n <strong>in-memory:</strong> Uses <code>DynamicExpresso</code> to evaluate C#-like logic at runtime<br />\r\n <small>Example: <code>leaveType == \"ANNUAL\" && leaveDays < 5</code></small>\r\n </li>\r\n <li>\r\n <strong>sql-query:</strong> Runs backend SQL to evaluate conditions via\r\n <code>SELECT CASE WHEN ... THEN 1 ELSE 0 END</code><br />\r\n <small>Example:\r\n <code>SELECT CASE WHEN QUOTA > 0 THEN 1 ELSE 0 END FROM LEAVE_QUOTA WHERE EMPLOYEE_ID = {{ '@' }}employeeId</code></small>\r\n </li>\r\n </ul>\r\n\r\n <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Use Cases</h5>\r\n <ul style=\"margin-top: 0;\">\r\n <li>Validate complex logic without showing the field</li>\r\n <li>Route to a different workflow branch based on hidden logic</li>\r\n <li>Trigger warning or block submission based on business rules</li>\r\n </ul>\r\n\r\n <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Example</h5>\r\n <pre style=\"color: #eee; padding: 0.5rem 1rem; border-radius: 4px; overflow-x: auto;\">\r\n {{ '{' }}\r\n \"script\": \"leaveDays > 3 && status == 'APPROVED'\",\r\n \"evaluationMode\": \"in-memory\",\r\n \"dependsOn\": [\"leaveDays\", \"status\"],\r\n \"filterMode\": \"HardBlock\"\r\n {{ '}' }}\r\n </pre>\r\n </div>\r\n\r\n\r\n</ng-template>", styles: [".field-setting-container{max-height:100%;overflow-x:hidden;overflow-y:auto}.field-setting-container .field-setting-content{padding:15px}.field-setting-container .panel-caption-header{display:flex;align-items:center;justify-content:space-between;padding:15px;height:60px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#1f2937}.field-setting-container .panel-caption-header .panel-caption{flex-grow:1}.field-setting-container .panel-caption-header .close-wrapper{display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background-color .2s}.field-setting-container .panel-caption-header .close-wrapper:hover{background-color:#e2e8f0}.field-setting-container .setting-divider{margin:1.5rem 0 .75rem;color:#555;border-top:1px dashed #ccc;padding-top:.5rem}.field-setting-container .group-title{display:flex;height:35px;align-items:center;gap:8px;background-color:#87ceeb;padding:6px 12px;font-weight:600;color:#1f2937;font-size:13px;margin:12px 0 4px;box-shadow:0 1px 2px #0000000d}.field-setting-container .group-title .icon-wrapper{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#1f2937}.field-setting-container .group-title .icon-wrapper i{width:16px;height:16px;stroke-width:2}.field-setting-container .group-title.mandatory{background-color:#ffecb3}.field-setting-container .group-title.optional{background-color:#d0f0fd}.field-setting-container .group-title.validators{background-color:#e8f5e9}.field-setting-container .group-title .group-name{flex:1}.field-setting-container .group-title .group-name .feather-help-circle{display:inline-block;margin-left:8px}.field-setting-container .calculated-field-rule{font-family:system-ui,sans-serif;border:1px solid #ccc;padding:1rem;border-radius:8px}.field-setting-container .calculated-field-rule h2{margin-top:0;color:#2b3e50}.field-setting-container .calculated-field-rule pre{background:#eee;padding:.5rem 1rem;border-radius:4px;overflow-x:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: MandatoryPropsComponent, selector: "mandatory-props" }, { kind: "component", type: OptionalPropsComponent, selector: "optional-props" }, { kind: "component", type: ValidatorEditorComponent, selector: "validator-editor" }, { kind: "component", type: PropsHostComponent, selector: "props-host", inputs: ["loadComponent", "props"] }, { kind: "component", type: CalculatedPropsComponent, selector: "calculated-props" }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1150
1151
|
}
|
|
1151
1152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FieldSettingComponent, decorators: [{
|
|
1152
1153
|
type: Component,
|
|
@@ -1171,7 +1172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1171
1172
|
UploaderPropsComponent,
|
|
1172
1173
|
CalculatedPropsComponent,
|
|
1173
1174
|
HtmlTooltipDirective
|
|
1174
|
-
], template: "<div class=\"field-setting-container\">\r\n\r\n @if (!!$control()) {\r\n
|
|
1175
|
+
], template: "<div class=\"field-setting-container\">\r\n\r\n @if (!!$control()) {\r\n <div class=\"panel-caption-header\">\r\n <div class=\"panel-caption\">\r\n Editing: {{ $control().type !== 'calculated' ? $control()?.controlType + ' - ' : '' }}{{ $control()?.field ||\r\n 'Unnamed' }}\r\n </div>\r\n <div class=\"close-wrapper pointer\" (click)=\"closeFieldSettingPanel()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"field-setting-content\">\r\n\r\n\r\n @if ($control().type === 'calculated') {\r\n\r\n <div class=\"group-title mandatory\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-lock\"></i>\r\n </div>\r\n <div class=\"group-name\">Mandatory</div>\r\n </div>\r\n <mandatory-props></mandatory-props>\r\n\r\n <div class=\"group-title calculated\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-lock\"></i>\r\n </div>\r\n <div class=\"group-name\">Calculated Rule<i class=\"feather-help-circle\" [htmlTooltip]=\"aboutCalculatedField\"\r\n [maxWidthUnset]=\"true\"></i></div>\r\n </div>\r\n <calculated-props></calculated-props>\r\n\r\n\r\n } @else {\r\n\r\n <div class=\"group-title mandatory\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-lock\"></i>\r\n </div>\r\n <div class=\"group-name\">Mandatory</div>\r\n </div>\r\n <mandatory-props></mandatory-props>\r\n\r\n <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n @if ($control().controlType !== 'FORM_ARRAY') {\r\n <div class=\"group-title optional\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-sliders\"></i>\r\n </div>\r\n <div class=\"group-name\">Optional</div>\r\n </div>\r\n <optional-props></optional-props>\r\n\r\n <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n <div class=\"group-title validators\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-check-square\"></i>\r\n </div>\r\n <div class=\"group-name\">Validators</div>\r\n </div>\r\n <validator-editor></validator-editor>\r\n }\r\n\r\n @if (!($control().controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control().type ||\r\n '').toLowerCase()))) {\r\n\r\n <div class=\"group-title\">\r\n <div class=\"icon-wrapper\">\r\n <i class=\"feather-check-square\"></i>\r\n </div>\r\n <div class=\"group-name\">{{ getFriendlyControlLabel($control()) }} Settings</div>\r\n </div>\r\n\r\n <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$currentPropsComponent()]\"\r\n [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n </props-host>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n\r\n\r\n</div>\r\n\r\n<ng-template #aboutCalculatedField>\r\n\r\n <div class=\"calculated-field-rule\" style=\"padding: 1rem; border-radius: 8px; background: #000; width: 800px;\">\r\n <h4 style=\"margin-top: 0; color: #fff;\">Calculated Field Rule</h4>\r\n <p><strong>Calculated fields</strong> are invisible boolean fields evaluated based on form inputs and logic. They\r\n help drive dynamic workflow behavior, such as conditional routing or validation triggers.</p>\r\n\r\n <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Key Properties</h5>\r\n <ul style=\"margin-top: 0;\">\r\n <li><strong>script:</strong> Expression to evaluate (e.g.,\r\n <code>leaveDays > 3 && status == 'Approved'</code>)</li>\r\n <li><strong>evaluationMode:</strong> <code>\"in-memory\"</code> or <code>\"sql-query\"</code></li>\r\n <li><strong>dependsOn[]:</strong> List of field names the script depends on</li>\r\n <li><strong>filterMode:</strong> <code>\"HardBlock\"</code> or <code>\"SoftWarn\"</code></li>\r\n </ul>\r\n\r\n <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Evaluation Modes</h5>\r\n <ul style=\"margin-top: 0;\">\r\n <li>\r\n <strong>in-memory:</strong> Uses <code>DynamicExpresso</code> to evaluate C#-like logic at runtime<br />\r\n <small>Example: <code>leaveType == \"ANNUAL\" && leaveDays < 5</code></small>\r\n </li>\r\n <li>\r\n <strong>sql-query:</strong> Runs backend SQL to evaluate conditions via\r\n <code>SELECT CASE WHEN ... THEN 1 ELSE 0 END</code><br />\r\n <small>Example:\r\n <code>SELECT CASE WHEN QUOTA > 0 THEN 1 ELSE 0 END FROM LEAVE_QUOTA WHERE EMPLOYEE_ID = {{ '@' }}employeeId</code></small>\r\n </li>\r\n </ul>\r\n\r\n <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Use Cases</h5>\r\n <ul style=\"margin-top: 0;\">\r\n <li>Validate complex logic without showing the field</li>\r\n <li>Route to a different workflow branch based on hidden logic</li>\r\n <li>Trigger warning or block submission based on business rules</li>\r\n </ul>\r\n\r\n <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Example</h5>\r\n <pre style=\"color: #eee; padding: 0.5rem 1rem; border-radius: 4px; overflow-x: auto;\">\r\n {{ '{' }}\r\n \"script\": \"leaveDays > 3 && status == 'APPROVED'\",\r\n \"evaluationMode\": \"in-memory\",\r\n \"dependsOn\": [\"leaveDays\", \"status\"],\r\n \"filterMode\": \"HardBlock\"\r\n {{ '}' }}\r\n </pre>\r\n </div>\r\n\r\n\r\n</ng-template>", styles: [".field-setting-container{max-height:100%;overflow-x:hidden;overflow-y:auto}.field-setting-container .field-setting-content{padding:15px}.field-setting-container .panel-caption-header{display:flex;align-items:center;justify-content:space-between;padding:15px;height:60px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#1f2937}.field-setting-container .panel-caption-header .panel-caption{flex-grow:1}.field-setting-container .panel-caption-header .close-wrapper{display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background-color .2s}.field-setting-container .panel-caption-header .close-wrapper:hover{background-color:#e2e8f0}.field-setting-container .setting-divider{margin:1.5rem 0 .75rem;color:#555;border-top:1px dashed #ccc;padding-top:.5rem}.field-setting-container .group-title{display:flex;height:35px;align-items:center;gap:8px;background-color:#87ceeb;padding:6px 12px;font-weight:600;color:#1f2937;font-size:13px;margin:12px 0 4px;box-shadow:0 1px 2px #0000000d}.field-setting-container .group-title .icon-wrapper{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#1f2937}.field-setting-container .group-title .icon-wrapper i{width:16px;height:16px;stroke-width:2}.field-setting-container .group-title.mandatory{background-color:#ffecb3}.field-setting-container .group-title.optional{background-color:#d0f0fd}.field-setting-container .group-title.validators{background-color:#e8f5e9}.field-setting-container .group-title .group-name{flex:1}.field-setting-container .group-title .group-name .feather-help-circle{display:inline-block;margin-left:8px}.field-setting-container .calculated-field-rule{font-family:system-ui,sans-serif;border:1px solid #ccc;padding:1rem;border-radius:8px}.field-setting-container .calculated-field-rule h2{margin-top:0;color:#2b3e50}.field-setting-container .calculated-field-rule pre{background:#eee;padding:.5rem 1rem;border-radius:4px;overflow-x:auto}\n"] }]
|
|
1175
1176
|
}] });
|
|
1176
1177
|
|
|
1177
1178
|
var EnumLeftPanelMode;
|
|
@@ -1180,6 +1181,62 @@ var EnumLeftPanelMode;
|
|
|
1180
1181
|
EnumLeftPanelMode["Json"] = "Json";
|
|
1181
1182
|
})(EnumLeftPanelMode || (EnumLeftPanelMode = {}));
|
|
1182
1183
|
|
|
1184
|
+
class CoreFormArrayControlPaletteComponent {
|
|
1185
|
+
constructor() {
|
|
1186
|
+
this.controlOptions = [
|
|
1187
|
+
{ controlType: EnumFormBaseContolType.TEXTBOX, field: '', label: 'Text Input', flexSize: 12, value: '' },
|
|
1188
|
+
{ controlType: EnumFormBaseContolType.DATEPICKER, field: '', label: 'Date Picker', flexSize: 12, value: null },
|
|
1189
|
+
// thêm control mẫu tại đây
|
|
1190
|
+
];
|
|
1191
|
+
}
|
|
1192
|
+
onDragStart(event, control) {
|
|
1193
|
+
event.dataTransfer?.setData('application/json', JSON.stringify(control));
|
|
1194
|
+
}
|
|
1195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayControlPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormArrayControlPaletteComponent, isStandalone: true, selector: "core-form-array-control-palette", ngImport: i0, template: "<ul>\r\n @for (control of controlOptions; track $index) {\r\n <li\r\n class=\"palette-item\"\r\n draggable=\"true\"\r\n (dragstart)=\"onDragStart($event, control)\"\r\n >\r\n <core-control-no-form-array [control]=\"control\" />\r\n </li>\r\n }\r\n</ul>\r\n", styles: [""], dependencies: [{ kind: "component", type: CoreControlNoFormArrayComponent, selector: "core-control-no-form-array", inputs: ["control", "form", "checkError$", "rangeLimit"] }] }); }
|
|
1197
|
+
}
|
|
1198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayControlPaletteComponent, decorators: [{
|
|
1199
|
+
type: Component,
|
|
1200
|
+
args: [{ selector: 'core-form-array-control-palette', imports: [
|
|
1201
|
+
CoreControlNoFormArrayComponent
|
|
1202
|
+
], template: "<ul>\r\n @for (control of controlOptions; track $index) {\r\n <li\r\n class=\"palette-item\"\r\n draggable=\"true\"\r\n (dragstart)=\"onDragStart($event, control)\"\r\n >\r\n <core-control-no-form-array [control]=\"control\" />\r\n </li>\r\n }\r\n</ul>\r\n" }]
|
|
1203
|
+
}] });
|
|
1204
|
+
|
|
1205
|
+
class CoreFormArrayLayoutEditorComponent {
|
|
1206
|
+
constructor() {
|
|
1207
|
+
this.checkError$ = new BehaviorSubject(false);
|
|
1208
|
+
this.coreFormDesignService = inject(CoreFormDesignService);
|
|
1209
|
+
this.$sections = this.coreFormDesignService.$nestedDesignSections;
|
|
1210
|
+
this.form = this.coreFormDesignService.formDesign;
|
|
1211
|
+
}
|
|
1212
|
+
onClose() {
|
|
1213
|
+
}
|
|
1214
|
+
onMiniDrop(event, index, sectionIndex, rowIndex, colIndex) {
|
|
1215
|
+
const rawData = event?.dataTransfer?.getData('application/json');
|
|
1216
|
+
if (rawData) {
|
|
1217
|
+
const control = JSON.parse(rawData);
|
|
1218
|
+
// clone control để tránh mutate template gốc
|
|
1219
|
+
const newControl = structuredClone(control);
|
|
1220
|
+
// insert vào đúng chỗ
|
|
1221
|
+
const current = this.$sections();
|
|
1222
|
+
if (!current)
|
|
1223
|
+
return;
|
|
1224
|
+
current[sectionIndex].rows[rowIndex][colIndex] = newControl;
|
|
1225
|
+
// trigger signal cập nhật
|
|
1226
|
+
this.$sections.set([...current]);
|
|
1227
|
+
}
|
|
1228
|
+
}
|
|
1229
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayLayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: CoreFormArrayLayoutEditorComponent, isStandalone: true, selector: "core-form-array-layout-editor", ngImport: i0, template: "<!-- <div class=\"core-form-array-layout-editor-container\">\r\n\r\n\r\n <div class=\"modal-container\">\r\n <div class=\"modal-content-root\">\r\n\r\n <div class=\"layout-header\">\r\n <h3>Design Form Array Layout</h3>\r\n <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"onClose()\">\u2716</button>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"layout-body\">\r\n \r\n @for (section of $sections(); track $index) {\r\n <div class=\"section-card\">\r\n <div class=\"section-caption\">{{ section.caption || 'Untitled Section' }}</div>\r\n\r\n @for (row of section.rows; track $index) {\r\n <div class=\"row\">\r\n @for (control of row; track $index) {\r\n <div\r\n class=\"form-cell mini-drop-target\"\r\n [attr.data-index]=\"index\"\r\n miniDropTarget\r\n (miniDropped)=\"onMiniDrop($event, colIndex, sectionIndex, rowIndex, colIndex)\"\r\n >\r\n <core-control-no-form-array\r\n [control]=\"control\"\r\n [form]=\"form\"\r\n [checkError$]=\"checkError$\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n</div> -->", styles: [".core-form-array-layout-editor-container{height:100%;display:flex;flex-direction:column}.layout-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f7f7f7;border-bottom:1px solid #ddd}.layout-body{flex:1;overflow:auto;padding:1rem}.layout-footer{padding:1rem;border-top:1px solid #ddd;text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1231
|
+
}
|
|
1232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayLayoutEditorComponent, decorators: [{
|
|
1233
|
+
type: Component,
|
|
1234
|
+
args: [{ selector: 'core-form-array-layout-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1235
|
+
CoreControlNoFormArrayComponent,
|
|
1236
|
+
CoreFormArrayControlPaletteComponent
|
|
1237
|
+
], template: "<!-- <div class=\"core-form-array-layout-editor-container\">\r\n\r\n\r\n <div class=\"modal-container\">\r\n <div class=\"modal-content-root\">\r\n\r\n <div class=\"layout-header\">\r\n <h3>Design Form Array Layout</h3>\r\n <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"onClose()\">\u2716</button>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"layout-body\">\r\n \r\n @for (section of $sections(); track $index) {\r\n <div class=\"section-card\">\r\n <div class=\"section-caption\">{{ section.caption || 'Untitled Section' }}</div>\r\n\r\n @for (row of section.rows; track $index) {\r\n <div class=\"row\">\r\n @for (control of row; track $index) {\r\n <div\r\n class=\"form-cell mini-drop-target\"\r\n [attr.data-index]=\"index\"\r\n miniDropTarget\r\n (miniDropped)=\"onMiniDrop($event, colIndex, sectionIndex, rowIndex, colIndex)\"\r\n >\r\n <core-control-no-form-array\r\n [control]=\"control\"\r\n [form]=\"form\"\r\n [checkError$]=\"checkError$\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n</div> -->", styles: [".core-form-array-layout-editor-container{height:100%;display:flex;flex-direction:column}.layout-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f7f7f7;border-bottom:1px solid #ddd}.layout-body{flex:1;overflow:auto;padding:1rem}.layout-footer{padding:1rem;border-top:1px solid #ddd;text-align:right}\n"] }]
|
|
1238
|
+
}] });
|
|
1239
|
+
|
|
1183
1240
|
class CoreFormDesignComponent extends BaseComponent {
|
|
1184
1241
|
constructor(mls) {
|
|
1185
1242
|
super(mls);
|
|
@@ -1256,6 +1313,9 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1256
1313
|
attachmentBuffer: new FormControl(),
|
|
1257
1314
|
checkbox: new FormControl(),
|
|
1258
1315
|
calculated: new FormControl(),
|
|
1316
|
+
formArray: new FormArray([
|
|
1317
|
+
new FormControl('')
|
|
1318
|
+
])
|
|
1259
1319
|
});
|
|
1260
1320
|
this.$sections = computed(() => {
|
|
1261
1321
|
const hydrated = this.coreFormDesignService.rehydrateSections(this.coreFormDesignService.$placeholderSections());
|
|
@@ -1377,6 +1437,67 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1377
1437
|
{
|
|
1378
1438
|
name: 'Multiple Selection',
|
|
1379
1439
|
controls: [
|
|
1440
|
+
// {
|
|
1441
|
+
// flexSize: 12,
|
|
1442
|
+
// controlType: EnumFormBaseContolType.GRIDBUFFER,
|
|
1443
|
+
// type: 'children',
|
|
1444
|
+
// field: 'gridbuffer',
|
|
1445
|
+
// label: '',
|
|
1446
|
+
// value: [],
|
|
1447
|
+
// placeholder: 'Grid buffer',
|
|
1448
|
+
// gridBufferFormSections: [
|
|
1449
|
+
// {
|
|
1450
|
+
// rows: [
|
|
1451
|
+
// [
|
|
1452
|
+
// {
|
|
1453
|
+
// flexSize: 6,
|
|
1454
|
+
// field: 'field1',
|
|
1455
|
+
// type: 'date',
|
|
1456
|
+
// value: '',
|
|
1457
|
+
// controlType: EnumFormBaseContolType.DATEPICKER,
|
|
1458
|
+
// label: 'field 1'
|
|
1459
|
+
// },
|
|
1460
|
+
// {
|
|
1461
|
+
// flexSize: 6,
|
|
1462
|
+
// field: 'field2',
|
|
1463
|
+
// type: 'number',
|
|
1464
|
+
// value: null,
|
|
1465
|
+
// controlType: EnumFormBaseContolType.TEXTBOX,
|
|
1466
|
+
// label: 'field 2'
|
|
1467
|
+
// },
|
|
1468
|
+
// ]
|
|
1469
|
+
// ]
|
|
1470
|
+
// }
|
|
1471
|
+
// ],
|
|
1472
|
+
// gridBufferTableColumns: [
|
|
1473
|
+
// {
|
|
1474
|
+
// caption: 'id',
|
|
1475
|
+
// field: 'id',
|
|
1476
|
+
// hidden: true,
|
|
1477
|
+
// type: 'string',
|
|
1478
|
+
// align: 'left',
|
|
1479
|
+
// width: 0,
|
|
1480
|
+
// },
|
|
1481
|
+
// {
|
|
1482
|
+
// field: 'field1',
|
|
1483
|
+
// width: 200,
|
|
1484
|
+
// caption: 'field 1',
|
|
1485
|
+
// type: 'date',
|
|
1486
|
+
// pipe: EnumCoreTablePipeType.DATE,
|
|
1487
|
+
// align: 'center'
|
|
1488
|
+
// },
|
|
1489
|
+
// {
|
|
1490
|
+
// field: 'field2',
|
|
1491
|
+
// width: 100,
|
|
1492
|
+
// caption: 'field 2',
|
|
1493
|
+
// type: 'number',
|
|
1494
|
+
// align: 'right'
|
|
1495
|
+
// },
|
|
1496
|
+
// ],
|
|
1497
|
+
// headless: true,
|
|
1498
|
+
// tableHeight: 100,
|
|
1499
|
+
// liteMode: true,
|
|
1500
|
+
// },
|
|
1380
1501
|
{
|
|
1381
1502
|
flexSize: 12,
|
|
1382
1503
|
controlType: EnumFormBaseContolType.CHECKLIST,
|
|
@@ -1471,6 +1592,37 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1471
1592
|
},
|
|
1472
1593
|
]
|
|
1473
1594
|
},
|
|
1595
|
+
{
|
|
1596
|
+
name: 'Form Array',
|
|
1597
|
+
controls: [
|
|
1598
|
+
{
|
|
1599
|
+
flexSize: 12,
|
|
1600
|
+
controlType: EnumFormBaseContolType.FORM_ARRAY,
|
|
1601
|
+
type: 'children',
|
|
1602
|
+
field: 'formArray',
|
|
1603
|
+
label: '',
|
|
1604
|
+
value: '',
|
|
1605
|
+
placeholder: 'FormArray',
|
|
1606
|
+
headless: true,
|
|
1607
|
+
childrenSections: [
|
|
1608
|
+
{
|
|
1609
|
+
rows: [
|
|
1610
|
+
[
|
|
1611
|
+
{
|
|
1612
|
+
field: 'textBox',
|
|
1613
|
+
flexSize: 12,
|
|
1614
|
+
controlType: EnumFormBaseContolType.TEXTBOX,
|
|
1615
|
+
type: 'text',
|
|
1616
|
+
value: '',
|
|
1617
|
+
label: ''
|
|
1618
|
+
}
|
|
1619
|
+
]
|
|
1620
|
+
]
|
|
1621
|
+
}
|
|
1622
|
+
]
|
|
1623
|
+
},
|
|
1624
|
+
]
|
|
1625
|
+
},
|
|
1474
1626
|
];
|
|
1475
1627
|
this.generateFieldNameFor = this.coreFormDesignService.generateFieldNameFor.bind(this.coreFormDesignService);
|
|
1476
1628
|
this.generateLabelNameFor = this.coreFormDesignService.generateLabelNameFor.bind(this.coreFormDesignService);
|
|
@@ -2018,7 +2170,7 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
2018
2170
|
this.coreFormDesignService.$showFormMetadata.set(true);
|
|
2019
2171
|
}
|
|
2020
2172
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2021
|
-
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, sectionIndex, rowIndex, 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;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.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-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.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 }); }
|
|
2173
|
+
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.$nestedDesignSections()) {\r\n <core-form-array-layout-editor />\r\n }\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' || control.controlType === 'GRIDBUFFER'\">\r\n @if (control.controlType === 'GRIDBUFFER') {\r\n <div class=\"grid-buffer-wrapper\">\r\n <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n </div>\r\n } @else {\r\n <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n }\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, sectionIndex, rowIndex, 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;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.core-form-design-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.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-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.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: CoreFormArrayLayoutEditorComponent, selector: "core-form-array-layout-editor" }, { 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 }); }
|
|
2022
2174
|
}
|
|
2023
2175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, decorators: [{
|
|
2024
2176
|
type: Component,
|
|
@@ -2026,6 +2178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
2026
2178
|
NgStyle,
|
|
2027
2179
|
AsyncPipe,
|
|
2028
2180
|
NgTemplateOutlet,
|
|
2181
|
+
CoreFormArrayLayoutEditorComponent,
|
|
2029
2182
|
CoreToastLoadingComponent,
|
|
2030
2183
|
CorePageHeaderComponent,
|
|
2031
2184
|
FormMetadataComponent,
|
|
@@ -2049,8 +2202,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
2049
2202
|
FieldSettingComponent,
|
|
2050
2203
|
LiveFormComponent,
|
|
2051
2204
|
HtmlTooltipDirective,
|
|
2052
|
-
], 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, sectionIndex, rowIndex, 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;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.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-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.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"] }]
|
|
2205
|
+
], 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.$nestedDesignSections()) {\r\n <core-form-array-layout-editor />\r\n }\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' || control.controlType === 'GRIDBUFFER'\">\r\n @if (control.controlType === 'GRIDBUFFER') {\r\n <div class=\"grid-buffer-wrapper\">\r\n <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n </div>\r\n } @else {\r\n <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n }\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, sectionIndex, rowIndex, 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;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.core-form-design-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.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-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.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"] }]
|
|
2053
2206
|
}], ctorParameters: () => [{ type: MultiLanguageService }] });
|
|
2054
2207
|
|
|
2055
|
-
|
|
2056
|
-
|
|
2208
|
+
var coreFormDesign_component = /*#__PURE__*/Object.freeze({
|
|
2209
|
+
__proto__: null,
|
|
2210
|
+
CoreFormDesignComponent: CoreFormDesignComponent
|
|
2211
|
+
});
|
|
2212
|
+
|
|
2213
|
+
export { BasePropsComponent as B, CoreFormDesignComponent as C, coreFormDesign_component as c };
|
|
2214
|
+
//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-PXmIWw_y.mjs.map
|