@ai-table/grid 0.4.3 → 0.4.4

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.
@@ -12320,6 +12320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
12320
12320
  class AITableFieldMenu extends ThyDropdownAbstractMenu {
12321
12321
  constructor() {
12322
12322
  super(...arguments);
12323
+ this.execMenuCallback = input(...(ngDevMode ? [undefined, { debugName: "execMenuCallback" }] : []));
12323
12324
  this.field = computed(() => {
12324
12325
  return this.aiTable.fields().find((item) => item._id === this.fieldId);
12325
12326
  }, ...(ngDevMode ? [{ debugName: "field" }] : []));
@@ -12329,7 +12330,10 @@ class AITableFieldMenu extends ThyDropdownAbstractMenu {
12329
12330
  }
12330
12331
  execute(menu) {
12331
12332
  if ((menu.disabled && !menu.disabled(this.aiTable, this.field)) || !menu.disabled) {
12332
- menu.exec && menu.exec(this.aiTable, this.field, this.origin, this.position);
12333
+ if (menu.exec) {
12334
+ const popoverRef = menu.exec(this.aiTable, this.field, this.origin, this.position);
12335
+ this.execMenuCallback()?.({ menu, popoverRef });
12336
+ }
12333
12337
  }
12334
12338
  }
12335
12339
  getMenuName(menu, field) {
@@ -12339,7 +12343,7 @@ class AITableFieldMenu extends ThyDropdownAbstractMenu {
12339
12343
  return menu.name || '';
12340
12344
  }
12341
12345
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
12342
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n @for (menu of fieldMenus; track index; let index = $index) {\n @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n @if (menu.type === 'divider') {\n <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n } @else {\n @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n @let isRemoveField = menu.type === 'removeField';\n @let customComponent = getCustomComponent(menu);\n <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n (click)=\"execute(menu)\"\n [thyDisabled]=\"disabled\"\n >\n @if (customComponent) {\n <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n } @else {\n <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n <span>{{ getMenuName(menu, field()) }}</span>\n }\n </a>\n }\n }\n }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12346
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldMenus: { classPropertyName: "fieldMenus", publicName: "fieldMenus", isSignal: false, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, execMenuCallback: { classPropertyName: "execMenuCallback", publicName: "execMenuCallback", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n @for (menu of fieldMenus; track index; let index = $index) {\n @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n @if (menu.type === 'divider') {\n <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n } @else {\n @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n @let isRemoveField = menu.type === 'removeField';\n @let customComponent = getCustomComponent(menu);\n <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n (click)=\"execute(menu)\"\n [thyDisabled]=\"disabled\"\n >\n @if (customComponent) {\n <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n } @else {\n <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n <span>{{ getMenuName(menu, field()) }}</span>\n }\n </a>\n }\n }\n }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12343
12347
  }
12344
12348
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldMenu, decorators: [{
12345
12349
  type: Component,
@@ -12359,7 +12363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
12359
12363
  type: Input
12360
12364
  }], position: [{
12361
12365
  type: Input
12362
- }] } });
12366
+ }], execMenuCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "execMenuCallback", required: false }] }] } });
12363
12367
 
12364
12368
  const GRID_CELL_EDITOR_MAP = {
12365
12369
  [AITableFieldType.text]: TextCellEditorComponent,
@@ -12475,8 +12479,6 @@ class RecordDetailComponent {
12475
12479
  return internalId || inputId;
12476
12480
  }, ...(ngDevMode ? [{ debugName: "currentRecordId" }] : []));
12477
12481
  this.fieldOperationsMenuTemplate = viewChild('fieldOperationsMenuTemplate', ...(ngDevMode ? [{ debugName: "fieldOperationsMenuTemplate" }] : []));
12478
- this.slideRef = inject(ThySlideRef);
12479
- this.thyPopover = inject(ThyPopover);
12480
12482
  this.record = computed(() => {
12481
12483
  return this.aiTable().recordsMap()[this.currentRecordId()];
12482
12484
  }, ...(ngDevMode ? [{ debugName: "record" }] : []));
@@ -12508,7 +12510,11 @@ class RecordDetailComponent {
12508
12510
  return [];
12509
12511
  }, ...(ngDevMode ? [{ debugName: "fieldMenus" }] : []));
12510
12512
  this.activeFieldId = null;
12511
- this.fieldMenuVisible = {};
12513
+ this.fieldMenuVisible = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuVisible" }] : []));
12514
+ this.fieldMenuActive = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuActive" }] : []));
12515
+ this.fieldMenuPopoverRef = null;
12516
+ this.slideRef = inject(ThySlideRef);
12517
+ this.thyPopover = inject(ThyPopover);
12512
12518
  effect(() => {
12513
12519
  const activeCell = this.aiTable().selection().activeCell;
12514
12520
  if (activeCell) {
@@ -12546,15 +12552,20 @@ class RecordDetailComponent {
12546
12552
  setActiveCell(this.aiTable(), [this.currentRecordId(), fieldId]);
12547
12553
  }
12548
12554
  showFieldMenu(fieldId) {
12549
- this.fieldMenuVisible[fieldId] = true;
12555
+ this.fieldMenuVisible.set({ [fieldId]: true });
12550
12556
  }
12551
12557
  hideFieldMenu(fieldId) {
12552
- this.fieldMenuVisible[fieldId] = false;
12558
+ if (!this.fieldMenuPopoverRef) {
12559
+ this.fieldMenuVisible.set({ [fieldId]: false });
12560
+ }
12553
12561
  }
12554
12562
  fieldMenuMoreClick(e, fieldId) {
12555
12563
  const origin = e.target;
12556
12564
  const position = origin.getBoundingClientRect();
12557
- this.thyPopover.open(AITableFieldMenu, {
12565
+ this.fieldMenuVisible.set({ [fieldId]: true });
12566
+ this.fieldMenuActive.set({ [fieldId]: true });
12567
+ let isSelfClose = false;
12568
+ this.fieldMenuPopoverRef = this.thyPopover.open(AITableFieldMenu, {
12558
12569
  origin,
12559
12570
  placement: 'bottomRight',
12560
12571
  manualClosure: true,
@@ -12563,9 +12574,26 @@ class RecordDetailComponent {
12563
12574
  fieldId,
12564
12575
  fieldMenus: this.fieldMenus(),
12565
12576
  origin,
12566
- position
12577
+ position,
12578
+ execMenuCallback: (data) => {
12579
+ isSelfClose = true;
12580
+ this.thyPopover.close();
12581
+ data.popoverRef?.beforeClosed().subscribe(() => {
12582
+ this.fieldMenuVisible.set({ [fieldId]: false });
12583
+ this.fieldMenuActive.set({ [fieldId]: false });
12584
+ });
12585
+ }
12567
12586
  }
12568
12587
  });
12588
+ if (this.fieldMenuPopoverRef) {
12589
+ this.fieldMenuPopoverRef.beforeClosed().subscribe(() => {
12590
+ if (!isSelfClose) {
12591
+ this.fieldMenuVisible.set({ [fieldId]: false });
12592
+ this.fieldMenuActive.set({ [fieldId]: false });
12593
+ }
12594
+ this.fieldMenuPopoverRef = null;
12595
+ });
12596
+ }
12569
12597
  }
12570
12598
  addNewField(e) {
12571
12599
  const origin = e.target;
@@ -12628,11 +12656,11 @@ class RecordDetailComponent {
12628
12656
  }
12629
12657
  }
12630
12658
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12631
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n <span class=\"record-title\" [title]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <button\n thyButton=\"link-secondary\"\n thySize=\"md\"\n [disabled]=\"!recordNavigation()?.hasPrevious\"\n (click)=\"previousRecord()\"\n title=\"\u4E0A\u4E00\u6761\"\n >\n <thy-icon thyIconName=\"angle-up\"></thy-icon>\n </button>\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n <thy-icon thyIconName=\"angle-down\"></thy-icon>\n </button>\n </div>\n <thy-divider [thyVertical]=\"true\"></thy-divider>\n <div class=\"header-operations\">\n <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n <thy-icon thyIconName=\"list\"></thy-icon>\n </button>\n\n <ng-template #headerMoreMenu>\n <div class=\"thy-dropdown-menu\">\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n <thy-icon thyIconName=\"trash\"></thy-icon>\n <span>\u5220\u9664</span>\n </a>\n </div>\n </ng-template>\n\n <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n <thy-icon thyIconName=\"close\"></thy-icon>\n </button>\n </div>\n </div>\n\n <div class=\"record-detail-body\">\n <div class=\"px-8 cell-list-viewport\">\n @for (field of fields(); track field._id) {\n <div\n class=\"pt-4 cell-item\"\n [class.active]=\"activeFieldId === field._id\"\n (mouseenter)=\"showFieldMenu(field._id)\"\n (mouseleave)=\"hideFieldMenu(field._id)\"\n >\n <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n <div class=\"d-flex align-items-center cell-label\">\n <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n @if (fieldIconPath(field)) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n </svg>\n }\n </span>\n <span class=\"d-flex align-items-center font-size-base text-secondary\">\n {{ field.name }}\n </span>\n </div>\n @if (!readonly()) {\n <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible[field._id]\">\n <button thyButton=\"link-secondary\" thySize=\"xs\" (click)=\"fieldMenuMoreClick($event, field._id)\">\n <thy-icon thyIconName=\"more-vertical\"></thy-icon>\n </button>\n </div>\n }\n </div>\n\n <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n <ai-dynamic-cell-editor\n [aiTable]=\"aiTable()\"\n [fieldId]=\"field._id\"\n [recordId]=\"currentRecordId()\"\n [references]=\"references()\"\n (updateFieldValues)=\"fieldValueChange($event)\"\n >\n </ai-dynamic-cell-editor>\n </div>\n </div>\n }\n </div>\n <div class=\"py-4 px-5\">\n @if (!readonly()) {\n <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n <span>\u65B0\u589E\u5B57\u6BB5</span>\n </button>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12659
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n <span class=\"record-title\" [title]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <button\n thyButton=\"link-secondary\"\n thySize=\"md\"\n [disabled]=\"!recordNavigation()?.hasPrevious\"\n (click)=\"previousRecord()\"\n title=\"\u4E0A\u4E00\u6761\"\n >\n <thy-icon thyIconName=\"angle-up\"></thy-icon>\n </button>\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n <thy-icon thyIconName=\"angle-down\"></thy-icon>\n </button>\n </div>\n <thy-divider [thyVertical]=\"true\"></thy-divider>\n <div class=\"header-operations\">\n <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n <thy-icon thyIconName=\"list\"></thy-icon>\n </button>\n\n <ng-template #headerMoreMenu>\n <div class=\"thy-dropdown-menu\">\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n <thy-icon thyIconName=\"trash\"></thy-icon>\n <span>\u5220\u9664</span>\n </a>\n </div>\n </ng-template>\n\n <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n <thy-icon thyIconName=\"close\"></thy-icon>\n </button>\n </div>\n </div>\n\n <div class=\"record-detail-body\">\n <div class=\"px-8 cell-list-viewport\">\n @for (field of fields(); track field._id) {\n <div\n class=\"pt-4 cell-item\"\n [class.active]=\"activeFieldId === field._id\"\n (mouseenter)=\"showFieldMenu(field._id)\"\n (mouseleave)=\"hideFieldMenu(field._id)\"\n >\n <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n <div class=\"d-flex align-items-center cell-label\">\n <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n @if (fieldIconPath(field)) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n </svg>\n }\n </span>\n <span class=\"d-flex align-items-center font-size-base\">\n {{ field.name }}\n </span>\n </div>\n @if (!readonly()) {\n <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible()[field._id]\">\n <a\n thyAction\n [thyActionActive]=\"fieldMenuActive()[field._id]\"\n href=\"javascript:;\"\n (click)=\"fieldMenuMoreClick($event, field._id)\"\n ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n ></a>\n </div>\n }\n </div>\n\n <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n <ai-dynamic-cell-editor\n [aiTable]=\"aiTable()\"\n [fieldId]=\"field._id\"\n [recordId]=\"currentRecordId()\"\n [references]=\"references()\"\n (updateFieldValues)=\"fieldValueChange($event)\"\n >\n </ai-dynamic-cell-editor>\n </div>\n </div>\n }\n </div>\n <div class=\"py-4 px-5\">\n @if (!readonly()) {\n <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n <span>\u65B0\u589E\u5B57\u6BB5</span>\n </button>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12632
12660
  }
12633
12661
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RecordDetailComponent, decorators: [{
12634
12662
  type: Component,
12635
- args: [{ selector: 'ai-record-detail', imports: [ThyButton, ThyIcon, ThyDivider, ThyPopoverDirective, ThyDropdownMenuItemDirective, DynamicCellEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n <span class=\"record-title\" [title]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <button\n thyButton=\"link-secondary\"\n thySize=\"md\"\n [disabled]=\"!recordNavigation()?.hasPrevious\"\n (click)=\"previousRecord()\"\n title=\"\u4E0A\u4E00\u6761\"\n >\n <thy-icon thyIconName=\"angle-up\"></thy-icon>\n </button>\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n <thy-icon thyIconName=\"angle-down\"></thy-icon>\n </button>\n </div>\n <thy-divider [thyVertical]=\"true\"></thy-divider>\n <div class=\"header-operations\">\n <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n <thy-icon thyIconName=\"list\"></thy-icon>\n </button>\n\n <ng-template #headerMoreMenu>\n <div class=\"thy-dropdown-menu\">\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n <thy-icon thyIconName=\"trash\"></thy-icon>\n <span>\u5220\u9664</span>\n </a>\n </div>\n </ng-template>\n\n <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n <thy-icon thyIconName=\"close\"></thy-icon>\n </button>\n </div>\n </div>\n\n <div class=\"record-detail-body\">\n <div class=\"px-8 cell-list-viewport\">\n @for (field of fields(); track field._id) {\n <div\n class=\"pt-4 cell-item\"\n [class.active]=\"activeFieldId === field._id\"\n (mouseenter)=\"showFieldMenu(field._id)\"\n (mouseleave)=\"hideFieldMenu(field._id)\"\n >\n <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n <div class=\"d-flex align-items-center cell-label\">\n <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n @if (fieldIconPath(field)) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n </svg>\n }\n </span>\n <span class=\"d-flex align-items-center font-size-base text-secondary\">\n {{ field.name }}\n </span>\n </div>\n @if (!readonly()) {\n <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible[field._id]\">\n <button thyButton=\"link-secondary\" thySize=\"xs\" (click)=\"fieldMenuMoreClick($event, field._id)\">\n <thy-icon thyIconName=\"more-vertical\"></thy-icon>\n </button>\n </div>\n }\n </div>\n\n <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n <ai-dynamic-cell-editor\n [aiTable]=\"aiTable()\"\n [fieldId]=\"field._id\"\n [recordId]=\"currentRecordId()\"\n [references]=\"references()\"\n (updateFieldValues)=\"fieldValueChange($event)\"\n >\n </ai-dynamic-cell-editor>\n </div>\n </div>\n }\n </div>\n <div class=\"py-4 px-5\">\n @if (!readonly()) {\n <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n <span>\u65B0\u589E\u5B57\u6BB5</span>\n </button>\n }\n </div>\n </div>\n</div>\n" }]
12663
+ args: [{ selector: 'ai-record-detail', imports: [ThyButton, ThyAction, ThyIcon, ThyDivider, ThyPopoverDirective, ThyDropdownMenuItemDirective, DynamicCellEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n <span class=\"record-title\" [title]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <button\n thyButton=\"link-secondary\"\n thySize=\"md\"\n [disabled]=\"!recordNavigation()?.hasPrevious\"\n (click)=\"previousRecord()\"\n title=\"\u4E0A\u4E00\u6761\"\n >\n <thy-icon thyIconName=\"angle-up\"></thy-icon>\n </button>\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n <thy-icon thyIconName=\"angle-down\"></thy-icon>\n </button>\n </div>\n <thy-divider [thyVertical]=\"true\"></thy-divider>\n <div class=\"header-operations\">\n <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n <thy-icon thyIconName=\"list\"></thy-icon>\n </button>\n\n <ng-template #headerMoreMenu>\n <div class=\"thy-dropdown-menu\">\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n <thy-icon thyIconName=\"trash\"></thy-icon>\n <span>\u5220\u9664</span>\n </a>\n </div>\n </ng-template>\n\n <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n <thy-icon thyIconName=\"close\"></thy-icon>\n </button>\n </div>\n </div>\n\n <div class=\"record-detail-body\">\n <div class=\"px-8 cell-list-viewport\">\n @for (field of fields(); track field._id) {\n <div\n class=\"pt-4 cell-item\"\n [class.active]=\"activeFieldId === field._id\"\n (mouseenter)=\"showFieldMenu(field._id)\"\n (mouseleave)=\"hideFieldMenu(field._id)\"\n >\n <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n <div class=\"d-flex align-items-center cell-label\">\n <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n @if (fieldIconPath(field)) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n </svg>\n }\n </span>\n <span class=\"d-flex align-items-center font-size-base\">\n {{ field.name }}\n </span>\n </div>\n @if (!readonly()) {\n <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible()[field._id]\">\n <a\n thyAction\n [thyActionActive]=\"fieldMenuActive()[field._id]\"\n href=\"javascript:;\"\n (click)=\"fieldMenuMoreClick($event, field._id)\"\n ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n ></a>\n </div>\n }\n </div>\n\n <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n <ai-dynamic-cell-editor\n [aiTable]=\"aiTable()\"\n [fieldId]=\"field._id\"\n [recordId]=\"currentRecordId()\"\n [references]=\"references()\"\n (updateFieldValues)=\"fieldValueChange($event)\"\n >\n </ai-dynamic-cell-editor>\n </div>\n </div>\n }\n </div>\n <div class=\"py-4 px-5\">\n @if (!readonly()) {\n <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n <span>\u65B0\u589E\u5B57\u6BB5</span>\n </button>\n }\n </div>\n </div>\n</div>\n" }]
12636
12664
  }], ctorParameters: () => [], propDecorators: { aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: true }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], recordIdChange: [{ type: i0.Output, args: ["recordIdChange"] }], fieldOperationsMenuTemplate: [{ type: i0.ViewChild, args: ['fieldOperationsMenuTemplate', { isSignal: true }] }] } });
12637
12665
 
12638
12666
  class AITableGridEventService {
@@ -12943,6 +12971,7 @@ class AITableGridBase {
12943
12971
  this.aiKeywords = input(...(ngDevMode ? [undefined, { debugName: "aiKeywords" }] : []));
12944
12972
  this.aiFrozenColumnCountFn = input(...(ngDevMode ? [undefined, { debugName: "aiFrozenColumnCountFn" }] : []));
12945
12973
  this.aiRecordHeight = input(AITableRecordHeightType.low, ...(ngDevMode ? [{ debugName: "aiRecordHeight" }] : []));
12974
+ this.aiRecordDetailConfig = input(...(ngDevMode ? [undefined, { debugName: "aiRecordDetailConfig" }] : []));
12946
12975
  this.AITableFieldType = AITableFieldType;
12947
12976
  this.AITableSelectOptionStyle = AITableSelectOptionStyle;
12948
12977
  this.isSelectedAll = computed(() => {
@@ -13068,7 +13097,7 @@ class AITableGridBase {
13068
13097
  }
13069
13098
  }
13070
13099
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
13071
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiSortKeysMap: { classPropertyName: "aiSortKeysMap", publicName: "aiSortKeysMap", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null }, aiRecordHeight: { classPropertyName: "aiRecordHeight", publicName: "aiRecordHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiRemoveRecord: "aiRemoveRecord", aiAddField: "aiAddField", aiCopyRecords: "aiCopyRecords", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
13100
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiSortKeysMap: { classPropertyName: "aiSortKeysMap", publicName: "aiSortKeysMap", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null }, aiRecordHeight: { classPropertyName: "aiRecordHeight", publicName: "aiRecordHeight", isSignal: true, isRequired: false, transformFunction: null }, aiRecordDetailConfig: { classPropertyName: "aiRecordDetailConfig", publicName: "aiRecordDetailConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiRemoveRecord: "aiRemoveRecord", aiAddField: "aiAddField", aiCopyRecords: "aiCopyRecords", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
13072
13101
  }
13073
13102
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridBase, decorators: [{
13074
13103
  type: Component,
@@ -13077,7 +13106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
13077
13106
  template: '',
13078
13107
  changeDetection: ChangeDetectionStrategy.OnPush
13079
13108
  }]
13080
- }], propDecorators: { aiRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiRecords", required: true }] }, { type: i0.Output, args: ["aiRecordsChange"] }], aiFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFields", required: true }] }, { type: i0.Output, args: ["aiFieldsChange"] }], aiContextMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiContextMenuItems", required: false }] }], aiFieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFieldConfig", required: false }] }], aiReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiReadonly", required: false }] }], aiPlugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiPlugins", required: false }] }], aiMaxFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxFields", required: false }] }], aiMaxRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxRecords", required: false }] }], aiMaxSelectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxSelectOptions", required: false }] }], aiReferences: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiReferences", required: true }] }], aiBuildRenderDataFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiBuildRenderDataFn", required: false }] }], aiBuildGroupLinearRowsFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiBuildGroupLinearRowsFn", required: false }] }], aiSortKeysMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiSortKeysMap", required: false }] }], aiGetI18nTextByKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiGetI18nTextByKey", required: false }] }], aiKeywords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiKeywords", required: false }] }], aiFrozenColumnCountFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFrozenColumnCountFn", required: false }] }], aiRecordHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiRecordHeight", required: false }] }], aiTableInitialized: [{ type: i0.Output, args: ["aiTableInitialized"] }], aiAddRecord: [{ type: i0.Output, args: ["aiAddRecord"] }], aiRemoveRecord: [{ type: i0.Output, args: ["aiRemoveRecord"] }], aiAddField: [{ type: i0.Output, args: ["aiAddField"] }], aiCopyRecords: [{ type: i0.Output, args: ["aiCopyRecords"] }], aiMoveField: [{ type: i0.Output, args: ["aiMoveField"] }], aiUpdateFieldValues: [{ type: i0.Output, args: ["aiUpdateFieldValues"] }], aiSetField: [{ type: i0.Output, args: ["aiSetField"] }], aiSetFieldWidth: [{ type: i0.Output, args: ["aiSetFieldWidth"] }], aiSetFieldStatType: [{ type: i0.Output, args: ["aiSetFieldStatType"] }], aiMoveRecords: [{ type: i0.Output, args: ["aiMoveRecords"] }], aiClick: [{ type: i0.Output, args: ["aiClick"] }], aiDbClick: [{ type: i0.Output, args: ["aiDbClick"] }], aiRowGroupCollapseClick: [{ type: i0.Output, args: ["aiRowGroupCollapseClick"] }] } });
13109
+ }], propDecorators: { aiRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiRecords", required: true }] }, { type: i0.Output, args: ["aiRecordsChange"] }], aiFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFields", required: true }] }, { type: i0.Output, args: ["aiFieldsChange"] }], aiContextMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiContextMenuItems", required: false }] }], aiFieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFieldConfig", required: false }] }], aiReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiReadonly", required: false }] }], aiPlugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiPlugins", required: false }] }], aiMaxFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxFields", required: false }] }], aiMaxRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxRecords", required: false }] }], aiMaxSelectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxSelectOptions", required: false }] }], aiReferences: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiReferences", required: true }] }], aiBuildRenderDataFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiBuildRenderDataFn", required: false }] }], aiBuildGroupLinearRowsFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiBuildGroupLinearRowsFn", required: false }] }], aiSortKeysMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiSortKeysMap", required: false }] }], aiGetI18nTextByKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiGetI18nTextByKey", required: false }] }], aiKeywords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiKeywords", required: false }] }], aiFrozenColumnCountFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFrozenColumnCountFn", required: false }] }], aiRecordHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiRecordHeight", required: false }] }], aiRecordDetailConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiRecordDetailConfig", required: false }] }], aiTableInitialized: [{ type: i0.Output, args: ["aiTableInitialized"] }], aiAddRecord: [{ type: i0.Output, args: ["aiAddRecord"] }], aiRemoveRecord: [{ type: i0.Output, args: ["aiRemoveRecord"] }], aiAddField: [{ type: i0.Output, args: ["aiAddField"] }], aiCopyRecords: [{ type: i0.Output, args: ["aiCopyRecords"] }], aiMoveField: [{ type: i0.Output, args: ["aiMoveField"] }], aiUpdateFieldValues: [{ type: i0.Output, args: ["aiUpdateFieldValues"] }], aiSetField: [{ type: i0.Output, args: ["aiSetField"] }], aiSetFieldWidth: [{ type: i0.Output, args: ["aiSetFieldWidth"] }], aiSetFieldStatType: [{ type: i0.Output, args: ["aiSetFieldStatType"] }], aiMoveRecords: [{ type: i0.Output, args: ["aiMoveRecords"] }], aiClick: [{ type: i0.Output, args: ["aiClick"] }], aiDbClick: [{ type: i0.Output, args: ["aiDbClick"] }], aiRowGroupCollapseClick: [{ type: i0.Output, args: ["aiRowGroupCollapseClick"] }] } });
13081
13110
 
13082
13111
  class AITableDomGrid extends AITableGridBase {
13083
13112
  ngOnInit() {
@@ -13346,7 +13375,8 @@ class RecordDetailService {
13346
13375
  recordId: config.recordId,
13347
13376
  references: config.references,
13348
13377
  actions: config.actions
13349
- }
13378
+ },
13379
+ ...config.slideConfig
13350
13380
  });
13351
13381
  if (this.currentSlideRef) {
13352
13382
  this.currentSlideRef.afterOpened().subscribe(() => {
@@ -13373,19 +13403,19 @@ class RecordDetailService {
13373
13403
  isOpen() {
13374
13404
  return this.currentSlideRef !== null;
13375
13405
  }
13376
- isClickInsideTableOrPanel(event, viewContainerRef) {
13406
+ canCloseSlide(event, viewContainerRef) {
13377
13407
  const target = event.target;
13378
13408
  const tableElement = viewContainerRef.element.nativeElement;
13379
13409
  if (tableElement && tableElement.contains(target)) {
13380
- return true;
13410
+ return false;
13381
13411
  }
13382
13412
  const overlayContainers = document.querySelectorAll('.cdk-overlay-container');
13383
13413
  for (let i = 0; i < overlayContainers.length; i++) {
13384
13414
  if (overlayContainers[i].contains(target)) {
13385
- return true;
13415
+ return false;
13386
13416
  }
13387
13417
  }
13388
- return false;
13418
+ return true;
13389
13419
  }
13390
13420
  setupDocumentClickListener(config) {
13391
13421
  if (this.clickSubscription) {
@@ -13393,7 +13423,8 @@ class RecordDetailService {
13393
13423
  this.clickSubscription = null;
13394
13424
  }
13395
13425
  this.clickSubscription = fromEvent(document, 'click').subscribe((event) => {
13396
- if (!this.isClickInsideTableOrPanel(event, config.viewContainerRef)) {
13426
+ const callback = config.canCloseSlideCallback ? config.canCloseSlideCallback : this.canCloseSlide;
13427
+ if (callback(event, config.viewContainerRef)) {
13397
13428
  this.close();
13398
13429
  }
13399
13430
  });
@@ -14133,6 +14164,7 @@ class AITableGrid extends AITableGridBase {
14133
14164
  this.initCustomField();
14134
14165
  }
14135
14166
  ngOnDestroy() {
14167
+ this.recordDetailService.close();
14136
14168
  this.resizeObserver?.disconnect();
14137
14169
  }
14138
14170
  initContext() {
@@ -14507,7 +14539,8 @@ class AITableGrid extends AITableGridBase {
14507
14539
  aiTable: this.aiTable,
14508
14540
  recordId: targetNameDetail.recordId,
14509
14541
  references: this.aiReferences(),
14510
- actions: this.actions
14542
+ actions: this.actions,
14543
+ ...this.aiRecordDetailConfig()
14511
14544
  });
14512
14545
  }
14513
14546
  }