@masterteam/properties 0.0.18 → 0.0.20

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.
@@ -15,6 +15,7 @@ import { Button } from '@masterteam/components/button';
15
15
  import * as i1 from '@jsverse/transloco';
16
16
  import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
17
17
  import { toSignal } from '@angular/core/rxjs-interop';
18
+ import { Page } from '@masterteam/components/page';
18
19
  import { DynamicForm } from '@masterteam/forms/dynamic-form';
19
20
  import { PickListFieldConfig, ValidatorConfig } from '@masterteam/components';
20
21
  import * as i1$1 from '@angular/forms';
@@ -546,8 +547,8 @@ let PropertiesState = class PropertiesState {
546
547
  defaultViewType: action.viewType,
547
548
  });
548
549
  }
549
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
550
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesState });
550
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertiesState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
551
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertiesState });
551
552
  };
552
553
  __decorate([
553
554
  Action(GetProperties)
@@ -657,7 +658,7 @@ PropertiesState = __decorate([
657
658
  defaults: DEFAULT_STATE,
658
659
  })
659
660
  ], PropertiesState);
660
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesState, decorators: [{
661
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertiesState, decorators: [{
661
662
  type: Injectable
662
663
  }], propDecorators: { getAll: [], getOne: [], getLookups: [], getGroups: [], getConfigAsType: [], getCountries: [], testApiConfiguration: [], resetApiConfiguration: [], getPropertiesForConfigType: [], resetConfigProperties: [], resetConfigScopes: [], resetSelectedProperty: [], setModuleInfo: [], create: [], update: [], delete: [], SetPropertyTypes: [], setBreadcrumb: [], setDefaultViewType: [] } });
663
664
 
@@ -675,8 +676,8 @@ class PropertiesFacade {
675
676
  apiProperties = select(PropertiesState.apiProperties);
676
677
  breadcrumbItems = select(PropertiesState.breadcrumbItems);
677
678
  defaultViewType = select(PropertiesState.defaultViewType);
678
- systemProperties = computed(() => this.list().filter((property) => Boolean(property.isSystem)), ...(ngDevMode ? [{ debugName: "systemProperties" }] : []));
679
- customProperties = computed(() => this.list().filter((property) => !Boolean(property.isSystem)), ...(ngDevMode ? [{ debugName: "customProperties" }] : []));
679
+ systemProperties = computed(() => this.list().filter((property) => Boolean(property.isSystem)), { ...(ngDevMode ? { debugName: "systemProperties" } : {}) });
680
+ customProperties = computed(() => this.list().filter((property) => !Boolean(property.isSystem)), { ...(ngDevMode ? { debugName: "customProperties" } : {}) });
680
681
  isLoading(loadingName) {
681
682
  const loadingFactory = select(PropertiesState.isLoadingFactory);
682
683
  return computed(() => loadingFactory()(loadingName));
@@ -738,10 +739,10 @@ class PropertiesFacade {
738
739
  setDefaultViewType(viewType) {
739
740
  return this.store.dispatch(new SetDefaultViewType(viewType));
740
741
  }
741
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
742
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesFacade, providedIn: 'root' });
742
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertiesFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
743
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertiesFacade, providedIn: 'root' });
743
744
  }
744
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesFacade, decorators: [{
745
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertiesFacade, decorators: [{
745
746
  type: Injectable,
746
747
  args: [{
747
748
  providedIn: 'root',
@@ -763,7 +764,7 @@ class PropertiesList {
763
764
  route = inject(ActivatedRoute);
764
765
  transloco = inject(TranslocoService);
765
766
  defaultTab = 'all';
766
- tab = input(...(ngDevMode ? [undefined, { debugName: "tab" }] : []));
767
+ tab = input(undefined, { ...(ngDevMode ? { debugName: "tab" } : {}) });
767
768
  tabs = signal([
768
769
  {
769
770
  label: this.transloco.translate('properties.list.tabAll'),
@@ -777,10 +778,10 @@ class PropertiesList {
777
778
  label: this.transloco.translate('properties.list.tabCustom'),
778
779
  value: 'custom',
779
780
  },
780
- ], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
781
+ ], { ...(ngDevMode ? { debugName: "tabs" } : {}) });
781
782
  activeTab = linkedSignal(() => {
782
783
  return this.tab() || this.defaultTab;
783
- });
784
+ }, { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
784
785
  tableColumns = signal([
785
786
  {
786
787
  key: 'title',
@@ -795,7 +796,7 @@ class PropertiesList {
795
796
  label: this.transloco.translate('properties.list.columnRequired'),
796
797
  type: 'boolean',
797
798
  },
798
- ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
799
+ ], { ...(ngDevMode ? { debugName: "tableColumns" } : {}) });
799
800
  propertyTypes = signal([
800
801
  {
801
802
  label: this.transloco.translate('properties.list.typeShortText'),
@@ -833,7 +834,7 @@ class PropertiesList {
833
834
  value: 'Lookup',
834
835
  color: 'lime',
835
836
  },
836
- ], ...(ngDevMode ? [{ debugName: "propertyTypes" }] : []));
837
+ ], { ...(ngDevMode ? { debugName: "propertyTypes" } : {}) });
837
838
  tableActions = computed(() => {
838
839
  if (this.tableData().length === 0 || this.activeTab() === 'system') {
839
840
  return [];
@@ -848,8 +849,8 @@ class PropertiesList {
848
849
  },
849
850
  },
850
851
  ];
851
- }, ...(ngDevMode ? [{ debugName: "tableActions" }] : []));
852
- deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : []));
852
+ }, { ...(ngDevMode ? { debugName: "tableActions" } : {}) });
853
+ deletingRowIds = signal([], { ...(ngDevMode ? { debugName: "deletingRowIds" } : {}) });
853
854
  rowActions = signal([
854
855
  {
855
856
  icon: 'custom.pencil',
@@ -870,7 +871,7 @@ class PropertiesList {
870
871
  },
871
872
  loading: (row) => this.deletingRowIds().includes(row.id),
872
873
  },
873
- ], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
874
+ ], { ...(ngDevMode ? { debugName: "rowActions" } : {}) });
874
875
  loading = this.facade.isLoading('getAll');
875
876
  tableData = computed(() => {
876
877
  const tab = this.activeTab();
@@ -884,7 +885,7 @@ class PropertiesList {
884
885
  default:
885
886
  return allProperties;
886
887
  }
887
- }, ...(ngDevMode ? [{ debugName: "tableData" }] : []));
888
+ }, { ...(ngDevMode ? { debugName: "tableData" } : {}) });
888
889
  breadcrumbItems = this.facade.breadcrumbItems;
889
890
  editRow(row) {
890
891
  if (!row?.id) {
@@ -932,10 +933,10 @@ class PropertiesList {
932
933
  queryParamsHandling: 'merge',
933
934
  });
934
935
  }
935
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesList, deps: [], target: i0.ɵɵFactoryTarget.Component });
936
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"space-y-3\">\n <div class=\"flex items-center justify-between\">\n <div class=\"space-y-1\">\n <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n {{ \"properties.list.pageTitle\" | transloco }}\n </h1>\n <mt-breadcrumb\n [items]=\"breadcrumbItems()\"\n [styleClass]=\"'flex justify-center'\"\n >\n </mt-breadcrumb>\n </div>\n </div>\n <mt-table\n [tabs]=\"tabs()\"\n [(activeTab)]=\"activeTab\"\n (onTabChange)=\"onTabChange($event)\"\n [data]=\"tableData()\"\n [actions]=\"tableActions()\"\n [columns]=\"tableColumns()\"\n [rowActions]=\"rowActions()\"\n [generalSearch]=\"true\"\n [loading]=\"loading()\"\n >\n <ng-template #empty>\n <div headless class=\"flex-col justify-center items-center w-full p-5\">\n <div class=\"content flex flex-col gap-5 items-center text-center mb-5\">\n <svg\n width=\"152\"\n height=\"120\"\n viewBox=\"0 0 152 120\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\n <g filter=\"url(#filter0_ddd_2474_28277)\">\n <path\n d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\n fill=\"#FAFAFA\"\n />\n <ellipse\n cx=\"45.6\"\n cy=\"54.3998\"\n rx=\"25.6\"\n ry=\"25.6\"\n fill=\"url(#paint0_linear_2474_28277)\"\n />\n <circle\n cx=\"77.6016\"\n cy=\"48\"\n r=\"32\"\n fill=\"url(#paint1_linear_2474_28277)\"\n />\n <ellipse\n cx=\"109.599\"\n cy=\"57.6002\"\n rx=\"22.4\"\n ry=\"22.4\"\n fill=\"url(#paint2_linear_2474_28277)\"\n />\n </g>\n <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\n <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\n <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\n <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\n <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\n <div\n xmlns=\"http://www.w3.org/1999/xhtml\"\n style=\"\n backdrop-filter: blur(4px);\n clip-path: url(#bgblur_0_2474_28277_clip_path);\n height: 100%;\n width: 100%;\n \"\n ></div>\n </foreignObject>\n <g data-figma-bg-blur-radius=\"8\">\n <path\n d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n fill=\"#344054\"\n fill-opacity=\"0.4\"\n />\n <path\n d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\n stroke=\"white\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n <defs>\n <filter\n id=\"filter0_ddd_2474_28277\"\n x=\"0\"\n y=\"16\"\n width=\"152\"\n height=\"104\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"1.5\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect1_dropShadow_2474_28277\"\n />\n <feOffset dy=\"3\" />\n <feGaussianBlur stdDeviation=\"1.5\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"BackgroundImageFix\"\n result=\"effect1_dropShadow_2474_28277\"\n />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"4\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect2_dropShadow_2474_28277\"\n />\n <feOffset dy=\"8\" />\n <feGaussianBlur stdDeviation=\"4\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"effect1_dropShadow_2474_28277\"\n result=\"effect2_dropShadow_2474_28277\"\n />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"4\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect3_dropShadow_2474_28277\"\n />\n <feOffset dy=\"20\" />\n <feGaussianBlur stdDeviation=\"12\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"effect2_dropShadow_2474_28277\"\n result=\"effect3_dropShadow_2474_28277\"\n />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"effect3_dropShadow_2474_28277\"\n result=\"shape\"\n />\n </filter>\n <clipPath\n id=\"bgblur_0_2474_28277_clip_path\"\n transform=\"translate(-44 -54)\"\n >\n <path\n d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n />\n </clipPath>\n <linearGradient\n id=\"paint0_linear_2474_28277\"\n x1=\"25.9429\"\n y1=\"37.4855\"\n x2=\"71.2\"\n y2=\"79.9998\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_2474_28277\"\n x1=\"53.0301\"\n y1=\"26.8571\"\n x2=\"109.602\"\n y2=\"80\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint2_linear_2474_28277\"\n x1=\"92.3992\"\n y1=\"42.8002\"\n x2=\"131.999\"\n y2=\"80.0002\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n\n <div class=\"flex flex-col gap-1\">\n <div class=\"text-md text-surface-600\">\n {{ \"properties.list.emptyStateNoData\" | transloco }}\n </div>\n </div>\n <div>\n <mt-button\n [label]=\"'properties.list.addNewProperty' | transloco\"\n icon=\"general.plus\"\n (click)=\"createProperty()\"\n />\n </div>\n </div>\n <p-divider type=\"solid\">\n <div class=\"text-lg text-surface-600\">\n {{ \"properties.list.emptyStateTemplate\" | transloco }}\n </div>\n </p-divider>\n <div class=\"flex gap-3 mt-5 justify-center\">\n @for (card of propertyTypes(); track card.label) {\n <mt-card\n headless\n class=\"w-25 tailwind-4 cursor-pointer\"\n style=\"background-color: #fafafa\"\n (click)=\"createPropertyWithType(card.value)\"\n >\n <div class=\"content flex flex-col gap-3 items-center text-center\">\n <mt-avatar\n [style.--p-avatar-background]=\"\n 'var(--p-' + card.color + '-100)'\n \"\n [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\n [icon]=\"card.icon\"\n shape=\"square\"\n ></mt-avatar>\n <div class=\"flex flex-col gap-1\">\n <div class=\"text-xs font-normal\">{{ card.label }}</div>\n </div>\n </div>\n </mt-card>\n }\n </div>\n </div>\n </ng-template>\n </mt-table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { 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: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
936
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertiesList, deps: [], target: i0.ɵɵFactoryTarget.Component });
937
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"space-y-3\">\n <div class=\"flex items-center justify-between\">\n <div class=\"space-y-1\">\n <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n {{ \"properties.list.pageTitle\" | transloco }}\n </h1>\n <mt-breadcrumb\n [items]=\"breadcrumbItems()\"\n [styleClass]=\"'flex justify-center'\"\n >\n </mt-breadcrumb>\n </div>\n </div>\n <mt-card paddingless>\n <mt-table\n [tabs]=\"tabs()\"\n [(activeTab)]=\"activeTab\"\n (onTabChange)=\"onTabChange($event)\"\n [data]=\"tableData()\"\n [actions]=\"tableActions()\"\n [columns]=\"tableColumns()\"\n [rowActions]=\"rowActions()\"\n [generalSearch]=\"true\"\n [loading]=\"loading()\"\n >\n <ng-template #empty>\n <div headless class=\"flex-col justify-center items-center w-full p-5\">\n <div\n class=\"content flex flex-col gap-5 items-center text-center mb-5\"\n >\n <svg\n width=\"152\"\n height=\"120\"\n viewBox=\"0 0 152 120\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\n <g filter=\"url(#filter0_ddd_2474_28277)\">\n <path\n d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\n fill=\"#FAFAFA\"\n />\n <ellipse\n cx=\"45.6\"\n cy=\"54.3998\"\n rx=\"25.6\"\n ry=\"25.6\"\n fill=\"url(#paint0_linear_2474_28277)\"\n />\n <circle\n cx=\"77.6016\"\n cy=\"48\"\n r=\"32\"\n fill=\"url(#paint1_linear_2474_28277)\"\n />\n <ellipse\n cx=\"109.599\"\n cy=\"57.6002\"\n rx=\"22.4\"\n ry=\"22.4\"\n fill=\"url(#paint2_linear_2474_28277)\"\n />\n </g>\n <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\n <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\n <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\n <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\n <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\n <div\n xmlns=\"http://www.w3.org/1999/xhtml\"\n style=\"\n backdrop-filter: blur(4px);\n clip-path: url(#bgblur_0_2474_28277_clip_path);\n height: 100%;\n width: 100%;\n \"\n ></div>\n </foreignObject>\n <g data-figma-bg-blur-radius=\"8\">\n <path\n d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n fill=\"#344054\"\n fill-opacity=\"0.4\"\n />\n <path\n d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\n stroke=\"white\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n <defs>\n <filter\n id=\"filter0_ddd_2474_28277\"\n x=\"0\"\n y=\"16\"\n width=\"152\"\n height=\"104\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"1.5\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect1_dropShadow_2474_28277\"\n />\n <feOffset dy=\"3\" />\n <feGaussianBlur stdDeviation=\"1.5\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"BackgroundImageFix\"\n result=\"effect1_dropShadow_2474_28277\"\n />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"4\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect2_dropShadow_2474_28277\"\n />\n <feOffset dy=\"8\" />\n <feGaussianBlur stdDeviation=\"4\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"effect1_dropShadow_2474_28277\"\n result=\"effect2_dropShadow_2474_28277\"\n />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"4\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect3_dropShadow_2474_28277\"\n />\n <feOffset dy=\"20\" />\n <feGaussianBlur stdDeviation=\"12\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"effect2_dropShadow_2474_28277\"\n result=\"effect3_dropShadow_2474_28277\"\n />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"effect3_dropShadow_2474_28277\"\n result=\"shape\"\n />\n </filter>\n <clipPath\n id=\"bgblur_0_2474_28277_clip_path\"\n transform=\"translate(-44 -54)\"\n >\n <path\n d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n />\n </clipPath>\n <linearGradient\n id=\"paint0_linear_2474_28277\"\n x1=\"25.9429\"\n y1=\"37.4855\"\n x2=\"71.2\"\n y2=\"79.9998\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_2474_28277\"\n x1=\"53.0301\"\n y1=\"26.8571\"\n x2=\"109.602\"\n y2=\"80\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint2_linear_2474_28277\"\n x1=\"92.3992\"\n y1=\"42.8002\"\n x2=\"131.999\"\n y2=\"80.0002\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n\n <div class=\"flex flex-col gap-1\">\n <div class=\"text-md text-surface-600\">\n {{ \"properties.list.emptyStateNoData\" | transloco }}\n </div>\n </div>\n <div>\n <mt-button\n [label]=\"'properties.list.addNewProperty' | transloco\"\n icon=\"general.plus\"\n (click)=\"createProperty()\"\n />\n </div>\n </div>\n <p-divider type=\"solid\">\n <div class=\"text-lg text-surface-600\">\n {{ \"properties.list.emptyStateTemplate\" | transloco }}\n </div>\n </p-divider>\n <div class=\"flex gap-3 mt-5 justify-center\">\n @for (card of propertyTypes(); track card.label) {\n <mt-card\n headless\n class=\"w-25 tailwind-4 cursor-pointer\"\n style=\"background-color: #fafafa\"\n (click)=\"createPropertyWithType(card.value)\"\n >\n <div\n class=\"content flex flex-col gap-3 items-center text-center\"\n >\n <mt-avatar\n [style.--p-avatar-background]=\"\n 'var(--p-' + card.color + '-100)'\n \"\n [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\n [icon]=\"card.icon\"\n shape=\"square\"\n ></mt-avatar>\n <div class=\"flex flex-col gap-1\">\n <div class=\"text-xs font-normal\">{{ card.label }}</div>\n </div>\n </div>\n </mt-card>\n }\n </div>\n </div>\n </ng-template>\n </mt-table>\n </mt-card>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { 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: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
937
938
  }
938
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesList, decorators: [{
939
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertiesList, decorators: [{
939
940
  type: Component,
940
941
  args: [{ selector: 'mt-properties-list', standalone: true, imports: [
941
942
  CommonModule,
@@ -946,19 +947,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
946
947
  Divider,
947
948
  Button,
948
949
  TranslocoModule,
949
- ], template: "<div class=\"space-y-3\">\n <div class=\"flex items-center justify-between\">\n <div class=\"space-y-1\">\n <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n {{ \"properties.list.pageTitle\" | transloco }}\n </h1>\n <mt-breadcrumb\n [items]=\"breadcrumbItems()\"\n [styleClass]=\"'flex justify-center'\"\n >\n </mt-breadcrumb>\n </div>\n </div>\n <mt-table\n [tabs]=\"tabs()\"\n [(activeTab)]=\"activeTab\"\n (onTabChange)=\"onTabChange($event)\"\n [data]=\"tableData()\"\n [actions]=\"tableActions()\"\n [columns]=\"tableColumns()\"\n [rowActions]=\"rowActions()\"\n [generalSearch]=\"true\"\n [loading]=\"loading()\"\n >\n <ng-template #empty>\n <div headless class=\"flex-col justify-center items-center w-full p-5\">\n <div class=\"content flex flex-col gap-5 items-center text-center mb-5\">\n <svg\n width=\"152\"\n height=\"120\"\n viewBox=\"0 0 152 120\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\n <g filter=\"url(#filter0_ddd_2474_28277)\">\n <path\n d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\n fill=\"#FAFAFA\"\n />\n <ellipse\n cx=\"45.6\"\n cy=\"54.3998\"\n rx=\"25.6\"\n ry=\"25.6\"\n fill=\"url(#paint0_linear_2474_28277)\"\n />\n <circle\n cx=\"77.6016\"\n cy=\"48\"\n r=\"32\"\n fill=\"url(#paint1_linear_2474_28277)\"\n />\n <ellipse\n cx=\"109.599\"\n cy=\"57.6002\"\n rx=\"22.4\"\n ry=\"22.4\"\n fill=\"url(#paint2_linear_2474_28277)\"\n />\n </g>\n <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\n <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\n <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\n <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\n <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\n <div\n xmlns=\"http://www.w3.org/1999/xhtml\"\n style=\"\n backdrop-filter: blur(4px);\n clip-path: url(#bgblur_0_2474_28277_clip_path);\n height: 100%;\n width: 100%;\n \"\n ></div>\n </foreignObject>\n <g data-figma-bg-blur-radius=\"8\">\n <path\n d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n fill=\"#344054\"\n fill-opacity=\"0.4\"\n />\n <path\n d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\n stroke=\"white\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n <defs>\n <filter\n id=\"filter0_ddd_2474_28277\"\n x=\"0\"\n y=\"16\"\n width=\"152\"\n height=\"104\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"1.5\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect1_dropShadow_2474_28277\"\n />\n <feOffset dy=\"3\" />\n <feGaussianBlur stdDeviation=\"1.5\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"BackgroundImageFix\"\n result=\"effect1_dropShadow_2474_28277\"\n />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"4\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect2_dropShadow_2474_28277\"\n />\n <feOffset dy=\"8\" />\n <feGaussianBlur stdDeviation=\"4\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"effect1_dropShadow_2474_28277\"\n result=\"effect2_dropShadow_2474_28277\"\n />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"4\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect3_dropShadow_2474_28277\"\n />\n <feOffset dy=\"20\" />\n <feGaussianBlur stdDeviation=\"12\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"effect2_dropShadow_2474_28277\"\n result=\"effect3_dropShadow_2474_28277\"\n />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"effect3_dropShadow_2474_28277\"\n result=\"shape\"\n />\n </filter>\n <clipPath\n id=\"bgblur_0_2474_28277_clip_path\"\n transform=\"translate(-44 -54)\"\n >\n <path\n d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n />\n </clipPath>\n <linearGradient\n id=\"paint0_linear_2474_28277\"\n x1=\"25.9429\"\n y1=\"37.4855\"\n x2=\"71.2\"\n y2=\"79.9998\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_2474_28277\"\n x1=\"53.0301\"\n y1=\"26.8571\"\n x2=\"109.602\"\n y2=\"80\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint2_linear_2474_28277\"\n x1=\"92.3992\"\n y1=\"42.8002\"\n x2=\"131.999\"\n y2=\"80.0002\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n\n <div class=\"flex flex-col gap-1\">\n <div class=\"text-md text-surface-600\">\n {{ \"properties.list.emptyStateNoData\" | transloco }}\n </div>\n </div>\n <div>\n <mt-button\n [label]=\"'properties.list.addNewProperty' | transloco\"\n icon=\"general.plus\"\n (click)=\"createProperty()\"\n />\n </div>\n </div>\n <p-divider type=\"solid\">\n <div class=\"text-lg text-surface-600\">\n {{ \"properties.list.emptyStateTemplate\" | transloco }}\n </div>\n </p-divider>\n <div class=\"flex gap-3 mt-5 justify-center\">\n @for (card of propertyTypes(); track card.label) {\n <mt-card\n headless\n class=\"w-25 tailwind-4 cursor-pointer\"\n style=\"background-color: #fafafa\"\n (click)=\"createPropertyWithType(card.value)\"\n >\n <div class=\"content flex flex-col gap-3 items-center text-center\">\n <mt-avatar\n [style.--p-avatar-background]=\"\n 'var(--p-' + card.color + '-100)'\n \"\n [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\n [icon]=\"card.icon\"\n shape=\"square\"\n ></mt-avatar>\n <div class=\"flex flex-col gap-1\">\n <div class=\"text-xs font-normal\">{{ card.label }}</div>\n </div>\n </div>\n </mt-card>\n }\n </div>\n </div>\n </ng-template>\n </mt-table>\n</div>\n" }]
950
- }] });
950
+ ], template: "<div class=\"space-y-3\">\n <div class=\"flex items-center justify-between\">\n <div class=\"space-y-1\">\n <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n {{ \"properties.list.pageTitle\" | transloco }}\n </h1>\n <mt-breadcrumb\n [items]=\"breadcrumbItems()\"\n [styleClass]=\"'flex justify-center'\"\n >\n </mt-breadcrumb>\n </div>\n </div>\n <mt-card paddingless>\n <mt-table\n [tabs]=\"tabs()\"\n [(activeTab)]=\"activeTab\"\n (onTabChange)=\"onTabChange($event)\"\n [data]=\"tableData()\"\n [actions]=\"tableActions()\"\n [columns]=\"tableColumns()\"\n [rowActions]=\"rowActions()\"\n [generalSearch]=\"true\"\n [loading]=\"loading()\"\n >\n <ng-template #empty>\n <div headless class=\"flex-col justify-center items-center w-full p-5\">\n <div\n class=\"content flex flex-col gap-5 items-center text-center mb-5\"\n >\n <svg\n width=\"152\"\n height=\"120\"\n viewBox=\"0 0 152 120\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\n <g filter=\"url(#filter0_ddd_2474_28277)\">\n <path\n d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\n fill=\"#FAFAFA\"\n />\n <ellipse\n cx=\"45.6\"\n cy=\"54.3998\"\n rx=\"25.6\"\n ry=\"25.6\"\n fill=\"url(#paint0_linear_2474_28277)\"\n />\n <circle\n cx=\"77.6016\"\n cy=\"48\"\n r=\"32\"\n fill=\"url(#paint1_linear_2474_28277)\"\n />\n <ellipse\n cx=\"109.599\"\n cy=\"57.6002\"\n rx=\"22.4\"\n ry=\"22.4\"\n fill=\"url(#paint2_linear_2474_28277)\"\n />\n </g>\n <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\n <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\n <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\n <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\n <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\n <div\n xmlns=\"http://www.w3.org/1999/xhtml\"\n style=\"\n backdrop-filter: blur(4px);\n clip-path: url(#bgblur_0_2474_28277_clip_path);\n height: 100%;\n width: 100%;\n \"\n ></div>\n </foreignObject>\n <g data-figma-bg-blur-radius=\"8\">\n <path\n d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n fill=\"#344054\"\n fill-opacity=\"0.4\"\n />\n <path\n d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\n stroke=\"white\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </g>\n <defs>\n <filter\n id=\"filter0_ddd_2474_28277\"\n x=\"0\"\n y=\"16\"\n width=\"152\"\n height=\"104\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"1.5\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect1_dropShadow_2474_28277\"\n />\n <feOffset dy=\"3\" />\n <feGaussianBlur stdDeviation=\"1.5\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"BackgroundImageFix\"\n result=\"effect1_dropShadow_2474_28277\"\n />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"4\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect2_dropShadow_2474_28277\"\n />\n <feOffset dy=\"8\" />\n <feGaussianBlur stdDeviation=\"4\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"effect1_dropShadow_2474_28277\"\n result=\"effect2_dropShadow_2474_28277\"\n />\n <feColorMatrix\n in=\"SourceAlpha\"\n type=\"matrix\"\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n result=\"hardAlpha\"\n />\n <feMorphology\n radius=\"4\"\n operator=\"erode\"\n in=\"SourceAlpha\"\n result=\"effect3_dropShadow_2474_28277\"\n />\n <feOffset dy=\"20\" />\n <feGaussianBlur stdDeviation=\"12\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix\n type=\"matrix\"\n values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\n />\n <feBlend\n mode=\"normal\"\n in2=\"effect2_dropShadow_2474_28277\"\n result=\"effect3_dropShadow_2474_28277\"\n />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"effect3_dropShadow_2474_28277\"\n result=\"shape\"\n />\n </filter>\n <clipPath\n id=\"bgblur_0_2474_28277_clip_path\"\n transform=\"translate(-44 -54)\"\n >\n <path\n d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\n />\n </clipPath>\n <linearGradient\n id=\"paint0_linear_2474_28277\"\n x1=\"25.9429\"\n y1=\"37.4855\"\n x2=\"71.2\"\n y2=\"79.9998\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_2474_28277\"\n x1=\"53.0301\"\n y1=\"26.8571\"\n x2=\"109.602\"\n y2=\"80\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint2_linear_2474_28277\"\n x1=\"92.3992\"\n y1=\"42.8002\"\n x2=\"131.999\"\n y2=\"80.0002\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#D0D5DD\" />\n <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n\n <div class=\"flex flex-col gap-1\">\n <div class=\"text-md text-surface-600\">\n {{ \"properties.list.emptyStateNoData\" | transloco }}\n </div>\n </div>\n <div>\n <mt-button\n [label]=\"'properties.list.addNewProperty' | transloco\"\n icon=\"general.plus\"\n (click)=\"createProperty()\"\n />\n </div>\n </div>\n <p-divider type=\"solid\">\n <div class=\"text-lg text-surface-600\">\n {{ \"properties.list.emptyStateTemplate\" | transloco }}\n </div>\n </p-divider>\n <div class=\"flex gap-3 mt-5 justify-center\">\n @for (card of propertyTypes(); track card.label) {\n <mt-card\n headless\n class=\"w-25 tailwind-4 cursor-pointer\"\n style=\"background-color: #fafafa\"\n (click)=\"createPropertyWithType(card.value)\"\n >\n <div\n class=\"content flex flex-col gap-3 items-center text-center\"\n >\n <mt-avatar\n [style.--p-avatar-background]=\"\n 'var(--p-' + card.color + '-100)'\n \"\n [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\n [icon]=\"card.icon\"\n shape=\"square\"\n ></mt-avatar>\n <div class=\"flex flex-col gap-1\">\n <div class=\"text-xs font-normal\">{{ card.label }}</div>\n </div>\n </div>\n </mt-card>\n }\n </div>\n </div>\n </ng-template>\n </mt-table>\n </mt-card>\n</div>\n" }]
951
+ }], propDecorators: { tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }] } });
951
952
 
952
953
  class ApiConfiguration {
953
954
  facade = inject(PropertiesFacade);
954
955
  destroyRef = inject(DestroyRef);
955
956
  transloco = inject(TranslocoService);
956
- schema = signal(null, ...(ngDevMode ? [{ debugName: "schema" }] : []));
957
+ schema = signal(null, { ...(ngDevMode ? { debugName: "schema" } : {}) });
957
958
  isWriting = false;
958
959
  touched = false;
959
960
  isTesting = this.facade.isLoading('testApiConfiguration');
960
961
  apiProperties = this.facade.apiProperties;
961
- hasDetectedSchema = computed(() => this.apiProperties().length > 0, ...(ngDevMode ? [{ debugName: "hasDetectedSchema" }] : []));
962
+ hasDetectedSchema = computed(() => this.apiProperties().length > 0, { ...(ngDevMode ? { debugName: "hasDetectedSchema" } : {}) });
962
963
  form = new FormGroup({
963
964
  endpoint: new FormControl('', {
964
965
  nonNullable: true,
@@ -1101,16 +1102,16 @@ class ApiConfiguration {
1101
1102
  return acc;
1102
1103
  }, {});
1103
1104
  }
1104
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ApiConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1105
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ApiConfiguration, isStandalone: true, selector: "mt-api-configuration", providers: [
1105
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ApiConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1106
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ApiConfiguration, isStandalone: true, selector: "mt-api-configuration", providers: [
1106
1107
  {
1107
1108
  provide: NG_VALUE_ACCESSOR,
1108
1109
  useExisting: forwardRef(() => ApiConfiguration),
1109
1110
  multi: true,
1110
1111
  },
1111
- ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n <mt-text-field\n formControlName=\"endpoint\"\n [label]=\"'properties.form.endpoint' | transloco\"\n [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\n />\n <div class=\"flex justify-end gap-2\">\n <mt-button\n type=\"button\"\n [text]=\"true\"\n icon=\"general.plus\"\n [label]=\"'properties.form.addHeader' | transloco\"\n (click)=\"addHeader()\"\n />\n <mt-button\n type=\"button\"\n [label]=\"'properties.form.testApi' | transloco\"\n [loading]=\"isTesting()\"\n (click)=\"testApi()\"\n />\n </div>\n </div>\n\n @if (headers.controls.length) {\n <div class=\"space-y-3\">\n <div class=\"text-sm font-medium text-surface-500\">\n {{ \"properties.form.headers\" | transloco }}\n </div>\n <div class=\"space-y-3\">\n @for (\n headerCtrl of headers.controls;\n track headerCtrl;\n let i = $index\n ) {\n <div\n [formGroup]=\"headerCtrl\"\n class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n >\n <mt-text-field\n formControlName=\"key\"\n [label]=\"'properties.form.headerKey' | transloco\"\n />\n <mt-text-field\n formControlName=\"value\"\n [label]=\"'properties.form.headerValue' | transloco\"\n />\n <mt-button\n type=\"button\"\n [text]=\"true\"\n icon=\"general.trash-01\"\n (click)=\"removeHeader(i)\"\n />\n </div>\n }\n </div>\n </div>\n } @else {\n <p class=\"text-xs text-surface-400\">\n {{ \"properties.form.noHeadersMessage\" | transloco }}\n </p>\n }\n </div>\n\n <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n @if (hasDetectedSchema()) {\n <div class=\"grid gap-4 md:grid-cols-2\">\n <mt-select-field\n formControlName=\"key\"\n [options]=\"apiProperties()\"\n [showClear]=\"true\"\n optionLabel=\"name\"\n optionValue=\"key\"\n [label]=\"'properties.form.keyField' | transloco\"\n />\n <mt-select-field\n formControlName=\"value\"\n [options]=\"apiProperties()\"\n [showClear]=\"true\"\n optionLabel=\"name\"\n optionValue=\"key\"\n [label]=\"'properties.form.valueField' | transloco\"\n />\n </div>\n } @else {\n <p class=\"text-xs text-surface-400\">\n {{ \"properties.form.messageTestApiPrompt\" | transloco }}\n </p>\n }\n\n <div class=\"flex items-center justify-between gap-4\">\n <mt-toggle-field\n formControlName=\"supportMultiSelect\"\n [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\n />\n @if (isTesting()) {\n <span class=\"text-xs text-surface-400\">\n {{ \"properties.form.messageTesting\" | transloco }}\n </span>\n }\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { 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: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1112
+ ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\n <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n <mt-text-field\n formControlName=\"endpoint\"\n [label]=\"'properties.form.endpoint' | transloco\"\n [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\n />\n <div class=\"flex justify-end gap-2\">\n <mt-button\n type=\"button\"\n [text]=\"true\"\n icon=\"general.plus\"\n [label]=\"'properties.form.addHeader' | transloco\"\n (click)=\"addHeader()\"\n />\n <mt-button\n type=\"button\"\n [label]=\"'properties.form.testApi' | transloco\"\n [loading]=\"isTesting()\"\n (click)=\"testApi()\"\n />\n </div>\n </div>\n\n @if (headers.controls.length) {\n <div class=\"space-y-3\">\n <div class=\"text-sm font-medium text-surface-500\">\n {{ \"properties.form.headers\" | transloco }}\n </div>\n <div class=\"space-y-3\">\n @for (\n headerCtrl of headers.controls;\n track headerCtrl;\n let i = $index\n ) {\n <div\n [formGroup]=\"headerCtrl\"\n class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n >\n <mt-text-field\n formControlName=\"key\"\n [label]=\"'properties.form.headerKey' | transloco\"\n />\n <mt-text-field\n formControlName=\"value\"\n [label]=\"'properties.form.headerValue' | transloco\"\n />\n <mt-button\n type=\"button\"\n [text]=\"true\"\n icon=\"general.trash-01\"\n (click)=\"removeHeader(i)\"\n />\n </div>\n }\n </div>\n </div>\n } @else {\n <p class=\"text-xs text-surface-400\">\n {{ \"properties.form.noHeadersMessage\" | transloco }}\n </p>\n }\n </div>\n\n <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\n @if (hasDetectedSchema()) {\n <div class=\"grid gap-4 md:grid-cols-2\">\n <mt-select-field\n formControlName=\"key\"\n [options]=\"apiProperties()\"\n [showClear]=\"true\"\n optionLabel=\"name\"\n optionValue=\"key\"\n [label]=\"'properties.form.keyField' | transloco\"\n />\n <mt-select-field\n formControlName=\"value\"\n [options]=\"apiProperties()\"\n [showClear]=\"true\"\n optionLabel=\"name\"\n optionValue=\"key\"\n [label]=\"'properties.form.valueField' | transloco\"\n />\n </div>\n } @else {\n <p class=\"text-xs text-surface-400\">\n {{ \"properties.form.messageTestApiPrompt\" | transloco }}\n </p>\n }\n\n <div class=\"flex items-center justify-between gap-4\">\n <mt-toggle-field\n formControlName=\"supportMultiSelect\"\n [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\n />\n @if (isTesting()) {\n <span class=\"text-xs text-surface-400\">\n {{ \"properties.form.messageTesting\" | transloco }}\n </span>\n }\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { 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: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1112
1113
  }
1113
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ApiConfiguration, decorators: [{
1114
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ApiConfiguration, decorators: [{
1114
1115
  type: Component,
1115
1116
  args: [{ selector: 'mt-api-configuration', standalone: true, imports: [
1116
1117
  CommonModule,
@@ -1126,7 +1127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1126
1127
  useExisting: forwardRef(() => ApiConfiguration),
1127
1128
  multi: true,
1128
1129
  },
1129
- ], template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n <mt-text-field\n formControlName=\"endpoint\"\n [label]=\"'properties.form.endpoint' | transloco\"\n [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\n />\n <div class=\"flex justify-end gap-2\">\n <mt-button\n type=\"button\"\n [text]=\"true\"\n icon=\"general.plus\"\n [label]=\"'properties.form.addHeader' | transloco\"\n (click)=\"addHeader()\"\n />\n <mt-button\n type=\"button\"\n [label]=\"'properties.form.testApi' | transloco\"\n [loading]=\"isTesting()\"\n (click)=\"testApi()\"\n />\n </div>\n </div>\n\n @if (headers.controls.length) {\n <div class=\"space-y-3\">\n <div class=\"text-sm font-medium text-surface-500\">\n {{ \"properties.form.headers\" | transloco }}\n </div>\n <div class=\"space-y-3\">\n @for (\n headerCtrl of headers.controls;\n track headerCtrl;\n let i = $index\n ) {\n <div\n [formGroup]=\"headerCtrl\"\n class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n >\n <mt-text-field\n formControlName=\"key\"\n [label]=\"'properties.form.headerKey' | transloco\"\n />\n <mt-text-field\n formControlName=\"value\"\n [label]=\"'properties.form.headerValue' | transloco\"\n />\n <mt-button\n type=\"button\"\n [text]=\"true\"\n icon=\"general.trash-01\"\n (click)=\"removeHeader(i)\"\n />\n </div>\n }\n </div>\n </div>\n } @else {\n <p class=\"text-xs text-surface-400\">\n {{ \"properties.form.noHeadersMessage\" | transloco }}\n </p>\n }\n </div>\n\n <div class=\"space-y-4 rounded-xl bg-white px-6 py-4 shadow-sm\">\n @if (hasDetectedSchema()) {\n <div class=\"grid gap-4 md:grid-cols-2\">\n <mt-select-field\n formControlName=\"key\"\n [options]=\"apiProperties()\"\n [showClear]=\"true\"\n optionLabel=\"name\"\n optionValue=\"key\"\n [label]=\"'properties.form.keyField' | transloco\"\n />\n <mt-select-field\n formControlName=\"value\"\n [options]=\"apiProperties()\"\n [showClear]=\"true\"\n optionLabel=\"name\"\n optionValue=\"key\"\n [label]=\"'properties.form.valueField' | transloco\"\n />\n </div>\n } @else {\n <p class=\"text-xs text-surface-400\">\n {{ \"properties.form.messageTestApiPrompt\" | transloco }}\n </p>\n }\n\n <div class=\"flex items-center justify-between gap-4\">\n <mt-toggle-field\n formControlName=\"supportMultiSelect\"\n [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\n />\n @if (isTesting()) {\n <span class=\"text-xs text-surface-400\">\n {{ \"properties.form.messageTesting\" | transloco }}\n </span>\n }\n </div>\n </div>\n</div>\n" }]
1130
+ ], template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\n <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n <mt-text-field\n formControlName=\"endpoint\"\n [label]=\"'properties.form.endpoint' | transloco\"\n [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\n />\n <div class=\"flex justify-end gap-2\">\n <mt-button\n type=\"button\"\n [text]=\"true\"\n icon=\"general.plus\"\n [label]=\"'properties.form.addHeader' | transloco\"\n (click)=\"addHeader()\"\n />\n <mt-button\n type=\"button\"\n [label]=\"'properties.form.testApi' | transloco\"\n [loading]=\"isTesting()\"\n (click)=\"testApi()\"\n />\n </div>\n </div>\n\n @if (headers.controls.length) {\n <div class=\"space-y-3\">\n <div class=\"text-sm font-medium text-surface-500\">\n {{ \"properties.form.headers\" | transloco }}\n </div>\n <div class=\"space-y-3\">\n @for (\n headerCtrl of headers.controls;\n track headerCtrl;\n let i = $index\n ) {\n <div\n [formGroup]=\"headerCtrl\"\n class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n >\n <mt-text-field\n formControlName=\"key\"\n [label]=\"'properties.form.headerKey' | transloco\"\n />\n <mt-text-field\n formControlName=\"value\"\n [label]=\"'properties.form.headerValue' | transloco\"\n />\n <mt-button\n type=\"button\"\n [text]=\"true\"\n icon=\"general.trash-01\"\n (click)=\"removeHeader(i)\"\n />\n </div>\n }\n </div>\n </div>\n } @else {\n <p class=\"text-xs text-surface-400\">\n {{ \"properties.form.noHeadersMessage\" | transloco }}\n </p>\n }\n </div>\n\n <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\n @if (hasDetectedSchema()) {\n <div class=\"grid gap-4 md:grid-cols-2\">\n <mt-select-field\n formControlName=\"key\"\n [options]=\"apiProperties()\"\n [showClear]=\"true\"\n optionLabel=\"name\"\n optionValue=\"key\"\n [label]=\"'properties.form.keyField' | transloco\"\n />\n <mt-select-field\n formControlName=\"value\"\n [options]=\"apiProperties()\"\n [showClear]=\"true\"\n optionLabel=\"name\"\n optionValue=\"key\"\n [label]=\"'properties.form.valueField' | transloco\"\n />\n </div>\n } @else {\n <p class=\"text-xs text-surface-400\">\n {{ \"properties.form.messageTestApiPrompt\" | transloco }}\n </p>\n }\n\n <div class=\"flex items-center justify-between gap-4\">\n <mt-toggle-field\n formControlName=\"supportMultiSelect\"\n [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\n />\n @if (isTesting()) {\n <span class=\"text-xs text-surface-400\">\n {{ \"properties.form.messageTesting\" | transloco }}\n </span>\n }\n </div>\n </div>\n</div>\n" }]
1130
1131
  }], ctorParameters: () => [] });
1131
1132
 
1132
1133
  class CheckListFormConfiguration {
@@ -1141,13 +1142,13 @@ class CheckListFormConfiguration {
1141
1142
  scopeItems = computed(() => {
1142
1143
  const scope = this.configScopes()[0];
1143
1144
  return scope?.items ?? [];
1144
- }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
1145
+ }, { ...(ngDevMode ? { debugName: "scopeItems" } : {}) });
1145
1146
  formConfig = linkedSignal(() => ({
1146
1147
  sections: [
1147
1148
  {
1148
1149
  key: 'configuration',
1149
1150
  label: this.transloco.translate('properties.form.configurationSection'),
1150
- cssClass: ' rounded-xl bg-white \
1151
+ cssClass: ' rounded-xl bg-content \
1151
1152
  shadow-sm \
1152
1153
  px-6 py-4',
1153
1154
  type: 'header',
@@ -1183,7 +1184,7 @@ class CheckListFormConfiguration {
1183
1184
  ],
1184
1185
  },
1185
1186
  ],
1186
- }));
1187
+ }), { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1187
1188
  constructor() {
1188
1189
  effect(() => {
1189
1190
  if (!this.lookups().length) {
@@ -1203,12 +1204,12 @@ class CheckListFormConfiguration {
1203
1204
  ngOnDestroy() {
1204
1205
  this.propertiesFacade.resetConfigProperties();
1205
1206
  }
1206
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckListFormConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1207
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1207
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CheckListFormConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1208
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1208
1209
  { provide: ControlContainer, useExisting: FormGroupDirective },
1209
1210
  ] });
1210
1211
  }
1211
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckListFormConfiguration, decorators: [{
1212
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CheckListFormConfiguration, decorators: [{
1212
1213
  type: Component,
1213
1214
  args: [{ selector: 'mt-check-list-form-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1214
1215
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1226,13 +1227,13 @@ class DynamicListConfiguration {
1226
1227
  scopeItems = computed(() => {
1227
1228
  const scope = this.configScopes()[0];
1228
1229
  return scope?.items ?? [];
1229
- }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
1230
+ }, { ...(ngDevMode ? { debugName: "scopeItems" } : {}) });
1230
1231
  formConfig = linkedSignal(() => ({
1231
1232
  sections: [
1232
1233
  {
1233
1234
  key: 'configuration',
1234
1235
  label: this.transloco.translate('properties.form.configurationSection'),
1235
- cssClass: ' rounded-xl bg-white \
1236
+ cssClass: ' rounded-xl bg-content \
1236
1237
  shadow-sm \
1237
1238
  px-6 py-4',
1238
1239
  type: 'header',
@@ -1265,7 +1266,7 @@ class DynamicListConfiguration {
1265
1266
  ],
1266
1267
  },
1267
1268
  ],
1268
- }));
1269
+ }), { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1269
1270
  constructor() {
1270
1271
  effect(() => {
1271
1272
  const scopeId = this.configuration()?.scopeId;
@@ -1280,12 +1281,12 @@ class DynamicListConfiguration {
1280
1281
  ngOnDestroy() {
1281
1282
  this.propertiesFacade.resetConfigProperties();
1282
1283
  }
1283
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicListConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1284
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DynamicListConfiguration, isStandalone: true, selector: "mt-dynamic-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1284
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DynamicListConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1285
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DynamicListConfiguration, isStandalone: true, selector: "mt-dynamic-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1285
1286
  { provide: ControlContainer, useExisting: FormGroupDirective },
1286
1287
  ] });
1287
1288
  }
1288
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicListConfiguration, decorators: [{
1289
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DynamicListConfiguration, decorators: [{
1289
1290
  type: Component,
1290
1291
  args: [{ selector: 'mt-dynamic-list-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1291
1292
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1303,13 +1304,13 @@ class EditableListViewConfiguration {
1303
1304
  scopeItems = computed(() => {
1304
1305
  const scope = this.configScopes()[0];
1305
1306
  return scope?.items ?? [];
1306
- }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
1307
+ }, { ...(ngDevMode ? { debugName: "scopeItems" } : {}) });
1307
1308
  formConfig = linkedSignal(() => ({
1308
1309
  sections: [
1309
1310
  {
1310
1311
  key: 'configuration',
1311
1312
  label: this.transloco.translate('properties.form.configurationSection'),
1312
- cssClass: ' rounded-xl bg-white \
1313
+ cssClass: ' rounded-xl bg-content \
1313
1314
  shadow-sm \
1314
1315
  px-6 py-4',
1315
1316
  type: 'header',
@@ -1345,7 +1346,7 @@ class EditableListViewConfiguration {
1345
1346
  ],
1346
1347
  },
1347
1348
  ],
1348
- }));
1349
+ }), { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1349
1350
  constructor() {
1350
1351
  effect(() => {
1351
1352
  const scopeId = this.configuration()?.scopeId;
@@ -1360,12 +1361,12 @@ class EditableListViewConfiguration {
1360
1361
  ngOnDestroy() {
1361
1362
  this.propertiesFacade.resetConfigProperties();
1362
1363
  }
1363
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: EditableListViewConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1364
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: EditableListViewConfiguration, isStandalone: true, selector: "mt-editable-list-view-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1364
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: EditableListViewConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1365
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: EditableListViewConfiguration, isStandalone: true, selector: "mt-editable-list-view-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1365
1366
  { provide: ControlContainer, useExisting: FormGroupDirective },
1366
1367
  ] });
1367
1368
  }
1368
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: EditableListViewConfiguration, decorators: [{
1369
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: EditableListViewConfiguration, decorators: [{
1369
1370
  type: Component,
1370
1371
  args: [{ selector: 'mt-editable-list-view-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1371
1372
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1383,20 +1384,20 @@ class InternalModuleConfiguration {
1383
1384
  configProperties = this.propertiesFacade.configProperties;
1384
1385
  configScopes = this.propertiesFacade.configScopes;
1385
1386
  configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((v) => v?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
1386
- PrevModuleId = signal(null, ...(ngDevMode ? [{ debugName: "PrevModuleId" }] : []));
1387
+ PrevModuleId = signal(null, { ...(ngDevMode ? { debugName: "PrevModuleId" } : {}) });
1387
1388
  scopeItems = computed(() => {
1388
1389
  const selectedType = this.configuration()?.type;
1389
1390
  if (!selectedType)
1390
1391
  return [];
1391
1392
  const scope = this.configScopes().find((s) => s.scope === selectedType);
1392
1393
  return scope?.items ?? [];
1393
- }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
1394
+ }, { ...(ngDevMode ? { debugName: "scopeItems" } : {}) });
1394
1395
  formConfig = linkedSignal(() => ({
1395
1396
  sections: [
1396
1397
  {
1397
1398
  key: 'configuration',
1398
1399
  label: this.transloco.translate('properties.form.configurationSection'),
1399
- cssClass: ' rounded-xl bg-white \
1400
+ cssClass: ' rounded-xl bg-content \
1400
1401
  shadow-sm \
1401
1402
  px-6 py-4',
1402
1403
  type: 'header',
@@ -1445,7 +1446,7 @@ class InternalModuleConfiguration {
1445
1446
  ],
1446
1447
  },
1447
1448
  ],
1448
- }));
1449
+ }), { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1449
1450
  constructor() {
1450
1451
  effect(() => {
1451
1452
  if (this.configuration()?.scopeId) {
@@ -1464,12 +1465,12 @@ class InternalModuleConfiguration {
1464
1465
  ngOnDestroy() {
1465
1466
  this.propertiesFacade.resetConfigProperties();
1466
1467
  }
1467
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: InternalModuleConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1468
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: InternalModuleConfiguration, isStandalone: true, selector: "mt-internal-module-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1468
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InternalModuleConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1469
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InternalModuleConfiguration, isStandalone: true, selector: "mt-internal-module-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1469
1470
  { provide: ControlContainer, useExisting: FormGroupDirective },
1470
1471
  ] });
1471
1472
  }
1472
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: InternalModuleConfiguration, decorators: [{
1473
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InternalModuleConfiguration, decorators: [{
1473
1474
  type: Component,
1474
1475
  args: [{ selector: 'mt-internal-module-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1475
1476
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1485,7 +1486,7 @@ class LocationConfiguration {
1485
1486
  {
1486
1487
  key: 'configuration',
1487
1488
  label: this.transloco.translate('properties.form.configurationSection'),
1488
- cssClass: ' rounded-xl bg-white \
1489
+ cssClass: ' rounded-xl bg-content \
1489
1490
  shadow-sm \
1490
1491
  px-6 py-4',
1491
1492
  type: 'header',
@@ -1503,7 +1504,7 @@ class LocationConfiguration {
1503
1504
  ],
1504
1505
  },
1505
1506
  ],
1506
- }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
1507
+ }), { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1507
1508
  constructor() {
1508
1509
  effect(() => {
1509
1510
  if (!this.countries().length) {
@@ -1511,12 +1512,12 @@ class LocationConfiguration {
1511
1512
  }
1512
1513
  });
1513
1514
  }
1514
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LocationConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1515
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1515
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LocationConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1516
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1516
1517
  { provide: ControlContainer, useExisting: FormGroupDirective },
1517
1518
  ] });
1518
1519
  }
1519
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LocationConfiguration, decorators: [{
1520
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LocationConfiguration, decorators: [{
1520
1521
  type: Component,
1521
1522
  args: [{ selector: 'mt-location-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1522
1523
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1532,7 +1533,7 @@ class LookupConfiguration {
1532
1533
  {
1533
1534
  key: 'configuration',
1534
1535
  label: this.transloco.translate('properties.form.configurationSection'),
1535
- cssClass: ' rounded-xl bg-white \
1536
+ cssClass: ' rounded-xl bg-content \
1536
1537
  shadow-sm \
1537
1538
  px-6 py-4',
1538
1539
  type: 'header',
@@ -1550,7 +1551,7 @@ class LookupConfiguration {
1550
1551
  ],
1551
1552
  },
1552
1553
  ],
1553
- }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
1554
+ }), { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1554
1555
  constructor() {
1555
1556
  effect(() => {
1556
1557
  if (!this.lookups().length) {
@@ -1558,12 +1559,12 @@ class LookupConfiguration {
1558
1559
  }
1559
1560
  });
1560
1561
  }
1561
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LookupConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1562
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1562
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LookupConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1563
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1563
1564
  { provide: ControlContainer, useExisting: FormGroupDirective },
1564
1565
  ] });
1565
1566
  }
1566
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LookupConfiguration, decorators: [{
1567
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LookupConfiguration, decorators: [{
1567
1568
  type: Component,
1568
1569
  args: [{ selector: 'mt-lookup-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1569
1570
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1577,7 +1578,7 @@ class PercentageConfiguration {
1577
1578
  {
1578
1579
  key: 'configuration',
1579
1580
  label: this.transloco.translate('properties.form.configurationSection'),
1580
- cssClass: ' rounded-xl bg-white \
1581
+ cssClass: ' rounded-xl bg-content \
1581
1582
  shadow-sm \
1582
1583
  px-6 py-4',
1583
1584
  type: 'header',
@@ -1591,13 +1592,13 @@ class PercentageConfiguration {
1591
1592
  ],
1592
1593
  },
1593
1594
  ],
1594
- }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
1595
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PercentageConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1596
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1595
+ }, { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1596
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PercentageConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1597
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1597
1598
  { provide: ControlContainer, useExisting: FormGroupDirective },
1598
1599
  ] });
1599
1600
  }
1600
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PercentageConfiguration, decorators: [{
1601
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PercentageConfiguration, decorators: [{
1601
1602
  type: Component,
1602
1603
  args: [{ selector: 'mt-percentage-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1603
1604
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1613,7 +1614,7 @@ class UserConfiguration {
1613
1614
  {
1614
1615
  key: 'configuration',
1615
1616
  label: this.transloco.translate('properties.form.configurationSection'),
1616
- cssClass: ' rounded-xl bg-white \
1617
+ cssClass: ' rounded-xl bg-content \
1617
1618
  shadow-sm \
1618
1619
  px-6 py-4',
1619
1620
  type: 'header',
@@ -1631,7 +1632,7 @@ class UserConfiguration {
1631
1632
  ],
1632
1633
  },
1633
1634
  ],
1634
- }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
1635
+ }), { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1635
1636
  constructor() {
1636
1637
  effect(() => {
1637
1638
  if (!this.groups().length) {
@@ -1639,12 +1640,12 @@ class UserConfiguration {
1639
1640
  }
1640
1641
  });
1641
1642
  }
1642
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UserConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1643
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1643
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UserConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1644
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1644
1645
  { provide: ControlContainer, useExisting: FormGroupDirective },
1645
1646
  ] });
1646
1647
  }
1647
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UserConfiguration, decorators: [{
1648
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UserConfiguration, decorators: [{
1648
1649
  type: Component,
1649
1650
  args: [{ selector: 'mt-user-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1650
1651
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1768,7 +1769,7 @@ class AttachmentConfiguration {
1768
1769
  {
1769
1770
  key: 'configuration',
1770
1771
  label: this.transloco.translate('properties.form.configurationSection'),
1771
- cssClass: ' rounded-xl bg-white \
1772
+ cssClass: ' rounded-xl bg-content \
1772
1773
  shadow-sm \
1773
1774
  px-6 py-4',
1774
1775
  type: 'header',
@@ -1791,13 +1792,13 @@ class AttachmentConfiguration {
1791
1792
  ],
1792
1793
  },
1793
1794
  ],
1794
- }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
1795
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AttachmentConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1796
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1795
+ }, { ...(ngDevMode ? { debugName: "formConfig" } : {}) });
1796
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AttachmentConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
1797
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
1797
1798
  { provide: ControlContainer, useExisting: FormGroupDirective },
1798
1799
  ] });
1799
1800
  }
1800
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AttachmentConfiguration, decorators: [{
1801
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AttachmentConfiguration, decorators: [{
1801
1802
  type: Component,
1802
1803
  args: [{ selector: 'mt-attachment-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
1803
1804
  { provide: ControlContainer, useExisting: FormGroupDirective },
@@ -1809,12 +1810,12 @@ class PropertyForm {
1809
1810
  router = inject(Router);
1810
1811
  route = inject(ActivatedRoute);
1811
1812
  transloco = inject(TranslocoService);
1812
- propertyId = input('', ...(ngDevMode ? [{ debugName: "propertyId" }] : []));
1813
+ propertyId = input('', { ...(ngDevMode ? { debugName: "propertyId" } : {}) });
1813
1814
  propertyTypes = this.facade.propertyTypes;
1814
1815
  submitLabel = computed(() => this.propertyId()
1815
1816
  ? this.transloco.translate('properties.form.updateButton')
1816
- : this.transloco.translate('properties.form.createButton'), ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
1817
- isEditing = computed(() => !!this.propertyId(), ...(ngDevMode ? [{ debugName: "isEditing" }] : []));
1817
+ : this.transloco.translate('properties.form.createButton'), { ...(ngDevMode ? { debugName: "submitLabel" } : {}) });
1818
+ isEditing = computed(() => !!this.propertyId(), { ...(ngDevMode ? { debugName: "isEditing" } : {}) });
1818
1819
  // Keep your original structure: "main" is a FormControl<any>, "configuration" is FormControl<any|null>
1819
1820
  propertyForm = new FormGroup({
1820
1821
  main: new FormControl({
@@ -1830,7 +1831,7 @@ class PropertyForm {
1830
1831
  creating = this.facade.isLoading('create');
1831
1832
  updating = this.facade.isLoading('update');
1832
1833
  loading = this.facade.isLoading('getOne');
1833
- submitting = computed(() => this.creating() || this.updating(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
1834
+ submitting = computed(() => this.creating() || this.updating(), { ...(ngDevMode ? { debugName: "submitting" } : {}) });
1834
1835
  propertyType = toSignal(this.mainControl.valueChanges.pipe(map((v) => v?.viewType), distinctUntilChanged()));
1835
1836
  selectedPropertyTypeConfiguration = computed(() => {
1836
1837
  const propertyTypesSetting = this.propertyTypes();
@@ -1839,19 +1840,19 @@ class PropertyForm {
1839
1840
  return null;
1840
1841
  const match = propertyTypesSetting.value.find((item) => item.viewType?.toLowerCase() === selectedViewType.toLowerCase());
1841
1842
  return match?.configuration ?? null;
1842
- }, ...(ngDevMode ? [{ debugName: "selectedPropertyTypeConfiguration" }] : []));
1843
- configurationFormConfig = computed(() => this.selectedPropertyTypeConfiguration()?.configurationForm ?? null, ...(ngDevMode ? [{ debugName: "configurationFormConfig" }] : []));
1843
+ }, { ...(ngDevMode ? { debugName: "selectedPropertyTypeConfiguration" } : {}) });
1844
+ configurationFormConfig = computed(() => this.selectedPropertyTypeConfiguration()?.configurationForm ?? null, { ...(ngDevMode ? { debugName: "configurationFormConfig" } : {}) });
1844
1845
  configurationHost;
1845
1846
  environmentInjector = inject(EnvironmentInjector);
1846
- configurationComponentType = signal(null, ...(ngDevMode ? [{ debugName: "configurationComponentType" }] : []));
1847
+ configurationComponentType = signal(null, { ...(ngDevMode ? { debugName: "configurationComponentType" } : {}) });
1847
1848
  configurationComponentRef = null;
1848
1849
  configurationComponentLoadId = 0;
1849
- externalConfigurationForm = signal(null, ...(ngDevMode ? [{ debugName: "externalConfigurationForm" }] : []));
1850
+ externalConfigurationForm = signal(null, { ...(ngDevMode ? { debugName: "externalConfigurationForm" } : {}) });
1850
1851
  externalConfigurationSubscriptions = null;
1851
- externalConfigurationInvalid = signal(false, ...(ngDevMode ? [{ debugName: "externalConfigurationInvalid" }] : []));
1852
- configurationComponentExists = computed(() => !!this.configurationComponentType(), ...(ngDevMode ? [{ debugName: "configurationComponentExists" }] : []));
1853
- configurationFormInvalid = computed(() => this.externalConfigurationInvalid(), ...(ngDevMode ? [{ debugName: "configurationFormInvalid" }] : []));
1854
- submitDisabled = computed(() => this.submitting() || this.configurationFormInvalid(), ...(ngDevMode ? [{ debugName: "submitDisabled" }] : []));
1852
+ externalConfigurationInvalid = signal(false, { ...(ngDevMode ? { debugName: "externalConfigurationInvalid" } : {}) });
1853
+ configurationComponentExists = computed(() => !!this.configurationComponentType(), { ...(ngDevMode ? { debugName: "configurationComponentExists" } : {}) });
1854
+ configurationFormInvalid = computed(() => this.externalConfigurationInvalid(), { ...(ngDevMode ? { debugName: "configurationFormInvalid" } : {}) });
1855
+ submitDisabled = computed(() => this.submitting() || this.configurationFormInvalid(), { ...(ngDevMode ? { debugName: "submitDisabled" } : {}) });
1855
1856
  // Your existing dynamic form config unchanged
1856
1857
  dynamicFormConfigMain = linkedSignal(() => ({
1857
1858
  layout: {
@@ -1861,7 +1862,7 @@ class PropertyForm {
1861
1862
  {
1862
1863
  key: 'top-row',
1863
1864
  type: 'none',
1864
- cssClass: ' rounded-xl bg-white shadow-sm p-6 mt-3 mb-0',
1865
+ cssClass: ' rounded-xl bg-content shadow-sm p-6 mt-3 mb-0',
1865
1866
  bodyClass: 'flex justify-between items-center gap-6',
1866
1867
  fields: [
1867
1868
  {
@@ -1940,7 +1941,7 @@ class PropertyForm {
1940
1941
  key: 'default-info',
1941
1942
  label: this.transloco.translate('properties.form.defaultInfoSection'),
1942
1943
  type: 'header',
1943
- cssClass: ' rounded-xl bg-white shadow-sm p-6',
1944
+ cssClass: ' rounded-xl bg-content shadow-sm p-6',
1944
1945
  bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
1945
1946
  fields: [
1946
1947
  {
@@ -1969,7 +1970,7 @@ class PropertyForm {
1969
1970
  ],
1970
1971
  },
1971
1972
  ],
1972
- }));
1973
+ }), { ...(ngDevMode ? { debugName: "dynamicFormConfigMain" } : {}) });
1973
1974
  constructor() {
1974
1975
  // Load when editing
1975
1976
  effect(() => {
@@ -2145,14 +2146,13 @@ class PropertyForm {
2145
2146
  this.facade.setDefaultViewType('');
2146
2147
  this.destroyConfigurationComponent();
2147
2148
  }
2148
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
2149
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-card class=\"h-full\">\n <ng-template #headless>\n <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n <div class=\"flex gap-2 items-center\">\n <mt-button\n [text]=\"true\"\n icon=\"arrow.arrow-narrow-left\"\n size=\"large\"\n (click)=\"goBack()\"\n ></mt-button>\n <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n <h3 class=\"font-bold text-lg\">\n {{\n propertyId()\n ? (\"properties.form.editProperty\" | transloco)\n : (\"properties.form.createNewProperty\" | transloco)\n }}\n </h3>\n </div>\n <mt-button\n class=\"mx-2\"\n [label]=\"submitLabel()\"\n [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n [loading]=\"submitting()\"\n [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n (click)=\"createOrEditProperty()\"\n />\n </div>\n <div\n [formGroup]=\"propertyForm\"\n class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] h-full overflow-y-auto flex justify-center\"\n >\n <div class=\"w-1/2 flex flex-col gap-6\">\n @if (loading()) {\n <!-- Skeleton Loading State -->\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <div class=\"flex justify-between items-center gap-6\">\n <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n </div>\n </div>\n\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <p-skeleton\n width=\"12rem\"\n height=\"1.5rem\"\n styleClass=\"mb-4\"\n ></p-skeleton>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n </div>\n </div>\n\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <p-skeleton\n width=\"10rem\"\n height=\"1.5rem\"\n styleClass=\"mb-4\"\n ></p-skeleton>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n </div>\n </div>\n } @else {\n <mt-dynamic-form\n [formConfig]=\"dynamicFormConfigMain()\"\n [formControlName]=\"'main'\"\n />\n @if (configurationFormConfig()) {\n <mt-dynamic-form\n formControlName=\"configuration\"\n [formConfig]=\"configurationFormConfig()!\"\n />\n } @else {\n <ng-container #configurationHost></ng-container>\n @if (!configurationComponentExists()) {\n @switch (propertyType()) {\n @case (\"User\") {\n <mt-user-configuration />\n }\n @case (\"Percentage\") {\n <mt-percentage-configuration />\n }\n @case (\"Lookup\") {\n <mt-lookup-configuration />\n }\n @case (\"LookupMultiSelect\") {\n <mt-lookup-configuration />\n }\n @case (\"InternalModule\") {\n <mt-internal-module-configuration />\n }\n @case (\"DynamicList\") {\n <mt-dynamic-list-configuration />\n }\n @case (\"API\") {\n <mt-api-configuration formControlName=\"configuration\" />\n }\n <!-- @case('ViewList') { REMOVED FOR NOW\n <mt-view-list-configuration />\n } -->\n @case (\"Attachment\") {\n <mt-attachment-configuration />\n }\n <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n } -->\n @case (\"EditableListView\") {\n <mt-editable-list-view-configuration />\n }\n @case (\"LookupLog\") {\n <mt-check-list-form-configuration />\n }\n <!-- @case('LookupMatrix') { REMOVED FOR NOW\n <mt-lookup-configuration />\n } -->\n @case (\"Location\") {\n <mt-location-configuration />\n }\n }\n }\n }\n }\n </div>\n </div>\n </ng-template>\n</mt-card>\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { 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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: DynamicListConfiguration, selector: "mt-dynamic-list-configuration" }, { kind: "component", type: EditableListViewConfiguration, selector: "mt-editable-list-view-configuration" }, { kind: "component", type: InternalModuleConfiguration, selector: "mt-internal-module-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
2149
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
2150
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\n [title]=\"\n propertyId()\n ? ('properties.form.editProperty' | transloco)\n : ('properties.form.createNewProperty' | transloco)\n \"\n avatarIcon=\"custom.user-pp\"\n (backButtonClick)=\"goBack()\"\n backButton\n class=\"h-full\"\n>\n <ng-template #headerEnd>\n <mt-button\n class=\"mx-2\"\n [label]=\"submitLabel()\"\n [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n [loading]=\"submitting()\"\n [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n (click)=\"createOrEditProperty()\"\n />\n </ng-template>\n <div\n [formGroup]=\"propertyForm\"\n class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\n >\n <div class=\"w-1/2 flex flex-col gap-6\">\n @if (loading()) {\n <!-- Skeleton Loading State -->\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <div class=\"flex justify-between items-center gap-6\">\n <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n </div>\n </div>\n\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <p-skeleton\n width=\"12rem\"\n height=\"1.5rem\"\n styleClass=\"mb-4\"\n ></p-skeleton>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n </div>\n </div>\n\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <p-skeleton\n width=\"10rem\"\n height=\"1.5rem\"\n styleClass=\"mb-4\"\n ></p-skeleton>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n </div>\n </div>\n } @else {\n <mt-dynamic-form\n [formConfig]=\"dynamicFormConfigMain()\"\n [formControlName]=\"'main'\"\n />\n @if (configurationFormConfig()) {\n <mt-dynamic-form\n formControlName=\"configuration\"\n [formConfig]=\"configurationFormConfig()!\"\n />\n } @else {\n <ng-container #configurationHost></ng-container>\n @if (!configurationComponentExists()) {\n @switch (propertyType()) {\n @case (\"User\") {\n <mt-user-configuration />\n }\n @case (\"Percentage\") {\n <mt-percentage-configuration />\n }\n @case (\"Lookup\") {\n <mt-lookup-configuration />\n }\n @case (\"LookupMultiSelect\") {\n <mt-lookup-configuration />\n }\n @case (\"InternalModule\") {\n <mt-internal-module-configuration />\n }\n @case (\"DynamicList\") {\n <mt-dynamic-list-configuration />\n }\n @case (\"API\") {\n <mt-api-configuration formControlName=\"configuration\" />\n }\n <!-- @case('ViewList') { REMOVED FOR NOW\n <mt-view-list-configuration />\n } -->\n @case (\"Attachment\") {\n <mt-attachment-configuration />\n }\n <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n } -->\n @case (\"EditableListView\") {\n <mt-editable-list-view-configuration />\n }\n @case (\"LookupLog\") {\n <mt-check-list-form-configuration />\n }\n <!-- @case('LookupMatrix') { REMOVED FOR NOW\n <mt-lookup-configuration />\n } -->\n @case (\"Location\") {\n <mt-location-configuration />\n }\n }\n }\n }\n }\n </div>\n </div>\n</mt-page>\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { 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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: DynamicListConfiguration, selector: "mt-dynamic-list-configuration" }, { kind: "component", type: EditableListViewConfiguration, selector: "mt-editable-list-view-configuration" }, { kind: "component", type: InternalModuleConfiguration, selector: "mt-internal-module-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
2150
2151
  }
2151
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyForm, decorators: [{
2152
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PropertyForm, decorators: [{
2152
2153
  type: Component,
2153
2154
  args: [{ selector: 'mt-property-form', imports: [
2154
- Card,
2155
- Avatar,
2155
+ Page,
2156
2156
  Button,
2157
2157
  DynamicForm,
2158
2158
  ReactiveFormsModule,
@@ -2168,8 +2168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
2168
2168
  AttachmentConfiguration,
2169
2169
  SkeletonModule,
2170
2170
  TranslocoModule,
2171
- ], template: "<mt-card class=\"h-full\">\n <ng-template #headless>\n <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n <div class=\"flex gap-2 items-center\">\n <mt-button\n [text]=\"true\"\n icon=\"arrow.arrow-narrow-left\"\n size=\"large\"\n (click)=\"goBack()\"\n ></mt-button>\n <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n <h3 class=\"font-bold text-lg\">\n {{\n propertyId()\n ? (\"properties.form.editProperty\" | transloco)\n : (\"properties.form.createNewProperty\" | transloco)\n }}\n </h3>\n </div>\n <mt-button\n class=\"mx-2\"\n [label]=\"submitLabel()\"\n [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n [loading]=\"submitting()\"\n [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n (click)=\"createOrEditProperty()\"\n />\n </div>\n <div\n [formGroup]=\"propertyForm\"\n class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] h-full overflow-y-auto flex justify-center\"\n >\n <div class=\"w-1/2 flex flex-col gap-6\">\n @if (loading()) {\n <!-- Skeleton Loading State -->\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <div class=\"flex justify-between items-center gap-6\">\n <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n </div>\n </div>\n\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <p-skeleton\n width=\"12rem\"\n height=\"1.5rem\"\n styleClass=\"mb-4\"\n ></p-skeleton>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n </div>\n </div>\n\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <p-skeleton\n width=\"10rem\"\n height=\"1.5rem\"\n styleClass=\"mb-4\"\n ></p-skeleton>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n </div>\n </div>\n } @else {\n <mt-dynamic-form\n [formConfig]=\"dynamicFormConfigMain()\"\n [formControlName]=\"'main'\"\n />\n @if (configurationFormConfig()) {\n <mt-dynamic-form\n formControlName=\"configuration\"\n [formConfig]=\"configurationFormConfig()!\"\n />\n } @else {\n <ng-container #configurationHost></ng-container>\n @if (!configurationComponentExists()) {\n @switch (propertyType()) {\n @case (\"User\") {\n <mt-user-configuration />\n }\n @case (\"Percentage\") {\n <mt-percentage-configuration />\n }\n @case (\"Lookup\") {\n <mt-lookup-configuration />\n }\n @case (\"LookupMultiSelect\") {\n <mt-lookup-configuration />\n }\n @case (\"InternalModule\") {\n <mt-internal-module-configuration />\n }\n @case (\"DynamicList\") {\n <mt-dynamic-list-configuration />\n }\n @case (\"API\") {\n <mt-api-configuration formControlName=\"configuration\" />\n }\n <!-- @case('ViewList') { REMOVED FOR NOW\n <mt-view-list-configuration />\n } -->\n @case (\"Attachment\") {\n <mt-attachment-configuration />\n }\n <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n } -->\n @case (\"EditableListView\") {\n <mt-editable-list-view-configuration />\n }\n @case (\"LookupLog\") {\n <mt-check-list-form-configuration />\n }\n <!-- @case('LookupMatrix') { REMOVED FOR NOW\n <mt-lookup-configuration />\n } -->\n @case (\"Location\") {\n <mt-location-configuration />\n }\n }\n }\n }\n }\n </div>\n </div>\n </ng-template>\n</mt-card>\n" }]
2172
- }], ctorParameters: () => [], propDecorators: { configurationHost: [{
2171
+ ], template: "<mt-page\n [title]=\"\n propertyId()\n ? ('properties.form.editProperty' | transloco)\n : ('properties.form.createNewProperty' | transloco)\n \"\n avatarIcon=\"custom.user-pp\"\n (backButtonClick)=\"goBack()\"\n backButton\n class=\"h-full\"\n>\n <ng-template #headerEnd>\n <mt-button\n class=\"mx-2\"\n [label]=\"submitLabel()\"\n [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n [loading]=\"submitting()\"\n [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n (click)=\"createOrEditProperty()\"\n />\n </ng-template>\n <div\n [formGroup]=\"propertyForm\"\n class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\n >\n <div class=\"w-1/2 flex flex-col gap-6\">\n @if (loading()) {\n <!-- Skeleton Loading State -->\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <div class=\"flex justify-between items-center gap-6\">\n <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n </div>\n </div>\n\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <p-skeleton\n width=\"12rem\"\n height=\"1.5rem\"\n styleClass=\"mb-4\"\n ></p-skeleton>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n </div>\n </div>\n\n <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n <p-skeleton\n width=\"10rem\"\n height=\"1.5rem\"\n styleClass=\"mb-4\"\n ></p-skeleton>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"3rem\"></p-skeleton>\n <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n </div>\n </div>\n } @else {\n <mt-dynamic-form\n [formConfig]=\"dynamicFormConfigMain()\"\n [formControlName]=\"'main'\"\n />\n @if (configurationFormConfig()) {\n <mt-dynamic-form\n formControlName=\"configuration\"\n [formConfig]=\"configurationFormConfig()!\"\n />\n } @else {\n <ng-container #configurationHost></ng-container>\n @if (!configurationComponentExists()) {\n @switch (propertyType()) {\n @case (\"User\") {\n <mt-user-configuration />\n }\n @case (\"Percentage\") {\n <mt-percentage-configuration />\n }\n @case (\"Lookup\") {\n <mt-lookup-configuration />\n }\n @case (\"LookupMultiSelect\") {\n <mt-lookup-configuration />\n }\n @case (\"InternalModule\") {\n <mt-internal-module-configuration />\n }\n @case (\"DynamicList\") {\n <mt-dynamic-list-configuration />\n }\n @case (\"API\") {\n <mt-api-configuration formControlName=\"configuration\" />\n }\n <!-- @case('ViewList') { REMOVED FOR NOW\n <mt-view-list-configuration />\n } -->\n @case (\"Attachment\") {\n <mt-attachment-configuration />\n }\n <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n } -->\n @case (\"EditableListView\") {\n <mt-editable-list-view-configuration />\n }\n @case (\"LookupLog\") {\n <mt-check-list-form-configuration />\n }\n <!-- @case('LookupMatrix') { REMOVED FOR NOW\n <mt-lookup-configuration />\n } -->\n @case (\"Location\") {\n <mt-location-configuration />\n }\n }\n }\n }\n }\n </div>\n </div>\n</mt-page>\n" }]
2172
+ }], ctorParameters: () => [], propDecorators: { propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: false }] }], configurationHost: [{
2173
2173
  type: ViewChild,
2174
2174
  args: ['configurationHost', { read: ViewContainerRef }]
2175
2175
  }] } });