@ai-table/grid 0.5.1 → 0.5.2

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.
@@ -76,3 +76,12 @@
76
76
  }
77
77
  }
78
78
  }
79
+
80
+ .ai-table-record-detail-remove {
81
+ &:hover {
82
+ .thy-icon {
83
+ color: variables.$danger !important;
84
+ }
85
+ color: variables.$danger !important;
86
+ }
87
+ }
@@ -6958,7 +6958,7 @@ class GroupLayout extends Layout {
6958
6958
  return;
6959
6959
  const { row, indexStyle } = config;
6960
6960
  const { _id: groupValue, fieldId } = row;
6961
- const { field, style, aiTable } = render;
6961
+ const { field, style, aiTable, cellValue } = render;
6962
6962
  const y = this.y;
6963
6963
  const rowHeight = this.rowHeight;
6964
6964
  const { fill: indexFill } = indexStyle || { fill: this.colors.white };
@@ -6986,7 +6986,7 @@ class GroupLayout extends Layout {
6986
6986
  });
6987
6987
  }
6988
6988
  const iconContainerWidth = AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
6989
- if (!isEmpty(groupValue) || [AITableFieldType.checkbox, AITableFieldType.progress].includes(field.type)) {
6989
+ if (!isEmpty(cellValue) || [AITableFieldType.checkbox, AITableFieldType.progress].includes(field.type)) {
6990
6990
  cellDrawer.initStyle(field, style);
6991
6991
  const statContainerWidth = aiTable.context?.groupStatContainerWidthMap()?.get(`${config.row.groupId}:${fieldId}`);
6992
6992
  const widthOffset = statContainerWidth ? statContainerWidth - AI_TABLE_CELL_PADDING : 0;
@@ -12592,13 +12592,13 @@ class RecordDetailComponent {
12592
12592
  }
12593
12593
  constructor() {
12594
12594
  this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : []));
12595
- this.recordId = input.required(...(ngDevMode ? [{ debugName: "recordId" }] : []));
12595
+ this.recordId = model.required(...(ngDevMode ? [{ debugName: "recordId" }] : []));
12596
12596
  this.references = input.required(...(ngDevMode ? [{ debugName: "references" }] : []));
12597
12597
  this.actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : []));
12598
12598
  this.recordIdChange = output();
12599
12599
  this.internalRecordId = signal('', ...(ngDevMode ? [{ debugName: "internalRecordId" }] : []));
12600
12600
  this.readonly = computed(() => {
12601
- return this.aiTable().context?.readonly?.();
12601
+ return this.aiTable()?.context?.readonly?.();
12602
12602
  }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
12603
12603
  this.currentRecordId = computed(() => {
12604
12604
  const inputId = this.recordId();
@@ -12655,6 +12655,13 @@ class RecordDetailComponent {
12655
12655
  this.fieldMenuPopoverRef = null;
12656
12656
  this.slideRef = inject(ThySlideRef);
12657
12657
  this.thyPopover = inject(ThyPopover);
12658
+ effect(() => {
12659
+ const recordId = this.recordId();
12660
+ untracked(() => {
12661
+ this.setSelection(recordId);
12662
+ this.internalRecordId.set(recordId);
12663
+ });
12664
+ });
12658
12665
  effect(() => {
12659
12666
  const activeCell = this.aiTable().selection().activeCell;
12660
12667
  if (activeCell) {
@@ -12662,9 +12669,8 @@ class RecordDetailComponent {
12662
12669
  }
12663
12670
  });
12664
12671
  }
12665
- ngOnInit() {
12666
- this.setSelection(this.recordId());
12667
- this.internalRecordId.set(this.recordId());
12672
+ updateRecordId(recordId) {
12673
+ this.recordId.set(recordId);
12668
12674
  }
12669
12675
  close() {
12670
12676
  this.slideRef?.close();
@@ -12672,15 +12678,13 @@ class RecordDetailComponent {
12672
12678
  previousRecord() {
12673
12679
  const prevId = getPreviousRecordByActiveCell(this.aiTable());
12674
12680
  if (prevId) {
12675
- this.internalRecordId.set(prevId);
12676
- this.setSelection(prevId);
12681
+ this.updateRecordId(prevId);
12677
12682
  }
12678
12683
  }
12679
12684
  nextRecord() {
12680
12685
  const nextId = getNextRecordByActiveCell(this.aiTable());
12681
12686
  if (nextId) {
12682
- this.internalRecordId.set(nextId);
12683
- this.setSelection(nextId);
12687
+ this.updateRecordId(nextId);
12684
12688
  }
12685
12689
  }
12686
12690
  deleteRecord() {
@@ -12695,23 +12699,24 @@ class RecordDetailComponent {
12695
12699
  const position = fieldMenuOrigin.getBoundingClientRect();
12696
12700
  this.fieldMenuActive.set({ [fieldId]: true });
12697
12701
  let isSelfClose = false;
12698
- this.fieldMenuPopoverRef = this.thyPopover.open(AITableFieldMenu, {
12699
- origin,
12700
- placement: 'bottomRight',
12701
- initialState: {
12702
- aiTable: this.aiTable(),
12703
- fieldId,
12704
- fieldMenus: this.fieldMenus(),
12705
- origin: fieldMenuOrigin,
12706
- position,
12707
- execMenuCallback: (data) => {
12708
- isSelfClose = true;
12709
- data.popoverRef?.beforeClosed().subscribe(() => {
12710
- this.fieldMenuActive.set({ [fieldId]: false });
12711
- });
12702
+ this.fieldMenuPopoverRef =
12703
+ this.thyPopover.open(AITableFieldMenu, {
12704
+ origin,
12705
+ placement: 'bottomRight',
12706
+ initialState: {
12707
+ aiTable: this.aiTable(),
12708
+ fieldId,
12709
+ fieldMenus: this.fieldMenus(),
12710
+ origin: fieldMenuOrigin,
12711
+ position,
12712
+ execMenuCallback: (data) => {
12713
+ isSelfClose = true;
12714
+ data.popoverRef?.beforeClosed().subscribe(() => {
12715
+ this.fieldMenuActive.set({ [fieldId]: false });
12716
+ });
12717
+ }
12712
12718
  }
12713
- }
12714
- }) ?? null;
12719
+ }) ?? null;
12715
12720
  if (this.fieldMenuPopoverRef) {
12716
12721
  this.fieldMenuPopoverRef.beforeClosed().subscribe(() => {
12717
12722
  if (!isSelfClose) {
@@ -12772,7 +12777,7 @@ class RecordDetailComponent {
12772
12777
  }
12773
12778
  }
12774
12779
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12775
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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 pl-8 pr-5 record-detail-header\">\n <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n ><thy-icon thyIconName=\"angle-up\"></thy-icon\n ></a>\n\n <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n ><thy-icon thyIconName=\"angle-down\"></thy-icon\n ></a>\n </div>\n <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n <div class=\"header-operations\">\n <a\n thyAction\n thyActiveClass=\"active\"\n href=\"javascript:;\"\n [thyDropdown]=\"headerMoreMenu\"\n thyTrigger=\"click\"\n thyPlacement=\"bottomRight\"\n ><thy-icon thyIconName=\"list\"></thy-icon\n ></a>\n\n <thy-dropdown-menu #headerMoreMenu>\n <a thyDropdownMenuItem [thyDisabled]=\"readonly()\" href=\"javascript:;\" (click)=\"deleteRecord()\">\n <thy-icon thyIconName=\"trash\"></thy-icon>\n <span>{{ i18nTexts().deleteRecord }}</span>\n </a>\n </thy-dropdown-menu>\n\n <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\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 class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n <div #fieldMenuOrigin 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 <a\n class=\"field-action\"\n thyAction\n [thyActionActive]=\"fieldMenuActive()[field._id]\"\n href=\"javascript:;\"\n (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n ></a>\n }\n </div>\n\n <div class=\"dynamic-cell-editor\" (click)=\"cellClick(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>{{ i18nTexts().addField }}</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: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12780
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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: { recordId: "recordIdChange", 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 pl-8 pr-5 record-detail-header\">\n <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n ><thy-icon thyIconName=\"angle-up\"></thy-icon\n ></a>\n\n <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n ><thy-icon thyIconName=\"angle-down\"></thy-icon\n ></a>\n </div>\n <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n <div class=\"header-operations\">\n <a\n thyAction\n thyActiveClass=\"active\"\n href=\"javascript:;\"\n [thyDropdown]=\"headerMoreMenu\"\n thyTrigger=\"click\"\n thyPlacement=\"bottomRight\"\n ><thy-icon thyIconName=\"list\"></thy-icon\n ></a>\n\n <thy-dropdown-menu #headerMoreMenu>\n <a\n class=\"ai-table-record-detail-remove\"\n thyDropdownMenuItem\n [thyDisabled]=\"readonly()\"\n href=\"javascript:;\"\n (click)=\"deleteRecord()\"\n >\n <thy-icon thyIconName=\"trash\"></thy-icon>\n <span>{{ i18nTexts().deleteRecord }}</span>\n </a>\n </thy-dropdown-menu>\n\n <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\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 class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n <div #fieldMenuOrigin 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 <a\n class=\"field-action\"\n thyAction\n [thyActionActive]=\"fieldMenuActive()[field._id]\"\n href=\"javascript:;\"\n (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n ></a>\n }\n </div>\n\n <div class=\"dynamic-cell-editor\" (click)=\"cellClick(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>{{ i18nTexts().addField }}</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: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12776
12781
  }
12777
12782
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, decorators: [{
12778
12783
  type: Component,
@@ -12786,8 +12791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
12786
12791
  ThyDropdownMenuComponent,
12787
12792
  DynamicCellEditorComponent,
12788
12793
  ThyFlexibleText
12789
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n ><thy-icon thyIconName=\"angle-up\"></thy-icon\n ></a>\n\n <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n ><thy-icon thyIconName=\"angle-down\"></thy-icon\n ></a>\n </div>\n <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n <div class=\"header-operations\">\n <a\n thyAction\n thyActiveClass=\"active\"\n href=\"javascript:;\"\n [thyDropdown]=\"headerMoreMenu\"\n thyTrigger=\"click\"\n thyPlacement=\"bottomRight\"\n ><thy-icon thyIconName=\"list\"></thy-icon\n ></a>\n\n <thy-dropdown-menu #headerMoreMenu>\n <a thyDropdownMenuItem [thyDisabled]=\"readonly()\" href=\"javascript:;\" (click)=\"deleteRecord()\">\n <thy-icon thyIconName=\"trash\"></thy-icon>\n <span>{{ i18nTexts().deleteRecord }}</span>\n </a>\n </thy-dropdown-menu>\n\n <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\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 class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n <div #fieldMenuOrigin 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 <a\n class=\"field-action\"\n thyAction\n [thyActionActive]=\"fieldMenuActive()[field._id]\"\n href=\"javascript:;\"\n (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n ></a>\n }\n </div>\n\n <div class=\"dynamic-cell-editor\" (click)=\"cellClick(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>{{ i18nTexts().addField }}</span>\n </button>\n }\n </div>\n </div>\n</div>\n" }]
12790
- }], 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 }] }] } });
12794
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n ><thy-icon thyIconName=\"angle-up\"></thy-icon\n ></a>\n\n <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n ><thy-icon thyIconName=\"angle-down\"></thy-icon\n ></a>\n </div>\n <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n <div class=\"header-operations\">\n <a\n thyAction\n thyActiveClass=\"active\"\n href=\"javascript:;\"\n [thyDropdown]=\"headerMoreMenu\"\n thyTrigger=\"click\"\n thyPlacement=\"bottomRight\"\n ><thy-icon thyIconName=\"list\"></thy-icon\n ></a>\n\n <thy-dropdown-menu #headerMoreMenu>\n <a\n class=\"ai-table-record-detail-remove\"\n thyDropdownMenuItem\n [thyDisabled]=\"readonly()\"\n href=\"javascript:;\"\n (click)=\"deleteRecord()\"\n >\n <thy-icon thyIconName=\"trash\"></thy-icon>\n <span>{{ i18nTexts().deleteRecord }}</span>\n </a>\n </thy-dropdown-menu>\n\n <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\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 class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n <div #fieldMenuOrigin 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 <a\n class=\"field-action\"\n thyAction\n [thyActionActive]=\"fieldMenuActive()[field._id]\"\n href=\"javascript:;\"\n (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n ></a>\n }\n </div>\n\n <div class=\"dynamic-cell-editor\" (click)=\"cellClick(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>{{ i18nTexts().addField }}</span>\n </button>\n }\n </div>\n </div>\n</div>\n" }]
12795
+ }], ctorParameters: () => [], propDecorators: { aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: true }] }, { type: i0.Output, args: ["recordIdChange"] }], 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 }] }] } });
12791
12796
 
12792
12797
  class AITableGridEventService {
12793
12798
  constructor() {
@@ -13487,24 +13492,28 @@ class RecordDetailService {
13487
13492
  }
13488
13493
  open(config) {
13489
13494
  if (this.isOpen() && this.currentSlideRef) {
13490
- this.currentSlideRef.componentInstance.setSelection(config.recordId);
13495
+ const componentInstance = this.currentSlideRef.componentInstance;
13496
+ if (componentInstance && componentInstance.recordId() !== config.recordId) {
13497
+ componentInstance.updateRecordId(config.recordId);
13498
+ }
13491
13499
  return this.currentSlideRef;
13492
13500
  }
13493
13501
  this.config = config;
13494
- this.currentSlideRef = this.thySlide.open(RecordDetailComponent, {
13495
- from: 'right',
13496
- width: '480px',
13497
- hasBackdrop: false,
13498
- viewContainerRef: config.viewContainerRef,
13499
- panelClass: 'ai-expand-record-slide',
13500
- initialState: {
13501
- aiTable: config.aiTable,
13502
- recordId: config.recordId,
13503
- references: config.references,
13504
- actions: config.actions
13505
- },
13506
- ...config.slideConfig
13507
- }) ?? null;
13502
+ this.currentSlideRef =
13503
+ this.thySlide.open(RecordDetailComponent, {
13504
+ from: 'right',
13505
+ width: '480px',
13506
+ hasBackdrop: false,
13507
+ viewContainerRef: config.viewContainerRef,
13508
+ panelClass: 'ai-expand-record-slide',
13509
+ initialState: {
13510
+ aiTable: config.aiTable,
13511
+ recordId: config.recordId,
13512
+ references: config.references,
13513
+ actions: config.actions
13514
+ },
13515
+ ...config.slideConfig
13516
+ }) ?? null;
13508
13517
  if (this.currentSlideRef) {
13509
13518
  this.currentSlideRef.afterOpened().subscribe(() => {
13510
13519
  this.setupDocumentClickListener(config);
@@ -14781,7 +14790,7 @@ class AITableGrid extends AITableGridBase {
14781
14790
  if (!focused) {
14782
14791
  return true;
14783
14792
  }
14784
- const hasAITableGrid = focused.querySelector('ai-table-grid') !== null;
14793
+ const hasAITableGrid = focused.closest('ai-table-grid') !== null || focused.closest('.ai-table-prevent-clear-selection') !== null;
14785
14794
  if (!hasAITableGrid) {
14786
14795
  return true;
14787
14796
  }