@ai-table/grid 0.4.7 → 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 {
|
|
@@ -9310,8 +9310,7 @@ class AITableFieldStat {
|
|
|
9310
9310
|
aiTable,
|
|
9311
9311
|
getFieldValue: (record, options) => {
|
|
9312
9312
|
const { aiTable, field } = options;
|
|
9313
|
-
|
|
9314
|
-
return transformToCellText(cellValue, options);
|
|
9313
|
+
return AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
|
|
9315
9314
|
}
|
|
9316
9315
|
};
|
|
9317
9316
|
}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
@@ -12508,9 +12507,7 @@ class DynamicCellEditorComponent {
|
|
|
12508
12507
|
}
|
|
12509
12508
|
catch (error) { }
|
|
12510
12509
|
const fieldRenderers = this.aiTable().context?.aiFieldConfig()?.fieldRenderers;
|
|
12511
|
-
this.editorComponentRef = editorHost?.createComponent(editorComponent, {
|
|
12512
|
-
injector: fieldRenderers?.[field.type]?.recordCellEditorInjector
|
|
12513
|
-
});
|
|
12510
|
+
this.editorComponentRef = editorHost?.createComponent(editorComponent, {});
|
|
12514
12511
|
const instance = this.editorComponentRef.instance;
|
|
12515
12512
|
if (instance instanceof AbstractEditCellEditor) {
|
|
12516
12513
|
this.editorComponentRef.setInput('aiTable', this.aiTable());
|
|
@@ -12621,7 +12618,6 @@ class RecordDetailComponent {
|
|
|
12621
12618
|
return [];
|
|
12622
12619
|
}, ...(ngDevMode ? [{ debugName: "fieldMenus" }] : []));
|
|
12623
12620
|
this.activeFieldId = null;
|
|
12624
|
-
this.fieldMenuVisible = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuVisible" }] : []));
|
|
12625
12621
|
this.fieldMenuActive = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuActive" }] : []));
|
|
12626
12622
|
this.fieldMenuPopoverRef = null;
|
|
12627
12623
|
this.slideRef = inject(ThySlideRef);
|
|
@@ -12661,35 +12657,23 @@ class RecordDetailComponent {
|
|
|
12661
12657
|
cellClick(fieldId) {
|
|
12662
12658
|
this.activateCell(fieldId);
|
|
12663
12659
|
}
|
|
12664
|
-
|
|
12665
|
-
|
|
12666
|
-
|
|
12667
|
-
hideFieldMenu(fieldId) {
|
|
12668
|
-
if (!this.fieldMenuPopoverRef) {
|
|
12669
|
-
this.fieldMenuVisible.set({ [fieldId]: false });
|
|
12670
|
-
}
|
|
12671
|
-
}
|
|
12672
|
-
fieldMenuMoreClick(e, fieldId) {
|
|
12673
|
-
const origin = e.target;
|
|
12674
|
-
const position = origin.getBoundingClientRect();
|
|
12675
|
-
this.fieldMenuVisible.set({ [fieldId]: true });
|
|
12660
|
+
fieldMenuMoreClick(e, fieldId, fieldMenuOrigin) {
|
|
12661
|
+
const origin = e.currentTarget;
|
|
12662
|
+
const position = fieldMenuOrigin.getBoundingClientRect();
|
|
12676
12663
|
this.fieldMenuActive.set({ [fieldId]: true });
|
|
12677
12664
|
let isSelfClose = false;
|
|
12678
12665
|
this.fieldMenuPopoverRef = this.thyPopover.open(AITableFieldMenu, {
|
|
12679
12666
|
origin,
|
|
12680
12667
|
placement: 'bottomRight',
|
|
12681
|
-
manualClosure: true,
|
|
12682
12668
|
initialState: {
|
|
12683
12669
|
aiTable: this.aiTable(),
|
|
12684
12670
|
fieldId,
|
|
12685
12671
|
fieldMenus: this.fieldMenus(),
|
|
12686
|
-
origin,
|
|
12672
|
+
origin: fieldMenuOrigin,
|
|
12687
12673
|
position,
|
|
12688
12674
|
execMenuCallback: (data) => {
|
|
12689
12675
|
isSelfClose = true;
|
|
12690
|
-
this.thyPopover.close();
|
|
12691
12676
|
data.popoverRef?.beforeClosed().subscribe(() => {
|
|
12692
|
-
this.fieldMenuVisible.set({ [fieldId]: false });
|
|
12693
12677
|
this.fieldMenuActive.set({ [fieldId]: false });
|
|
12694
12678
|
});
|
|
12695
12679
|
}
|
|
@@ -12698,7 +12682,6 @@ class RecordDetailComponent {
|
|
|
12698
12682
|
if (this.fieldMenuPopoverRef) {
|
|
12699
12683
|
this.fieldMenuPopoverRef.beforeClosed().subscribe(() => {
|
|
12700
12684
|
if (!isSelfClose) {
|
|
12701
|
-
this.fieldMenuVisible.set({ [fieldId]: false });
|
|
12702
12685
|
this.fieldMenuActive.set({ [fieldId]: false });
|
|
12703
12686
|
}
|
|
12704
12687
|
this.fieldMenuPopoverRef = null;
|
|
@@ -12756,7 +12739,7 @@ class RecordDetailComponent {
|
|
|
12756
12739
|
}
|
|
12757
12740
|
}
|
|
12758
12741
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12759
|
-
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
|
|
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 }); }
|
|
12760
12743
|
}
|
|
12761
12744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, decorators: [{
|
|
12762
12745
|
type: Component,
|
|
@@ -12769,7 +12752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
12769
12752
|
ThyDropdownMenuItemDirective,
|
|
12770
12753
|
DynamicCellEditorComponent,
|
|
12771
12754
|
ThyFlexibleText
|
|
12772
|
-
], 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
|
|
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" }]
|
|
12773
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 }] }] } });
|
|
12774
12757
|
|
|
12775
12758
|
class AITableGridEventService {
|
|
@@ -13478,6 +13461,7 @@ class RecordDetailService {
|
|
|
13478
13461
|
from: 'right',
|
|
13479
13462
|
width: '480px',
|
|
13480
13463
|
hasBackdrop: false,
|
|
13464
|
+
viewContainerRef: config.viewContainerRef,
|
|
13481
13465
|
panelClass: 'ai-expand-record-slide',
|
|
13482
13466
|
initialState: {
|
|
13483
13467
|
aiTable: config.aiTable,
|