@masterteam/form-builder 0.0.55 → 0.0.57
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/README.md +8 -0
- package/assets/form-builder.css +1 -1
- package/assets/i18n/ar.json +3 -0
- package/assets/i18n/en.json +3 -0
- package/fesm2022/masterteam-form-builder.mjs +85 -11
- package/fesm2022/masterteam-form-builder.mjs.map +1 -1
- package/package.json +4 -4
- package/types/masterteam-form-builder.d.ts +43 -4
|
@@ -88,6 +88,13 @@ class SetPreviewInfo {
|
|
|
88
88
|
this.payload = payload;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
+
class SetWorkflowOperations {
|
|
92
|
+
operations;
|
|
93
|
+
static type = '[FormBuilder] Set Workflow Operations';
|
|
94
|
+
constructor(operations) {
|
|
95
|
+
this.operations = operations;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
91
98
|
class SetContextResolveExtraParams {
|
|
92
99
|
params;
|
|
93
100
|
static type = '[FormBuilder] Set Context Resolve Extra Params';
|
|
@@ -269,6 +276,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
269
276
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
270
277
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
271
278
|
};
|
|
279
|
+
const NO_WORKFLOW_OPERATIONS = {
|
|
280
|
+
create: false,
|
|
281
|
+
update: false,
|
|
282
|
+
};
|
|
272
283
|
// Default State
|
|
273
284
|
const DEFAULT_STATE = {
|
|
274
285
|
// Module configuration
|
|
@@ -285,6 +296,8 @@ const DEFAULT_STATE = {
|
|
|
285
296
|
previewInfo: null,
|
|
286
297
|
// Consumer-supplied context/resolve extra params
|
|
287
298
|
contextResolveExtraParams: null,
|
|
299
|
+
// Host-set: form operations that run through a published workflow
|
|
300
|
+
workflowOperations: NO_WORKFLOW_OPERATIONS,
|
|
288
301
|
// In-memory editing (see EnterLocalFormConfiguration)
|
|
289
302
|
localMode: false,
|
|
290
303
|
stashedState: null,
|
|
@@ -350,6 +363,9 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
|
|
|
350
363
|
static getContextResolveExtraParams(state) {
|
|
351
364
|
return state?.contextResolveExtraParams ?? null;
|
|
352
365
|
}
|
|
366
|
+
static getWorkflowOperations(state) {
|
|
367
|
+
return state?.workflowOperations ?? NO_WORKFLOW_OPERATIONS;
|
|
368
|
+
}
|
|
353
369
|
// ============================================================================
|
|
354
370
|
// Module Configuration Actions
|
|
355
371
|
// ============================================================================
|
|
@@ -367,6 +383,7 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
|
|
|
367
383
|
parentModuleType: action.parentModuleType ?? null,
|
|
368
384
|
parentModuleId: action.parentModuleId ?? null,
|
|
369
385
|
parentPath: parentPath ?? '',
|
|
386
|
+
workflowOperations: NO_WORKFLOW_OPERATIONS,
|
|
370
387
|
});
|
|
371
388
|
}
|
|
372
389
|
resetState(ctx) {
|
|
@@ -387,6 +404,9 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
|
|
|
387
404
|
previewInfo: action.payload,
|
|
388
405
|
});
|
|
389
406
|
}
|
|
407
|
+
setWorkflowOperations(ctx, action) {
|
|
408
|
+
ctx.patchState({ workflowOperations: action.operations });
|
|
409
|
+
}
|
|
390
410
|
// ============================================================================
|
|
391
411
|
// Local (in-memory) editing
|
|
392
412
|
// ============================================================================
|
|
@@ -1135,6 +1155,9 @@ __decorate([
|
|
|
1135
1155
|
__decorate([
|
|
1136
1156
|
Action(SetPreviewInfo)
|
|
1137
1157
|
], FormBuilderState.prototype, "setPreviewInfo", null);
|
|
1158
|
+
__decorate([
|
|
1159
|
+
Action(SetWorkflowOperations)
|
|
1160
|
+
], FormBuilderState.prototype, "setWorkflowOperations", null);
|
|
1138
1161
|
__decorate([
|
|
1139
1162
|
Action(EnterLocalFormConfiguration)
|
|
1140
1163
|
], FormBuilderState.prototype, "enterLocalFormConfiguration", null);
|
|
@@ -1228,6 +1251,9 @@ __decorate([
|
|
|
1228
1251
|
__decorate([
|
|
1229
1252
|
Selector()
|
|
1230
1253
|
], FormBuilderState, "getContextResolveExtraParams", null);
|
|
1254
|
+
__decorate([
|
|
1255
|
+
Selector()
|
|
1256
|
+
], FormBuilderState, "getWorkflowOperations", null);
|
|
1231
1257
|
FormBuilderState = __decorate([
|
|
1232
1258
|
State({
|
|
1233
1259
|
name: 'formBuilder',
|
|
@@ -1236,7 +1262,7 @@ FormBuilderState = __decorate([
|
|
|
1236
1262
|
], FormBuilderState);
|
|
1237
1263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormBuilderState, decorators: [{
|
|
1238
1264
|
type: Injectable
|
|
1239
|
-
}], propDecorators: { setModuleInfo: [], resetState: [], setContextResolveExtraParams: [], setProperties: [], setPreviewInfo: [], enterLocalFormConfiguration: [], exitLocalFormConfiguration: [], getFormConfiguration: [], resetFormConfiguration: [], resetFormFromAppForm: [], updateFormSettings: [], addSection: [], updateSection: [], reorderSections: [], deleteSection: [], addField: [], updateField: [], deleteField: [], reorderFields: [], moveField: [], addValidation: [], updateValidation: [], deleteValidation: [], toggleValidationActive: [] } });
|
|
1265
|
+
}], propDecorators: { setModuleInfo: [], resetState: [], setContextResolveExtraParams: [], setProperties: [], setPreviewInfo: [], setWorkflowOperations: [], enterLocalFormConfiguration: [], exitLocalFormConfiguration: [], getFormConfiguration: [], resetFormConfiguration: [], resetFormFromAppForm: [], updateFormSettings: [], addSection: [], updateSection: [], reorderSections: [], deleteSection: [], addField: [], updateField: [], deleteField: [], reorderFields: [], moveField: [], addValidation: [], updateValidation: [], deleteValidation: [], toggleValidationActive: [] } });
|
|
1240
1266
|
|
|
1241
1267
|
class FormBuilderFacade {
|
|
1242
1268
|
store = inject(Store);
|
|
@@ -1254,6 +1280,8 @@ class FormBuilderFacade {
|
|
|
1254
1280
|
parentModuleId = select(FormBuilderState.getParentModuleId);
|
|
1255
1281
|
parentPath = select(FormBuilderState.getParentPath);
|
|
1256
1282
|
previewInfo = select(FormBuilderState.getPreviewInfo);
|
|
1283
|
+
/** Form operations that run through a published workflow; see `setWorkflowOperations`. */
|
|
1284
|
+
workflowOperations = select(FormBuilderState.getWorkflowOperations);
|
|
1257
1285
|
/** True while a host edits a field list in memory; see `enterLocalConfiguration`. */
|
|
1258
1286
|
localMode = computed(() => this.stateSignal().localMode === true, ...(ngDevMode ? [{ debugName: "localMode" }] : /* istanbul ignore next */ []));
|
|
1259
1287
|
contextResolveExtraParams = select(FormBuilderState.getContextResolveExtraParams);
|
|
@@ -1328,6 +1356,16 @@ class FormBuilderFacade {
|
|
|
1328
1356
|
setPreviewInfo(payload) {
|
|
1329
1357
|
return this.store.dispatch(new SetPreviewInfo(payload));
|
|
1330
1358
|
}
|
|
1359
|
+
/**
|
|
1360
|
+
* Tell the builder which form operations run through a published workflow,
|
|
1361
|
+
* whose steps set each field's size and read/write access. When both Create
|
|
1362
|
+
* and Update do, the field drawer locks those settings; when one does, it
|
|
1363
|
+
* keeps them editable and says they only apply to the other operation. Call
|
|
1364
|
+
* it after `setModuleInfo`, which clears it.
|
|
1365
|
+
*/
|
|
1366
|
+
setWorkflowOperations(operations) {
|
|
1367
|
+
return this.store.dispatch(new SetWorkflowOperations(operations));
|
|
1368
|
+
}
|
|
1331
1369
|
/**
|
|
1332
1370
|
* Consumer-supplied fields appended to every `context/resolve` request body
|
|
1333
1371
|
* form-builder issues. These win over the package's own resolve flags on
|
|
@@ -1709,6 +1747,27 @@ class FBFieldForm {
|
|
|
1709
1747
|
isManageProperties = computed(() => this.mode() === 'manageProperties', ...(ngDevMode ? [{ debugName: "isManageProperties" }] : /* istanbul ignore next */ []));
|
|
1710
1748
|
/** An in-memory field list: only whether the field is required, and its size. */
|
|
1711
1749
|
isLocalFields = computed(() => this.mode() === 'localFields', ...(ngDevMode ? [{ debugName: "isLocalFields" }] : /* istanbul ignore next */ []));
|
|
1750
|
+
/**
|
|
1751
|
+
* The note shown when Create and/or Update run through a published workflow,
|
|
1752
|
+
* whose steps set size and read/write. Builder mode only: the step's own
|
|
1753
|
+
* drawer (`manageProperties` mode) is where those are edited.
|
|
1754
|
+
*/
|
|
1755
|
+
workflowNoteKey = computed(() => {
|
|
1756
|
+
if (this.mode() !== 'builder')
|
|
1757
|
+
return null;
|
|
1758
|
+
const { create, update } = this.facade.workflowOperations();
|
|
1759
|
+
if (create && update)
|
|
1760
|
+
return 'workflow-managed-all';
|
|
1761
|
+
if (create)
|
|
1762
|
+
return 'workflow-managed-create';
|
|
1763
|
+
if (update)
|
|
1764
|
+
return 'workflow-managed-update';
|
|
1765
|
+
return null;
|
|
1766
|
+
}, ...(ngDevMode ? [{ debugName: "workflowNoteKey" }] : /* istanbul ignore next */ []));
|
|
1767
|
+
/** Neither operation uses these settings, so they are shown locked. */
|
|
1768
|
+
isWorkflowManaged = computed(() => this.workflowNoteKey() === 'workflow-managed-all', ...(ngDevMode ? [{ debugName: "isWorkflowManaged" }] : /* istanbul ignore next */ []));
|
|
1769
|
+
/** Stable reference: DynamicForm re-evaluates on every new array. */
|
|
1770
|
+
workflowLockedFormKeys = computed(() => this.isWorkflowManaged() ? ['size'] : [], ...(ngDevMode ? [{ debugName: "workflowLockedFormKeys" }] : /* istanbul ignore next */ []));
|
|
1712
1771
|
/**
|
|
1713
1772
|
* Connection requiredness is owned by
|
|
1714
1773
|
* `propertyMetadata.configuration.sourceLevels[].isOptional`, not by the
|
|
@@ -1943,6 +2002,13 @@ class FBFieldForm {
|
|
|
1943
2002
|
if (this.isLocalFields()) {
|
|
1944
2003
|
payload['isRequired'] = formValue.isRequired ?? false;
|
|
1945
2004
|
}
|
|
2005
|
+
else if (this.isWorkflowManaged()) {
|
|
2006
|
+
// Locked here, so send what is stored. The API defaults a missing
|
|
2007
|
+
// isRead / isWrite to true, so omitting them would overwrite them.
|
|
2008
|
+
payload['width'] = field.width;
|
|
2009
|
+
payload['isRead'] = field.isRead !== false;
|
|
2010
|
+
payload['isWrite'] = field.isWrite !== false;
|
|
2011
|
+
}
|
|
1946
2012
|
else {
|
|
1947
2013
|
payload['isRead'] = this.isReadControl.value ?? true;
|
|
1948
2014
|
payload['isWrite'] = this.isWriteControl.value ?? true;
|
|
@@ -2018,7 +2084,7 @@ class FBFieldForm {
|
|
|
2018
2084
|
});
|
|
2019
2085
|
}
|
|
2020
2086
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2021
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBFieldForm, isStandalone: true, selector: "mt-fb-field-form", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div\n [class]=\"[\n modalService.contentClass,\n 'min-w-0',\n 'p-4',\n 'overflow-y-hidden!',\n 'max-[640px]:p-3',\n ]\"\n >\n <div class=\"mt-2 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\n <mt-dynamic-form\n [formConfig]=\"activeFormConfig()\"\n [formControl]=\"formControl\"\n >\n </mt-dynamic-form>\n\n @if (!isLocalFields()) {\n <!-- isRead Toggle -->\n <mt-toggle-field\n toggleShape=\"card\"\n [label]=\"t('is-read')\"\n [descriptionCard]=\"t('is-read-description')\"\n icon=\"general.eye\"\n [formControl]=\"isReadControl\"\n ></mt-toggle-field>\n\n <!-- isWrite Toggle -->\n <mt-toggle-field\n toggleShape=\"card\"\n [label]=\"t('is-write')\"\n [descriptionCard]=\"t('is-write-description')\"\n icon=\"general.edit-02\"\n [formControl]=\"isWriteControl\"\n ></mt-toggle-field>\n }\n\n @if (!isManageProperties() && !isLocalFields()) {\n <!-- Edit Label Toggle with localized label inputs -->\n <mt-toggle-field\n toggleShape=\"card\"\n [label]=\"t('edit-label')\"\n [descriptionCard]=\"t('edit-label-description')\"\n icon=\"general.translate-01\"\n [formControl]=\"editLabelControl\"\n >\n <ng-template #toggleCardBottom>\n @if (editLabelControl.value) {\n <div class=\"mt-3 grid gap-3\">\n <mt-text-field\n [label]=\"t('label-en')\"\n [formControl]=\"labelEnControl\"\n ></mt-text-field>\n <mt-text-field\n [label]=\"t('label-ar')\"\n [formControl]=\"labelArControl\"\n ></mt-text-field>\n </div>\n }\n </ng-template>\n </mt-toggle-field>\n\n <!-- Show/Hide Toggle with Set Conditions -->\n <mt-toggle-field\n toggleShape=\"card\"\n [label]=\"t('show-hide')\"\n [descriptionCard]=\"t('show-hide-description')\"\n icon=\"general.eye\"\n [formControl]=\"showHideControl\"\n class=\"mt-3\"\n >\n <ng-template #toggleCardBottom>\n @if (showHideControl.value) {\n <div class=\"mt-3\">\n <mt-button\n [label]=\"t('set-conditions')\"\n size=\"small\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onSetConditions()\"\n ></mt-button>\n </div>\n }\n </ng-template>\n </mt-toggle-field>\n }\n </div>\n </div>\n\n <div\n [class]=\"[\n modalService.footerClass,\n '!h-auto',\n 'min-h-0',\n 'flex-col',\n 'gap-2',\n 'sm:flex-row',\n 'sm:items-center',\n 'sm:justify-end',\n ]\"\n >\n @if (initialData() && !isManageProperties()) {\n <mt-button\n [tooltip]=\"t('delete')\"\n severity=\"danger\"\n [variant]=\"'outlined'\"\n icon=\"general.trash-01\"\n [loading]=\"deleting()\"\n [disabled]=\"submitting()\"\n (onClick)=\"onDelete($event)\"\n class=\"self-start sm:me-auto\"\n ></mt-button>\n }\n <mt-button\n [label]=\"t('cancel')\"\n variant=\"outlined\"\n [disabled]=\"submitting() || deleting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onCancel()\"\n >\n </mt-button>\n <mt-button\n [disabled]=\"!formControl.valid || deleting()\"\n [label]=\"t('save')\"\n severity=\"primary\"\n [loading]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onSave()\"\n >\n </mt-button>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }] });
|
|
2087
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBFieldForm, isStandalone: true, selector: "mt-fb-field-form", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n <div\r\n [class]=\"[\r\n modalService.contentClass,\r\n 'min-w-0',\r\n 'p-4',\r\n 'overflow-y-hidden!',\r\n 'max-[640px]:p-3',\r\n ]\"\r\n >\r\n <div class=\"mt-2 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\r\n @if (workflowNoteKey(); as noteKey) {\r\n <div\r\n class=\"flex items-start gap-2 rounded-md border border-primary-200 bg-primary-50 p-3 text-sm text-primary-700\"\r\n role=\"note\"\r\n >\r\n <mt-icon icon=\"general.info-circle\" class=\"mt-0.5 shrink-0\" />\r\n <span>{{ t(noteKey) }}</span>\r\n </div>\r\n }\r\n\r\n <mt-dynamic-form\r\n [formConfig]=\"activeFormConfig()\"\r\n [formControl]=\"formControl\"\r\n [forcedDisabledFieldKeys]=\"workflowLockedFormKeys()\"\r\n >\r\n </mt-dynamic-form>\r\n\r\n @if (!isLocalFields()) {\r\n <!-- isRead Toggle -->\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('is-read')\"\r\n [descriptionCard]=\"t('is-read-description')\"\r\n icon=\"general.eye\"\r\n [readonly]=\"isWorkflowManaged()\"\r\n [formControl]=\"isReadControl\"\r\n ></mt-toggle-field>\r\n\r\n <!-- isWrite Toggle -->\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('is-write')\"\r\n [descriptionCard]=\"t('is-write-description')\"\r\n icon=\"general.edit-02\"\r\n [readonly]=\"isWorkflowManaged()\"\r\n [formControl]=\"isWriteControl\"\r\n ></mt-toggle-field>\r\n }\r\n\r\n @if (!isManageProperties() && !isLocalFields()) {\r\n <!-- Edit Label Toggle with localized label inputs -->\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('edit-label')\"\r\n [descriptionCard]=\"t('edit-label-description')\"\r\n icon=\"general.translate-01\"\r\n [formControl]=\"editLabelControl\"\r\n >\r\n <ng-template #toggleCardBottom>\r\n @if (editLabelControl.value) {\r\n <div class=\"mt-3 grid gap-3\">\r\n <mt-text-field\r\n [label]=\"t('label-en')\"\r\n [formControl]=\"labelEnControl\"\r\n ></mt-text-field>\r\n <mt-text-field\r\n [label]=\"t('label-ar')\"\r\n [formControl]=\"labelArControl\"\r\n ></mt-text-field>\r\n </div>\r\n }\r\n </ng-template>\r\n </mt-toggle-field>\r\n\r\n <!-- Show/Hide Toggle with Set Conditions -->\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('show-hide')\"\r\n [descriptionCard]=\"t('show-hide-description')\"\r\n icon=\"general.eye\"\r\n [formControl]=\"showHideControl\"\r\n class=\"mt-3\"\r\n >\r\n <ng-template #toggleCardBottom>\r\n @if (showHideControl.value) {\r\n <div class=\"mt-3\">\r\n <mt-button\r\n [label]=\"t('set-conditions')\"\r\n size=\"small\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"onSetConditions()\"\r\n ></mt-button>\r\n </div>\r\n }\r\n </ng-template>\r\n </mt-toggle-field>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div\r\n [class]=\"[\r\n modalService.footerClass,\r\n '!h-auto',\r\n 'min-h-0',\r\n 'flex-col',\r\n 'gap-2',\r\n 'sm:flex-row',\r\n 'sm:items-center',\r\n 'sm:justify-end',\r\n ]\"\r\n >\r\n @if (initialData() && !isManageProperties()) {\r\n <mt-button\r\n [tooltip]=\"t('delete')\"\r\n severity=\"danger\"\r\n [variant]=\"'outlined'\"\r\n icon=\"general.trash-01\"\r\n [loading]=\"deleting()\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"onDelete($event)\"\r\n class=\"self-start sm:me-auto\"\r\n ></mt-button>\r\n }\r\n <mt-button\r\n [label]=\"t('cancel')\"\r\n variant=\"outlined\"\r\n [disabled]=\"submitting() || deleting()\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"onCancel()\"\r\n >\r\n </mt-button>\r\n <mt-button\r\n [disabled]=\"!formControl.valid || deleting()\"\r\n [label]=\"t('save')\"\r\n severity=\"primary\"\r\n [loading]=\"submitting()\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"onSave()\"\r\n >\r\n </mt-button>\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
|
|
2022
2088
|
}
|
|
2023
2089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldForm, decorators: [{
|
|
2024
2090
|
type: Component,
|
|
@@ -2029,7 +2095,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
2029
2095
|
Button,
|
|
2030
2096
|
ToggleField,
|
|
2031
2097
|
TextField,
|
|
2032
|
-
|
|
2098
|
+
Icon,
|
|
2099
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n <div\r\n [class]=\"[\r\n modalService.contentClass,\r\n 'min-w-0',\r\n 'p-4',\r\n 'overflow-y-hidden!',\r\n 'max-[640px]:p-3',\r\n ]\"\r\n >\r\n <div class=\"mt-2 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\r\n @if (workflowNoteKey(); as noteKey) {\r\n <div\r\n class=\"flex items-start gap-2 rounded-md border border-primary-200 bg-primary-50 p-3 text-sm text-primary-700\"\r\n role=\"note\"\r\n >\r\n <mt-icon icon=\"general.info-circle\" class=\"mt-0.5 shrink-0\" />\r\n <span>{{ t(noteKey) }}</span>\r\n </div>\r\n }\r\n\r\n <mt-dynamic-form\r\n [formConfig]=\"activeFormConfig()\"\r\n [formControl]=\"formControl\"\r\n [forcedDisabledFieldKeys]=\"workflowLockedFormKeys()\"\r\n >\r\n </mt-dynamic-form>\r\n\r\n @if (!isLocalFields()) {\r\n <!-- isRead Toggle -->\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('is-read')\"\r\n [descriptionCard]=\"t('is-read-description')\"\r\n icon=\"general.eye\"\r\n [readonly]=\"isWorkflowManaged()\"\r\n [formControl]=\"isReadControl\"\r\n ></mt-toggle-field>\r\n\r\n <!-- isWrite Toggle -->\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('is-write')\"\r\n [descriptionCard]=\"t('is-write-description')\"\r\n icon=\"general.edit-02\"\r\n [readonly]=\"isWorkflowManaged()\"\r\n [formControl]=\"isWriteControl\"\r\n ></mt-toggle-field>\r\n }\r\n\r\n @if (!isManageProperties() && !isLocalFields()) {\r\n <!-- Edit Label Toggle with localized label inputs -->\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('edit-label')\"\r\n [descriptionCard]=\"t('edit-label-description')\"\r\n icon=\"general.translate-01\"\r\n [formControl]=\"editLabelControl\"\r\n >\r\n <ng-template #toggleCardBottom>\r\n @if (editLabelControl.value) {\r\n <div class=\"mt-3 grid gap-3\">\r\n <mt-text-field\r\n [label]=\"t('label-en')\"\r\n [formControl]=\"labelEnControl\"\r\n ></mt-text-field>\r\n <mt-text-field\r\n [label]=\"t('label-ar')\"\r\n [formControl]=\"labelArControl\"\r\n ></mt-text-field>\r\n </div>\r\n }\r\n </ng-template>\r\n </mt-toggle-field>\r\n\r\n <!-- Show/Hide Toggle with Set Conditions -->\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('show-hide')\"\r\n [descriptionCard]=\"t('show-hide-description')\"\r\n icon=\"general.eye\"\r\n [formControl]=\"showHideControl\"\r\n class=\"mt-3\"\r\n >\r\n <ng-template #toggleCardBottom>\r\n @if (showHideControl.value) {\r\n <div class=\"mt-3\">\r\n <mt-button\r\n [label]=\"t('set-conditions')\"\r\n size=\"small\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"onSetConditions()\"\r\n ></mt-button>\r\n </div>\r\n }\r\n </ng-template>\r\n </mt-toggle-field>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div\r\n [class]=\"[\r\n modalService.footerClass,\r\n '!h-auto',\r\n 'min-h-0',\r\n 'flex-col',\r\n 'gap-2',\r\n 'sm:flex-row',\r\n 'sm:items-center',\r\n 'sm:justify-end',\r\n ]\"\r\n >\r\n @if (initialData() && !isManageProperties()) {\r\n <mt-button\r\n [tooltip]=\"t('delete')\"\r\n severity=\"danger\"\r\n [variant]=\"'outlined'\"\r\n icon=\"general.trash-01\"\r\n [loading]=\"deleting()\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"onDelete($event)\"\r\n class=\"self-start sm:me-auto\"\r\n ></mt-button>\r\n }\r\n <mt-button\r\n [label]=\"t('cancel')\"\r\n variant=\"outlined\"\r\n [disabled]=\"submitting() || deleting()\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"onCancel()\"\r\n >\r\n </mt-button>\r\n <mt-button\r\n [disabled]=\"!formControl.valid || deleting()\"\r\n [label]=\"t('save')\"\r\n severity=\"primary\"\r\n [loading]=\"submitting()\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"onSave()\"\r\n >\r\n </mt-button>\r\n </div>\r\n</ng-container>\r\n" }]
|
|
2033
2100
|
}], ctorParameters: () => [], propDecorators: { sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionId", required: false }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], allSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSections", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
2034
2101
|
|
|
2035
2102
|
const hasNonWhitespaceValue = (value) => {
|
|
@@ -2401,7 +2468,7 @@ class FBSection {
|
|
|
2401
2468
|
return base;
|
|
2402
2469
|
}
|
|
2403
2470
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBSection, isStandalone: true, selector: "mt-fb-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, sectionsCount: { classPropertyName: "sectionsCount", publicName: "sectionsCount", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, connectedDropLists: { classPropertyName: "connectedDropLists", publicName: "connectedDropLists", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFieldDrop: "onFieldDrop" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div class=\"flex flex-col\">\n <div\n cdkDragHandle\n [class]=\"\n 'flex items-center justify-between gap-3 rounded-xl bg-primary px-3 py-3 text-primary-contrast' +\n (isBuilder() ? ' cursor-grab active:cursor-grabbing' : '')\n \"\n >\n <div class=\"flex min-w-0 items-center gap-3\">\n <mt-icon\n class=\"shrink-0 cursor-pointer text-2xl transition-[rotate]\"\n [class.rotate-180]=\"expanded()\"\n icon=\"arrow.chevron-down\"\n (click)=\"toggleExpanded()\"\n ></mt-icon>\n\n <span class=\"truncate font-semibold\">\n {{ sectionName() }}\n </span>\n @if (isBuilder()) {\n <mt-icon\n class=\"text-lg cursor-pointer\"\n icon=\"general.edit-02\"\n (click)=\"editSection($event)\"\n [mtTooltip]=\"t('edit-section')\"\n ></mt-icon>\n }\n </div>\n <span></span>\n </div>\n @if (expanded()) {\n <div\n cdkDropList\n [id]=\"section().id\"\n cdkDropListOrientation=\"mixed\"\n [cdkDropListData]=\"displayFields()\"\n [cdkDropListConnectedTo]=\"connectedDropLists()\"\n [cdkDropListDisabled]=\"isManageProperties()\"\n [cdkDropListEnterPredicate]=\"fieldsDropPredicate\"\n (cdkDropListDropped)=\"onDrop($event)\"\n class=\"grid grid-cols-12 gap-4 relative py-2\"\n [class.min-h-27]=\"displayFields().length === 0\"\n >\n @for (field of displayFields(); track field.id) {\n <div\n cdkDrag\n [cdkDragData]=\"field\"\n [cdkDragDisabled]=\"\n isManageProperties() || field._pending || field._deleting\n \"\n [class]=\"\n getFieldColSpan(field) +\n (isManageProperties()\n ? ''\n : ' cursor-grab active:cursor-grabbing')\n \"\n >\n <div\n *cdkDragPlaceholder\n [class]=\"\n 'h-full min-h-27 bg-black/10 rounded-lg ' +\n getFieldColSpan(field)\n \"\n ></div>\n @if (field._pending) {\n <!-- Skeleton for pending field -->\n <mt-card class=\"h-full animate-pulse\">\n <div class=\"flex flex-col gap-3 sm:flex-row\">\n <div class=\"flex-1 space-y-3\">\n <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\n <div class=\"h-10 bg-surface-200 rounded\"></div>\n </div>\n <div class=\"flex shrink-0 flex-row gap-1 sm:flex-col\">\n <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\n <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\n </div>\n </div>\n </mt-card>\n } @else {\n <mt-card\n class=\"h-full relative transition-all duration-200\"\n [class.opacity-50]=\"field._deleting\"\n >\n @if (field._deleting) {\n <div\n class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\n >\n <div\n class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\n ></div>\n </div>\n }\n <div class=\"flex flex-col gap-3 sm:flex-row\">\n <div class=\"min-w-0 flex-1\">\n <form [formGroup]=\"getFormGroup(field)\">\n <!--\n Connection fields label every source dropdown with its\n own name, so the field name here would just repeat the\n connection's label above them.\n -->\n @if (\n !isConnectionField(field) ||\n isManageProperties() ||\n isLocalFields()\n ) {\n <div\n class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\n >\n @if (!isConnectionField(field)) {\n <div class=\"min-w-0 break-words font-semibold\">\n {{ field.name }}\n </div>\n }\n @if (isLocalFields() && field.isRequired) {\n <span\n class=\"rounded-md bg-red-50 px-1.5 py-0.5 text-xs font-medium text-red-600 sm:ms-auto\"\n >\n {{ t(\"is-required\") }}\n </span>\n }\n @if (isManageProperties()) {\n <div\n class=\"flex flex-wrap items-center gap-1.5 sm:ms-auto\"\n >\n @if (field.isRead === false) {\n <span\n class=\"text-xs font-medium text-red-500 bg-red-50 px-1.5 py-0.5 rounded\"\n >\n {{ t(\"hidden\") }}\n </span>\n } @else if (field.isWrite === false) {\n <span\n class=\"text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded\"\n >\n {{ t(\"read-only\") }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n <div\n class=\"transition-all duration-200\"\n [class.opacity-40]=\"\n isManageProperties() && field.isRead === false\n \"\n [class.blur-[1px]]=\"\n isManageProperties() && field.isRead === false\n \"\n >\n @if (isTranslatableTextField(field)) {\n <div class=\"grid grid-cols-12 gap-3\">\n @for (\n control of getTranslatableFieldControls(field);\n track control.key\n ) {\n <div\n [class]=\"\n getTranslatableFieldControlColSpan(field)\n \"\n >\n <mt-dynamic-field\n [fieldName]=\"control.key\"\n [fieldConfig]=\"control.config\"\n />\n </div>\n }\n </div>\n } @else {\n <mt-dynamic-field\n [fieldName]=\"field.name\"\n [fieldConfig]=\"getFieldConfig(field)\"\n />\n }\n </div>\n </form>\n </div>\n <div\n class=\"flex shrink-0 flex-row gap-1 self-end sm:flex-col sm:self-start\"\n >\n <mt-button\n size=\"small\"\n icon=\"general.settings-01\"\n [tooltip]=\"t('edit-field')\"\n [variant]=\"'outlined'\"\n [disabled]=\"field._deleting\"\n (onClick)=\"editField(field)\"\n ></mt-button>\n @if (!isManageProperties()) {\n <mt-button\n size=\"small\"\n icon=\"general.trash-01\"\n severity=\"danger\"\n [variant]=\"'outlined'\"\n [tooltip]=\"t('remove-field')\"\n [disabled]=\"field._deleting\"\n (onClick)=\"removeField($event, field)\"\n ></mt-button>\n }\n </div>\n </div>\n </mt-card>\n }\n </div>\n } @empty {\n <mt-card class=\"absolute inset-0 top-4\" paddingless>\n <div class=\"size-full p-4\">\n <div\n class=\"flex h-full items-center justify-center gap-4 rounded-xl border-1 border-primary bg-primary-50 px-4 text-center text-primary\"\n >\n <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\n <span>{{ t(\"drag-from-the-side\") }}</span>\n </div>\n </div>\n </mt-card>\n }\n </div>\n }\n </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicField, selector: "mt-dynamic-field", inputs: ["fieldConfig", "fieldName"] }, { 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
|
|
2471
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBSection, isStandalone: true, selector: "mt-fb-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, sectionsCount: { classPropertyName: "sectionsCount", publicName: "sectionsCount", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, connectedDropLists: { classPropertyName: "connectedDropLists", publicName: "connectedDropLists", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFieldDrop: "onFieldDrop" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n <div class=\"flex flex-col\">\r\n <div\r\n cdkDragHandle\r\n [class]=\"\r\n 'flex items-center justify-between gap-3 rounded-xl bg-primary px-3 py-3 text-primary-contrast' +\r\n (isBuilder() ? ' cursor-grab active:cursor-grabbing' : '')\r\n \"\r\n >\r\n <div class=\"flex min-w-0 items-center gap-3\">\r\n <mt-icon\r\n class=\"shrink-0 cursor-pointer text-2xl transition-[rotate]\"\r\n [class.rotate-180]=\"expanded()\"\r\n icon=\"arrow.chevron-down\"\r\n (click)=\"toggleExpanded()\"\r\n ></mt-icon>\r\n\r\n <span class=\"truncate font-semibold\">\r\n {{ sectionName() }}\r\n </span>\r\n @if (isBuilder()) {\r\n <mt-icon\r\n class=\"text-lg cursor-pointer\"\r\n icon=\"general.edit-02\"\r\n (click)=\"editSection($event)\"\r\n [mtTooltip]=\"t('edit-section')\"\r\n ></mt-icon>\r\n }\r\n </div>\r\n <span></span>\r\n </div>\r\n @if (expanded()) {\r\n <div\r\n cdkDropList\r\n [id]=\"section().id\"\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"displayFields()\"\r\n [cdkDropListConnectedTo]=\"connectedDropLists()\"\r\n [cdkDropListDisabled]=\"isManageProperties()\"\r\n [cdkDropListEnterPredicate]=\"fieldsDropPredicate\"\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n class=\"grid grid-cols-12 gap-4 relative py-2\"\r\n [class.min-h-27]=\"displayFields().length === 0\"\r\n >\r\n @for (field of displayFields(); track field.id) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"field\"\r\n [cdkDragDisabled]=\"\r\n isManageProperties() || field._pending || field._deleting\r\n \"\r\n [class]=\"\r\n getFieldColSpan(field) +\r\n (isManageProperties()\r\n ? ''\r\n : ' cursor-grab active:cursor-grabbing')\r\n \"\r\n >\r\n <div\r\n *cdkDragPlaceholder\r\n [class]=\"\r\n 'h-full min-h-27 bg-black/10 rounded-lg ' +\r\n getFieldColSpan(field)\r\n \"\r\n ></div>\r\n @if (field._pending) {\r\n <!-- Skeleton for pending field -->\r\n <mt-card class=\"h-full animate-pulse\">\r\n <div class=\"flex flex-col gap-3 sm:flex-row\">\r\n <div class=\"flex-1 space-y-3\">\r\n <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\r\n <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n </div>\r\n <div class=\"flex shrink-0 flex-row gap-1 sm:flex-col\">\r\n <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n </div>\r\n </div>\r\n </mt-card>\r\n } @else {\r\n <mt-card\r\n class=\"h-full relative transition-all duration-200\"\r\n [class.opacity-50]=\"field._deleting\"\r\n >\r\n @if (field._deleting) {\r\n <div\r\n class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\r\n >\r\n <div\r\n class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\r\n ></div>\r\n </div>\r\n }\r\n <div class=\"flex flex-col gap-3 sm:flex-row\">\r\n <div class=\"min-w-0 flex-1\">\r\n <form [formGroup]=\"getFormGroup(field)\">\r\n <!--\r\n Connection fields label every source dropdown with its\r\n own name, so the field name here would just repeat the\r\n connection's label above them.\r\n -->\r\n @if (\r\n !isConnectionField(field) ||\r\n isManageProperties() ||\r\n isLocalFields()\r\n ) {\r\n <div\r\n class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\r\n >\r\n @if (!isConnectionField(field)) {\r\n <div class=\"min-w-0 break-words font-semibold\">\r\n {{ field.name }}\r\n </div>\r\n }\r\n @if (isLocalFields() && field.isRequired) {\r\n <span\r\n class=\"rounded-md bg-red-50 px-1.5 py-0.5 text-xs font-medium text-red-600 sm:ms-auto\"\r\n >\r\n {{ t(\"is-required\") }}\r\n </span>\r\n }\r\n @if (isManageProperties()) {\r\n <div\r\n class=\"flex flex-wrap items-center gap-1.5 sm:ms-auto\"\r\n >\r\n @if (field.isRead === false) {\r\n <span\r\n class=\"text-xs font-medium text-red-500 bg-red-50 px-1.5 py-0.5 rounded\"\r\n >\r\n {{ t(\"hidden\") }}\r\n </span>\r\n } @else if (field.isWrite === false) {\r\n <span\r\n class=\"text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded\"\r\n >\r\n {{ t(\"read-only\") }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"transition-all duration-200\"\r\n [class.opacity-40]=\"\r\n isManageProperties() && field.isRead === false\r\n \"\r\n [class.blur-[1px]]=\"\r\n isManageProperties() && field.isRead === false\r\n \"\r\n >\r\n @if (isTranslatableTextField(field)) {\r\n <div class=\"grid grid-cols-12 gap-3\">\r\n @for (\r\n control of getTranslatableFieldControls(field);\r\n track control.key\r\n ) {\r\n <div\r\n [class]=\"\r\n getTranslatableFieldControlColSpan(field)\r\n \"\r\n >\r\n <mt-dynamic-field\r\n [fieldName]=\"control.key\"\r\n [fieldConfig]=\"control.config\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <mt-dynamic-field\r\n [fieldName]=\"field.name\"\r\n [fieldConfig]=\"getFieldConfig(field)\"\r\n />\r\n }\r\n </div>\r\n </form>\r\n </div>\r\n <div\r\n class=\"flex shrink-0 flex-row gap-1 self-end sm:flex-col sm:self-start\"\r\n >\r\n <mt-button\r\n size=\"small\"\r\n icon=\"general.settings-01\"\r\n [tooltip]=\"t('edit-field')\"\r\n [variant]=\"'outlined'\"\r\n [disabled]=\"field._deleting\"\r\n (onClick)=\"editField(field)\"\r\n ></mt-button>\r\n @if (!isManageProperties()) {\r\n <mt-button\r\n size=\"small\"\r\n icon=\"general.trash-01\"\r\n severity=\"danger\"\r\n [variant]=\"'outlined'\"\r\n [tooltip]=\"t('remove-field')\"\r\n [disabled]=\"field._deleting\"\r\n (onClick)=\"removeField($event, field)\"\r\n ></mt-button>\r\n }\r\n </div>\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n } @empty {\r\n <mt-card class=\"absolute inset-0 top-4\" paddingless>\r\n <div class=\"size-full p-4\">\r\n <div\r\n class=\"flex h-full items-center justify-center gap-4 rounded-xl border-1 border-primary bg-primary-50 px-4 text-center text-primary\"\r\n >\r\n <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\r\n <span>{{ t(\"drag-from-the-side\") }}</span>\r\n </div>\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicField, selector: "mt-dynamic-field", inputs: ["fieldConfig", "fieldName"] }, { 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
|
|
2405
2472
|
}
|
|
2406
2473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBSection, decorators: [{
|
|
2407
2474
|
type: Component,
|
|
@@ -2417,7 +2484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
2417
2484
|
DynamicField,
|
|
2418
2485
|
ReactiveFormsModule,
|
|
2419
2486
|
Tooltip,
|
|
2420
|
-
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div class=\"flex flex-col\">\n <div\n cdkDragHandle\n [class]=\"\n 'flex items-center justify-between gap-3 rounded-xl bg-primary px-3 py-3 text-primary-contrast' +\n (isBuilder() ? ' cursor-grab active:cursor-grabbing' : '')\n \"\n >\n <div class=\"flex min-w-0 items-center gap-3\">\n <mt-icon\n class=\"shrink-0 cursor-pointer text-2xl transition-[rotate]\"\n [class.rotate-180]=\"expanded()\"\n icon=\"arrow.chevron-down\"\n (click)=\"toggleExpanded()\"\n ></mt-icon>\n\n <span class=\"truncate font-semibold\">\n {{ sectionName() }}\n </span>\n @if (isBuilder()) {\n <mt-icon\n class=\"text-lg cursor-pointer\"\n icon=\"general.edit-02\"\n (click)=\"editSection($event)\"\n [mtTooltip]=\"t('edit-section')\"\n ></mt-icon>\n }\n </div>\n <span></span>\n </div>\n @if (expanded()) {\n <div\n cdkDropList\n [id]=\"section().id\"\n cdkDropListOrientation=\"mixed\"\n [cdkDropListData]=\"displayFields()\"\n [cdkDropListConnectedTo]=\"connectedDropLists()\"\n [cdkDropListDisabled]=\"isManageProperties()\"\n [cdkDropListEnterPredicate]=\"fieldsDropPredicate\"\n (cdkDropListDropped)=\"onDrop($event)\"\n class=\"grid grid-cols-12 gap-4 relative py-2\"\n [class.min-h-27]=\"displayFields().length === 0\"\n >\n @for (field of displayFields(); track field.id) {\n <div\n cdkDrag\n [cdkDragData]=\"field\"\n [cdkDragDisabled]=\"\n isManageProperties() || field._pending || field._deleting\n \"\n [class]=\"\n getFieldColSpan(field) +\n (isManageProperties()\n ? ''\n : ' cursor-grab active:cursor-grabbing')\n \"\n >\n <div\n *cdkDragPlaceholder\n [class]=\"\n 'h-full min-h-27 bg-black/10 rounded-lg ' +\n getFieldColSpan(field)\n \"\n ></div>\n @if (field._pending) {\n <!-- Skeleton for pending field -->\n <mt-card class=\"h-full animate-pulse\">\n <div class=\"flex flex-col gap-3 sm:flex-row\">\n <div class=\"flex-1 space-y-3\">\n <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\n <div class=\"h-10 bg-surface-200 rounded\"></div>\n </div>\n <div class=\"flex shrink-0 flex-row gap-1 sm:flex-col\">\n <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\n <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\n </div>\n </div>\n </mt-card>\n } @else {\n <mt-card\n class=\"h-full relative transition-all duration-200\"\n [class.opacity-50]=\"field._deleting\"\n >\n @if (field._deleting) {\n <div\n class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\n >\n <div\n class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\n ></div>\n </div>\n }\n <div class=\"flex flex-col gap-3 sm:flex-row\">\n <div class=\"min-w-0 flex-1\">\n <form [formGroup]=\"getFormGroup(field)\">\n <!--\n Connection fields label every source dropdown with its\n own name, so the field name here would just repeat the\n connection's label above them.\n -->\n @if (\n !isConnectionField(field) ||\n isManageProperties() ||\n isLocalFields()\n ) {\n <div\n class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\n >\n @if (!isConnectionField(field)) {\n <div class=\"min-w-0 break-words font-semibold\">\n {{ field.name }}\n </div>\n }\n @if (isLocalFields() && field.isRequired) {\n <span\n class=\"rounded-md bg-red-50 px-1.5 py-0.5 text-xs font-medium text-red-600 sm:ms-auto\"\n >\n {{ t(\"is-required\") }}\n </span>\n }\n @if (isManageProperties()) {\n <div\n class=\"flex flex-wrap items-center gap-1.5 sm:ms-auto\"\n >\n @if (field.isRead === false) {\n <span\n class=\"text-xs font-medium text-red-500 bg-red-50 px-1.5 py-0.5 rounded\"\n >\n {{ t(\"hidden\") }}\n </span>\n } @else if (field.isWrite === false) {\n <span\n class=\"text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded\"\n >\n {{ t(\"read-only\") }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n <div\n class=\"transition-all duration-200\"\n [class.opacity-40]=\"\n isManageProperties() && field.isRead === false\n \"\n [class.blur-[1px]]=\"\n isManageProperties() && field.isRead === false\n \"\n >\n @if (isTranslatableTextField(field)) {\n <div class=\"grid grid-cols-12 gap-3\">\n @for (\n control of getTranslatableFieldControls(field);\n track control.key\n ) {\n <div\n [class]=\"\n getTranslatableFieldControlColSpan(field)\n \"\n >\n <mt-dynamic-field\n [fieldName]=\"control.key\"\n [fieldConfig]=\"control.config\"\n />\n </div>\n }\n </div>\n } @else {\n <mt-dynamic-field\n [fieldName]=\"field.name\"\n [fieldConfig]=\"getFieldConfig(field)\"\n />\n }\n </div>\n </form>\n </div>\n <div\n class=\"flex shrink-0 flex-row gap-1 self-end sm:flex-col sm:self-start\"\n >\n <mt-button\n size=\"small\"\n icon=\"general.settings-01\"\n [tooltip]=\"t('edit-field')\"\n [variant]=\"'outlined'\"\n [disabled]=\"field._deleting\"\n (onClick)=\"editField(field)\"\n ></mt-button>\n @if (!isManageProperties()) {\n <mt-button\n size=\"small\"\n icon=\"general.trash-01\"\n severity=\"danger\"\n [variant]=\"'outlined'\"\n [tooltip]=\"t('remove-field')\"\n [disabled]=\"field._deleting\"\n (onClick)=\"removeField($event, field)\"\n ></mt-button>\n }\n </div>\n </div>\n </mt-card>\n }\n </div>\n } @empty {\n <mt-card class=\"absolute inset-0 top-4\" paddingless>\n <div class=\"size-full p-4\">\n <div\n class=\"flex h-full items-center justify-center gap-4 rounded-xl border-1 border-primary bg-primary-50 px-4 text-center text-primary\"\n >\n <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\n <span>{{ t(\"drag-from-the-side\") }}</span>\n </div>\n </div>\n </mt-card>\n }\n </div>\n }\n </div>\n</ng-container>\n" }]
|
|
2487
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n <div class=\"flex flex-col\">\r\n <div\r\n cdkDragHandle\r\n [class]=\"\r\n 'flex items-center justify-between gap-3 rounded-xl bg-primary px-3 py-3 text-primary-contrast' +\r\n (isBuilder() ? ' cursor-grab active:cursor-grabbing' : '')\r\n \"\r\n >\r\n <div class=\"flex min-w-0 items-center gap-3\">\r\n <mt-icon\r\n class=\"shrink-0 cursor-pointer text-2xl transition-[rotate]\"\r\n [class.rotate-180]=\"expanded()\"\r\n icon=\"arrow.chevron-down\"\r\n (click)=\"toggleExpanded()\"\r\n ></mt-icon>\r\n\r\n <span class=\"truncate font-semibold\">\r\n {{ sectionName() }}\r\n </span>\r\n @if (isBuilder()) {\r\n <mt-icon\r\n class=\"text-lg cursor-pointer\"\r\n icon=\"general.edit-02\"\r\n (click)=\"editSection($event)\"\r\n [mtTooltip]=\"t('edit-section')\"\r\n ></mt-icon>\r\n }\r\n </div>\r\n <span></span>\r\n </div>\r\n @if (expanded()) {\r\n <div\r\n cdkDropList\r\n [id]=\"section().id\"\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"displayFields()\"\r\n [cdkDropListConnectedTo]=\"connectedDropLists()\"\r\n [cdkDropListDisabled]=\"isManageProperties()\"\r\n [cdkDropListEnterPredicate]=\"fieldsDropPredicate\"\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n class=\"grid grid-cols-12 gap-4 relative py-2\"\r\n [class.min-h-27]=\"displayFields().length === 0\"\r\n >\r\n @for (field of displayFields(); track field.id) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"field\"\r\n [cdkDragDisabled]=\"\r\n isManageProperties() || field._pending || field._deleting\r\n \"\r\n [class]=\"\r\n getFieldColSpan(field) +\r\n (isManageProperties()\r\n ? ''\r\n : ' cursor-grab active:cursor-grabbing')\r\n \"\r\n >\r\n <div\r\n *cdkDragPlaceholder\r\n [class]=\"\r\n 'h-full min-h-27 bg-black/10 rounded-lg ' +\r\n getFieldColSpan(field)\r\n \"\r\n ></div>\r\n @if (field._pending) {\r\n <!-- Skeleton for pending field -->\r\n <mt-card class=\"h-full animate-pulse\">\r\n <div class=\"flex flex-col gap-3 sm:flex-row\">\r\n <div class=\"flex-1 space-y-3\">\r\n <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\r\n <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n </div>\r\n <div class=\"flex shrink-0 flex-row gap-1 sm:flex-col\">\r\n <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n </div>\r\n </div>\r\n </mt-card>\r\n } @else {\r\n <mt-card\r\n class=\"h-full relative transition-all duration-200\"\r\n [class.opacity-50]=\"field._deleting\"\r\n >\r\n @if (field._deleting) {\r\n <div\r\n class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\r\n >\r\n <div\r\n class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\r\n ></div>\r\n </div>\r\n }\r\n <div class=\"flex flex-col gap-3 sm:flex-row\">\r\n <div class=\"min-w-0 flex-1\">\r\n <form [formGroup]=\"getFormGroup(field)\">\r\n <!--\r\n Connection fields label every source dropdown with its\r\n own name, so the field name here would just repeat the\r\n connection's label above them.\r\n -->\r\n @if (\r\n !isConnectionField(field) ||\r\n isManageProperties() ||\r\n isLocalFields()\r\n ) {\r\n <div\r\n class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\r\n >\r\n @if (!isConnectionField(field)) {\r\n <div class=\"min-w-0 break-words font-semibold\">\r\n {{ field.name }}\r\n </div>\r\n }\r\n @if (isLocalFields() && field.isRequired) {\r\n <span\r\n class=\"rounded-md bg-red-50 px-1.5 py-0.5 text-xs font-medium text-red-600 sm:ms-auto\"\r\n >\r\n {{ t(\"is-required\") }}\r\n </span>\r\n }\r\n @if (isManageProperties()) {\r\n <div\r\n class=\"flex flex-wrap items-center gap-1.5 sm:ms-auto\"\r\n >\r\n @if (field.isRead === false) {\r\n <span\r\n class=\"text-xs font-medium text-red-500 bg-red-50 px-1.5 py-0.5 rounded\"\r\n >\r\n {{ t(\"hidden\") }}\r\n </span>\r\n } @else if (field.isWrite === false) {\r\n <span\r\n class=\"text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded\"\r\n >\r\n {{ t(\"read-only\") }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"transition-all duration-200\"\r\n [class.opacity-40]=\"\r\n isManageProperties() && field.isRead === false\r\n \"\r\n [class.blur-[1px]]=\"\r\n isManageProperties() && field.isRead === false\r\n \"\r\n >\r\n @if (isTranslatableTextField(field)) {\r\n <div class=\"grid grid-cols-12 gap-3\">\r\n @for (\r\n control of getTranslatableFieldControls(field);\r\n track control.key\r\n ) {\r\n <div\r\n [class]=\"\r\n getTranslatableFieldControlColSpan(field)\r\n \"\r\n >\r\n <mt-dynamic-field\r\n [fieldName]=\"control.key\"\r\n [fieldConfig]=\"control.config\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <mt-dynamic-field\r\n [fieldName]=\"field.name\"\r\n [fieldConfig]=\"getFieldConfig(field)\"\r\n />\r\n }\r\n </div>\r\n </form>\r\n </div>\r\n <div\r\n class=\"flex shrink-0 flex-row gap-1 self-end sm:flex-col sm:self-start\"\r\n >\r\n <mt-button\r\n size=\"small\"\r\n icon=\"general.settings-01\"\r\n [tooltip]=\"t('edit-field')\"\r\n [variant]=\"'outlined'\"\r\n [disabled]=\"field._deleting\"\r\n (onClick)=\"editField(field)\"\r\n ></mt-button>\r\n @if (!isManageProperties()) {\r\n <mt-button\r\n size=\"small\"\r\n icon=\"general.trash-01\"\r\n severity=\"danger\"\r\n [variant]=\"'outlined'\"\r\n [tooltip]=\"t('remove-field')\"\r\n [disabled]=\"field._deleting\"\r\n (onClick)=\"removeField($event, field)\"\r\n ></mt-button>\r\n }\r\n </div>\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n } @empty {\r\n <mt-card class=\"absolute inset-0 top-4\" paddingless>\r\n <div class=\"size-full p-4\">\r\n <div\r\n class=\"flex h-full items-center justify-center gap-4 rounded-xl border-1 border-primary bg-primary-50 px-4 text-center text-primary\"\r\n >\r\n <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\r\n <span>{{ t(\"drag-from-the-side\") }}</span>\r\n </div>\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ng-container>\r\n" }]
|
|
2421
2488
|
}], ctorParameters: () => [], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], sectionsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsCount", required: false }] }], allSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSections", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], connectedDropLists: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedDropLists", required: false }] }], onFieldDrop: [{ type: i0.Output, args: ["onFieldDrop"] }] } });
|
|
2422
2489
|
|
|
2423
2490
|
class FBPreviewForm {
|
|
@@ -2486,7 +2553,7 @@ class FBPreviewForm {
|
|
|
2486
2553
|
this.ref.close();
|
|
2487
2554
|
}
|
|
2488
2555
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBPreviewForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBPreviewForm, isStandalone: true, selector: "mt-fb-preview-form", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n <div\r\n [class]=\"[\r\n modalService.contentClass,\r\n 'min-w-0',\r\n 'p-4',\r\n 'overflow-y-hidden!',\r\n 'max-[640px]:p-3',\r\n ]\"\r\n >\r\n <div class=\"h-full min-h-0 overflow-y-auto px-3 pb-10\">\r\n @if (moduleKey() && operationKey()) {\r\n <mt-client-form\r\n [moduleKey]=\"moduleKey()\"\r\n [operationKey]=\"operationKey()\"\r\n [moduleId]=\"previewModuleId()\"\r\n [levelId]=\"previewLevelId()\"\r\n [levelDataId]=\"previewInfo()?.levelDataId\"\r\n [moduleDataId]=\"previewInfo()?.moduleDataId\"\r\n [requestSchemaId]=\"previewInfo()?.requestSchemaId\"\r\n [autoLoad]=\"true\"\r\n [renderMode]=\"renderMode()\"\r\n [forceOriginalForm]=\"true\"\r\n />\r\n } @else {\r\n <div\r\n class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\r\n >\r\n {{ t(\"no-fields-visible\") }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "recordId", "requestSchemaId", "draftProcessId", "templateId", "returnRecord", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "submitTransport", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "silentMessages", "hostMessages", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
|
|
2556
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBPreviewForm, isStandalone: true, selector: "mt-fb-preview-form", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n <div\r\n [class]=\"[\r\n modalService.contentClass,\r\n 'min-w-0',\r\n 'p-4',\r\n 'overflow-y-hidden!',\r\n 'max-[640px]:p-3',\r\n ]\"\r\n >\r\n <div class=\"h-full min-h-0 overflow-y-auto px-3 pb-10\">\r\n @if (moduleKey() && operationKey()) {\r\n <mt-client-form\r\n [moduleKey]=\"moduleKey()\"\r\n [operationKey]=\"operationKey()\"\r\n [moduleId]=\"previewModuleId()\"\r\n [levelId]=\"previewLevelId()\"\r\n [levelDataId]=\"previewInfo()?.levelDataId\"\r\n [moduleDataId]=\"previewInfo()?.moduleDataId\"\r\n [requestSchemaId]=\"previewInfo()?.requestSchemaId\"\r\n [autoLoad]=\"true\"\r\n [renderMode]=\"renderMode()\"\r\n [forceOriginalForm]=\"true\"\r\n />\r\n } @else {\r\n <div\r\n class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\r\n >\r\n {{ t(\"no-fields-visible\") }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "recordId", "requestSchemaId", "draftProcessId", "templateId", "returnRecord", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "submitTransport", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "silentMessages", "hostMessages", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys", "requiredFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
|
|
2490
2557
|
}
|
|
2491
2558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBPreviewForm, decorators: [{
|
|
2492
2559
|
type: Component,
|
|
@@ -2915,8 +2982,15 @@ class FormBuilder {
|
|
|
2915
2982
|
popovers = viewChildren(Popover, ...(ngDevMode ? [{ debugName: "popovers" }] : /* istanbul ignore next */ []));
|
|
2916
2983
|
/** Extra CSS class(es) applied to the main canvas wrapper div. */
|
|
2917
2984
|
canvasStyleClass = input('', ...(ngDevMode ? [{ debugName: "canvasStyleClass" }] : /* istanbul ignore next */ []));
|
|
2918
|
-
/**
|
|
2919
|
-
|
|
2985
|
+
/**
|
|
2986
|
+
* Operating mode: 'builder' (full editor), 'manageProperties' (read/write
|
|
2987
|
+
* permissions only) or 'localFields' (a host-owned field list).
|
|
2988
|
+
*
|
|
2989
|
+
* A missing value means 'builder'. Hosts mount this component straight on a
|
|
2990
|
+
* route, and `withComponentInputBinding()` sets every input the route does
|
|
2991
|
+
* not supply to `undefined`, which would otherwise hide the whole toolbar.
|
|
2992
|
+
*/
|
|
2993
|
+
mode = input('builder', { ...(ngDevMode ? { debugName: "mode" } : /* istanbul ignore next */ {}), transform: (mode) => mode ?? 'builder' });
|
|
2920
2994
|
/** Controls the draggable properties sidebar independently from the main builder canvas. */
|
|
2921
2995
|
showPropertiesSection = input(true, { ...(ngDevMode ? { debugName: "showPropertiesSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2922
2996
|
dialogRef;
|
|
@@ -3556,7 +3630,7 @@ class FormBuilder {
|
|
|
3556
3630
|
}
|
|
3557
3631
|
noReturnPredicate = () => false;
|
|
3558
3632
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3559
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FormBuilder, isStandalone: true, selector: "mt-form-builder", inputs: { canvasStyleClass: { classPropertyName: "canvasStyleClass", publicName: "canvasStyleClass", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, showPropertiesSection: { classPropertyName: "showPropertiesSection", publicName: "showPropertiesSection", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popovers", predicate: Popover, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div\n cdkScrollable\n class=\"flex h-full w-full gap-7 overflow-hidden max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:flex-col max-[1025px]:gap-4 max-[1025px]:overflow-x-hidden max-[1025px]:overflow-y-auto\"\n >\n <!-- Properties Sidebar -->\n @if (propertiesSectionVisible()) {\n <mt-card\n class=\"h-full w-1/5 flex flex-col overflow-hidden max-[1025px]:h-auto max-[1025px]:max-h-[42vh] max-[1025px]:min-h-0 max-[1025px]:w-full\"\n >\n <ng-template #headless>\n <!-- Header -->\n <h3 class=\"text-xl font-semibold px-4 pt-5\">\n {{ t(\"form-elements\") }}\n </h3>\n\n @if (isContextLoading()) {\n <!-- Properties Loading Skeleton -->\n <div class=\"flex gap-4 py-3 px-5 mt-4\">\n <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\n <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\n </div>\n <div class=\"py-4 px-5 space-y-5\">\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\n }\n </div>\n } @else if (scopeOptions().length === 0) {\n <!-- No Properties State -->\n <div class=\"flex-1 flex items-center justify-center p-4\">\n <p class=\"text-sm font-semibold text-gray-500\">\n {{ t(\"no-data-found\") }}\n </p>\n </div>\n } @else {\n <!-- Scope Tabs using PrimeNG -->\n <p-tabs\n [value]=\"activeScope()\"\n (valueChange)=\"onScopeChange($event)\"\n styleClass=\"structure-tabs\"\n class=\"flex min-h-0 flex-1 flex-col\"\n >\n <p-tablist class=\"shrink-0 overflow-x-auto\">\n @for (scope of scopeOptions(); track scope.key) {\n <p-tab [value]=\"scope.key\">{{ scope.label }}</p-tab>\n }\n </p-tablist>\n <p-tabpanels\n class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\n >\n @for (scope of scopeOptions(); track scope.key) {\n <p-tabpanel [value]=\"scope.key\" class=\"h-full flex flex-col\">\n @if (scope.key !== \"Current\") {\n <div class=\"px-4 pt-3 pb-2\">\n <div\n class=\"flex flex-col gap-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-800/50\"\n >\n <div class=\"flex items-center gap-2\">\n <span\n class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\n >\n {{ t(\"path\") }}\n </span>\n <div\n class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\n ></div>\n <span class=\"text-xs font-semibold text-slate-600\">\n {{ scope.label }}\n </span>\n </div>\n @if (getScopeBaseContexts(scope.key).length === 0) {\n <span class=\"text-xs italic text-slate-400\">\n {{ t(\"no-context\") }}\n </span>\n } @else {\n <div class=\"flex flex-col gap-1.5\">\n @for (\n segment of getScopePath(scope.key);\n track $index;\n let segmentIndex = $index;\n let isLast = $last\n ) {\n <div\n class=\"flex items-center gap-1 py-0.5 px-2 border border-gray-200 rounded bg-white dark:bg-slate-800 dark:border-slate-600\"\n >\n <div\n class=\"flex-1 min-w-0 text-xs font-medium text-slate-600 dark:text-slate-300 truncate cursor-pointer\"\n (click)=\"segmentPopover.toggle($event)\"\n >\n {{\n getScopeSegmentLabel(\n scope.key,\n segmentIndex\n )\n }}\n </div>\n <mt-button\n type=\"button\"\n icon=\"arrow.chevron-down\"\n [outlined]=\"true\"\n size=\"small\"\n severity=\"secondary\"\n styleClass=\"!p-0.5 !min-w-0\"\n (onClick)=\"segmentPopover.toggle($event)\"\n ></mt-button>\n @if (\n isLast && canRemoveScopePath(scope.key)\n ) {\n <mt-button\n type=\"button\"\n icon=\"general.trash-01\"\n [outlined]=\"true\"\n size=\"small\"\n severity=\"danger\"\n styleClass=\"!p-0.5 !min-w-0\"\n (onClick)=\"removeScopePath(scope.key)\"\n ></mt-button>\n }\n </div>\n <p-popover\n #segmentPopover\n [style]=\"{ width: 'max-content' }\"\n [dismissable]=\"true\"\n >\n <div class=\"p-2\">\n <div\n class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\n >\n {{ t(\"select\") }}\n {{ getTokenLabel(segment.token) }}\n </div>\n @if (\n getScopeSegmentOptions(\n scope.key,\n segmentIndex\n ).length === 0\n ) {\n <div\n class=\"text-xs font-medium text-slate-400\"\n >\n {{ t(\"no-options\") }}\n </div>\n } @else {\n <div class=\"flex flex-col gap-1\">\n @for (\n option of getScopeSegmentOptions(\n scope.key,\n segmentIndex\n );\n track option.contextKey\n ) {\n <mt-button\n type=\"button\"\n [label]=\"option.label\"\n [icon]=\"\n option.contextKey ===\n segment.value\n ? 'general.check'\n : 'general.minus'\n \"\n [iconPos]=\"'end'\"\n size=\"small\"\n severity=\"secondary\"\n styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\n (onClick)=\"\n onSetScopeSegmentValue(\n scope.key,\n segmentIndex,\n option.contextKey,\n segmentPopover\n )\n \"\n ></mt-button>\n }\n </div>\n }\n </div>\n </p-popover>\n }\n @if (canAddNextScopeSegment(scope.key)) {\n <div class=\"flex items-center gap-2\">\n <mt-button\n type=\"button\"\n icon=\"general.plus\"\n size=\"small\"\n severity=\"primary\"\n styleClass=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90\"\n (onClick)=\"\n nextContextPopover.toggle($event)\n \"\n ></mt-button>\n <!-- <span class=\"text-xs text-slate-400\">\n {{ t(\"add-segment\") }}\n </span> -->\n </div>\n }\n <!-- Popover OUTSIDE the @if block like formula-builder -->\n <p-popover\n #nextContextPopover\n [style]=\"{ width: 'max-content' }\"\n [dismissable]=\"true\"\n appendTo=\"body\"\n >\n <div class=\"p-2\">\n <div\n class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\n >\n {{ t(\"add-segment\") }}\n </div>\n <div class=\"flex flex-col gap-1\">\n @for (\n token of getScopeNextTokens(scope.key);\n track token\n ) {\n <mt-button\n type=\"button\"\n [label]=\"getTokenLabel(token)\"\n size=\"small\"\n severity=\"secondary\"\n styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\n (onClick)=\"\n onAddScopeSegment(\n scope.key,\n token,\n nextContextPopover\n )\n \"\n ></mt-button>\n }\n </div>\n </div>\n </p-popover>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Node List -->\n <div\n class=\"flex-1 min-h-0 overflow-y-auto space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden\"\n [id]=\"'toolbox-' + scope.key\"\n cdkDropList\n cdkDropListSortingDisabled\n [cdkDropListData]=\"getFilteredProperties(scope.key)\"\n [cdkDropListConnectedTo]=\"fieldDropListIds()\"\n [cdkDropListEnterPredicate]=\"noReturnPredicate\"\n >\n <!-- Search Field (Sticky) -->\n <div\n class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\"\n >\n <mt-text-field\n [placeholder]=\"t('search-properties')\"\n [(ngModel)]=\"searchQuery\"\n icon=\"general.search-lg\"\n />\n </div>\n\n @if (isScopePropertiesLoading(scope.key)) {\n <div class=\"space-y-4\">\n @for (i of [1, 2, 3, 4]; track i) {\n <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\n }\n </div>\n } @else {\n @for (\n node of getFilteredProperties(scope.key);\n track node.key\n ) {\n <div\n cdkDrag\n [cdkDragData]=\"node\"\n class=\"group cursor-move select-none flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 hover:bg-emphasis dark:border-surface-500 transition-colors\"\n >\n <div\n *cdkDragPlaceholder\n class=\"col-span-12 min-h-27 w-full rounded-lg bg-black/10 z-1\"\n ></div>\n <span\n class=\"flex-1 text-start text-base font-medium\"\n >{{ getPropertyLabel(node) }}</span\n >\n\n <mt-icon\n class=\"text-lg\"\n icon=\"general.menu-05\"\n ></mt-icon>\n </div>\n }\n\n @if (getFilteredProperties(scope.key).length === 0) {\n <div class=\"py-8 text-center text-muted-color\">\n <p class=\"text-sm\">\n @if (searchQuery()) {\n {{ t(\"no-data-found\") }}\n } @else if (\n getScopeProperties(scope.key).length === 0\n ) {\n {{ t(\"no-properties-available\") }}\n } @else {\n {{ t(\"all-items-in-use\") }}\n }\n </p>\n </div>\n }\n }\n </div>\n </p-tabpanel>\n }\n </p-tabpanels>\n </p-tabs>\n }\n </ng-template>\n </mt-card>\n }\n\n <!-- Main Canvas Area -->\n <div\n cdkScrollable\n class=\"flex h-full min-w-0 flex-1 gap-4 overflow-y-auto max-[1025px]:h-auto max-[1025px]:min-h-0 max-[1025px]:overflow-visible\"\n >\n <div\n class=\"flex h-full min-w-0 w-full flex-1 flex-col gap-4 max-[1025px]:h-auto\"\n [ngClass]=\"canvasStyleClass()\"\n >\n @if (mode() === \"builder\") {\n <mt-card>\n <ng-template #headless>\n <div\n class=\"flex flex-col gap-3 p-4 sm:flex-row sm:flex-wrap sm:items-center\"\n >\n <div class=\"w-full sm:w-44\">\n <mt-select-field\n [label]=\"''\"\n [placeholder]=\"''\"\n [hasPlaceholderPrefix]=\"false\"\n [ngModel]=\"selectedRenderMode()\"\n (ngModelChange)=\"onRenderModeChange($event)\"\n [options]=\"renderModeOptions()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n optionIcon=\"icon\"\n optionIconColor=\"color\"\n [optionAvatarShape]=\"'square'\"\n [size]=\"'small'\"\n [loading]=\"isUpdatingFormSettings()\"\n [disabled]=\"\n isLoading() ||\n isUpdatingFormSettings() ||\n !formConfiguration()\n \"\n />\n </div>\n <mt-button\n icon=\"layout.layout-top\"\n [label]=\"t('add-section')\"\n variant=\"outlined\"\n severity=\"primary\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"addSection()\"\n [disabled]=\"isLoading()\"\n ></mt-button>\n <mt-button\n icon=\"general.eye\"\n [label]=\"t('preview')\"\n variant=\"outlined\"\n severity=\"primary\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"openPreview()\"\n [disabled]=\"isLoading() || isUpdatingFormSettings()\"\n ></mt-button>\n <mt-button\n [label]=\"t('validation-rules')\"\n variant=\"outlined\"\n severity=\"primary\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"openValidationRules()\"\n [disabled]=\"isLoading()\"\n ></mt-button>\n <mt-button\n icon=\"finance.credit-card-plus\"\n [label]=\"t('reset')\"\n variant=\"outlined\"\n severity=\"primary\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"resetFormConfiguration()\"\n [disabled]=\"isLoading()\"\n ></mt-button>\n </div>\n </ng-template>\n </mt-card>\n }\n\n @if (isLoading()) {\n <!-- Form Loading Skeleton -->\n @for (i of [1, 2]; track i) {\n <mt-card>\n <ng-template #headless>\n <div class=\"p-4 space-y-4\">\n <!-- Section header skeleton -->\n <div\n class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n >\n <p-skeleton width=\"10rem\" height=\"1.5rem\" />\n <div class=\"flex gap-2\">\n <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\n <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\n </div>\n </div>\n <!-- Fields skeleton -->\n <div class=\"grid grid-cols-12 gap-4\">\n <div class=\"col-span-12 sm:col-span-6\">\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\n </div>\n <div class=\"col-span-12 sm:col-span-6\">\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\n </div>\n <div class=\"col-span-12\">\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\n </div>\n </div>\n </div>\n </ng-template>\n </mt-card>\n }\n } @else {\n <div\n cdkDropList\n id=\"sections-list\"\n [cdkDropListData]=\"enrichedSections()\"\n [cdkDropListDisabled]=\"mode() !== 'builder'\"\n [cdkDropListEnterPredicate]=\"sectionsDropPredicate\"\n [cdkDropListAutoScrollStep]=\"16\"\n (cdkDropListDropped)=\"dropSection($event)\"\n class=\"flex flex-col gap-4\"\n >\n @for (section of enrichedSections(); track section.id) {\n <div\n cdkDrag\n [cdkDragData]=\"section\"\n [cdkDragDisabled]=\"mode() !== 'builder'\"\n >\n <div\n *cdkDragPlaceholder\n class=\"min-h-16 rounded-xl border-2 border-dashed border-primary bg-primary-50/40\"\n ></div>\n <mt-fb-section\n [section]=\"section\"\n [sectionsCount]=\"enrichedSections().length\"\n [allSections]=\"enrichedSections()\"\n [mode]=\"mode()\"\n [connectedDropLists]=\"fieldDropListConnections()\"\n (onFieldDrop)=\"drop($event)\"\n >\n </mt-fb-section>\n </div>\n } @empty {\n <mt-card>\n <div class=\"h-27 p-4\">\n <div\n class=\"flex justify-center items-center gap-4 h-full border-1 border-primary rounded-xl bg-primary-50 text-primary\"\n >\n <span>{{ t(\"no-section\") }}</span>\n </div>\n </div>\n </mt-card>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i3.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i3.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i3.TabList, selector: "p-tablist" }, { kind: "component", type: i3.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: FBSection, selector: "mt-fb-section", inputs: ["section", "sectionsCount", "allSections", "mode", "connectedDropLists"], outputs: ["onFieldDrop"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
|
|
3633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FormBuilder, isStandalone: true, selector: "mt-form-builder", inputs: { canvasStyleClass: { classPropertyName: "canvasStyleClass", publicName: "canvasStyleClass", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, showPropertiesSection: { classPropertyName: "showPropertiesSection", publicName: "showPropertiesSection", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popovers", predicate: Popover, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n <div\r\n cdkScrollable\r\n class=\"flex h-full w-full gap-7 overflow-hidden max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:flex-col max-[1025px]:gap-4 max-[1025px]:overflow-x-hidden max-[1025px]:overflow-y-auto\"\r\n >\r\n <!-- Properties Sidebar -->\r\n @if (propertiesSectionVisible()) {\r\n <mt-card\r\n class=\"h-full w-1/5 flex flex-col overflow-hidden max-[1025px]:h-auto max-[1025px]:max-h-[42vh] max-[1025px]:min-h-0 max-[1025px]:w-full\"\r\n >\r\n <ng-template #headless>\r\n <!-- Header -->\r\n <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n {{ t(\"form-elements\") }}\r\n </h3>\r\n\r\n @if (isContextLoading()) {\r\n <!-- Properties Loading Skeleton -->\r\n <div class=\"flex gap-4 py-3 px-5 mt-4\">\r\n <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n </div>\r\n <div class=\"py-4 px-5 space-y-5\">\r\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n }\r\n </div>\r\n } @else if (scopeOptions().length === 0) {\r\n <!-- No Properties State -->\r\n <div class=\"flex-1 flex items-center justify-center p-4\">\r\n <p class=\"text-sm font-semibold text-gray-500\">\r\n {{ t(\"no-data-found\") }}\r\n </p>\r\n </div>\r\n } @else {\r\n <!-- Scope Tabs using PrimeNG -->\r\n <p-tabs\r\n [value]=\"activeScope()\"\r\n (valueChange)=\"onScopeChange($event)\"\r\n styleClass=\"structure-tabs\"\r\n class=\"flex min-h-0 flex-1 flex-col\"\r\n >\r\n <p-tablist class=\"shrink-0 overflow-x-auto\">\r\n @for (scope of scopeOptions(); track scope.key) {\r\n <p-tab [value]=\"scope.key\">{{ scope.label }}</p-tab>\r\n }\r\n </p-tablist>\r\n <p-tabpanels\r\n class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\r\n >\r\n @for (scope of scopeOptions(); track scope.key) {\r\n <p-tabpanel [value]=\"scope.key\" class=\"h-full flex flex-col\">\r\n @if (scope.key !== \"Current\") {\r\n <div class=\"px-4 pt-3 pb-2\">\r\n <div\r\n class=\"flex flex-col gap-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-800/50\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n <span\r\n class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n >\r\n {{ t(\"path\") }}\r\n </span>\r\n <div\r\n class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n ></div>\r\n <span class=\"text-xs font-semibold text-slate-600\">\r\n {{ scope.label }}\r\n </span>\r\n </div>\r\n @if (getScopeBaseContexts(scope.key).length === 0) {\r\n <span class=\"text-xs italic text-slate-400\">\r\n {{ t(\"no-context\") }}\r\n </span>\r\n } @else {\r\n <div class=\"flex flex-col gap-1.5\">\r\n @for (\r\n segment of getScopePath(scope.key);\r\n track $index;\r\n let segmentIndex = $index;\r\n let isLast = $last\r\n ) {\r\n <div\r\n class=\"flex items-center gap-1 py-0.5 px-2 border border-gray-200 rounded bg-white dark:bg-slate-800 dark:border-slate-600\"\r\n >\r\n <div\r\n class=\"flex-1 min-w-0 text-xs font-medium text-slate-600 dark:text-slate-300 truncate cursor-pointer\"\r\n (click)=\"segmentPopover.toggle($event)\"\r\n >\r\n {{\r\n getScopeSegmentLabel(\r\n scope.key,\r\n segmentIndex\r\n )\r\n }}\r\n </div>\r\n <mt-button\r\n type=\"button\"\r\n icon=\"arrow.chevron-down\"\r\n [outlined]=\"true\"\r\n size=\"small\"\r\n severity=\"secondary\"\r\n styleClass=\"!p-0.5 !min-w-0\"\r\n (onClick)=\"segmentPopover.toggle($event)\"\r\n ></mt-button>\r\n @if (\r\n isLast && canRemoveScopePath(scope.key)\r\n ) {\r\n <mt-button\r\n type=\"button\"\r\n icon=\"general.trash-01\"\r\n [outlined]=\"true\"\r\n size=\"small\"\r\n severity=\"danger\"\r\n styleClass=\"!p-0.5 !min-w-0\"\r\n (onClick)=\"removeScopePath(scope.key)\"\r\n ></mt-button>\r\n }\r\n </div>\r\n <p-popover\r\n #segmentPopover\r\n [style]=\"{ width: 'max-content' }\"\r\n [dismissable]=\"true\"\r\n >\r\n <div class=\"p-2\">\r\n <div\r\n class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n >\r\n {{ t(\"select\") }}\r\n {{ getTokenLabel(segment.token) }}\r\n </div>\r\n @if (\r\n getScopeSegmentOptions(\r\n scope.key,\r\n segmentIndex\r\n ).length === 0\r\n ) {\r\n <div\r\n class=\"text-xs font-medium text-slate-400\"\r\n >\r\n {{ t(\"no-options\") }}\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-1\">\r\n @for (\r\n option of getScopeSegmentOptions(\r\n scope.key,\r\n segmentIndex\r\n );\r\n track option.contextKey\r\n ) {\r\n <mt-button\r\n type=\"button\"\r\n [label]=\"option.label\"\r\n [icon]=\"\r\n option.contextKey ===\r\n segment.value\r\n ? 'general.check'\r\n : 'general.minus'\r\n \"\r\n [iconPos]=\"'end'\"\r\n size=\"small\"\r\n severity=\"secondary\"\r\n styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n (onClick)=\"\r\n onSetScopeSegmentValue(\r\n scope.key,\r\n segmentIndex,\r\n option.contextKey,\r\n segmentPopover\r\n )\r\n \"\r\n ></mt-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </p-popover>\r\n }\r\n @if (canAddNextScopeSegment(scope.key)) {\r\n <div class=\"flex items-center gap-2\">\r\n <mt-button\r\n type=\"button\"\r\n icon=\"general.plus\"\r\n size=\"small\"\r\n severity=\"primary\"\r\n styleClass=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90\"\r\n (onClick)=\"\r\n nextContextPopover.toggle($event)\r\n \"\r\n ></mt-button>\r\n <!-- <span class=\"text-xs text-slate-400\">\r\n {{ t(\"add-segment\") }}\r\n </span> -->\r\n </div>\r\n }\r\n <!-- Popover OUTSIDE the @if block like formula-builder -->\r\n <p-popover\r\n #nextContextPopover\r\n [style]=\"{ width: 'max-content' }\"\r\n [dismissable]=\"true\"\r\n appendTo=\"body\"\r\n >\r\n <div class=\"p-2\">\r\n <div\r\n class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n >\r\n {{ t(\"add-segment\") }}\r\n </div>\r\n <div class=\"flex flex-col gap-1\">\r\n @for (\r\n token of getScopeNextTokens(scope.key);\r\n track token\r\n ) {\r\n <mt-button\r\n type=\"button\"\r\n [label]=\"getTokenLabel(token)\"\r\n size=\"small\"\r\n severity=\"secondary\"\r\n styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n (onClick)=\"\r\n onAddScopeSegment(\r\n scope.key,\r\n token,\r\n nextContextPopover\r\n )\r\n \"\r\n ></mt-button>\r\n }\r\n </div>\r\n </div>\r\n </p-popover>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Node List -->\r\n <div\r\n class=\"flex-1 min-h-0 overflow-y-auto space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden\"\r\n [id]=\"'toolbox-' + scope.key\"\r\n cdkDropList\r\n cdkDropListSortingDisabled\r\n [cdkDropListData]=\"getFilteredProperties(scope.key)\"\r\n [cdkDropListConnectedTo]=\"fieldDropListIds()\"\r\n [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n >\r\n <!-- Search Field (Sticky) -->\r\n <div\r\n class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\"\r\n >\r\n <mt-text-field\r\n [placeholder]=\"t('search-properties')\"\r\n [(ngModel)]=\"searchQuery\"\r\n icon=\"general.search-lg\"\r\n />\r\n </div>\r\n\r\n @if (isScopePropertiesLoading(scope.key)) {\r\n <div class=\"space-y-4\">\r\n @for (i of [1, 2, 3, 4]; track i) {\r\n <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n }\r\n </div>\r\n } @else {\r\n @for (\r\n node of getFilteredProperties(scope.key);\r\n track node.key\r\n ) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"node\"\r\n class=\"group cursor-move select-none flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 hover:bg-emphasis dark:border-surface-500 transition-colors\"\r\n >\r\n <div\r\n *cdkDragPlaceholder\r\n class=\"col-span-12 min-h-27 w-full rounded-lg bg-black/10 z-1\"\r\n ></div>\r\n <span\r\n class=\"flex-1 text-start text-base font-medium\"\r\n >{{ getPropertyLabel(node) }}</span\r\n >\r\n\r\n <mt-icon\r\n class=\"text-lg\"\r\n icon=\"general.menu-05\"\r\n ></mt-icon>\r\n </div>\r\n }\r\n\r\n @if (getFilteredProperties(scope.key).length === 0) {\r\n <div class=\"py-8 text-center text-muted-color\">\r\n <p class=\"text-sm\">\r\n @if (searchQuery()) {\r\n {{ t(\"no-data-found\") }}\r\n } @else if (\r\n getScopeProperties(scope.key).length === 0\r\n ) {\r\n {{ t(\"no-properties-available\") }}\r\n } @else {\r\n {{ t(\"all-items-in-use\") }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </p-tabpanel>\r\n }\r\n </p-tabpanels>\r\n </p-tabs>\r\n }\r\n </ng-template>\r\n </mt-card>\r\n }\r\n\r\n <!-- Main Canvas Area -->\r\n <div\r\n cdkScrollable\r\n class=\"flex h-full min-w-0 flex-1 gap-4 overflow-y-auto max-[1025px]:h-auto max-[1025px]:min-h-0 max-[1025px]:overflow-visible\"\r\n >\r\n <div\r\n class=\"flex h-full min-w-0 w-full flex-1 flex-col gap-4 max-[1025px]:h-auto\"\r\n [ngClass]=\"canvasStyleClass()\"\r\n >\r\n @if (mode() === \"builder\") {\r\n <mt-card>\r\n <ng-template #headless>\r\n <div\r\n class=\"flex flex-col gap-3 p-4 sm:flex-row sm:flex-wrap sm:items-center\"\r\n >\r\n <div class=\"w-full sm:w-44\">\r\n <mt-select-field\r\n [label]=\"''\"\r\n [placeholder]=\"''\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n [ngModel]=\"selectedRenderMode()\"\r\n (ngModelChange)=\"onRenderModeChange($event)\"\r\n [options]=\"renderModeOptions()\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n optionIcon=\"icon\"\r\n optionIconColor=\"color\"\r\n [optionAvatarShape]=\"'square'\"\r\n [size]=\"'small'\"\r\n [loading]=\"isUpdatingFormSettings()\"\r\n [disabled]=\"\r\n isLoading() ||\r\n isUpdatingFormSettings() ||\r\n !formConfiguration()\r\n \"\r\n />\r\n </div>\r\n <mt-button\r\n icon=\"layout.layout-top\"\r\n [label]=\"t('add-section')\"\r\n variant=\"outlined\"\r\n severity=\"primary\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"addSection()\"\r\n [disabled]=\"isLoading()\"\r\n ></mt-button>\r\n <mt-button\r\n icon=\"general.eye\"\r\n [label]=\"t('preview')\"\r\n variant=\"outlined\"\r\n severity=\"primary\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"openPreview()\"\r\n [disabled]=\"isLoading() || isUpdatingFormSettings()\"\r\n ></mt-button>\r\n <mt-button\r\n [label]=\"t('validation-rules')\"\r\n variant=\"outlined\"\r\n severity=\"primary\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"openValidationRules()\"\r\n [disabled]=\"isLoading()\"\r\n ></mt-button>\r\n <mt-button\r\n icon=\"finance.credit-card-plus\"\r\n [label]=\"t('reset')\"\r\n variant=\"outlined\"\r\n severity=\"primary\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"resetFormConfiguration()\"\r\n [disabled]=\"isLoading()\"\r\n ></mt-button>\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n }\r\n\r\n @if (isLoading()) {\r\n <!-- Form Loading Skeleton -->\r\n @for (i of [1, 2]; track i) {\r\n <mt-card>\r\n <ng-template #headless>\r\n <div class=\"p-4 space-y-4\">\r\n <!-- Section header skeleton -->\r\n <div\r\n class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\r\n >\r\n <p-skeleton width=\"10rem\" height=\"1.5rem\" />\r\n <div class=\"flex gap-2\">\r\n <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n </div>\r\n </div>\r\n <!-- Fields skeleton -->\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-12 sm:col-span-6\">\r\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n </div>\r\n <div class=\"col-span-12 sm:col-span-6\">\r\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n </div>\r\n <div class=\"col-span-12\">\r\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n }\r\n } @else {\r\n <div\r\n cdkDropList\r\n id=\"sections-list\"\r\n [cdkDropListData]=\"enrichedSections()\"\r\n [cdkDropListDisabled]=\"mode() !== 'builder'\"\r\n [cdkDropListEnterPredicate]=\"sectionsDropPredicate\"\r\n [cdkDropListAutoScrollStep]=\"16\"\r\n (cdkDropListDropped)=\"dropSection($event)\"\r\n class=\"flex flex-col gap-4\"\r\n >\r\n @for (section of enrichedSections(); track section.id) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"section\"\r\n [cdkDragDisabled]=\"mode() !== 'builder'\"\r\n >\r\n <div\r\n *cdkDragPlaceholder\r\n class=\"min-h-16 rounded-xl border-2 border-dashed border-primary bg-primary-50/40\"\r\n ></div>\r\n <mt-fb-section\r\n [section]=\"section\"\r\n [sectionsCount]=\"enrichedSections().length\"\r\n [allSections]=\"enrichedSections()\"\r\n [mode]=\"mode()\"\r\n [connectedDropLists]=\"fieldDropListConnections()\"\r\n (onFieldDrop)=\"drop($event)\"\r\n >\r\n </mt-fb-section>\r\n </div>\r\n } @empty {\r\n <mt-card>\r\n <div class=\"h-27 p-4\">\r\n <div\r\n class=\"flex justify-center items-center gap-4 h-full border-1 border-primary rounded-xl bg-primary-50 text-primary\"\r\n >\r\n <span>{{ t(\"no-section\") }}</span>\r\n </div>\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i3.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i3.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i3.TabList, selector: "p-tablist" }, { kind: "component", type: i3.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: FBSection, selector: "mt-fb-section", inputs: ["section", "sectionsCount", "allSections", "mode", "connectedDropLists"], outputs: ["onFieldDrop"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
|
|
3560
3634
|
}
|
|
3561
3635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormBuilder, decorators: [{
|
|
3562
3636
|
type: Component,
|
|
@@ -3574,7 +3648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
3574
3648
|
FBSection,
|
|
3575
3649
|
DragDropModule,
|
|
3576
3650
|
Icon,
|
|
3577
|
-
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div\n cdkScrollable\n class=\"flex h-full w-full gap-7 overflow-hidden max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:flex-col max-[1025px]:gap-4 max-[1025px]:overflow-x-hidden max-[1025px]:overflow-y-auto\"\n >\n <!-- Properties Sidebar -->\n @if (propertiesSectionVisible()) {\n <mt-card\n class=\"h-full w-1/5 flex flex-col overflow-hidden max-[1025px]:h-auto max-[1025px]:max-h-[42vh] max-[1025px]:min-h-0 max-[1025px]:w-full\"\n >\n <ng-template #headless>\n <!-- Header -->\n <h3 class=\"text-xl font-semibold px-4 pt-5\">\n {{ t(\"form-elements\") }}\n </h3>\n\n @if (isContextLoading()) {\n <!-- Properties Loading Skeleton -->\n <div class=\"flex gap-4 py-3 px-5 mt-4\">\n <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\n <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\n </div>\n <div class=\"py-4 px-5 space-y-5\">\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\n }\n </div>\n } @else if (scopeOptions().length === 0) {\n <!-- No Properties State -->\n <div class=\"flex-1 flex items-center justify-center p-4\">\n <p class=\"text-sm font-semibold text-gray-500\">\n {{ t(\"no-data-found\") }}\n </p>\n </div>\n } @else {\n <!-- Scope Tabs using PrimeNG -->\n <p-tabs\n [value]=\"activeScope()\"\n (valueChange)=\"onScopeChange($event)\"\n styleClass=\"structure-tabs\"\n class=\"flex min-h-0 flex-1 flex-col\"\n >\n <p-tablist class=\"shrink-0 overflow-x-auto\">\n @for (scope of scopeOptions(); track scope.key) {\n <p-tab [value]=\"scope.key\">{{ scope.label }}</p-tab>\n }\n </p-tablist>\n <p-tabpanels\n class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\n >\n @for (scope of scopeOptions(); track scope.key) {\n <p-tabpanel [value]=\"scope.key\" class=\"h-full flex flex-col\">\n @if (scope.key !== \"Current\") {\n <div class=\"px-4 pt-3 pb-2\">\n <div\n class=\"flex flex-col gap-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-800/50\"\n >\n <div class=\"flex items-center gap-2\">\n <span\n class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\n >\n {{ t(\"path\") }}\n </span>\n <div\n class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\n ></div>\n <span class=\"text-xs font-semibold text-slate-600\">\n {{ scope.label }}\n </span>\n </div>\n @if (getScopeBaseContexts(scope.key).length === 0) {\n <span class=\"text-xs italic text-slate-400\">\n {{ t(\"no-context\") }}\n </span>\n } @else {\n <div class=\"flex flex-col gap-1.5\">\n @for (\n segment of getScopePath(scope.key);\n track $index;\n let segmentIndex = $index;\n let isLast = $last\n ) {\n <div\n class=\"flex items-center gap-1 py-0.5 px-2 border border-gray-200 rounded bg-white dark:bg-slate-800 dark:border-slate-600\"\n >\n <div\n class=\"flex-1 min-w-0 text-xs font-medium text-slate-600 dark:text-slate-300 truncate cursor-pointer\"\n (click)=\"segmentPopover.toggle($event)\"\n >\n {{\n getScopeSegmentLabel(\n scope.key,\n segmentIndex\n )\n }}\n </div>\n <mt-button\n type=\"button\"\n icon=\"arrow.chevron-down\"\n [outlined]=\"true\"\n size=\"small\"\n severity=\"secondary\"\n styleClass=\"!p-0.5 !min-w-0\"\n (onClick)=\"segmentPopover.toggle($event)\"\n ></mt-button>\n @if (\n isLast && canRemoveScopePath(scope.key)\n ) {\n <mt-button\n type=\"button\"\n icon=\"general.trash-01\"\n [outlined]=\"true\"\n size=\"small\"\n severity=\"danger\"\n styleClass=\"!p-0.5 !min-w-0\"\n (onClick)=\"removeScopePath(scope.key)\"\n ></mt-button>\n }\n </div>\n <p-popover\n #segmentPopover\n [style]=\"{ width: 'max-content' }\"\n [dismissable]=\"true\"\n >\n <div class=\"p-2\">\n <div\n class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\n >\n {{ t(\"select\") }}\n {{ getTokenLabel(segment.token) }}\n </div>\n @if (\n getScopeSegmentOptions(\n scope.key,\n segmentIndex\n ).length === 0\n ) {\n <div\n class=\"text-xs font-medium text-slate-400\"\n >\n {{ t(\"no-options\") }}\n </div>\n } @else {\n <div class=\"flex flex-col gap-1\">\n @for (\n option of getScopeSegmentOptions(\n scope.key,\n segmentIndex\n );\n track option.contextKey\n ) {\n <mt-button\n type=\"button\"\n [label]=\"option.label\"\n [icon]=\"\n option.contextKey ===\n segment.value\n ? 'general.check'\n : 'general.minus'\n \"\n [iconPos]=\"'end'\"\n size=\"small\"\n severity=\"secondary\"\n styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\n (onClick)=\"\n onSetScopeSegmentValue(\n scope.key,\n segmentIndex,\n option.contextKey,\n segmentPopover\n )\n \"\n ></mt-button>\n }\n </div>\n }\n </div>\n </p-popover>\n }\n @if (canAddNextScopeSegment(scope.key)) {\n <div class=\"flex items-center gap-2\">\n <mt-button\n type=\"button\"\n icon=\"general.plus\"\n size=\"small\"\n severity=\"primary\"\n styleClass=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90\"\n (onClick)=\"\n nextContextPopover.toggle($event)\n \"\n ></mt-button>\n <!-- <span class=\"text-xs text-slate-400\">\n {{ t(\"add-segment\") }}\n </span> -->\n </div>\n }\n <!-- Popover OUTSIDE the @if block like formula-builder -->\n <p-popover\n #nextContextPopover\n [style]=\"{ width: 'max-content' }\"\n [dismissable]=\"true\"\n appendTo=\"body\"\n >\n <div class=\"p-2\">\n <div\n class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\n >\n {{ t(\"add-segment\") }}\n </div>\n <div class=\"flex flex-col gap-1\">\n @for (\n token of getScopeNextTokens(scope.key);\n track token\n ) {\n <mt-button\n type=\"button\"\n [label]=\"getTokenLabel(token)\"\n size=\"small\"\n severity=\"secondary\"\n styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\n (onClick)=\"\n onAddScopeSegment(\n scope.key,\n token,\n nextContextPopover\n )\n \"\n ></mt-button>\n }\n </div>\n </div>\n </p-popover>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Node List -->\n <div\n class=\"flex-1 min-h-0 overflow-y-auto space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden\"\n [id]=\"'toolbox-' + scope.key\"\n cdkDropList\n cdkDropListSortingDisabled\n [cdkDropListData]=\"getFilteredProperties(scope.key)\"\n [cdkDropListConnectedTo]=\"fieldDropListIds()\"\n [cdkDropListEnterPredicate]=\"noReturnPredicate\"\n >\n <!-- Search Field (Sticky) -->\n <div\n class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\"\n >\n <mt-text-field\n [placeholder]=\"t('search-properties')\"\n [(ngModel)]=\"searchQuery\"\n icon=\"general.search-lg\"\n />\n </div>\n\n @if (isScopePropertiesLoading(scope.key)) {\n <div class=\"space-y-4\">\n @for (i of [1, 2, 3, 4]; track i) {\n <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\n }\n </div>\n } @else {\n @for (\n node of getFilteredProperties(scope.key);\n track node.key\n ) {\n <div\n cdkDrag\n [cdkDragData]=\"node\"\n class=\"group cursor-move select-none flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 hover:bg-emphasis dark:border-surface-500 transition-colors\"\n >\n <div\n *cdkDragPlaceholder\n class=\"col-span-12 min-h-27 w-full rounded-lg bg-black/10 z-1\"\n ></div>\n <span\n class=\"flex-1 text-start text-base font-medium\"\n >{{ getPropertyLabel(node) }}</span\n >\n\n <mt-icon\n class=\"text-lg\"\n icon=\"general.menu-05\"\n ></mt-icon>\n </div>\n }\n\n @if (getFilteredProperties(scope.key).length === 0) {\n <div class=\"py-8 text-center text-muted-color\">\n <p class=\"text-sm\">\n @if (searchQuery()) {\n {{ t(\"no-data-found\") }}\n } @else if (\n getScopeProperties(scope.key).length === 0\n ) {\n {{ t(\"no-properties-available\") }}\n } @else {\n {{ t(\"all-items-in-use\") }}\n }\n </p>\n </div>\n }\n }\n </div>\n </p-tabpanel>\n }\n </p-tabpanels>\n </p-tabs>\n }\n </ng-template>\n </mt-card>\n }\n\n <!-- Main Canvas Area -->\n <div\n cdkScrollable\n class=\"flex h-full min-w-0 flex-1 gap-4 overflow-y-auto max-[1025px]:h-auto max-[1025px]:min-h-0 max-[1025px]:overflow-visible\"\n >\n <div\n class=\"flex h-full min-w-0 w-full flex-1 flex-col gap-4 max-[1025px]:h-auto\"\n [ngClass]=\"canvasStyleClass()\"\n >\n @if (mode() === \"builder\") {\n <mt-card>\n <ng-template #headless>\n <div\n class=\"flex flex-col gap-3 p-4 sm:flex-row sm:flex-wrap sm:items-center\"\n >\n <div class=\"w-full sm:w-44\">\n <mt-select-field\n [label]=\"''\"\n [placeholder]=\"''\"\n [hasPlaceholderPrefix]=\"false\"\n [ngModel]=\"selectedRenderMode()\"\n (ngModelChange)=\"onRenderModeChange($event)\"\n [options]=\"renderModeOptions()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n optionIcon=\"icon\"\n optionIconColor=\"color\"\n [optionAvatarShape]=\"'square'\"\n [size]=\"'small'\"\n [loading]=\"isUpdatingFormSettings()\"\n [disabled]=\"\n isLoading() ||\n isUpdatingFormSettings() ||\n !formConfiguration()\n \"\n />\n </div>\n <mt-button\n icon=\"layout.layout-top\"\n [label]=\"t('add-section')\"\n variant=\"outlined\"\n severity=\"primary\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"addSection()\"\n [disabled]=\"isLoading()\"\n ></mt-button>\n <mt-button\n icon=\"general.eye\"\n [label]=\"t('preview')\"\n variant=\"outlined\"\n severity=\"primary\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"openPreview()\"\n [disabled]=\"isLoading() || isUpdatingFormSettings()\"\n ></mt-button>\n <mt-button\n [label]=\"t('validation-rules')\"\n variant=\"outlined\"\n severity=\"primary\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"openValidationRules()\"\n [disabled]=\"isLoading()\"\n ></mt-button>\n <mt-button\n icon=\"finance.credit-card-plus\"\n [label]=\"t('reset')\"\n variant=\"outlined\"\n severity=\"primary\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"resetFormConfiguration()\"\n [disabled]=\"isLoading()\"\n ></mt-button>\n </div>\n </ng-template>\n </mt-card>\n }\n\n @if (isLoading()) {\n <!-- Form Loading Skeleton -->\n @for (i of [1, 2]; track i) {\n <mt-card>\n <ng-template #headless>\n <div class=\"p-4 space-y-4\">\n <!-- Section header skeleton -->\n <div\n class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n >\n <p-skeleton width=\"10rem\" height=\"1.5rem\" />\n <div class=\"flex gap-2\">\n <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\n <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\n </div>\n </div>\n <!-- Fields skeleton -->\n <div class=\"grid grid-cols-12 gap-4\">\n <div class=\"col-span-12 sm:col-span-6\">\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\n </div>\n <div class=\"col-span-12 sm:col-span-6\">\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\n </div>\n <div class=\"col-span-12\">\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\n </div>\n </div>\n </div>\n </ng-template>\n </mt-card>\n }\n } @else {\n <div\n cdkDropList\n id=\"sections-list\"\n [cdkDropListData]=\"enrichedSections()\"\n [cdkDropListDisabled]=\"mode() !== 'builder'\"\n [cdkDropListEnterPredicate]=\"sectionsDropPredicate\"\n [cdkDropListAutoScrollStep]=\"16\"\n (cdkDropListDropped)=\"dropSection($event)\"\n class=\"flex flex-col gap-4\"\n >\n @for (section of enrichedSections(); track section.id) {\n <div\n cdkDrag\n [cdkDragData]=\"section\"\n [cdkDragDisabled]=\"mode() !== 'builder'\"\n >\n <div\n *cdkDragPlaceholder\n class=\"min-h-16 rounded-xl border-2 border-dashed border-primary bg-primary-50/40\"\n ></div>\n <mt-fb-section\n [section]=\"section\"\n [sectionsCount]=\"enrichedSections().length\"\n [allSections]=\"enrichedSections()\"\n [mode]=\"mode()\"\n [connectedDropLists]=\"fieldDropListConnections()\"\n (onFieldDrop)=\"drop($event)\"\n >\n </mt-fb-section>\n </div>\n } @empty {\n <mt-card>\n <div class=\"h-27 p-4\">\n <div\n class=\"flex justify-center items-center gap-4 h-full border-1 border-primary rounded-xl bg-primary-50 text-primary\"\n >\n <span>{{ t(\"no-section\") }}</span>\n </div>\n </div>\n </mt-card>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}\n"] }]
|
|
3651
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n <div\r\n cdkScrollable\r\n class=\"flex h-full w-full gap-7 overflow-hidden max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:flex-col max-[1025px]:gap-4 max-[1025px]:overflow-x-hidden max-[1025px]:overflow-y-auto\"\r\n >\r\n <!-- Properties Sidebar -->\r\n @if (propertiesSectionVisible()) {\r\n <mt-card\r\n class=\"h-full w-1/5 flex flex-col overflow-hidden max-[1025px]:h-auto max-[1025px]:max-h-[42vh] max-[1025px]:min-h-0 max-[1025px]:w-full\"\r\n >\r\n <ng-template #headless>\r\n <!-- Header -->\r\n <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n {{ t(\"form-elements\") }}\r\n </h3>\r\n\r\n @if (isContextLoading()) {\r\n <!-- Properties Loading Skeleton -->\r\n <div class=\"flex gap-4 py-3 px-5 mt-4\">\r\n <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n </div>\r\n <div class=\"py-4 px-5 space-y-5\">\r\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n }\r\n </div>\r\n } @else if (scopeOptions().length === 0) {\r\n <!-- No Properties State -->\r\n <div class=\"flex-1 flex items-center justify-center p-4\">\r\n <p class=\"text-sm font-semibold text-gray-500\">\r\n {{ t(\"no-data-found\") }}\r\n </p>\r\n </div>\r\n } @else {\r\n <!-- Scope Tabs using PrimeNG -->\r\n <p-tabs\r\n [value]=\"activeScope()\"\r\n (valueChange)=\"onScopeChange($event)\"\r\n styleClass=\"structure-tabs\"\r\n class=\"flex min-h-0 flex-1 flex-col\"\r\n >\r\n <p-tablist class=\"shrink-0 overflow-x-auto\">\r\n @for (scope of scopeOptions(); track scope.key) {\r\n <p-tab [value]=\"scope.key\">{{ scope.label }}</p-tab>\r\n }\r\n </p-tablist>\r\n <p-tabpanels\r\n class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\r\n >\r\n @for (scope of scopeOptions(); track scope.key) {\r\n <p-tabpanel [value]=\"scope.key\" class=\"h-full flex flex-col\">\r\n @if (scope.key !== \"Current\") {\r\n <div class=\"px-4 pt-3 pb-2\">\r\n <div\r\n class=\"flex flex-col gap-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-800/50\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n <span\r\n class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n >\r\n {{ t(\"path\") }}\r\n </span>\r\n <div\r\n class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n ></div>\r\n <span class=\"text-xs font-semibold text-slate-600\">\r\n {{ scope.label }}\r\n </span>\r\n </div>\r\n @if (getScopeBaseContexts(scope.key).length === 0) {\r\n <span class=\"text-xs italic text-slate-400\">\r\n {{ t(\"no-context\") }}\r\n </span>\r\n } @else {\r\n <div class=\"flex flex-col gap-1.5\">\r\n @for (\r\n segment of getScopePath(scope.key);\r\n track $index;\r\n let segmentIndex = $index;\r\n let isLast = $last\r\n ) {\r\n <div\r\n class=\"flex items-center gap-1 py-0.5 px-2 border border-gray-200 rounded bg-white dark:bg-slate-800 dark:border-slate-600\"\r\n >\r\n <div\r\n class=\"flex-1 min-w-0 text-xs font-medium text-slate-600 dark:text-slate-300 truncate cursor-pointer\"\r\n (click)=\"segmentPopover.toggle($event)\"\r\n >\r\n {{\r\n getScopeSegmentLabel(\r\n scope.key,\r\n segmentIndex\r\n )\r\n }}\r\n </div>\r\n <mt-button\r\n type=\"button\"\r\n icon=\"arrow.chevron-down\"\r\n [outlined]=\"true\"\r\n size=\"small\"\r\n severity=\"secondary\"\r\n styleClass=\"!p-0.5 !min-w-0\"\r\n (onClick)=\"segmentPopover.toggle($event)\"\r\n ></mt-button>\r\n @if (\r\n isLast && canRemoveScopePath(scope.key)\r\n ) {\r\n <mt-button\r\n type=\"button\"\r\n icon=\"general.trash-01\"\r\n [outlined]=\"true\"\r\n size=\"small\"\r\n severity=\"danger\"\r\n styleClass=\"!p-0.5 !min-w-0\"\r\n (onClick)=\"removeScopePath(scope.key)\"\r\n ></mt-button>\r\n }\r\n </div>\r\n <p-popover\r\n #segmentPopover\r\n [style]=\"{ width: 'max-content' }\"\r\n [dismissable]=\"true\"\r\n >\r\n <div class=\"p-2\">\r\n <div\r\n class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n >\r\n {{ t(\"select\") }}\r\n {{ getTokenLabel(segment.token) }}\r\n </div>\r\n @if (\r\n getScopeSegmentOptions(\r\n scope.key,\r\n segmentIndex\r\n ).length === 0\r\n ) {\r\n <div\r\n class=\"text-xs font-medium text-slate-400\"\r\n >\r\n {{ t(\"no-options\") }}\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-1\">\r\n @for (\r\n option of getScopeSegmentOptions(\r\n scope.key,\r\n segmentIndex\r\n );\r\n track option.contextKey\r\n ) {\r\n <mt-button\r\n type=\"button\"\r\n [label]=\"option.label\"\r\n [icon]=\"\r\n option.contextKey ===\r\n segment.value\r\n ? 'general.check'\r\n : 'general.minus'\r\n \"\r\n [iconPos]=\"'end'\"\r\n size=\"small\"\r\n severity=\"secondary\"\r\n styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n (onClick)=\"\r\n onSetScopeSegmentValue(\r\n scope.key,\r\n segmentIndex,\r\n option.contextKey,\r\n segmentPopover\r\n )\r\n \"\r\n ></mt-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </p-popover>\r\n }\r\n @if (canAddNextScopeSegment(scope.key)) {\r\n <div class=\"flex items-center gap-2\">\r\n <mt-button\r\n type=\"button\"\r\n icon=\"general.plus\"\r\n size=\"small\"\r\n severity=\"primary\"\r\n styleClass=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90\"\r\n (onClick)=\"\r\n nextContextPopover.toggle($event)\r\n \"\r\n ></mt-button>\r\n <!-- <span class=\"text-xs text-slate-400\">\r\n {{ t(\"add-segment\") }}\r\n </span> -->\r\n </div>\r\n }\r\n <!-- Popover OUTSIDE the @if block like formula-builder -->\r\n <p-popover\r\n #nextContextPopover\r\n [style]=\"{ width: 'max-content' }\"\r\n [dismissable]=\"true\"\r\n appendTo=\"body\"\r\n >\r\n <div class=\"p-2\">\r\n <div\r\n class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n >\r\n {{ t(\"add-segment\") }}\r\n </div>\r\n <div class=\"flex flex-col gap-1\">\r\n @for (\r\n token of getScopeNextTokens(scope.key);\r\n track token\r\n ) {\r\n <mt-button\r\n type=\"button\"\r\n [label]=\"getTokenLabel(token)\"\r\n size=\"small\"\r\n severity=\"secondary\"\r\n styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n (onClick)=\"\r\n onAddScopeSegment(\r\n scope.key,\r\n token,\r\n nextContextPopover\r\n )\r\n \"\r\n ></mt-button>\r\n }\r\n </div>\r\n </div>\r\n </p-popover>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Node List -->\r\n <div\r\n class=\"flex-1 min-h-0 overflow-y-auto space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden\"\r\n [id]=\"'toolbox-' + scope.key\"\r\n cdkDropList\r\n cdkDropListSortingDisabled\r\n [cdkDropListData]=\"getFilteredProperties(scope.key)\"\r\n [cdkDropListConnectedTo]=\"fieldDropListIds()\"\r\n [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n >\r\n <!-- Search Field (Sticky) -->\r\n <div\r\n class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\"\r\n >\r\n <mt-text-field\r\n [placeholder]=\"t('search-properties')\"\r\n [(ngModel)]=\"searchQuery\"\r\n icon=\"general.search-lg\"\r\n />\r\n </div>\r\n\r\n @if (isScopePropertiesLoading(scope.key)) {\r\n <div class=\"space-y-4\">\r\n @for (i of [1, 2, 3, 4]; track i) {\r\n <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n }\r\n </div>\r\n } @else {\r\n @for (\r\n node of getFilteredProperties(scope.key);\r\n track node.key\r\n ) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"node\"\r\n class=\"group cursor-move select-none flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 hover:bg-emphasis dark:border-surface-500 transition-colors\"\r\n >\r\n <div\r\n *cdkDragPlaceholder\r\n class=\"col-span-12 min-h-27 w-full rounded-lg bg-black/10 z-1\"\r\n ></div>\r\n <span\r\n class=\"flex-1 text-start text-base font-medium\"\r\n >{{ getPropertyLabel(node) }}</span\r\n >\r\n\r\n <mt-icon\r\n class=\"text-lg\"\r\n icon=\"general.menu-05\"\r\n ></mt-icon>\r\n </div>\r\n }\r\n\r\n @if (getFilteredProperties(scope.key).length === 0) {\r\n <div class=\"py-8 text-center text-muted-color\">\r\n <p class=\"text-sm\">\r\n @if (searchQuery()) {\r\n {{ t(\"no-data-found\") }}\r\n } @else if (\r\n getScopeProperties(scope.key).length === 0\r\n ) {\r\n {{ t(\"no-properties-available\") }}\r\n } @else {\r\n {{ t(\"all-items-in-use\") }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </p-tabpanel>\r\n }\r\n </p-tabpanels>\r\n </p-tabs>\r\n }\r\n </ng-template>\r\n </mt-card>\r\n }\r\n\r\n <!-- Main Canvas Area -->\r\n <div\r\n cdkScrollable\r\n class=\"flex h-full min-w-0 flex-1 gap-4 overflow-y-auto max-[1025px]:h-auto max-[1025px]:min-h-0 max-[1025px]:overflow-visible\"\r\n >\r\n <div\r\n class=\"flex h-full min-w-0 w-full flex-1 flex-col gap-4 max-[1025px]:h-auto\"\r\n [ngClass]=\"canvasStyleClass()\"\r\n >\r\n @if (mode() === \"builder\") {\r\n <mt-card>\r\n <ng-template #headless>\r\n <div\r\n class=\"flex flex-col gap-3 p-4 sm:flex-row sm:flex-wrap sm:items-center\"\r\n >\r\n <div class=\"w-full sm:w-44\">\r\n <mt-select-field\r\n [label]=\"''\"\r\n [placeholder]=\"''\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n [ngModel]=\"selectedRenderMode()\"\r\n (ngModelChange)=\"onRenderModeChange($event)\"\r\n [options]=\"renderModeOptions()\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n optionIcon=\"icon\"\r\n optionIconColor=\"color\"\r\n [optionAvatarShape]=\"'square'\"\r\n [size]=\"'small'\"\r\n [loading]=\"isUpdatingFormSettings()\"\r\n [disabled]=\"\r\n isLoading() ||\r\n isUpdatingFormSettings() ||\r\n !formConfiguration()\r\n \"\r\n />\r\n </div>\r\n <mt-button\r\n icon=\"layout.layout-top\"\r\n [label]=\"t('add-section')\"\r\n variant=\"outlined\"\r\n severity=\"primary\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"addSection()\"\r\n [disabled]=\"isLoading()\"\r\n ></mt-button>\r\n <mt-button\r\n icon=\"general.eye\"\r\n [label]=\"t('preview')\"\r\n variant=\"outlined\"\r\n severity=\"primary\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"openPreview()\"\r\n [disabled]=\"isLoading() || isUpdatingFormSettings()\"\r\n ></mt-button>\r\n <mt-button\r\n [label]=\"t('validation-rules')\"\r\n variant=\"outlined\"\r\n severity=\"primary\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"openValidationRules()\"\r\n [disabled]=\"isLoading()\"\r\n ></mt-button>\r\n <mt-button\r\n icon=\"finance.credit-card-plus\"\r\n [label]=\"t('reset')\"\r\n variant=\"outlined\"\r\n severity=\"primary\"\r\n styleClass=\"w-full sm:w-auto\"\r\n (onClick)=\"resetFormConfiguration()\"\r\n [disabled]=\"isLoading()\"\r\n ></mt-button>\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n }\r\n\r\n @if (isLoading()) {\r\n <!-- Form Loading Skeleton -->\r\n @for (i of [1, 2]; track i) {\r\n <mt-card>\r\n <ng-template #headless>\r\n <div class=\"p-4 space-y-4\">\r\n <!-- Section header skeleton -->\r\n <div\r\n class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\r\n >\r\n <p-skeleton width=\"10rem\" height=\"1.5rem\" />\r\n <div class=\"flex gap-2\">\r\n <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n </div>\r\n </div>\r\n <!-- Fields skeleton -->\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-12 sm:col-span-6\">\r\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n </div>\r\n <div class=\"col-span-12 sm:col-span-6\">\r\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n </div>\r\n <div class=\"col-span-12\">\r\n <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n }\r\n } @else {\r\n <div\r\n cdkDropList\r\n id=\"sections-list\"\r\n [cdkDropListData]=\"enrichedSections()\"\r\n [cdkDropListDisabled]=\"mode() !== 'builder'\"\r\n [cdkDropListEnterPredicate]=\"sectionsDropPredicate\"\r\n [cdkDropListAutoScrollStep]=\"16\"\r\n (cdkDropListDropped)=\"dropSection($event)\"\r\n class=\"flex flex-col gap-4\"\r\n >\r\n @for (section of enrichedSections(); track section.id) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"section\"\r\n [cdkDragDisabled]=\"mode() !== 'builder'\"\r\n >\r\n <div\r\n *cdkDragPlaceholder\r\n class=\"min-h-16 rounded-xl border-2 border-dashed border-primary bg-primary-50/40\"\r\n ></div>\r\n <mt-fb-section\r\n [section]=\"section\"\r\n [sectionsCount]=\"enrichedSections().length\"\r\n [allSections]=\"enrichedSections()\"\r\n [mode]=\"mode()\"\r\n [connectedDropLists]=\"fieldDropListConnections()\"\r\n (onFieldDrop)=\"drop($event)\"\r\n >\r\n </mt-fb-section>\r\n </div>\r\n } @empty {\r\n <mt-card>\r\n <div class=\"h-27 p-4\">\r\n <div\r\n class=\"flex justify-center items-center gap-4 h-full border-1 border-primary rounded-xl bg-primary-50 text-primary\"\r\n >\r\n <span>{{ t(\"no-section\") }}</span>\r\n </div>\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}\n"] }]
|
|
3578
3652
|
}], ctorParameters: () => [], propDecorators: { popovers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => Popover), { isSignal: true }] }], canvasStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasStyleClass", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], showPropertiesSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPropertiesSection", required: false }] }] } });
|
|
3579
3653
|
|
|
3580
3654
|
/*
|
|
@@ -3585,5 +3659,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
3585
3659
|
* Generated bundle index. Do not edit.
|
|
3586
3660
|
*/
|
|
3587
3661
|
|
|
3588
|
-
export { AddField, AddSection, AddValidation, DeleteField, DeleteSection, DeleteValidation, EnterLocalFormConfiguration, ExitLocalFormConfiguration, FormBuilder, FormBuilderActionKey, FormBuilderFacade, FormBuilderState, GetFormConfiguration, MoveField, ReorderFields, ReorderSections, ResetFormBuilderState, ResetFormConfiguration, ResetFormFromAppForm, SetContextResolveExtraParams, SetModuleInfo, SetPreviewInfo, SetProperties, ToggleValidationActive, UpdateField, UpdateFormSettings, UpdateSection, UpdateValidation };
|
|
3662
|
+
export { AddField, AddSection, AddValidation, DeleteField, DeleteSection, DeleteValidation, EnterLocalFormConfiguration, ExitLocalFormConfiguration, FormBuilder, FormBuilderActionKey, FormBuilderFacade, FormBuilderState, GetFormConfiguration, MoveField, ReorderFields, ReorderSections, ResetFormBuilderState, ResetFormConfiguration, ResetFormFromAppForm, SetContextResolveExtraParams, SetModuleInfo, SetPreviewInfo, SetProperties, SetWorkflowOperations, ToggleValidationActive, UpdateField, UpdateFormSettings, UpdateSection, UpdateValidation };
|
|
3589
3663
|
//# sourceMappingURL=masterteam-form-builder.mjs.map
|