@aiao/rxdb-model-angular 0.0.18 → 0.0.19

package/README.md

@@ -1,6 +1,38 @@
-# rxdb-model-angular
+# @aiao/rxdb-model-angular
 
-This library was generated with [Nx](https://nx.dev).
+Angular UI components for RxDB Model.
+
+## Styles
+
+Components use [Tailwind CSS](https://tailwindcss.com/) + [daisyUI](https://daisyui.com/) class names. There are two ways to set up styles depending on your project:
+
+### Option A: No Tailwind CSS (pre-compiled CSS)
+
+Import the bundled CSS file that contains all required styles:
+
+```typescript
+// angular.json or project.json
+{
+  "styles": [
+    "@aiao/rxdb-model-angular/styles.css"
+  ]
+}
+```
+
+This includes Tailwind CSS reset, utilities, daisyUI components, and `light` / `dark` themes.
+
+### Option B: Tailwind CSS + daisyUI (recommended)
+
+If your project already uses Tailwind CSS 4 + daisyUI 5, add a `@source` directive to scan this library:
+
+```css
+/* your app's styles.css */
+@import 'tailwindcss';
+@plugin 'daisyui';
+@source '../node_modules/@aiao/rxdb-model-angular';
+```
+
+This way Tailwind will detect the class names used by the library and include them in your project's CSS output. **Do NOT import `styles.css` in this case** — it would cause duplication.
 
 ## Running unit tests
 

package/fesm2022/aiao-rxdb-model-angular.mjs

@@ -3355,7 +3355,7 @@ class QueryBuilderComponent {
 
         <!-- 空状态提示 -->
         @if (!hasRules()) {
-          <div class="text-base-content/60 py-8 text-center" aria-live="polite" role="status">
+          <div class="text-base-content/60 min-w-md py-8 text-center" aria-live="polite" role="status">
             <div class="mb-2 flex justify-center" aria-hidden="true">
               <svg
                 class="size-12 opacity-40"
@@ -3371,7 +3371,7 @@ class QueryBuilderComponent {
                 <path d="m21 21-4.3-4.3" />
               </svg>
             </div>
-            <p class="mb-4 min-w-md">还没有任何查询条件</p>
+            <p class="mb-4">还没有任何查询条件</p>
             <button class="btn btn-sm" (click)="addFirstRule()" aria-label="添加第一个条件" type="button">
               添加第一个条件
             </button>
@@ -3434,7 +3434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
         <!-- 空状态提示 -->
         @if (!hasRules()) {
-          <div class="text-base-content/60 py-8 text-center" aria-live="polite" role="status">
+          <div class="text-base-content/60 min-w-md py-8 text-center" aria-live="polite" role="status">
             <div class="mb-2 flex justify-center" aria-hidden="true">
               <svg
                 class="size-12 opacity-40"
@@ -3450,7 +3450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 <path d="m21 21-4.3-4.3" />
               </svg>
             </div>
-            <p class="mb-4 min-w-md">还没有任何查询条件</p>
+            <p class="mb-4">还没有任何查询条件</p>
             <button class="btn btn-sm" (click)="addFirstRule()" aria-label="添加第一个条件" type="button">
               添加第一个条件
             </button>
@@ -4045,7 +4045,7 @@ class EntityListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EntityListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EntityListComponent, isStandalone: true, selector: "rxdb-entity-list", inputs: { namespace: { classPropertyName: "namespace", publicName: "namespace", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, fixedQuery: { classPropertyName: "fixedQuery", publicName: "fixedQuery", isSignal: true, isRequired: false, transformFunction: null }, fixedFormData: { classPropertyName: "fixedFormData", publicName: "fixedFormData", isSignal: true, isRequired: false, transformFunction: null }, draftParentEntity: { classPropertyName: "draftParentEntity", publicName: "draftParentEntity", isSignal: true, isRequired: false, transformFunction: null }, parentRelationName: { classPropertyName: "parentRelationName", publicName: "parentRelationName", isSignal: true, isRequired: false, transformFunction: null }, creationChain: { classPropertyName: "creationChain", publicName: "creationChain", isSignal: true, isRequired: false, transformFunction: null }, relationKind: { classPropertyName: "relationKind", publicName: "relationKind", isSignal: true, isRequired: false, transformFunction: null }, parentEntity: { classPropertyName: "parentEntity", publicName: "parentEntity", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, alreadyLinkedIds: { classPropertyName: "alreadyLinkedIds", publicName: "alreadyLinkedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewEntity: "viewEntity", selectionConfirmed: "selectionConfirmed", selectionCancelled: "selectionCancelled" }, host: { listeners: { "keydown": "onKeydown($event)" }, styleAttribute: "display:flex;flex-direction:column;height:100%;overflow:hidden" }, viewQueries: [{ propertyName: "m2mSelectTpl", first: true, predicate: ["m2mSelectTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u9876\u680F\uFF1A\u5B9E\u4F53\u540D\u79F0 + \u8BA1\u6570 + \u7B5B\u9009\u6309\u94AE + \u65B0\u589E\u6309\u94AE -->\n<div class=\"border-base-300 flex shrink-0 items-center justify-between border-b px-4 py-2\">\n  <div class=\"flex items-center gap-2 text-sm\">\n    <span class=\"font-medium\">{{ displayName() }}</span>\n    @if ($isFilterQuery()) {\n      <span class=\"badge badge-ghost badge-sm\">{{ filteredCount() }} \u6761\u8BB0\u5F55</span>\n    }\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if (!isSelectMode()) {\n      <!-- Undo / Redo -->\n      <button\n        class=\"btn btn-xs btn-ghost\"\n        [disabled]=\"!canUndo()\"\n        (click)=\"undo()\"\n        aria-label=\"\u64A4\u9500 (Ctrl+Z)\"\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-3.5 w-3.5\" [img]=\"Undo2\" />\n        @if (undoCount(); as c) {\n          <span class=\"badge badge-xs\">{{ c }}</span>\n        }\n      </button>\n      <button\n        class=\"btn btn-xs btn-ghost\"\n        [disabled]=\"!canRedo()\"\n        (click)=\"redo()\"\n        aria-label=\"\u91CD\u505A (Ctrl+Shift+Z)\"\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-3.5 w-3.5\" [img]=\"Redo2\" />\n        @if (redoCount(); as c) {\n          <span class=\"badge badge-xs\">{{ c }}</span>\n        }\n      </button>\n      <div class=\"divider divider-horizontal mx-0.5 h-5 self-center\"></div>\n    }\n    <!-- \u7B5B\u9009 popover \u89E6\u53D1\u5668 -->\n    <div>\n      <button\n        class=\"btn btn-ghost btn-sm gap-1\"\n        #filterTrigger=\"cdkOverlayOrigin\"\n        [class.btn-active]=\"isQueryActive()\"\n        (click)=\"toggleFilterPopover()\"\n        cdkOverlayOrigin\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-4 w-4\" [img]=\"Funnel\" />\n        \u7B5B\u9009\n        @if (isQueryActive()) {\n          <span class=\"badge badge-primary badge-xs\">{{ filterQuery().rules.length }}</span>\n        }\n      </button>\n      <ng-template\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayOpen]=\"showFilterPopover()\"\n        [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\"\n        (backdropClick)=\"showFilterPopover.set(false)\"\n        cdkConnectedOverlay\n      >\n        @if (queryBuilderFields().length > 0) {\n          <div\n            class=\"border-base-300 bg-base-100 min-w-max rounded-lg border p-3 shadow-lg\"\n            (click)=\"$event.stopPropagation()\"\n            aria-hidden=\"true\"\n          >\n            <rxdb-query-builder\n              [fields]=\"queryBuilderFields()\"\n              [initialQuery]=\"$any(filterQuery())\"\n              (queryChange)=\"onQueryChange($event)\"\n              (validationChange)=\"onValidationChange($event)\"\n            />\n            <div class=\"mt-3 flex justify-end gap-2\">\n              <button class=\"btn btn-ghost btn-sm\" (click)=\"resetFilter()\" type=\"button\">\u91CD\u7F6E</button>\n              <button\n                class=\"btn btn-primary btn-sm\"\n                [disabled]=\"!pendingQueryValid()\"\n                (click)=\"applyFilter()\"\n                type=\"button\"\n              >\n                \u786E\u5B9A\n              </button>\n            </div>\n          </div>\n        }\n      </ng-template>\n    </div>\n    @if (!isCreateBlocked()) {\n      @if (isSelectMode()) {\n        <button class=\"btn btn-sm btn-outline\" (click)=\"openCreateDialog()\" type=\"button\">+ \u65B0\u5EFA</button>\n      } @else if (isM2m()) {\n        <button class=\"btn btn-primary btn-sm\" (click)=\"openM2mSelectDialog()\" type=\"button\">+ \u6DFB\u52A0</button>\n      } @else {\n        <button class=\"btn btn-primary btn-sm\" (click)=\"openCreateDialog()\" type=\"button\">+ \u65B0\u589E</button>\n      }\n    }\n  </div>\n</div>\n\n<!-- \u8868\u683C\u4E3B\u4F53 -->\n<div class=\"min-h-0 flex-1\">\n  @if (isBrowser) {\n    @for (key of [namespace() + ':' + name()]; track key) {\n      <rxdb-query-table\n        [columns]=\"tableColumns()\"\n        [filteredCount]=\"filteredCount()\"\n        [loading]=\"isInitialLoading()\"\n        [loadingMore]=\"isLoadingMore()\"\n        [loadMore]=\"loadMore()\"\n        [queryActive]=\"isQueryActive()\"\n        [records]=\"tableRecords()\"\n        (batchUpdated)=\"onBatchUpdated($event)\"\n        (cellChanged)=\"onCellChanged($event)\"\n        (iconClicked)=\"onIconClicked($event)\"\n        (rowDeleted)=\"onRowDeleted($event)\"\n      />\n    }\n  }\n</div>\n\n<!-- Select mode footer -->\n@if (isSelectMode()) {\n  <div class=\"border-base-300 flex shrink-0 items-center justify-between border-t px-4 py-3\">\n    @if (selectedCount() > 0) {\n      <span class=\"text-base-content/70 text-sm\">\u5DF2\u9009 {{ selectedCount() }} \u9879</span>\n    } @else {\n      <span class=\"text-base-content/40 text-sm\">\u8BF7\u9009\u62E9\u8981\u5173\u8054\u7684{{ displayName() }}</span>\n    }\n    <div class=\"flex gap-2\">\n      <button class=\"btn btn-sm\" (click)=\"cancelSelection()\" type=\"button\">\u53D6\u6D88</button>\n      <button\n        class=\"btn btn-primary btn-sm\"\n        [disabled]=\"selectedCount() === 0\"\n        (click)=\"confirmSelection()\"\n        type=\"button\"\n      >\n        \u786E\u8BA4\u6DFB\u52A0\n      </button>\n    </div>\n  </div>\n}\n\n<!-- M2M Selection Dialog Template -->\n<ng-template #m2mSelectTpl>\n  <rxdb-entity-dialog [title]=\"'\u6DFB\u52A0' + displayName()\" (closeRequested)=\"m2mCancelSelection()\">\n    <rxdb-entity-list\n      [alreadyLinkedIds]=\"m2mAlreadyLinkedIds()\"\n      [mode]=\"'select'\"\n      [name]=\"name()\"\n      [namespace]=\"namespace()\"\n      (selectionCancelled)=\"m2mCancelSelection()\"\n      (selectionConfirmed)=\"onM2mSelectionConfirmed($event)\"\n    />\n  </rxdb-entity-dialog>\n</ng-template>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => EntityListComponent), selector: "rxdb-entity-list", inputs: ["namespace", "name", "fixedQuery", "fixedFormData", "draftParentEntity", "parentRelationName", "creationChain", "relationKind", "parentEntity", "mode", "alreadyLinkedIds"], outputs: ["viewEntity", "selectionConfirmed", "selectionCancelled"] }, { kind: "component", type: i0.forwardRef(() => QueryTableComponent), selector: "rxdb-query-table", inputs: ["records", "columns", "idField", "nonClearableFields", "tableOptions", "cellErrorDetector", "isDarkMode", "cellClearable", "queryActive", "totalCount", "filteredCount", "loading", "loadingMore", "loadMore"], outputs: ["cellChanged", "rowDeleted", "iconClicked", "batchUpdated", "rowReordered", "scrollNearBottom"] }, { kind: "component", type: i0.forwardRef(() => QueryBuilderComponent), selector: "rxdb-query-builder", inputs: ["schema", "fields", "initialQuery", "maxDepth", "height", "enableDrag", "enableCollapse"], outputs: ["queryChange", "validationChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => LucideAngularModule) }, { kind: "component", type: i0.forwardRef(() => i2.LucideAngularComponent), selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => EntityDialogComponent), selector: "rxdb-entity-dialog", inputs: ["title"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EntityListComponent, isStandalone: true, selector: "rxdb-entity-list", inputs: { namespace: { classPropertyName: "namespace", publicName: "namespace", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, fixedQuery: { classPropertyName: "fixedQuery", publicName: "fixedQuery", isSignal: true, isRequired: false, transformFunction: null }, fixedFormData: { classPropertyName: "fixedFormData", publicName: "fixedFormData", isSignal: true, isRequired: false, transformFunction: null }, draftParentEntity: { classPropertyName: "draftParentEntity", publicName: "draftParentEntity", isSignal: true, isRequired: false, transformFunction: null }, parentRelationName: { classPropertyName: "parentRelationName", publicName: "parentRelationName", isSignal: true, isRequired: false, transformFunction: null }, creationChain: { classPropertyName: "creationChain", publicName: "creationChain", isSignal: true, isRequired: false, transformFunction: null }, relationKind: { classPropertyName: "relationKind", publicName: "relationKind", isSignal: true, isRequired: false, transformFunction: null }, parentEntity: { classPropertyName: "parentEntity", publicName: "parentEntity", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, alreadyLinkedIds: { classPropertyName: "alreadyLinkedIds", publicName: "alreadyLinkedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewEntity: "viewEntity", selectionConfirmed: "selectionConfirmed", selectionCancelled: "selectionCancelled" }, host: { listeners: { "keydown": "onKeydown($event)" }, styleAttribute: "display:flex;flex-direction:column;height:100%;overflow:hidden" }, viewQueries: [{ propertyName: "m2mSelectTpl", first: true, predicate: ["m2mSelectTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u9876\u680F\uFF1A\u5B9E\u4F53\u540D\u79F0 + \u8BA1\u6570 + \u7B5B\u9009\u6309\u94AE + \u65B0\u589E\u6309\u94AE -->\n<div class=\"border-base-300 flex shrink-0 items-center justify-between border-b px-4 py-2\">\n  <div class=\"flex items-center gap-2 text-sm\">\n    <span class=\"font-medium\">{{ displayName() }}</span>\n    @if ($isFilterQuery()) {\n      <span class=\"badge badge-ghost badge-sm\">{{ filteredCount() }} \u6761\u8BB0\u5F55</span>\n    }\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if (!isSelectMode()) {\n      <!-- Undo / Redo -->\n      <button\n        class=\"btn btn-xs btn-ghost\"\n        [disabled]=\"!canUndo()\"\n        (click)=\"undo()\"\n        aria-label=\"\u64A4\u9500 (Ctrl+Z)\"\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-3.5 w-3.5\" [img]=\"Undo2\" />\n        @if (undoCount(); as c) {\n          <span class=\"badge badge-xs\">{{ c }}</span>\n        }\n      </button>\n      <button\n        class=\"btn btn-xs btn-ghost\"\n        [disabled]=\"!canRedo()\"\n        (click)=\"redo()\"\n        aria-label=\"\u91CD\u505A (Ctrl+Shift+Z)\"\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-3.5 w-3.5\" [img]=\"Redo2\" />\n        @if (redoCount(); as c) {\n          <span class=\"badge badge-xs\">{{ c }}</span>\n        }\n      </button>\n      <div class=\"divider divider-horizontal mx-0.5 h-5 self-center\"></div>\n    }\n    <!-- \u7B5B\u9009 popover \u89E6\u53D1\u5668 -->\n    <div>\n      <button\n        class=\"btn btn-ghost btn-sm gap-1\"\n        #filterTrigger=\"cdkOverlayOrigin\"\n        [class.btn-active]=\"isQueryActive()\"\n        (click)=\"toggleFilterPopover()\"\n        cdkOverlayOrigin\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-4 w-4\" [img]=\"Funnel\" />\n        \u7B5B\u9009\n        @if (isQueryActive()) {\n          <span class=\"badge badge-primary badge-xs\">{{ filterQuery().rules.length }}</span>\n        }\n      </button>\n      <ng-template\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayOpen]=\"showFilterPopover()\"\n        [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\"\n        (backdropClick)=\"showFilterPopover.set(false)\"\n        cdkConnectedOverlay\n      >\n        @if (queryBuilderFields().length > 0) {\n          <div\n            class=\"border-base-300 bg-base-100 rounded-lg border p-3 shadow-lg\"\n            (click)=\"$event.stopPropagation()\"\n            aria-hidden=\"true\"\n          >\n            <rxdb-query-builder\n              [fields]=\"queryBuilderFields()\"\n              [initialQuery]=\"$any(filterQuery())\"\n              (queryChange)=\"onQueryChange($event)\"\n              (validationChange)=\"onValidationChange($event)\"\n            />\n            <div class=\"mt-3 flex justify-end gap-2\">\n              <button class=\"btn btn-ghost btn-sm\" (click)=\"resetFilter()\" type=\"button\">\u91CD\u7F6E</button>\n              <button\n                class=\"btn btn-primary btn-sm\"\n                [disabled]=\"!pendingQueryValid()\"\n                (click)=\"applyFilter()\"\n                type=\"button\"\n              >\n                \u786E\u5B9A\n              </button>\n            </div>\n          </div>\n        }\n      </ng-template>\n    </div>\n    @if (!isCreateBlocked()) {\n      @if (isSelectMode()) {\n        <button class=\"btn btn-sm btn-outline\" (click)=\"openCreateDialog()\" type=\"button\">+ \u65B0\u5EFA</button>\n      } @else if (isM2m()) {\n        <button class=\"btn btn-primary btn-sm\" (click)=\"openM2mSelectDialog()\" type=\"button\">+ \u6DFB\u52A0</button>\n      } @else {\n        <button class=\"btn btn-primary btn-sm\" (click)=\"openCreateDialog()\" type=\"button\">+ \u65B0\u589E</button>\n      }\n    }\n  </div>\n</div>\n\n<!-- \u8868\u683C\u4E3B\u4F53 -->\n<div class=\"min-h-0 flex-1\">\n  @if (isBrowser) {\n    @for (key of [namespace() + ':' + name()]; track key) {\n      <rxdb-query-table\n        [columns]=\"tableColumns()\"\n        [filteredCount]=\"filteredCount()\"\n        [loading]=\"isInitialLoading()\"\n        [loadingMore]=\"isLoadingMore()\"\n        [loadMore]=\"loadMore()\"\n        [queryActive]=\"isQueryActive()\"\n        [records]=\"tableRecords()\"\n        (batchUpdated)=\"onBatchUpdated($event)\"\n        (cellChanged)=\"onCellChanged($event)\"\n        (iconClicked)=\"onIconClicked($event)\"\n        (rowDeleted)=\"onRowDeleted($event)\"\n      />\n    }\n  }\n</div>\n\n<!-- Select mode footer -->\n@if (isSelectMode()) {\n  <div class=\"border-base-300 flex shrink-0 items-center justify-between border-t px-4 py-3\">\n    @if (selectedCount() > 0) {\n      <span class=\"text-base-content/70 text-sm\">\u5DF2\u9009 {{ selectedCount() }} \u9879</span>\n    } @else {\n      <span class=\"text-base-content/40 text-sm\">\u8BF7\u9009\u62E9\u8981\u5173\u8054\u7684{{ displayName() }}</span>\n    }\n    <div class=\"flex gap-2\">\n      <button class=\"btn btn-sm\" (click)=\"cancelSelection()\" type=\"button\">\u53D6\u6D88</button>\n      <button\n        class=\"btn btn-primary btn-sm\"\n        [disabled]=\"selectedCount() === 0\"\n        (click)=\"confirmSelection()\"\n        type=\"button\"\n      >\n        \u786E\u8BA4\u6DFB\u52A0\n      </button>\n    </div>\n  </div>\n}\n\n<!-- M2M Selection Dialog Template -->\n<ng-template #m2mSelectTpl>\n  <rxdb-entity-dialog [title]=\"'\u6DFB\u52A0' + displayName()\" (closeRequested)=\"m2mCancelSelection()\">\n    <rxdb-entity-list\n      [alreadyLinkedIds]=\"m2mAlreadyLinkedIds()\"\n      [mode]=\"'select'\"\n      [name]=\"name()\"\n      [namespace]=\"namespace()\"\n      (selectionCancelled)=\"m2mCancelSelection()\"\n      (selectionConfirmed)=\"onM2mSelectionConfirmed($event)\"\n    />\n  </rxdb-entity-dialog>\n</ng-template>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => EntityListComponent), selector: "rxdb-entity-list", inputs: ["namespace", "name", "fixedQuery", "fixedFormData", "draftParentEntity", "parentRelationName", "creationChain", "relationKind", "parentEntity", "mode", "alreadyLinkedIds"], outputs: ["viewEntity", "selectionConfirmed", "selectionCancelled"] }, { kind: "component", type: i0.forwardRef(() => QueryTableComponent), selector: "rxdb-query-table", inputs: ["records", "columns", "idField", "nonClearableFields", "tableOptions", "cellErrorDetector", "isDarkMode", "cellClearable", "queryActive", "totalCount", "filteredCount", "loading", "loadingMore", "loadMore"], outputs: ["cellChanged", "rowDeleted", "iconClicked", "batchUpdated", "rowReordered", "scrollNearBottom"] }, { kind: "component", type: i0.forwardRef(() => QueryBuilderComponent), selector: "rxdb-query-builder", inputs: ["schema", "fields", "initialQuery", "maxDepth", "height", "enableDrag", "enableCollapse"], outputs: ["queryChange", "validationChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => LucideAngularModule) }, { kind: "component", type: i0.forwardRef(() => i2.LucideAngularComponent), selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => EntityDialogComponent), selector: "rxdb-entity-dialog", inputs: ["title"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EntityListComponent, decorators: [{
             type: Component,
@@ -4059,7 +4059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         CdkOverlayOrigin,
                         forwardRef(() => EntityListComponent),
                         forwardRef(() => EntityDialogComponent)
-                    ], template: "<!-- \u9876\u680F\uFF1A\u5B9E\u4F53\u540D\u79F0 + \u8BA1\u6570 + \u7B5B\u9009\u6309\u94AE + \u65B0\u589E\u6309\u94AE -->\n<div class=\"border-base-300 flex shrink-0 items-center justify-between border-b px-4 py-2\">\n  <div class=\"flex items-center gap-2 text-sm\">\n    <span class=\"font-medium\">{{ displayName() }}</span>\n    @if ($isFilterQuery()) {\n      <span class=\"badge badge-ghost badge-sm\">{{ filteredCount() }} \u6761\u8BB0\u5F55</span>\n    }\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if (!isSelectMode()) {\n      <!-- Undo / Redo -->\n      <button\n        class=\"btn btn-xs btn-ghost\"\n        [disabled]=\"!canUndo()\"\n        (click)=\"undo()\"\n        aria-label=\"\u64A4\u9500 (Ctrl+Z)\"\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-3.5 w-3.5\" [img]=\"Undo2\" />\n        @if (undoCount(); as c) {\n          <span class=\"badge badge-xs\">{{ c }}</span>\n        }\n      </button>\n      <button\n        class=\"btn btn-xs btn-ghost\"\n        [disabled]=\"!canRedo()\"\n        (click)=\"redo()\"\n        aria-label=\"\u91CD\u505A (Ctrl+Shift+Z)\"\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-3.5 w-3.5\" [img]=\"Redo2\" />\n        @if (redoCount(); as c) {\n          <span class=\"badge badge-xs\">{{ c }}</span>\n        }\n      </button>\n      <div class=\"divider divider-horizontal mx-0.5 h-5 self-center\"></div>\n    }\n    <!-- \u7B5B\u9009 popover \u89E6\u53D1\u5668 -->\n    <div>\n      <button\n        class=\"btn btn-ghost btn-sm gap-1\"\n        #filterTrigger=\"cdkOverlayOrigin\"\n        [class.btn-active]=\"isQueryActive()\"\n        (click)=\"toggleFilterPopover()\"\n        cdkOverlayOrigin\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-4 w-4\" [img]=\"Funnel\" />\n        \u7B5B\u9009\n        @if (isQueryActive()) {\n          <span class=\"badge badge-primary badge-xs\">{{ filterQuery().rules.length }}</span>\n        }\n      </button>\n      <ng-template\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayOpen]=\"showFilterPopover()\"\n        [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\"\n        (backdropClick)=\"showFilterPopover.set(false)\"\n        cdkConnectedOverlay\n      >\n        @if (queryBuilderFields().length > 0) {\n          <div\n            class=\"border-base-300 bg-base-100 min-w-max rounded-lg border p-3 shadow-lg\"\n            (click)=\"$event.stopPropagation()\"\n            aria-hidden=\"true\"\n          >\n            <rxdb-query-builder\n              [fields]=\"queryBuilderFields()\"\n              [initialQuery]=\"$any(filterQuery())\"\n              (queryChange)=\"onQueryChange($event)\"\n              (validationChange)=\"onValidationChange($event)\"\n            />\n            <div class=\"mt-3 flex justify-end gap-2\">\n              <button class=\"btn btn-ghost btn-sm\" (click)=\"resetFilter()\" type=\"button\">\u91CD\u7F6E</button>\n              <button\n                class=\"btn btn-primary btn-sm\"\n                [disabled]=\"!pendingQueryValid()\"\n                (click)=\"applyFilter()\"\n                type=\"button\"\n              >\n                \u786E\u5B9A\n              </button>\n            </div>\n          </div>\n        }\n      </ng-template>\n    </div>\n    @if (!isCreateBlocked()) {\n      @if (isSelectMode()) {\n        <button class=\"btn btn-sm btn-outline\" (click)=\"openCreateDialog()\" type=\"button\">+ \u65B0\u5EFA</button>\n      } @else if (isM2m()) {\n        <button class=\"btn btn-primary btn-sm\" (click)=\"openM2mSelectDialog()\" type=\"button\">+ \u6DFB\u52A0</button>\n      } @else {\n        <button class=\"btn btn-primary btn-sm\" (click)=\"openCreateDialog()\" type=\"button\">+ \u65B0\u589E</button>\n      }\n    }\n  </div>\n</div>\n\n<!-- \u8868\u683C\u4E3B\u4F53 -->\n<div class=\"min-h-0 flex-1\">\n  @if (isBrowser) {\n    @for (key of [namespace() + ':' + name()]; track key) {\n      <rxdb-query-table\n        [columns]=\"tableColumns()\"\n        [filteredCount]=\"filteredCount()\"\n        [loading]=\"isInitialLoading()\"\n        [loadingMore]=\"isLoadingMore()\"\n        [loadMore]=\"loadMore()\"\n        [queryActive]=\"isQueryActive()\"\n        [records]=\"tableRecords()\"\n        (batchUpdated)=\"onBatchUpdated($event)\"\n        (cellChanged)=\"onCellChanged($event)\"\n        (iconClicked)=\"onIconClicked($event)\"\n        (rowDeleted)=\"onRowDeleted($event)\"\n      />\n    }\n  }\n</div>\n\n<!-- Select mode footer -->\n@if (isSelectMode()) {\n  <div class=\"border-base-300 flex shrink-0 items-center justify-between border-t px-4 py-3\">\n    @if (selectedCount() > 0) {\n      <span class=\"text-base-content/70 text-sm\">\u5DF2\u9009 {{ selectedCount() }} \u9879</span>\n    } @else {\n      <span class=\"text-base-content/40 text-sm\">\u8BF7\u9009\u62E9\u8981\u5173\u8054\u7684{{ displayName() }}</span>\n    }\n    <div class=\"flex gap-2\">\n      <button class=\"btn btn-sm\" (click)=\"cancelSelection()\" type=\"button\">\u53D6\u6D88</button>\n      <button\n        class=\"btn btn-primary btn-sm\"\n        [disabled]=\"selectedCount() === 0\"\n        (click)=\"confirmSelection()\"\n        type=\"button\"\n      >\n        \u786E\u8BA4\u6DFB\u52A0\n      </button>\n    </div>\n  </div>\n}\n\n<!-- M2M Selection Dialog Template -->\n<ng-template #m2mSelectTpl>\n  <rxdb-entity-dialog [title]=\"'\u6DFB\u52A0' + displayName()\" (closeRequested)=\"m2mCancelSelection()\">\n    <rxdb-entity-list\n      [alreadyLinkedIds]=\"m2mAlreadyLinkedIds()\"\n      [mode]=\"'select'\"\n      [name]=\"name()\"\n      [namespace]=\"namespace()\"\n      (selectionCancelled)=\"m2mCancelSelection()\"\n      (selectionConfirmed)=\"onM2mSelectionConfirmed($event)\"\n    />\n  </rxdb-entity-dialog>\n</ng-template>\n" }]
+                    ], template: "<!-- \u9876\u680F\uFF1A\u5B9E\u4F53\u540D\u79F0 + \u8BA1\u6570 + \u7B5B\u9009\u6309\u94AE + \u65B0\u589E\u6309\u94AE -->\n<div class=\"border-base-300 flex shrink-0 items-center justify-between border-b px-4 py-2\">\n  <div class=\"flex items-center gap-2 text-sm\">\n    <span class=\"font-medium\">{{ displayName() }}</span>\n    @if ($isFilterQuery()) {\n      <span class=\"badge badge-ghost badge-sm\">{{ filteredCount() }} \u6761\u8BB0\u5F55</span>\n    }\n  </div>\n  <div class=\"flex items-center gap-2\">\n    @if (!isSelectMode()) {\n      <!-- Undo / Redo -->\n      <button\n        class=\"btn btn-xs btn-ghost\"\n        [disabled]=\"!canUndo()\"\n        (click)=\"undo()\"\n        aria-label=\"\u64A4\u9500 (Ctrl+Z)\"\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-3.5 w-3.5\" [img]=\"Undo2\" />\n        @if (undoCount(); as c) {\n          <span class=\"badge badge-xs\">{{ c }}</span>\n        }\n      </button>\n      <button\n        class=\"btn btn-xs btn-ghost\"\n        [disabled]=\"!canRedo()\"\n        (click)=\"redo()\"\n        aria-label=\"\u91CD\u505A (Ctrl+Shift+Z)\"\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-3.5 w-3.5\" [img]=\"Redo2\" />\n        @if (redoCount(); as c) {\n          <span class=\"badge badge-xs\">{{ c }}</span>\n        }\n      </button>\n      <div class=\"divider divider-horizontal mx-0.5 h-5 self-center\"></div>\n    }\n    <!-- \u7B5B\u9009 popover \u89E6\u53D1\u5668 -->\n    <div>\n      <button\n        class=\"btn btn-ghost btn-sm gap-1\"\n        #filterTrigger=\"cdkOverlayOrigin\"\n        [class.btn-active]=\"isQueryActive()\"\n        (click)=\"toggleFilterPopover()\"\n        cdkOverlayOrigin\n        type=\"button\"\n      >\n        <lucide-icon class=\"h-4 w-4\" [img]=\"Funnel\" />\n        \u7B5B\u9009\n        @if (isQueryActive()) {\n          <span class=\"badge badge-primary badge-xs\">{{ filterQuery().rules.length }}</span>\n        }\n      </button>\n      <ng-template\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayOpen]=\"showFilterPopover()\"\n        [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\"\n        (backdropClick)=\"showFilterPopover.set(false)\"\n        cdkConnectedOverlay\n      >\n        @if (queryBuilderFields().length > 0) {\n          <div\n            class=\"border-base-300 bg-base-100 rounded-lg border p-3 shadow-lg\"\n            (click)=\"$event.stopPropagation()\"\n            aria-hidden=\"true\"\n          >\n            <rxdb-query-builder\n              [fields]=\"queryBuilderFields()\"\n              [initialQuery]=\"$any(filterQuery())\"\n              (queryChange)=\"onQueryChange($event)\"\n              (validationChange)=\"onValidationChange($event)\"\n            />\n            <div class=\"mt-3 flex justify-end gap-2\">\n              <button class=\"btn btn-ghost btn-sm\" (click)=\"resetFilter()\" type=\"button\">\u91CD\u7F6E</button>\n              <button\n                class=\"btn btn-primary btn-sm\"\n                [disabled]=\"!pendingQueryValid()\"\n                (click)=\"applyFilter()\"\n                type=\"button\"\n              >\n                \u786E\u5B9A\n              </button>\n            </div>\n          </div>\n        }\n      </ng-template>\n    </div>\n    @if (!isCreateBlocked()) {\n      @if (isSelectMode()) {\n        <button class=\"btn btn-sm btn-outline\" (click)=\"openCreateDialog()\" type=\"button\">+ \u65B0\u5EFA</button>\n      } @else if (isM2m()) {\n        <button class=\"btn btn-primary btn-sm\" (click)=\"openM2mSelectDialog()\" type=\"button\">+ \u6DFB\u52A0</button>\n      } @else {\n        <button class=\"btn btn-primary btn-sm\" (click)=\"openCreateDialog()\" type=\"button\">+ \u65B0\u589E</button>\n      }\n    }\n  </div>\n</div>\n\n<!-- \u8868\u683C\u4E3B\u4F53 -->\n<div class=\"min-h-0 flex-1\">\n  @if (isBrowser) {\n    @for (key of [namespace() + ':' + name()]; track key) {\n      <rxdb-query-table\n        [columns]=\"tableColumns()\"\n        [filteredCount]=\"filteredCount()\"\n        [loading]=\"isInitialLoading()\"\n        [loadingMore]=\"isLoadingMore()\"\n        [loadMore]=\"loadMore()\"\n        [queryActive]=\"isQueryActive()\"\n        [records]=\"tableRecords()\"\n        (batchUpdated)=\"onBatchUpdated($event)\"\n        (cellChanged)=\"onCellChanged($event)\"\n        (iconClicked)=\"onIconClicked($event)\"\n        (rowDeleted)=\"onRowDeleted($event)\"\n      />\n    }\n  }\n</div>\n\n<!-- Select mode footer -->\n@if (isSelectMode()) {\n  <div class=\"border-base-300 flex shrink-0 items-center justify-between border-t px-4 py-3\">\n    @if (selectedCount() > 0) {\n      <span class=\"text-base-content/70 text-sm\">\u5DF2\u9009 {{ selectedCount() }} \u9879</span>\n    } @else {\n      <span class=\"text-base-content/40 text-sm\">\u8BF7\u9009\u62E9\u8981\u5173\u8054\u7684{{ displayName() }}</span>\n    }\n    <div class=\"flex gap-2\">\n      <button class=\"btn btn-sm\" (click)=\"cancelSelection()\" type=\"button\">\u53D6\u6D88</button>\n      <button\n        class=\"btn btn-primary btn-sm\"\n        [disabled]=\"selectedCount() === 0\"\n        (click)=\"confirmSelection()\"\n        type=\"button\"\n      >\n        \u786E\u8BA4\u6DFB\u52A0\n      </button>\n    </div>\n  </div>\n}\n\n<!-- M2M Selection Dialog Template -->\n<ng-template #m2mSelectTpl>\n  <rxdb-entity-dialog [title]=\"'\u6DFB\u52A0' + displayName()\" (closeRequested)=\"m2mCancelSelection()\">\n    <rxdb-entity-list\n      [alreadyLinkedIds]=\"m2mAlreadyLinkedIds()\"\n      [mode]=\"'select'\"\n      [name]=\"name()\"\n      [namespace]=\"namespace()\"\n      (selectionCancelled)=\"m2mCancelSelection()\"\n      (selectionConfirmed)=\"onM2mSelectionConfirmed($event)\"\n    />\n  </rxdb-entity-dialog>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { namespace: [{ type: i0.Input, args: [{ isSignal: true, alias: "namespace", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], fixedQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedQuery", required: false }] }], fixedFormData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedFormData", required: false }] }], draftParentEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftParentEntity", required: false }] }], parentRelationName: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentRelationName", required: false }] }], creationChain: [{ type: i0.Input, args: [{ isSignal: true, alias: "creationChain", required: false }] }], relationKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationKind", required: false }] }], parentEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentEntity", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], alreadyLinkedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "alreadyLinkedIds", required: false }] }], viewEntity: [{ type: i0.Output, args: ["viewEntity"] }], selectionConfirmed: [{ type: i0.Output, args: ["selectionConfirmed"] }], selectionCancelled: [{ type: i0.Output, args: ["selectionCancelled"] }], m2mSelectTpl: [{ type: i0.ViewChild, args: ['m2mSelectTpl', { isSignal: true }] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -4325,11 +4325,11 @@ class EntityDetailComponent {
         this.draftEntitySignal.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EntityDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EntityDetailComponent, isStandalone: true, selector: "rxdb-entity-detail", inputs: { namespace: { classPropertyName: "namespace", publicName: "namespace", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null }, formFields: { classPropertyName: "formFields", publicName: "formFields", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, relatedEntityProvider: { classPropertyName: "relatedEntityProvider", publicName: "relatedEntityProvider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmitted: "formSubmitted", formCancelled: "formCancelled", fieldChanged: "fieldChanged", validationErrors: "validationErrors" }, ngImport: i0, template: "<rxdb-entity-dialog [title]=\"dialogTitle()\" (closeRequested)=\"onCancel()\">\n  <!-- Tab Bar -->\n  <div class=\"tabs tabs-border flex-1\" role=\"tablist\">\n    @for (tab of tabs(); track tab.key) {\n      <input\n        class=\"tab\"\n        [attr.aria-label]=\"tab.label\"\n        [checked]=\"tab.key === activeTabKey()\"\n        [name]=\"tabGroupName\"\n        (change)=\"selectTab(tab.key)\"\n        role=\"tab\"\n        type=\"radio\"\n      />\n      <div\n        class=\"tab-content border-base-300 bg-base-100\"\n        [class.overflow-auto]=\"tab.type === 'form'\"\n        [class.overflow-hidden]=\"tab.type === 'table'\"\n        [class.p-4]=\"tab.type === 'form'\"\n        [hidden]=\"tab.key !== activeTabKey()\"\n      >\n        @if (tab.type === 'form') {\n          <rxdb-entity-form\n            [data]=\"formDataValue\"\n            [fields]=\"formFieldsValue\"\n            [mode]=\"formModeValue\"\n            [relatedEntityProvider]=\"relatedEntityProviderValue\"\n            [showActions]=\"!isCreateMode()\"\n            (fieldChanged)=\"onFieldChanged($event)\"\n            (formCancelled)=\"onFormCancelled()\"\n            (formSubmitted)=\"onFormSubmitted($event)\"\n            (validationErrors)=\"onValidationErrors($event)\"\n          />\n        }\n        @if (tab.type === 'table') {\n          <rxdb-entity-list\n            [creationChain]=\"creationChain()\"\n            [draftParentEntity]=\"draftEntitySignal()\"\n            [fixedFormData]=\"buildFixedFormData($any(tab))\"\n            [fixedQuery]=\"buildFixedQuery($any(tab))\"\n            [name]=\"$any(tab).relatedEntityName\"\n            [namespace]=\"$any(tab).relatedNamespace\"\n            [parentEntity]=\"parentEntityForRelation()\"\n            [parentRelationName]=\"$any(tab).relationName\"\n            [relationKind]=\"$any(tab).relationKind\"\n          />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Save/Cancel buttons for create mode (below tabs) -->\n  @if (isCreateMode()) {\n    <div class=\"border-base-300 flex shrink-0 justify-end gap-2 border-t px-4 py-3\">\n      <button class=\"btn\" (click)=\"onCancel()\" type=\"button\">\u53D6\u6D88</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\" type=\"button\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rxdb-entity-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.tabs{grid-template-rows:auto 1fr!important}.tab-content{display:flex!important;flex-direction:column}\n"], dependencies: [{ kind: "component", type: EntityFormComponent, selector: "rxdb-entity-form", inputs: ["fields", "data", "mode", "relatedEntityProvider", "showActions"], outputs: ["fieldChanged", "formSubmitted", "formCancelled", "validationErrors"] }, { kind: "component", type: EntityListComponent, selector: "rxdb-entity-list", inputs: ["namespace", "name", "fixedQuery", "fixedFormData", "draftParentEntity", "parentRelationName", "creationChain", "relationKind", "parentEntity", "mode", "alreadyLinkedIds"], outputs: ["viewEntity", "selectionConfirmed", "selectionCancelled"] }, { kind: "component", type: EntityDialogComponent, selector: "rxdb-entity-dialog", inputs: ["title"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EntityDetailComponent, isStandalone: true, selector: "rxdb-entity-detail", inputs: { namespace: { classPropertyName: "namespace", publicName: "namespace", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null }, formFields: { classPropertyName: "formFields", publicName: "formFields", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, relatedEntityProvider: { classPropertyName: "relatedEntityProvider", publicName: "relatedEntityProvider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmitted: "formSubmitted", formCancelled: "formCancelled", fieldChanged: "fieldChanged", validationErrors: "validationErrors" }, ngImport: i0, template: "<rxdb-entity-dialog [title]=\"dialogTitle()\" (closeRequested)=\"onCancel()\">\n  <!-- Tab Bar -->\n  <div class=\"tabs tabs-border min-h-0 flex-1\" role=\"tablist\">\n    @for (tab of tabs(); track tab.key) {\n      <input\n        class=\"tab\"\n        [attr.aria-label]=\"tab.label\"\n        [checked]=\"tab.key === activeTabKey()\"\n        [name]=\"tabGroupName\"\n        (change)=\"selectTab(tab.key)\"\n        role=\"tab\"\n        type=\"radio\"\n      />\n      <div\n        class=\"tab-content border-base-300 bg-base-100 order-1 flex w-full flex-col\"\n        [class.overflow-auto]=\"tab.type === 'form'\"\n        [class.overflow-hidden]=\"tab.type === 'table'\"\n        [class.p-4]=\"tab.type === 'form'\"\n        [hidden]=\"tab.key !== activeTabKey()\"\n      >\n        @if (tab.type === 'form') {\n          <rxdb-entity-form\n            [data]=\"formDataValue\"\n            [fields]=\"formFieldsValue\"\n            [mode]=\"formModeValue\"\n            [relatedEntityProvider]=\"relatedEntityProviderValue\"\n            [showActions]=\"!isCreateMode()\"\n            (fieldChanged)=\"onFieldChanged($event)\"\n            (formCancelled)=\"onFormCancelled()\"\n            (formSubmitted)=\"onFormSubmitted($event)\"\n            (validationErrors)=\"onValidationErrors($event)\"\n          />\n        }\n        @if (tab.type === 'table') {\n          <rxdb-entity-list\n            [creationChain]=\"creationChain()\"\n            [draftParentEntity]=\"draftEntitySignal()\"\n            [fixedFormData]=\"buildFixedFormData($any(tab))\"\n            [fixedQuery]=\"buildFixedQuery($any(tab))\"\n            [name]=\"$any(tab).relatedEntityName\"\n            [namespace]=\"$any(tab).relatedNamespace\"\n            [parentEntity]=\"parentEntityForRelation()\"\n            [parentRelationName]=\"$any(tab).relationName\"\n            [relationKind]=\"$any(tab).relationKind\"\n          />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Save/Cancel buttons for create mode (below tabs) -->\n  @if (isCreateMode()) {\n    <div class=\"border-base-300 flex shrink-0 justify-end gap-2 border-t px-4 py-3\">\n      <button class=\"btn\" (click)=\"onCancel()\" type=\"button\">\u53D6\u6D88</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\" type=\"button\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rxdb-entity-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: EntityFormComponent, selector: "rxdb-entity-form", inputs: ["fields", "data", "mode", "relatedEntityProvider", "showActions"], outputs: ["fieldChanged", "formSubmitted", "formCancelled", "validationErrors"] }, { kind: "component", type: EntityListComponent, selector: "rxdb-entity-list", inputs: ["namespace", "name", "fixedQuery", "fixedFormData", "draftParentEntity", "parentRelationName", "creationChain", "relationKind", "parentEntity", "mode", "alreadyLinkedIds"], outputs: ["viewEntity", "selectionConfirmed", "selectionCancelled"] }, { kind: "component", type: EntityDialogComponent, selector: "rxdb-entity-dialog", inputs: ["title"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EntityDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rxdb-entity-detail', imports: [EntityFormComponent, EntityListComponent, EntityDialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<rxdb-entity-dialog [title]=\"dialogTitle()\" (closeRequested)=\"onCancel()\">\n  <!-- Tab Bar -->\n  <div class=\"tabs tabs-border flex-1\" role=\"tablist\">\n    @for (tab of tabs(); track tab.key) {\n      <input\n        class=\"tab\"\n        [attr.aria-label]=\"tab.label\"\n        [checked]=\"tab.key === activeTabKey()\"\n        [name]=\"tabGroupName\"\n        (change)=\"selectTab(tab.key)\"\n        role=\"tab\"\n        type=\"radio\"\n      />\n      <div\n        class=\"tab-content border-base-300 bg-base-100\"\n        [class.overflow-auto]=\"tab.type === 'form'\"\n        [class.overflow-hidden]=\"tab.type === 'table'\"\n        [class.p-4]=\"tab.type === 'form'\"\n        [hidden]=\"tab.key !== activeTabKey()\"\n      >\n        @if (tab.type === 'form') {\n          <rxdb-entity-form\n            [data]=\"formDataValue\"\n            [fields]=\"formFieldsValue\"\n            [mode]=\"formModeValue\"\n            [relatedEntityProvider]=\"relatedEntityProviderValue\"\n            [showActions]=\"!isCreateMode()\"\n            (fieldChanged)=\"onFieldChanged($event)\"\n            (formCancelled)=\"onFormCancelled()\"\n            (formSubmitted)=\"onFormSubmitted($event)\"\n            (validationErrors)=\"onValidationErrors($event)\"\n          />\n        }\n        @if (tab.type === 'table') {\n          <rxdb-entity-list\n            [creationChain]=\"creationChain()\"\n            [draftParentEntity]=\"draftEntitySignal()\"\n            [fixedFormData]=\"buildFixedFormData($any(tab))\"\n            [fixedQuery]=\"buildFixedQuery($any(tab))\"\n            [name]=\"$any(tab).relatedEntityName\"\n            [namespace]=\"$any(tab).relatedNamespace\"\n            [parentEntity]=\"parentEntityForRelation()\"\n            [parentRelationName]=\"$any(tab).relationName\"\n            [relationKind]=\"$any(tab).relationKind\"\n          />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Save/Cancel buttons for create mode (below tabs) -->\n  @if (isCreateMode()) {\n    <div class=\"border-base-300 flex shrink-0 justify-end gap-2 border-t px-4 py-3\">\n      <button class=\"btn\" (click)=\"onCancel()\" type=\"button\">\u53D6\u6D88</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\" type=\"button\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rxdb-entity-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.tabs{grid-template-rows:auto 1fr!important}.tab-content{display:flex!important;flex-direction:column}\n"] }]
+            args: [{ selector: 'rxdb-entity-detail', imports: [EntityFormComponent, EntityListComponent, EntityDialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<rxdb-entity-dialog [title]=\"dialogTitle()\" (closeRequested)=\"onCancel()\">\n  <!-- Tab Bar -->\n  <div class=\"tabs tabs-border min-h-0 flex-1\" role=\"tablist\">\n    @for (tab of tabs(); track tab.key) {\n      <input\n        class=\"tab\"\n        [attr.aria-label]=\"tab.label\"\n        [checked]=\"tab.key === activeTabKey()\"\n        [name]=\"tabGroupName\"\n        (change)=\"selectTab(tab.key)\"\n        role=\"tab\"\n        type=\"radio\"\n      />\n      <div\n        class=\"tab-content border-base-300 bg-base-100 order-1 flex w-full flex-col\"\n        [class.overflow-auto]=\"tab.type === 'form'\"\n        [class.overflow-hidden]=\"tab.type === 'table'\"\n        [class.p-4]=\"tab.type === 'form'\"\n        [hidden]=\"tab.key !== activeTabKey()\"\n      >\n        @if (tab.type === 'form') {\n          <rxdb-entity-form\n            [data]=\"formDataValue\"\n            [fields]=\"formFieldsValue\"\n            [mode]=\"formModeValue\"\n            [relatedEntityProvider]=\"relatedEntityProviderValue\"\n            [showActions]=\"!isCreateMode()\"\n            (fieldChanged)=\"onFieldChanged($event)\"\n            (formCancelled)=\"onFormCancelled()\"\n            (formSubmitted)=\"onFormSubmitted($event)\"\n            (validationErrors)=\"onValidationErrors($event)\"\n          />\n        }\n        @if (tab.type === 'table') {\n          <rxdb-entity-list\n            [creationChain]=\"creationChain()\"\n            [draftParentEntity]=\"draftEntitySignal()\"\n            [fixedFormData]=\"buildFixedFormData($any(tab))\"\n            [fixedQuery]=\"buildFixedQuery($any(tab))\"\n            [name]=\"$any(tab).relatedEntityName\"\n            [namespace]=\"$any(tab).relatedNamespace\"\n            [parentEntity]=\"parentEntityForRelation()\"\n            [parentRelationName]=\"$any(tab).relationName\"\n            [relationKind]=\"$any(tab).relationKind\"\n          />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Save/Cancel buttons for create mode (below tabs) -->\n  @if (isCreateMode()) {\n    <div class=\"border-base-300 flex shrink-0 justify-end gap-2 border-t px-4 py-3\">\n      <button class=\"btn\" (click)=\"onCancel()\" type=\"button\">\u53D6\u6D88</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\" type=\"button\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rxdb-entity-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { namespace: [{ type: i0.Input, args: [{ isSignal: true, alias: "namespace", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], entityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityId", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], formFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "formFields", required: false }] }], formData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formData", required: false }] }], formMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMode", required: false }] }], relatedEntityProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedEntityProvider", required: false }] }], formSubmitted: [{ type: i0.Output, args: ["formSubmitted"] }], formCancelled: [{ type: i0.Output, args: ["formCancelled"] }], fieldChanged: [{ type: i0.Output, args: ["fieldChanged"] }], validationErrors: [{ type: i0.Output, args: ["validationErrors"] }] } });
 
 var entityDetail = /*#__PURE__*/Object.freeze({