@masterteam/form-builder 0.0.38 → 0.0.40
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.
|
@@ -32,9 +32,9 @@ import { CONDITION_FUNCTION_CATEGORIES, CONDITION_OPERATORS, FormulaToolbar, For
|
|
|
32
32
|
import { Tooltip } from '@masterteam/components/tooltip';
|
|
33
33
|
import { ClientForm } from '@masterteam/forms/client-form';
|
|
34
34
|
import { Table } from '@masterteam/components/table';
|
|
35
|
+
import { startWith, of, map, catchError } from 'rxjs';
|
|
35
36
|
import { RadioCardsField } from '@masterteam/components/radio-cards-field';
|
|
36
37
|
import { FormulaBuilder } from '@masterteam/formula-builder';
|
|
37
|
-
import { of, map, catchError } from 'rxjs';
|
|
38
38
|
|
|
39
39
|
// ============================================================================
|
|
40
40
|
// Module Configuration Actions
|
|
@@ -1269,7 +1269,7 @@ class FBFieldConditions {
|
|
|
1269
1269
|
this.ref.close({ saved: false });
|
|
1270
1270
|
}
|
|
1271
1271
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldConditions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1272
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: FBFieldConditions, isStandalone: true, selector: "mt-fb-field-conditions", inputs: { initialFormula: { classPropertyName: "initialFormula", publicName: "initialFormula", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
1272
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: FBFieldConditions, isStandalone: true, selector: "mt-fb-field-conditions", inputs: { initialFormula: { classPropertyName: "initialFormula", publicName: "initialFormula", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], 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-4 flex h-full min-h-0 flex-col gap-3 overflow-y-auto pb-10\">\n <!-- Formula Toolbar -->\n <mt-formula-toolbar\n [knownProperties]=\"propertyKeys()\"\n [functionCategories]=\"functionCategories\"\n [operators]=\"operators\"\n [labels]=\"toolbarLabels()\"\n (onBlockInsert)=\"onBlockInsert($event)\"\n />\n <!-- Formula Editor -->\n <mt-formula-editor\n #editor\n [placeholder]=\"t('build-condition-formula')\"\n [formControl]=\"formulaControl\"\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 <mt-button\n [label]=\"t('cancel')\"\n variant=\"outlined\"\n [disabled]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onCancel()\"\n />\n <mt-button\n [label]=\"t('save')\"\n severity=\"primary\"\n [loading]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onSave()\"\n />\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: 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"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "propertiesTemplate", "functionCategories", "operators", "initialTab", "visibleTabs", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled", "borderless"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
|
|
1273
1273
|
}
|
|
1274
1274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldConditions, decorators: [{
|
|
1275
1275
|
type: Component,
|
|
@@ -1279,7 +1279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1279
1279
|
Button,
|
|
1280
1280
|
FormulaToolbar,
|
|
1281
1281
|
FormulaEditor,
|
|
1282
|
-
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
1282
|
+
], 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-4 flex h-full min-h-0 flex-col gap-3 overflow-y-auto pb-10\">\n <!-- Formula Toolbar -->\n <mt-formula-toolbar\n [knownProperties]=\"propertyKeys()\"\n [functionCategories]=\"functionCategories\"\n [operators]=\"operators\"\n [labels]=\"toolbarLabels()\"\n (onBlockInsert)=\"onBlockInsert($event)\"\n />\n <!-- Formula Editor -->\n <mt-formula-editor\n #editor\n [placeholder]=\"t('build-condition-formula')\"\n [formControl]=\"formulaControl\"\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 <mt-button\n [label]=\"t('cancel')\"\n variant=\"outlined\"\n [disabled]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onCancel()\"\n />\n <mt-button\n [label]=\"t('save')\"\n severity=\"primary\"\n [loading]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onSave()\"\n />\n </div>\n</ng-container>\n" }]
|
|
1283
1283
|
}], ctorParameters: () => [], propDecorators: { initialFormula: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFormula", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], editorRef: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
|
|
1284
1284
|
|
|
1285
1285
|
class FBFieldForm {
|
|
@@ -1327,6 +1327,12 @@ class FBFieldForm {
|
|
|
1327
1327
|
showHideControl = new FormControl(false);
|
|
1328
1328
|
isReadControl = new FormControl(true);
|
|
1329
1329
|
isWriteControl = new FormControl(true);
|
|
1330
|
+
// Custom label override
|
|
1331
|
+
editLabelControl = new FormControl(false);
|
|
1332
|
+
labelEnControl = new FormControl('', { nonNullable: true });
|
|
1333
|
+
labelArControl = new FormControl('', { nonNullable: true });
|
|
1334
|
+
/** Whether the field already had a custom label when the dialog opened. */
|
|
1335
|
+
hadInitialLabel = signal(false, ...(ngDevMode ? [{ debugName: "hadInitialLabel" }] : /* istanbul ignore next */ []));
|
|
1330
1336
|
formConfig = {
|
|
1331
1337
|
sections: [
|
|
1332
1338
|
{
|
|
@@ -1424,6 +1430,14 @@ class FBFieldForm {
|
|
|
1424
1430
|
// isRead/isWrite controls
|
|
1425
1431
|
this.isReadControl.patchValue(data.isRead !== false);
|
|
1426
1432
|
this.isWriteControl.patchValue(data.isWrite !== false);
|
|
1433
|
+
// Custom label override
|
|
1434
|
+
const label = data.label;
|
|
1435
|
+
const hasLabel = !!label &&
|
|
1436
|
+
((label.en ?? '').trim() !== '' || (label.ar ?? '').trim() !== '');
|
|
1437
|
+
this.hadInitialLabel.set(hasLabel);
|
|
1438
|
+
this.editLabelControl.patchValue(hasLabel);
|
|
1439
|
+
this.labelEnControl.patchValue(label?.en ?? '');
|
|
1440
|
+
this.labelArControl.patchValue(label?.ar ?? '');
|
|
1427
1441
|
}
|
|
1428
1442
|
});
|
|
1429
1443
|
// Cascade: isWrite=true forces isRead=true
|
|
@@ -1466,6 +1480,19 @@ class FBFieldForm {
|
|
|
1466
1480
|
payload['conditionalDisplayFormula'] = this.showHideControl.value
|
|
1467
1481
|
? this.conditionalDisplayFormula()
|
|
1468
1482
|
: null;
|
|
1483
|
+
// Custom label override:
|
|
1484
|
+
// - toggle on → send the entered ar/en values
|
|
1485
|
+
// - toggle off but a label existed → reset to the inherited label
|
|
1486
|
+
// - toggle off and no label existed → omit (backend keeps as-is)
|
|
1487
|
+
if (this.editLabelControl.value) {
|
|
1488
|
+
payload['label'] = {
|
|
1489
|
+
ar: this.labelArControl.value.trim(),
|
|
1490
|
+
en: this.labelEnControl.value.trim(),
|
|
1491
|
+
};
|
|
1492
|
+
}
|
|
1493
|
+
else if (this.hadInitialLabel()) {
|
|
1494
|
+
payload['useInheritedLabel'] = true;
|
|
1495
|
+
}
|
|
1469
1496
|
}
|
|
1470
1497
|
this.submitting.set(true);
|
|
1471
1498
|
this.facade.updateField(sectionId, field.id, payload).subscribe({
|
|
@@ -1513,7 +1540,7 @@ class FBFieldForm {
|
|
|
1513
1540
|
});
|
|
1514
1541
|
}
|
|
1515
1542
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1516
|
-
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 <mt-dynamic-form\r\n [formConfig]=\"activeFormConfig()\"\r\n [formControl]=\"formControl\"\r\n >\r\n </mt-dynamic-form>\r\n\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 [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 [formControl]=\"isWriteControl\"\r\n ></mt-toggle-field>\r\n\r\n @if (!isManageProperties()) {\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", "preserveForcedHiddenValues", "visibleSectionKeys"], 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"], 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"] }] });
|
|
1543
|
+
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 <mt-dynamic-form\r\n [formConfig]=\"activeFormConfig()\"\r\n [formControl]=\"formControl\"\r\n >\r\n </mt-dynamic-form>\r\n\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 [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 [formControl]=\"isWriteControl\"\r\n ></mt-toggle-field>\r\n\r\n @if (!isManageProperties()) {\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", "preserveForcedHiddenValues", "visibleSectionKeys"], 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"], 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"] }] });
|
|
1517
1544
|
}
|
|
1518
1545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldForm, decorators: [{
|
|
1519
1546
|
type: Component,
|
|
@@ -1523,7 +1550,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1523
1550
|
DynamicForm,
|
|
1524
1551
|
Button,
|
|
1525
1552
|
ToggleField,
|
|
1526
|
-
|
|
1553
|
+
TextField,
|
|
1554
|
+
], 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 <mt-dynamic-form\r\n [formConfig]=\"activeFormConfig()\"\r\n [formControl]=\"formControl\"\r\n >\r\n </mt-dynamic-form>\r\n\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 [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 [formControl]=\"isWriteControl\"\r\n ></mt-toggle-field>\r\n\r\n @if (!isManageProperties()) {\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" }]
|
|
1527
1555
|
}], 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 }] }] } });
|
|
1528
1556
|
|
|
1529
1557
|
const hasNonWhitespaceValue = (value) => {
|
|
@@ -1646,11 +1674,11 @@ class FBSectionForm {
|
|
|
1646
1674
|
});
|
|
1647
1675
|
}
|
|
1648
1676
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBSectionForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBSectionForm, isStandalone: true, selector: "mt-fb-section-form", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, sectionsCount: { classPropertyName: "sectionsCount", publicName: "sectionsCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
1677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBSectionForm, isStandalone: true, selector: "mt-fb-section-form", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, sectionsCount: { classPropertyName: "sectionsCount", publicName: "sectionsCount", 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-4 h-full min-h-0 overflow-y-auto pb-10\">\n <mt-dynamic-form [formConfig]=\"formConfig\" [formControl]=\"formControl\">\n </mt-dynamic-form>\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 (sectionId()) {\n <mt-button\n [tooltip]=\"t('delete')\"\n severity=\"danger\"\n 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", "preserveForcedHiddenValues", "visibleSectionKeys"], 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"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
1650
1678
|
}
|
|
1651
1679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBSectionForm, decorators: [{
|
|
1652
1680
|
type: Component,
|
|
1653
|
-
args: [{ selector: 'mt-fb-section-form', standalone: true, imports: [TranslocoDirective, ReactiveFormsModule, DynamicForm, Button], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
1681
|
+
args: [{ selector: 'mt-fb-section-form', standalone: true, imports: [TranslocoDirective, ReactiveFormsModule, DynamicForm, Button], 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-4 h-full min-h-0 overflow-y-auto pb-10\">\n <mt-dynamic-form [formConfig]=\"formConfig\" [formControl]=\"formControl\">\n </mt-dynamic-form>\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 (sectionId()) {\n <mt-button\n [tooltip]=\"t('delete')\"\n severity=\"danger\"\n 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" }]
|
|
1654
1682
|
}], ctorParameters: () => [], propDecorators: { sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionId", required: false }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], sectionsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsCount", required: false }] }] } });
|
|
1655
1683
|
|
|
1656
1684
|
class FBSection {
|
|
@@ -1884,7 +1912,7 @@ class FBSection {
|
|
|
1884
1912
|
return base;
|
|
1885
1913
|
}
|
|
1886
1914
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1887
|
-
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 (isManageProperties() ? '' : ' 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 (!isManageProperties()) {\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 <div\r\n class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\r\n >\r\n <div class=\"min-w-0 break-words font-semibold\">\r\n {{ field.name }}\r\n </div>\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 <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"], 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]" }] });
|
|
1915
|
+
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 (isManageProperties() ? '' : ' 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 (!isManageProperties()) {\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 <div\n class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\n >\n <div class=\"min-w-0 break-words font-semibold\">\n {{ field.name }}\n </div>\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 <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"], 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]" }] });
|
|
1888
1916
|
}
|
|
1889
1917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBSection, decorators: [{
|
|
1890
1918
|
type: Component,
|
|
@@ -1900,7 +1928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1900
1928
|
DynamicField,
|
|
1901
1929
|
ReactiveFormsModule,
|
|
1902
1930
|
Tooltip,
|
|
1903
|
-
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
1931
|
+
], 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 (isManageProperties() ? '' : ' 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 (!isManageProperties()) {\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 <div\n class=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4\"\n >\n <div class=\"min-w-0 break-words font-semibold\">\n {{ field.name }}\n </div>\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 <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" }]
|
|
1904
1932
|
}], 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"] }] } });
|
|
1905
1933
|
|
|
1906
1934
|
class FBPreviewForm {
|
|
@@ -1964,11 +1992,11 @@ class FBPreviewForm {
|
|
|
1964
1992
|
this.ref.close();
|
|
1965
1993
|
}
|
|
1966
1994
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBPreviewForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1967
|
-
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'\">\
|
|
1995
|
+
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'\">\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=\"h-full min-h-0 overflow-y-auto px-3 pb-10\">\n @if (moduleKey() && operationKey()) {\n <mt-client-form\n [moduleKey]=\"moduleKey()\"\n [operationKey]=\"operationKey()\"\n [moduleId]=\"previewModuleId()\"\n [levelId]=\"previewLevelId()\"\n [levelDataId]=\"previewInfo()?.levelDataId\"\n [moduleDataId]=\"previewInfo()?.moduleDataId\"\n [requestSchemaId]=\"previewInfo()?.requestSchemaId\"\n [autoLoad]=\"true\"\n [renderMode]=\"renderMode()\"\n />\n } @else {\n <div\n class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\n >\n {{ t(\"no-fields-visible\") }}\n </div>\n }\n </div>\n </div>\n</ng-container>\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", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "lookups", "statuses", "ignoredFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
|
|
1968
1996
|
}
|
|
1969
1997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBPreviewForm, decorators: [{
|
|
1970
1998
|
type: Component,
|
|
1971
|
-
args: [{ selector: 'mt-fb-preview-form', standalone: true, imports: [TranslocoDirective, ClientForm], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
1999
|
+
args: [{ selector: 'mt-fb-preview-form', standalone: true, imports: [TranslocoDirective, ClientForm], 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=\"h-full min-h-0 overflow-y-auto px-3 pb-10\">\n @if (moduleKey() && operationKey()) {\n <mt-client-form\n [moduleKey]=\"moduleKey()\"\n [operationKey]=\"operationKey()\"\n [moduleId]=\"previewModuleId()\"\n [levelId]=\"previewLevelId()\"\n [levelDataId]=\"previewInfo()?.levelDataId\"\n [moduleDataId]=\"previewInfo()?.moduleDataId\"\n [requestSchemaId]=\"previewInfo()?.requestSchemaId\"\n [autoLoad]=\"true\"\n [renderMode]=\"renderMode()\"\n />\n } @else {\n <div\n class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\n >\n {{ t(\"no-fields-visible\") }}\n </div>\n }\n </div>\n </div>\n</ng-container>\n" }]
|
|
1972
2000
|
}] });
|
|
1973
2001
|
|
|
1974
2002
|
const EMPTY_FORMULA_VALIDATION = {
|
|
@@ -1999,6 +2027,7 @@ class FBValidationRuleForm {
|
|
|
1999
2027
|
nonNullable: true,
|
|
2000
2028
|
});
|
|
2001
2029
|
formulaControl = new FormControl(null);
|
|
2030
|
+
formulaValue = toSignal(this.formulaControl.valueChanges.pipe(startWith(this.formulaControl.value)), { initialValue: this.formulaControl.value });
|
|
2002
2031
|
formulaValidation = signal(EMPTY_FORMULA_VALIDATION, ...(ngDevMode ? [{ debugName: "formulaValidation" }] : /* istanbul ignore next */ []));
|
|
2003
2032
|
builderSchemaId = computed(() => {
|
|
2004
2033
|
const parentModuleId = this.toNumericId(this.parentModuleId());
|
|
@@ -2048,7 +2077,7 @@ class FBValidationRuleForm {
|
|
|
2048
2077
|
};
|
|
2049
2078
|
}, ...(ngDevMode ? [{ debugName: "formulaPropertiesByPath" }] : /* istanbul ignore next */ []));
|
|
2050
2079
|
hasFormula = computed(() => {
|
|
2051
|
-
const value = this.
|
|
2080
|
+
const value = this.formulaValue();
|
|
2052
2081
|
const expression = value?.expression?.trim() ?? '';
|
|
2053
2082
|
return expression.length > 0 || (value?.builder?.length ?? 0) > 0;
|
|
2054
2083
|
}, ...(ngDevMode ? [{ debugName: "hasFormula" }] : /* istanbul ignore next */ []));
|
|
@@ -2104,7 +2133,7 @@ class FBValidationRuleForm {
|
|
|
2104
2133
|
this.formulaValidation.set(result);
|
|
2105
2134
|
}
|
|
2106
2135
|
onSave() {
|
|
2107
|
-
const formulaValue = this.
|
|
2136
|
+
const formulaValue = this.formulaValue();
|
|
2108
2137
|
const formulaPayload = this.buildFormulaPayload(formulaValue);
|
|
2109
2138
|
if (!formulaPayload || !this.formulaValidation().isValid) {
|
|
2110
2139
|
return;
|
|
@@ -2180,7 +2209,7 @@ class FBValidationRuleForm {
|
|
|
2180
2209
|
this.saveError.set(message);
|
|
2181
2210
|
}
|
|
2182
2211
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBValidationRuleForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2183
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBValidationRuleForm, isStandalone: true, selector: "mt-fb-validation-rule-form", inputs: { initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
2212
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBValidationRuleForm, isStandalone: true, selector: "mt-fb-validation-rule-form", inputs: { initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", 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-4 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\n <mt-formula-builder\n [placeholder]=\"t('validation-formula-placeholder')\"\n [formControl]=\"formulaControl\"\n [levelSchemaId]=\"builderSchemaId()\"\n [moduleId]=\"builderModuleId()\"\n [contextEntityTypeKey]=\"builderContextEntityTypeKey()\"\n [propertiesByPath]=\"formulaPropertiesByPath()\"\n (validationChange)=\"onFormulaValidationChange($event)\"\n />\n <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <mt-text-field\n [label]=\"t('message-en')\"\n [placeholder]=\"t('message-en')\"\n [formControl]=\"messageEnControl\"\n />\n <mt-text-field\n [label]=\"t('message-ar')\"\n [placeholder]=\"t('message-ar')\"\n [formControl]=\"messageArControl\"\n />\n </div>\n <mt-radio-cards-field\n [label]=\"t('severity')\"\n [hint]=\"t('severity-hint')\"\n [options]=\"severityOptions()\"\n [formControl]=\"severityControl\"\n />\n @if (saveError(); as error) {\n <div\n class=\"rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\n >\n {{ error }}\n </div>\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 <mt-button\n [label]=\"t('cancel')\"\n variant=\"outlined\"\n [disabled]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onCancel()\"\n />\n <mt-button\n [label]=\"t('save')\"\n severity=\"primary\"\n [loading]=\"submitting()\"\n [disabled]=\"!canSave()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onSave()\"\n />\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: 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"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: RadioCardsField, selector: "mt-radio-cards-field", inputs: ["circle", "label", "hint", "readonly", "required", "color", "size", "optionLabel", "optionValue", "options"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "toolbarTabs", "codeOnly", "isProcessBuilder"], outputs: ["validationChange", "tokensChange"] }] });
|
|
2184
2213
|
}
|
|
2185
2214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBValidationRuleForm, decorators: [{
|
|
2186
2215
|
type: Component,
|
|
@@ -2191,7 +2220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
2191
2220
|
TextField,
|
|
2192
2221
|
RadioCardsField,
|
|
2193
2222
|
FormulaBuilder,
|
|
2194
|
-
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
2223
|
+
], 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-4 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\n <mt-formula-builder\n [placeholder]=\"t('validation-formula-placeholder')\"\n [formControl]=\"formulaControl\"\n [levelSchemaId]=\"builderSchemaId()\"\n [moduleId]=\"builderModuleId()\"\n [contextEntityTypeKey]=\"builderContextEntityTypeKey()\"\n [propertiesByPath]=\"formulaPropertiesByPath()\"\n (validationChange)=\"onFormulaValidationChange($event)\"\n />\n <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <mt-text-field\n [label]=\"t('message-en')\"\n [placeholder]=\"t('message-en')\"\n [formControl]=\"messageEnControl\"\n />\n <mt-text-field\n [label]=\"t('message-ar')\"\n [placeholder]=\"t('message-ar')\"\n [formControl]=\"messageArControl\"\n />\n </div>\n <mt-radio-cards-field\n [label]=\"t('severity')\"\n [hint]=\"t('severity-hint')\"\n [options]=\"severityOptions()\"\n [formControl]=\"severityControl\"\n />\n @if (saveError(); as error) {\n <div\n class=\"rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\n >\n {{ error }}\n </div>\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 <mt-button\n [label]=\"t('cancel')\"\n variant=\"outlined\"\n [disabled]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onCancel()\"\n />\n <mt-button\n [label]=\"t('save')\"\n severity=\"primary\"\n [loading]=\"submitting()\"\n [disabled]=\"!canSave()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onSave()\"\n />\n </div>\n</ng-container>\n" }]
|
|
2195
2224
|
}], ctorParameters: () => [], propDecorators: { initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }] } });
|
|
2196
2225
|
|
|
2197
2226
|
class FBValidationRules {
|
|
@@ -2331,11 +2360,11 @@ class FBValidationRules {
|
|
|
2331
2360
|
.subscribe();
|
|
2332
2361
|
}
|
|
2333
2362
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBValidationRules, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2334
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: FBValidationRules, isStandalone: true, selector: "mt-fb-validation-rules", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
2363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: FBValidationRules, isStandalone: true, selector: "mt-fb-validation-rules", 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-auto',\n 'max-[640px]:p-3',\n ]\"\n >\n <div class=\"flex justify-end pb-4 max-[640px]:justify-stretch\">\n <mt-button\n [label]=\"t('add-validation-rule')\"\n severity=\"primary\"\n variant=\"outlined\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"openCreate()\"\n ></mt-button>\n </div>\n <mt-table\n noCard\n [data]=\"tableRows()\"\n [columns]=\"tableColumns()\"\n [rowActions]=\"rowActions()\"\n storageKey=\"fb-validation-rules-table\"\n (cellChange)=\"onCellChange($event)\"\n ></mt-table>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { 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"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
2335
2364
|
}
|
|
2336
2365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBValidationRules, decorators: [{
|
|
2337
2366
|
type: Component,
|
|
2338
|
-
args: [{ selector: 'mt-fb-validation-rules', standalone: true, imports: [TranslocoDirective, Table, Button], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\
|
|
2367
|
+
args: [{ selector: 'mt-fb-validation-rules', standalone: true, imports: [TranslocoDirective, Table, Button], 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-auto',\n 'max-[640px]:p-3',\n ]\"\n >\n <div class=\"flex justify-end pb-4 max-[640px]:justify-stretch\">\n <mt-button\n [label]=\"t('add-validation-rule')\"\n severity=\"primary\"\n variant=\"outlined\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"openCreate()\"\n ></mt-button>\n </div>\n <mt-table\n noCard\n [data]=\"tableRows()\"\n [columns]=\"tableColumns()\"\n [rowActions]=\"rowActions()\"\n storageKey=\"fb-validation-rules-table\"\n (cellChange)=\"onCellChange($event)\"\n ></mt-table>\n </div>\n</ng-container>\n" }]
|
|
2339
2368
|
}], ctorParameters: () => [] });
|
|
2340
2369
|
|
|
2341
2370
|
class FormBuilderContextService {
|
|
@@ -3058,7 +3087,7 @@ class FormBuilder {
|
|
|
3058
3087
|
}
|
|
3059
3088
|
noReturnPredicate = () => false;
|
|
3060
3089
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3061
|
-
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() !== \"manageProperties\") {\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() === 'manageProperties'\"\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() === 'manageProperties'\"\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"], 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"] }] });
|
|
3090
|
+
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() !== \"manageProperties\") {\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() === 'manageProperties'\"\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() === 'manageProperties'\"\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"], 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"] }] });
|
|
3062
3091
|
}
|
|
3063
3092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormBuilder, decorators: [{
|
|
3064
3093
|
type: Component,
|
|
@@ -3076,7 +3105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
3076
3105
|
FBSection,
|
|
3077
3106
|
DragDropModule,
|
|
3078
3107
|
Icon,
|
|
3079
|
-
], 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() !== \"manageProperties\") {\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() === 'manageProperties'\"\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() === 'manageProperties'\"\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"] }]
|
|
3108
|
+
], 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() !== \"manageProperties\") {\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() === 'manageProperties'\"\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() === 'manageProperties'\"\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"] }]
|
|
3080
3109
|
}], 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 }] }] } });
|
|
3081
3110
|
|
|
3082
3111
|
/*
|