ngx-histaff-alpha 5.2.1 → 5.2.3
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-core-form-design.component-CVUrzI7i.mjs → ngx-histaff-alpha-core-form-design.component-DUH4SkB7.mjs} +29 -11
- package/fesm2022/ngx-histaff-alpha-core-form-design.component-DUH4SkB7.mjs.map +1 -0
- package/fesm2022/ngx-histaff-alpha-core-workflow-consume.component-5bEZHFsi.mjs +64 -0
- package/fesm2022/ngx-histaff-alpha-core-workflow-consume.component-5bEZHFsi.mjs.map +1 -0
- package/fesm2022/ngx-histaff-alpha-live-form.component-Cl8EQ7M8.mjs +36 -0
- package/fesm2022/ngx-histaff-alpha-live-form.component-Cl8EQ7M8.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-ngx-histaff-alpha-BsFI6sBi.mjs → ngx-histaff-alpha-ngx-histaff-alpha-B6dYCMll.mjs} +503 -165
- package/fesm2022/ngx-histaff-alpha-ngx-histaff-alpha-B6dYCMll.mjs.map +1 -0
- package/fesm2022/{ngx-histaff-alpha-wf-basic-info.component-DfjBSKHs.mjs → ngx-histaff-alpha-wf-basic-info.component-BL7fXjKU.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-wf-basic-info.component-DfjBSKHs.mjs.map → ngx-histaff-alpha-wf-basic-info.component-BL7fXjKU.mjs.map} +1 -1
- package/fesm2022/{ngx-histaff-alpha-wf-form-assign.component-Dep54OG7.mjs → ngx-histaff-alpha-wf-form-assign.component-BzsIRon0.mjs} +2 -2
- package/fesm2022/{ngx-histaff-alpha-wf-form-assign.component-Dep54OG7.mjs.map → ngx-histaff-alpha-wf-form-assign.component-BzsIRon0.mjs.map} +1 -1
- package/fesm2022/ngx-histaff-alpha-wf-process-design.component-CQxxRCqC.mjs +1439 -0
- package/fesm2022/ngx-histaff-alpha-wf-process-design.component-CQxxRCqC.mjs.map +1 -0
- package/fesm2022/ngx-histaff-alpha.mjs +1 -1
- package/lib/app/directives/drag-reorder.directive.d.ts +22 -0
- package/lib/app/libraries/core-button-group-vns/core-button-group-vns/EnumCoreButtonVNSCode.d.ts +2 -1
- package/lib/app/libraries/core-date-picker/core-date-picker/core-date-picker.component.d.ts +2 -1
- package/lib/app/libraries/core-form/core-form/core-form.component.d.ts +2 -1
- package/lib/app/libraries/core-form-control-seeker/core-form-control-seeker/core-form-control-seeker.component.d.ts +3 -2
- package/lib/app/libraries/core-form-design/core-form-design.component.d.ts +2 -0
- package/lib/app/libraries/core-form-design/core-form-design.service.d.ts +2 -0
- package/lib/app/libraries/core-form-design/field-setting/mandatory-props/mandatory-props.component.d.ts +2 -0
- package/lib/app/libraries/core-form-design/form-metadata/form-metadata.component.d.ts +3 -1
- package/lib/app/libraries/core-form-design/live-form/live-form.component.d.ts +18 -0
- package/lib/app/libraries/core-header-params/enum-and-interfaces.d.ts +1 -1
- package/lib/app/libraries/core-radio-group/core-radio-group/core-radio-group.component.d.ts +8 -3
- package/lib/app/libraries/core-rule-tree/core-rule-tree.component.d.ts +5 -3
- package/lib/app/libraries/core-workflow-builder/constants/INITIAL_PROCESS_DEFINITION.d.ts +2 -0
- package/lib/app/libraries/core-workflow-builder/core-workflow-consume/core-workflow-consume.component.d.ts +9 -0
- package/lib/app/libraries/core-workflow-builder/core-workflow-list/core-workflow-list.component.d.ts +14 -5
- package/lib/app/libraries/core-workflow-builder/core-workflow.service.d.ts +14 -2
- package/lib/app/libraries/core-workflow-builder/enums/EnumActorSourceType.d.ts +10 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IActorAssignment.d.ts +7 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IStepConfig.d.ts +37 -4
- package/lib/app/libraries/core-workflow-builder/interfaces/IWfWorkflow.d.ts +3 -0
- package/lib/app/libraries/core-workflow-builder/interfaces/IWfWorkflowGroup.d.ts +1 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-node/wf-node.component.d.ts +3 -1
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-process-design.component.d.ts +12 -3
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-step-config-shell/wf-actor-selector/wf-actor-selector.component.d.ts +40 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-step-config-shell/wf-approver-config/wf-approver-config.component.d.ts +5 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-step-config-shell/wf-cc-config/wf-cc-config.component.d.ts +5 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-step-config-shell/wf-end-config/wf-end-config.component.d.ts +5 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-step-config-shell/wf-handler-config/wf-handler-config.component.d.ts +5 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-step-config-shell/wf-step-config-shell.component.d.ts +5 -5
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-step-config-shell/wf-submit-config/wf-submit-config.component.d.ts +5 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-steps-preview/wf-steps-preview.component.d.ts +8 -0
- package/lib/app/libraries/core-workflow-builder/wf-process-design/wf-workflow-canvas.component.d.ts +32 -3
- package/package.json +1 -1
- package/fesm2022/ngx-histaff-alpha-core-form-design.component-CVUrzI7i.mjs.map +0 -1
- package/fesm2022/ngx-histaff-alpha-ngx-histaff-alpha-BsFI6sBi.mjs.map +0 -1
- package/fesm2022/ngx-histaff-alpha-wf-process-design.component-DH2kGhLf.mjs +0 -990
- package/fesm2022/ngx-histaff-alpha-wf-process-design.component-DH2kGhLf.mjs.map +0 -1
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, ChangeDetectorRef, computed, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, ViewContainerRef, Input, EventEmitter, Output, Renderer2, ViewChild } from '@angular/core';
|
|
3
3
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
4
|
-
import { C as CoreFormDesignService, B as BaseEditComponent, A as AlertService, E as EnumCorePageEditMode, a as EnumFormBaseContolType, b as EnumCoreButtonVNSCode, n as noneAutoClosedAlertOptions, D as DialogService, c as CorePageHeaderComponent, d as CoreFormComponent, e as CoreButtonGroupVnsComponent, T as TranslatePipe, f as BaseComponent, g as EnumCoreTablePipeType, h as CoreCheckboxComponent, i as CoreDropdownComponent,
|
|
4
|
+
import { C as CoreFormDesignService, B as BaseEditComponent, A as AlertService, E as EnumCorePageEditMode, a as EnumFormBaseContolType, b as EnumCoreButtonVNSCode, n as noneAutoClosedAlertOptions, D as DialogService, M as MultiLanguageService, c as CorePageHeaderComponent, d as CoreFormComponent, e as CoreButtonGroupVnsComponent, T as TranslatePipe, f as BaseComponent, g as EnumCoreTablePipeType, h as CoreCheckboxComponent, i as CoreDropdownComponent, j as TooltipDirective, k as EnumFormDesignMode, l as EnumCoreFormControlSeekerSourceType, F as FullscreenModalLoaderComponent, m as TableCellPipe, o as CoreControlComponent, p as CoreChecklistComponent, q as CoreFormControlSeekerComponent, r as CoreAttachmentComponent, s as CoreDatePickerComponent, t as CoreRadioGroupComponent, u as CoreMonthSelectorComponent, v as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-B6dYCMll.mjs';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import { NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
8
8
|
import { BehaviorSubject, catchError, of } from 'rxjs';
|
|
9
9
|
import { EnumTranslateKey } from 'alpha-global-constants';
|
|
10
10
|
import { ActivatedRoute } from '@angular/router';
|
|
11
|
+
import { LiveFormComponent } from './ngx-histaff-alpha-live-form.component-Cl8EQ7M8.mjs';
|
|
11
12
|
|
|
12
13
|
const slideFromTopFadeIn = trigger('slideFromTopFadeIn', [
|
|
13
14
|
state('in', style({ opacity: 1, transform: 'translateY(0)' })),
|
|
@@ -80,9 +81,10 @@ class FormMetadataComponent extends BaseEditComponent {
|
|
|
80
81
|
//This lets Angular finish updating the DOM before running change detection.
|
|
81
82
|
setTimeout(() => this.cdr.markForCheck());
|
|
82
83
|
}
|
|
83
|
-
constructor(dialogService) {
|
|
84
|
+
constructor(dialogService, mls) {
|
|
84
85
|
super(dialogService);
|
|
85
86
|
this.dialogService = dialogService;
|
|
87
|
+
this.mls = mls;
|
|
86
88
|
this.coreFormDesignService = inject(CoreFormDesignService);
|
|
87
89
|
this.cdr = inject(ChangeDetectorRef);
|
|
88
90
|
this.alertService = inject(AlertService);
|
|
@@ -475,6 +477,14 @@ class FormMetadataComponent extends BaseEditComponent {
|
|
|
475
477
|
...safeUpdate
|
|
476
478
|
});
|
|
477
479
|
});*/
|
|
480
|
+
form.get('customFormButtonItems')?.valueChanges.subscribe(x => {
|
|
481
|
+
if (Array.isArray(x)) {
|
|
482
|
+
this.coreFormDesignService.$customFormButtonItems.set(x);
|
|
483
|
+
}
|
|
484
|
+
else {
|
|
485
|
+
this.coreFormDesignService.$customFormButtonItems.set(undefined);
|
|
486
|
+
}
|
|
487
|
+
});
|
|
478
488
|
form.valueChanges.subscribe(value => {
|
|
479
489
|
const current = this.coreFormDesignService.$afInstance();
|
|
480
490
|
const { crudCreate, crudRead, crudUpdate, crudDelete, crudReadChildren,
|
|
@@ -509,7 +519,7 @@ class FormMetadataComponent extends BaseEditComponent {
|
|
|
509
519
|
.filter(value => value.startsWith('NONE_HEADER_') && value !== 'NONE_HEADER_IMPORT_OPTION')
|
|
510
520
|
.map(value => ({
|
|
511
521
|
value,
|
|
512
|
-
text: value,
|
|
522
|
+
text: this.mls.trans(value),
|
|
513
523
|
checked: false
|
|
514
524
|
}));
|
|
515
525
|
this.customButtonChecklistOptions$.next(noneHeaderOptions);
|
|
@@ -523,7 +533,7 @@ class FormMetadataComponent extends BaseEditComponent {
|
|
|
523
533
|
this.cdr.markForCheck();
|
|
524
534
|
});
|
|
525
535
|
}
|
|
526
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormMetadataComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
536
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormMetadataComponent, deps: [{ token: DialogService }, { token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
527
537
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: FormMetadataComponent, isStandalone: true, selector: "form-metadata", host: { listeners: { "document:keydown.escape": "onEscape($event)", "window:click": "onWindowClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-metadata-container\">\r\n <div class=\"header-wrapper\">\r\n <core-page-header [title]=\"'FORM OVERVIEW'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n <div class=\"close-wrapper\" (click)=\"onClose()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n\r\n <div class=\"af-instance\">\r\n\r\n <div class=\"af-instance-left\">\r\n <core-form \r\n [inputSections]=\"$sections()\" \r\n [width]=\"800\" [mode$]=\"mode$\" \r\n [checkError$]=\"checkError$\" \r\n [hideButtons]=\"true\"\r\n (onFormCreated)=\"onFormCreated($event)\"></core-form>\r\n </div>\r\n <div class=\"af-instance-right\">\r\n <save-live-json></save-live-json>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n <div class=\"h15\"></div>\r\n <div class=\"d-flex d-flex-end w-100 pr1rem\">\r\n <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\"\r\n (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"customButtons\"\r\n class=\"buttonGroupCustom\"></core-button-group-vns>\r\n </div>\r\n\r\n\r\n\r\n</div>", styles: [".form-metadata-container .header-wrapper{padding:0 15px}.form-metadata-container .header-wrapper .close-wrapper{display:flex;position:absolute;right:7px;top:8px;width:24px;height:24px;color:#848484;cursor:pointer}.form-metadata-container .header-wrapper .close-wrapper i{font-size:24px}.form-metadata-container .af-instance{display:flex}.form-metadata-container .h15{height:15px!important}.form-metadata-container .pr1rem{padding-right:1rem}\n"], dependencies: [{ kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: SaveLiveJsonComponent, selector: "save-live-json" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
528
538
|
}
|
|
529
539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormMetadataComponent, decorators: [{
|
|
@@ -535,7 +545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
535
545
|
SaveLiveJsonComponent,
|
|
536
546
|
CoreButtonGroupVnsComponent
|
|
537
547
|
], template: "<div class=\"form-metadata-container\">\r\n <div class=\"header-wrapper\">\r\n <core-page-header [title]=\"'FORM OVERVIEW'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n <div class=\"close-wrapper\" (click)=\"onClose()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n\r\n <div class=\"af-instance\">\r\n\r\n <div class=\"af-instance-left\">\r\n <core-form \r\n [inputSections]=\"$sections()\" \r\n [width]=\"800\" [mode$]=\"mode$\" \r\n [checkError$]=\"checkError$\" \r\n [hideButtons]=\"true\"\r\n (onFormCreated)=\"onFormCreated($event)\"></core-form>\r\n </div>\r\n <div class=\"af-instance-right\">\r\n <save-live-json></save-live-json>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n <div class=\"h15\"></div>\r\n <div class=\"d-flex d-flex-end w-100 pr1rem\">\r\n <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\"\r\n (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"customButtons\"\r\n class=\"buttonGroupCustom\"></core-button-group-vns>\r\n </div>\r\n\r\n\r\n\r\n</div>", styles: [".form-metadata-container .header-wrapper{padding:0 15px}.form-metadata-container .header-wrapper .close-wrapper{display:flex;position:absolute;right:7px;top:8px;width:24px;height:24px;color:#848484;cursor:pointer}.form-metadata-container .header-wrapper .close-wrapper i{font-size:24px}.form-metadata-container .af-instance{display:flex}.form-metadata-container .h15{height:15px!important}.form-metadata-container .pr1rem{padding-right:1rem}\n"] }]
|
|
538
|
-
}], ctorParameters: () => [{ type: DialogService }], propDecorators: { onEscape: [{
|
|
548
|
+
}], ctorParameters: () => [{ type: DialogService }, { type: MultiLanguageService }], propDecorators: { onEscape: [{
|
|
539
549
|
type: HostListener,
|
|
540
550
|
args: ['document:keydown.escape', ['$event']]
|
|
541
551
|
}], onWindowClick: [{
|
|
@@ -629,6 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
629
639
|
class MandatoryPropsComponent extends BasePropsComponent {
|
|
630
640
|
constructor() {
|
|
631
641
|
super(...arguments);
|
|
642
|
+
this.afs = inject(CoreFormDesignService);
|
|
632
643
|
this.$typedField = computed(() => {
|
|
633
644
|
const control = this.$control();
|
|
634
645
|
return AttachmentFieldHelperService.isAttachment(control)
|
|
@@ -666,11 +677,11 @@ class MandatoryPropsComponent extends BasePropsComponent {
|
|
|
666
677
|
this.patchControl(control);
|
|
667
678
|
}
|
|
668
679
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MandatoryPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MandatoryPropsComponent, isStandalone: true, selector: "mandatory-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group mandatory-group\">\r\n\r\n <div class=\"setting-row\">\r\n <label>Field</label>\r\n <input class=\"form-control\" type=\"text\" [ngModel]=\"$typedField()\" (ngModelChange)=\"setControlProp('field', $event)\" />\r\n </div>\r\n\r\n <!-- Label -->\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 <!-- Default -->\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</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: "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.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 }); }
|
|
680
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MandatoryPropsComponent, isStandalone: true, selector: "mandatory-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group mandatory-group\">\r\n\r\n <div class=\"setting-row\">\r\n <label>Field</label>\r\n <input class=\"form-control\" type=\"text\" [ngModel]=\"$typedField()\" (ngModelChange)=\"setControlProp('field', $event)\" />\r\n </div>\r\n\r\n <!-- Label -->\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 <!-- Flex Size -->\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 <!-- Default -->\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</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: "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 }); }
|
|
670
681
|
}
|
|
671
682
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MandatoryPropsComponent, decorators: [{
|
|
672
683
|
type: Component,
|
|
673
|
-
args: [{ selector: 'mandatory-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"setting-group mandatory-group\">\r\n\r\n <div class=\"setting-row\">\r\n <label>Field</label>\r\n <input class=\"form-control\" type=\"text\" [ngModel]=\"$typedField()\" (ngModelChange)=\"setControlProp('field', $event)\" />\r\n </div>\r\n\r\n <!-- Label -->\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 <!-- Default -->\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</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"] }]
|
|
684
|
+
args: [{ selector: 'mandatory-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"setting-group mandatory-group\">\r\n\r\n <div class=\"setting-row\">\r\n <label>Field</label>\r\n <input class=\"form-control\" type=\"text\" [ngModel]=\"$typedField()\" (ngModelChange)=\"setControlProp('field', $event)\" />\r\n </div>\r\n\r\n <!-- Label -->\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 <!-- Flex Size -->\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 <!-- Default -->\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</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"] }]
|
|
674
685
|
}] });
|
|
675
686
|
|
|
676
687
|
class OptionalPropsComponent extends BasePropsComponent {
|
|
@@ -1739,7 +1750,7 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1739
1750
|
err?.statusText || // Fallback
|
|
1740
1751
|
'An unknown error occurred.';
|
|
1741
1752
|
this.alertService.error(msg, noneAutoClosedAlertOptions);
|
|
1742
|
-
return of(
|
|
1753
|
+
return of(err);
|
|
1743
1754
|
}))
|
|
1744
1755
|
.subscribe(x => {
|
|
1745
1756
|
this.$loading.set(false);
|
|
@@ -1813,8 +1824,14 @@ class CoreFormDesignComponent extends BaseComponent {
|
|
|
1813
1824
|
return [];
|
|
1814
1825
|
return row.cells.filter(cell => (cell?.flexSize ?? 0) > 0);
|
|
1815
1826
|
}
|
|
1827
|
+
onFormDesignCreated(e) {
|
|
1828
|
+
console.log("onFormDesignCreated", e);
|
|
1829
|
+
}
|
|
1830
|
+
onLiveFormCreated(e) {
|
|
1831
|
+
console.log("onLiveFormCreated", e);
|
|
1832
|
+
}
|
|
1816
1833
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1817
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormDesignComponent, isStandalone: true, selector: "core-form-design", viewQueries: [{ propertyName: "settingPanel", first: true, predicate: ["settingPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\">\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 <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 <div class=\"field-setting-panel\" [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" #settingPanel>\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.SelectedFieldJson) {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() | tableCell : 'TRIM' : lang }}</pre>\r\n }\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"form-design-right\">\r\n\r\n @if (coreFormDesignService.$mode() === enumType.Default) {\r\n <div class=\"form-wrapper\">\r\n <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n <div class=\"form-cells\">\r\n\r\n <div class=\"form-tool-bar\">\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\"></div>\r\n </div>\r\n\r\n <label contenteditable=\"true\"\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'\">\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 ?? 3) + ' 1 0%' }\"\r\n (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n (dragover)=\"onDragOver($event)\"\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 <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n \r\n <div class=\"field-toolbar\">\r\n <ul>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell)\" [appTooltip]=\"'Show settings'\">\r\n <i class=\"feather-settings\"></i>\r\n </div>\r\n </li>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n } @else {\r\n <div class=\"placeholder\">Drop here</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 column'\"><i class=\"feather-x\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\"><i class=\"feather-arrow-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Insert row'\"><i class=\"feather-corner-right-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\"><i class=\"feather-arrow-right\"></i></div>\r\n </div>\r\n </div>\r\n\r\n }\r\n </div>\r\n }\r\n \r\n \r\n </div>\r\n </form>\r\n </div>\r\n } @else if (!!$sections()) {\r\n\r\n\r\n @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n }\">\r\n <div class=\"live-form-header\">\r\n <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n </div>\r\n <core-form [submitText]=\"'Kickoff'\" [inputSections]=\"$sections()\" [showCaptionButton]=\"true\" (onSubmit)=\"onPreviewSubmit($event)\" [mode$]=\"previewMode$\"></core-form>\r\n </div>\r\n } @else {\r\n\r\n <div class=\"modal-container\">\r\n <div class=\"modal-content-root no-padding\">\r\n\r\n <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n }\">\r\n <div class=\"live-form-header\">\r\n <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n <div class=\"preview-close-icon\" (click)=\"closePreview()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n <core-form [submitText]=\"'Kickoff'\" [inputSections]=\"$sections()\" [showCaptionButton]=\"true\" (onSubmit)=\"onPreviewSubmit($event)\" [mode$]=\"previewMode$\"></core-form>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n } @else {\r\n <h2>$sections() empty / null / undefined</h2>\r\n }\r\n\r\n\r\n \r\n </div>\r\n @if ($loading()) {\r\n <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n }\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{background-color:#000;color:#fff}.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:calc(100vh - var(--size-header-height) - var(--size-core-page-header-height));top:calc(var(--size-core-page-header-height) + var(--size-header-height));right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out;z-index:99}.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.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;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 - 155px)}.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}.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;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-tool{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-section-placeholder .section-header .section-tool i{font-size:18px}.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}.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 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 .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-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], 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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting" }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1834
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormDesignComponent, isStandalone: true, selector: "core-form-design", viewQueries: [{ propertyName: "settingPanel", first: true, predicate: ["settingPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\">\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 <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 <div class=\"field-setting-panel\" [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" #settingPanel>\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.SelectedFieldJson) {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() | tableCell : 'TRIM' : lang }}</pre>\r\n }\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"form-design-right\">\r\n\r\n @if (coreFormDesignService.$mode() === enumType.Default) {\r\n <div class=\"form-wrapper\">\r\n <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n <div class=\"form-cells\">\r\n\r\n <div class=\"form-tool-bar\">\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\"></div>\r\n </div>\r\n\r\n <label contenteditable=\"true\"\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'\">\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 ?? 3) + ' 1 0%' }\"\r\n (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n (dragover)=\"onDragOver($event)\"\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 <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n \r\n <div class=\"field-toolbar\">\r\n <ul>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell)\" [appTooltip]=\"'Show settings'\">\r\n <i class=\"feather-settings\"></i>\r\n </div>\r\n </li>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n } @else {\r\n <div class=\"placeholder\">Drop here</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'\"><i class=\"feather-x\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\"><i class=\"feather-arrow-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\"><i class=\"feather-corner-right-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\"><i class=\"feather-arrow-right\"></i></div>\r\n </div>\r\n </div>\r\n\r\n }\r\n </div>\r\n }\r\n \r\n \r\n </div>\r\n </form>\r\n </div>\r\n } @else if (!!$sections()) {\r\n\r\n\r\n @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n\r\n <live-form\r\n [$normalMode]=\"true\"\r\n [$sections]=\"$sections()\"\r\n ></live-form>\r\n\r\n <!-- <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n }\">\r\n <div class=\"live-form-header\">\r\n <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n </div>\r\n <core-form \r\n [submitText]=\"'Kickoff'\" \r\n [inputSections]=\"$sections()\" \r\n [showCaptionButton]=\"true\"\r\n [customFormButtonItems]=\"coreFormDesignService.$customFormButtonItems()!\" \r\n (onSubmit)=\"onPreviewSubmit($event)\" \r\n [mode$]=\"previewMode$\"\r\n (onFormCreated)=\"onLiveFormCreated($event)\"\r\n ></core-form>\r\n </div> -->\r\n } @else {\r\n\r\n <live-form\r\n [$normalMode]=\"false\"\r\n [$sections]=\"$sections()\"\r\n ($onClose)=\"closePreview()\"\r\n ></live-form>\r\n\r\n <!-- <div class=\"modal-container\">\r\n <div class=\"modal-content-root no-padding\">\r\n\r\n <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n }\">\r\n <div class=\"live-form-header\">\r\n <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n <div class=\"preview-close-icon\" (click)=\"closePreview()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n <core-form \r\n [submitText]=\"'Kickoff'\" \r\n [inputSections]=\"$sections()\" \r\n [showCaptionButton]=\"true\"\r\n [customFormButtonItems]=\"coreFormDesignService.$customFormButtonItems()!\" \r\n (onSubmit)=\"onPreviewSubmit($event)\" \r\n [mode$]=\"previewMode$\"\r\n (onFormCreated)=\"onFormDesignCreated($event)\" \r\n ></core-form>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n }\r\n\r\n\r\n } @else {\r\n <h2>$sections() empty / null / undefined</h2>\r\n }\r\n\r\n\r\n \r\n </div>\r\n @if ($loading()) {\r\n <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n }\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{background-color:#000;color:#fff}.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:calc(100vh - var(--size-header-height) - var(--size-core-page-header-height));top:calc(var(--size-core-page-header-height) + var(--size-header-height));right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out;z-index:99}.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.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;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 - 155px)}.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}.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;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-tool{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-section-placeholder .section-header .section-tool i{font-size:18px}.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}.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 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 .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-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], 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: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { 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: ["$normalMode", "$sections"], outputs: ["$onClose"] }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1818
1835
|
}
|
|
1819
1836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, decorators: [{
|
|
1820
1837
|
type: Component,
|
|
@@ -1841,11 +1858,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1841
1858
|
TooltipDirective,
|
|
1842
1859
|
CoreCurrencyInputComponent,
|
|
1843
1860
|
FieldSettingComponent,
|
|
1844
|
-
], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\">\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 <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 <div class=\"field-setting-panel\" [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" #settingPanel>\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.SelectedFieldJson) {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() | tableCell : 'TRIM' : lang }}</pre>\r\n }\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"form-design-right\">\r\n\r\n @if (coreFormDesignService.$mode() === enumType.Default) {\r\n <div class=\"form-wrapper\">\r\n <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n <div class=\"form-cells\">\r\n\r\n <div class=\"form-tool-bar\">\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\"></div>\r\n </div>\r\n\r\n <label contenteditable=\"true\"\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'\">\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 ?? 3) + ' 1 0%' }\"\r\n (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n (dragover)=\"onDragOver($event)\"\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 <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n \r\n <div class=\"field-toolbar\">\r\n <ul>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell)\" [appTooltip]=\"'Show settings'\">\r\n <i class=\"feather-settings\"></i>\r\n </div>\r\n </li>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n } @else {\r\n <div class=\"placeholder\">Drop here</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 column'\"><i class=\"feather-x\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\"><i class=\"feather-arrow-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Insert row'\"><i class=\"feather-corner-right-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\"><i class=\"feather-arrow-right\"></i></div>\r\n </div>\r\n </div>\r\n\r\n }\r\n </div>\r\n }\r\n \r\n \r\n </div>\r\n </form>\r\n </div>\r\n } @else if (!!$sections()) {\r\n\r\n\r\n @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n }\">\r\n <div class=\"live-form-header\">\r\n <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n </div>\r\n <core-form [submitText]=\"'Kickoff'\" [inputSections]=\"$sections()\" [showCaptionButton]=\"true\" (onSubmit)=\"onPreviewSubmit($event)\" [mode$]=\"previewMode$\"></core-form>\r\n </div>\r\n } @else {\r\n\r\n <div class=\"modal-container\">\r\n <div class=\"modal-content-root no-padding\">\r\n\r\n <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n }\">\r\n <div class=\"live-form-header\">\r\n <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n <div class=\"preview-close-icon\" (click)=\"closePreview()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n <core-form [submitText]=\"'Kickoff'\" [inputSections]=\"$sections()\" [showCaptionButton]=\"true\" (onSubmit)=\"onPreviewSubmit($event)\" [mode$]=\"previewMode$\"></core-form>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n } @else {\r\n <h2>$sections() empty / null / undefined</h2>\r\n }\r\n\r\n\r\n \r\n </div>\r\n @if ($loading()) {\r\n <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n }\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{background-color:#000;color:#fff}.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:calc(100vh - var(--size-header-height) - var(--size-core-page-header-height));top:calc(var(--size-core-page-header-height) + var(--size-header-height));right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out;z-index:99}.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.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;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 - 155px)}.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}.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;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-tool{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-section-placeholder .section-header .section-tool i{font-size:18px}.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}.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 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 .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-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"] }]
|
|
1861
|
+
LiveFormComponent,
|
|
1862
|
+
], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\">\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 <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 <div class=\"field-setting-panel\" [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" #settingPanel>\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.SelectedFieldJson) {\r\n <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() | tableCell : 'TRIM' : lang }}</pre>\r\n }\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"form-design-right\">\r\n\r\n @if (coreFormDesignService.$mode() === enumType.Default) {\r\n <div class=\"form-wrapper\">\r\n <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n <div class=\"form-cells\">\r\n\r\n <div class=\"form-tool-bar\">\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\"></div>\r\n </div>\r\n\r\n <label contenteditable=\"true\"\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'\">\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 ?? 3) + ' 1 0%' }\"\r\n (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n (dragover)=\"onDragOver($event)\"\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 <core-control \r\n [control]=\"getControl(cell)!\" \r\n [form]=\"formDesign\"\r\n [checkError$]=\"checkError$\" />\r\n \r\n <div class=\"field-toolbar\">\r\n <ul>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell)\" [appTooltip]=\"'Show settings'\">\r\n <i class=\"feather-settings\"></i>\r\n </div>\r\n </li>\r\n <li>\r\n <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n } @else {\r\n <div class=\"placeholder\">Drop here</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'\"><i class=\"feather-x\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\"><i class=\"feather-arrow-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\"><i class=\"feather-corner-right-down\"></i></div>\r\n <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\"><i class=\"feather-arrow-right\"></i></div>\r\n </div>\r\n </div>\r\n\r\n }\r\n </div>\r\n }\r\n \r\n \r\n </div>\r\n </form>\r\n </div>\r\n } @else if (!!$sections()) {\r\n\r\n\r\n @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n\r\n <live-form\r\n [$normalMode]=\"true\"\r\n [$sections]=\"$sections()\"\r\n ></live-form>\r\n\r\n <!-- <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n }\">\r\n <div class=\"live-form-header\">\r\n <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n </div>\r\n <core-form \r\n [submitText]=\"'Kickoff'\" \r\n [inputSections]=\"$sections()\" \r\n [showCaptionButton]=\"true\"\r\n [customFormButtonItems]=\"coreFormDesignService.$customFormButtonItems()!\" \r\n (onSubmit)=\"onPreviewSubmit($event)\" \r\n [mode$]=\"previewMode$\"\r\n (onFormCreated)=\"onLiveFormCreated($event)\"\r\n ></core-form>\r\n </div> -->\r\n } @else {\r\n\r\n <live-form\r\n [$normalMode]=\"false\"\r\n [$sections]=\"$sections()\"\r\n ($onClose)=\"closePreview()\"\r\n ></live-form>\r\n\r\n <!-- <div class=\"modal-container\">\r\n <div class=\"modal-content-root no-padding\">\r\n\r\n <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n }\">\r\n <div class=\"live-form-header\">\r\n <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n <div class=\"preview-close-icon\" (click)=\"closePreview()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n <core-form \r\n [submitText]=\"'Kickoff'\" \r\n [inputSections]=\"$sections()\" \r\n [showCaptionButton]=\"true\"\r\n [customFormButtonItems]=\"coreFormDesignService.$customFormButtonItems()!\" \r\n (onSubmit)=\"onPreviewSubmit($event)\" \r\n [mode$]=\"previewMode$\"\r\n (onFormCreated)=\"onFormDesignCreated($event)\" \r\n ></core-form>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n }\r\n\r\n\r\n } @else {\r\n <h2>$sections() empty / null / undefined</h2>\r\n }\r\n\r\n\r\n \r\n </div>\r\n @if ($loading()) {\r\n <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n }\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{background-color:#000;color:#fff}.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:calc(100vh - var(--size-header-height) - var(--size-core-page-header-height));top:calc(var(--size-core-page-header-height) + var(--size-header-height));right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out;z-index:99}.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.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;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 - 155px)}.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}.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;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-tool{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-section-placeholder .section-header .section-tool i{font-size:18px}.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}.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 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 .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-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"] }]
|
|
1845
1863
|
}], ctorParameters: () => [{ type: MultiLanguageService }], propDecorators: { settingPanel: [{
|
|
1846
1864
|
type: ViewChild,
|
|
1847
1865
|
args: ['settingPanel']
|
|
1848
1866
|
}] } });
|
|
1849
1867
|
|
|
1850
1868
|
export { CoreFormDesignComponent };
|
|
1851
|
-
//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-
|
|
1869
|
+
//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-DUH4SkB7.mjs.map
|