@ai-table/grid 0.4.6 → 0.4.8

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.
@@ -48,17 +48,20 @@
48
48
  }
49
49
 
50
50
  .cell-item {
51
+ .field-action {
52
+ display: none;
53
+ &.active {
54
+ display: block;
55
+ }
56
+ }
57
+ &:hover {
58
+ .field-action {
59
+ display: block;
60
+ }
61
+ }
62
+
51
63
  .cell-header {
52
64
  height: 22px;
53
-
54
- .cell-operations {
55
- opacity: 0;
56
- transition: opacity 0.2s;
57
-
58
- &.visible {
59
- opacity: 1;
60
- }
61
- }
62
65
  }
63
66
 
64
67
  .dynamic-cell-editor {
@@ -3388,9 +3388,6 @@ function cellValueToSortValue$1(cellValue) {
3388
3388
  }
3389
3389
 
3390
3390
  class CheckboxField extends CheckboxFieldBase {
3391
- transformCellValue(cellValue, options) {
3392
- return transformToCellText(cellValue, options);
3393
- }
3394
3391
  isMeetFilter(condition, cellValue) {
3395
3392
  if (cellValue === null) {
3396
3393
  if (condition.operation === AITableFilterOperation.empty) {
@@ -9313,8 +9310,7 @@ class AITableFieldStat {
9313
9310
  aiTable,
9314
9311
  getFieldValue: (record, options) => {
9315
9312
  const { aiTable, field } = options;
9316
- const cellValue = AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
9317
- return transformToCellText(cellValue, options);
9313
+ return AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
9318
9314
  }
9319
9315
  };
9320
9316
  }, ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -10736,7 +10732,11 @@ class AITableCellProgress extends CoverCellBase {
10736
10732
  const { scrollLeft } = aiTable.context.scrollState();
10737
10733
  const pointPosition = aiTable.context.pointPosition();
10738
10734
  const { columnIndex } = pointPosition;
10739
- const columnLeftX = coordinate.getColumnOffset(columnIndex) - scrollLeft + AI_TABLE_OFFSET;
10735
+ let columnLeftX = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
10736
+ const isInFrozenColumn = columnIndex < aiTable.context.frozenColumnCount();
10737
+ if (!isInFrozenColumn) {
10738
+ columnLeftX = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET - scrollLeft;
10739
+ }
10740
10740
  const stage = e.event.target.getStage();
10741
10741
  if (!stage)
10742
10742
  return;
@@ -12507,9 +12507,7 @@ class DynamicCellEditorComponent {
12507
12507
  }
12508
12508
  catch (error) { }
12509
12509
  const fieldRenderers = this.aiTable().context?.aiFieldConfig()?.fieldRenderers;
12510
- this.editorComponentRef = editorHost?.createComponent(editorComponent, {
12511
- injector: fieldRenderers?.[field.type]?.recordCellEditorInjector
12512
- });
12510
+ this.editorComponentRef = editorHost?.createComponent(editorComponent, {});
12513
12511
  const instance = this.editorComponentRef.instance;
12514
12512
  if (instance instanceof AbstractEditCellEditor) {
12515
12513
  this.editorComponentRef.setInput('aiTable', this.aiTable());
@@ -12620,7 +12618,6 @@ class RecordDetailComponent {
12620
12618
  return [];
12621
12619
  }, ...(ngDevMode ? [{ debugName: "fieldMenus" }] : []));
12622
12620
  this.activeFieldId = null;
12623
- this.fieldMenuVisible = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuVisible" }] : []));
12624
12621
  this.fieldMenuActive = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuActive" }] : []));
12625
12622
  this.fieldMenuPopoverRef = null;
12626
12623
  this.slideRef = inject(ThySlideRef);
@@ -12660,35 +12657,23 @@ class RecordDetailComponent {
12660
12657
  cellClick(fieldId) {
12661
12658
  this.activateCell(fieldId);
12662
12659
  }
12663
- showFieldMenu(fieldId) {
12664
- this.fieldMenuVisible.set({ [fieldId]: true });
12665
- }
12666
- hideFieldMenu(fieldId) {
12667
- if (!this.fieldMenuPopoverRef) {
12668
- this.fieldMenuVisible.set({ [fieldId]: false });
12669
- }
12670
- }
12671
- fieldMenuMoreClick(e, fieldId) {
12672
- const origin = e.target;
12673
- const position = origin.getBoundingClientRect();
12674
- this.fieldMenuVisible.set({ [fieldId]: true });
12660
+ fieldMenuMoreClick(e, fieldId, fieldMenuOrigin) {
12661
+ const origin = e.currentTarget;
12662
+ const position = fieldMenuOrigin.getBoundingClientRect();
12675
12663
  this.fieldMenuActive.set({ [fieldId]: true });
12676
12664
  let isSelfClose = false;
12677
12665
  this.fieldMenuPopoverRef = this.thyPopover.open(AITableFieldMenu, {
12678
12666
  origin,
12679
12667
  placement: 'bottomRight',
12680
- manualClosure: true,
12681
12668
  initialState: {
12682
12669
  aiTable: this.aiTable(),
12683
12670
  fieldId,
12684
12671
  fieldMenus: this.fieldMenus(),
12685
- origin,
12672
+ origin: fieldMenuOrigin,
12686
12673
  position,
12687
12674
  execMenuCallback: (data) => {
12688
12675
  isSelfClose = true;
12689
- this.thyPopover.close();
12690
12676
  data.popoverRef?.beforeClosed().subscribe(() => {
12691
- this.fieldMenuVisible.set({ [fieldId]: false });
12692
12677
  this.fieldMenuActive.set({ [fieldId]: false });
12693
12678
  });
12694
12679
  }
@@ -12697,7 +12682,6 @@ class RecordDetailComponent {
12697
12682
  if (this.fieldMenuPopoverRef) {
12698
12683
  this.fieldMenuPopoverRef.beforeClosed().subscribe(() => {
12699
12684
  if (!isSelfClose) {
12700
- this.fieldMenuVisible.set({ [fieldId]: false });
12701
12685
  this.fieldMenuActive.set({ [fieldId]: false });
12702
12686
  }
12703
12687
  this.fieldMenuPopoverRef = null;
@@ -12755,7 +12739,7 @@ class RecordDetailComponent {
12755
12739
  }
12756
12740
  }
12757
12741
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12758
- 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 px-5 record-detail-header\">\n <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\">\n <thy-icon thyIconName=\"angle-up\"></thy-icon>\n </button>\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\">\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>{{ i18nTexts().deleteRecord }}</span>\n </a>\n </div>\n </ng-template>\n\n <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\">\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)=\"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: 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"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12742
+ 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 px-5 record-detail-header\">\n <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\">\n <thy-icon thyIconName=\"angle-up\"></thy-icon>\n </button>\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\">\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>{{ i18nTexts().deleteRecord }}</span>\n </a>\n </div>\n </ng-template>\n\n <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\">\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 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: 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"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12759
12743
  }
12760
12744
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, decorators: [{
12761
12745
  type: Component,
@@ -12768,7 +12752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
12768
12752
  ThyDropdownMenuItemDirective,
12769
12753
  DynamicCellEditorComponent,
12770
12754
  ThyFlexibleText
12771
- ], 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\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\">\n <thy-icon thyIconName=\"angle-up\"></thy-icon>\n </button>\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\">\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>{{ i18nTexts().deleteRecord }}</span>\n </a>\n </div>\n </ng-template>\n\n <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\">\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)=\"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" }]
12755
+ ], 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\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n {{ recordTitle() }}\n </span>\n\n <div class=\"record-navigation\">\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\">\n <thy-icon thyIconName=\"angle-up\"></thy-icon>\n </button>\n <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\">\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>{{ i18nTexts().deleteRecord }}</span>\n </a>\n </div>\n </ng-template>\n\n <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\">\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 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" }]
12772
12756
  }], 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 }] }] } });
12773
12757
 
12774
12758
  class AITableGridEventService {
@@ -13477,6 +13461,7 @@ class RecordDetailService {
13477
13461
  from: 'right',
13478
13462
  width: '480px',
13479
13463
  hasBackdrop: false,
13464
+ viewContainerRef: config.viewContainerRef,
13480
13465
  panelClass: 'ai-expand-record-slide',
13481
13466
  initialState: {
13482
13467
  aiTable: config.aiTable,