npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.44.0 → 5.45.0 - Mend

@memberjunction/ng-core-entity-forms 5.44.0 → 5.45.0

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.

Files changed (119) hide show

package/dist/lib/custom/Lists/list-form.component.d.ts CHANGED Viewed

@@ -38,6 +38,7 @@ export interface AddableRecord {
  */
 export declare class MJListFormComponentExtended extends MJListFormComponent implements OnInit, OnDestroy {
     private sharedService;
+    private confirmService;
     record: MJListEntity;
     activeSection: ListSection;
     navItems: ({

package/dist/lib/custom/Lists/list-form.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list-form.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Lists/list-form.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAmC,MAAM,eAAe,CAAC;AAK9F,OAAO,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAA8B,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC7J,OAAO,EAAoC,UAAU,EAAuB,MAAM,sBAAsB,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;;~~AAElG~~,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,qBAQa,2BAA4B,SAAQ,mBAAoB,YAAW,MAAM,EAAE,SAAS;IAC7F,OAAO,CAAC,aAAa,CAAyB;~~IAE9B~~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~~yCAnzBzB~~,2BAA2B;2CAA3B,2BAA2B;~~CAuzBvC~~"}
1	+ {"version":3,"file":"list-form.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Lists/list-form.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/custom/Lists/list-form.component.js CHANGED Viewed

@@ -11,6 +11,7 @@ import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { SharedService } from '@memberjunction/ng-shared';
 import { MJListFormComponent } from '../../generated/Entities/MJList/mjlist.form.component';
 import { RunView, LogError, LogStatus } from '@memberjunction/core';
+import { MJConfirmService } from '@memberjunction/ng-ui-components';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-ui-components";
@@ -916,6 +917,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
     constructor() {
         super(...arguments);
         this.sharedService = inject(SharedService);
+        this.confirmService = inject(MJConfirmService);
         // Navigation
         this.activeSection = 'overview';
         this.navItems = [
@@ -1190,7 +1192,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
             return;
         const count = this.selectedItems.size;
         const confirmMessage = `Remove ${count} item${count > 1 ? 's' : ''} from this list?`;
-        if (!confirm(confirmMessage))
+        if (!(await this.confirmService.ConfirmDelete({ message: confirmMessage })))
             return;
         try {
             for (const id of this.selectedItems) {
@@ -1717,5 +1719,5 @@ export { MJListFormComponentExtended };
         type: Component,
         args: [{ standalone: false, selector: 'mj-list-form-extended', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- World-Class List Form -->\n<div class=\"list-form-explorer\">\n  <!-- Header -->\n  <header class=\"list-header\">\n    <div class=\"header-content\">\n      <div class=\"header-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n        <i [class]=\"entityIcon\"></i>\n      </div>\n      <div class=\"header-info\">\n        <div class=\"name-row\">\n          @if (!isEditingName) {\n            <h1 class=\"list-name\">{{record.Name || 'Untitled List'}}</h1>\n            @if (isCurrentUserOwner()) {\n              <button\n                class=\"edit-btn\"\n                (click)=\"startEditingName()\"\n                title=\"Edit name\"\n                >\n                <i class=\"fa-solid fa-pen\"></i>\n              </button>\n            }\n          }\n          @if (isEditingName) {\n            <input\n              type=\"text\"\n              class=\"inline-edit-input name-input\"\n              [(ngModel)]=\"editingName\"\n              (keydown.enter)=\"saveNameEdit()\"\n              (keydown.escape)=\"cancelNameEdit()\"\n              #nameInput />\n            <button class=\"save-btn\" (click)=\"saveNameEdit()\">\n              <i class=\"fa-solid fa-check\"></i>\n            </button>\n            <button class=\"cancel-btn\" (click)=\"cancelNameEdit()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <div class=\"entity-badge\">\n          <i [class]=\"entityIcon\"></i>\n          <span>{{entityDisplayName}}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-stats\">\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedItemCount}}</span>\n        <span class=\"stat-label\">Items</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{stats.shareCount}}</span>\n        <span class=\"stat-label\">Shares</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedLastUpdated}}</span>\n        <span class=\"stat-label\">Updated</span>\n      </div>\n    </div>\n  </header>\n\n  <!-- Navigation Rail -->\n  <nav class=\"nav-rail\">\n    @for (nav of navItems; track nav) {\n      <button\n        class=\"nav-item\"\n        [class.active]=\"activeSection === nav.id\"\n        [class.disabled]=\"nav.disabled\"\n        (click)=\"setActiveSection(nav.id)\"\n        [title]=\"nav.label\">\n        <i [class]=\"nav.icon\"></i>\n        <span class=\"nav-label\">{{nav.label}}</span>\n        @if (nav.badge && nav.badge > 0) {\n          <span class=\"nav-badge\">{{nav.badge}}</span>\n        }\n      </button>\n    }\n  </nav>\n\n  <!-- Main Content -->\n  <main class=\"main-content\">\n    <!-- Overview Section -->\n    @if (activeSection === 'overview') {\n      <section class=\"section overview-section\">\n        <div class=\"overview-grid\">\n          <!-- Description Card -->\n          <div class=\"overview-card description-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-align-left\"></i> Description</h3>\n              @if (isCurrentUserOwner() && !isEditingDescription) {\n                <button\n                  class=\"edit-btn\"\n                  (click)=\"startEditingDescription()\"\n                  >\n                  <i class=\"fa-solid fa-pen\"></i>\n                </button>\n              }\n            </div>\n            <div class=\"card-body\">\n              @if (!isEditingDescription) {\n                @if (record.Description) {\n                  <p class=\"description-text\">{{record.Description}}</p>\n                }\n                @if (!record.Description) {\n                  <p class=\"description-empty\">No description provided</p>\n                }\n              }\n              @if (isEditingDescription) {\n                <textarea\n                  class=\"inline-edit-input description-input\"\n                  [(ngModel)]=\"editingDescription\"\n                  placeholder=\"Add a description...\"\n                  rows=\"3\"\n                (keydown.escape)=\"cancelDescriptionEdit()\"></textarea>\n                <div class=\"edit-actions\">\n                  <button class=\"btn-primary\" (click)=\"saveDescriptionEdit()\">Save</button>\n                  <button class=\"btn-secondary\" (click)=\"cancelDescriptionEdit()\">Cancel</button>\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Details Card -->\n          <div class=\"overview-card details-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-info-circle\"></i> Details</h3>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Entity</span>\n                <span class=\"detail-value\">\n                  <i [class]=\"entityIcon\" class=\"detail-icon\"></i>\n                  {{entityDisplayName}}\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Category</span>\n                @if (!isCurrentUserOwner()) {\n                  <span class=\"detail-value\">\n                    <i class=\"fa-solid fa-folder detail-icon\"></i>\n                    {{categoryName}}\n                  </span>\n                }\n                @if (isCurrentUserOwner()) {\n                  <select\n                    class=\"category-select\"\n                    [ngModel]=\"record.CategoryID\"\n                    (ngModelChange)=\"onCategoryChange($event)\">\n                    <option [ngValue]=\"null\">Uncategorized</option>\n                    @for (cat of categories; track cat) {\n                      <option [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                    }\n                  </select>\n                }\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Owner</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-user detail-icon\"></i>\n                  {{getOwnerName()}}\n                  @if (isCurrentUserOwner()) {\n                    <span class=\"owner-badge\">You</span>\n                  }\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Created</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-calendar detail-icon\"></i>\n                  {{record.__mj_CreatedAt | date:'mediumDate'}}\n                </span>\n              </div>\n            </div>\n          </div>\n          <!-- Quick Actions Card -->\n          <div class=\"overview-card actions-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-bolt\"></i> Quick Actions</h3>\n            </div>\n            <div class=\"card-body\">\n              <button class=\"action-btn\" (click)=\"setActiveSection('items')\">\n                <i class=\"fa-solid fa-list\"></i>\n                <span>View Items</span>\n                <span class=\"action-count\">{{stats.itemCount}}</span>\n              </button>\n              @if (isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"openShareDialog()\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>Share List</span>\n                  @if (stats.shareCount > 0) {\n                    <span class=\"action-count\">{{stats.shareCount}}</span>\n                  }\n                </button>\n              }\n              @if (!isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"setActiveSection('sharing')\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>View Sharing</span>\n                </button>\n              }\n              <button class=\"action-btn\" [disabled]=\"true\" title=\"Coming soon\">\n                <i class=\"fa-solid fa-file-export\"></i>\n                <span>Export Data</span>\n                <span class=\"coming-soon\">Soon</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n\n    <!-- Items Section -->\n    @if (activeSection === 'items') {\n      <section class=\"section items-section\">\n        <div class=\"section-header\">\n          <h2>List Items</h2>\n          <div class=\"section-actions\">\n            <div class=\"search-box\">\n              <i class=\"fa-solid fa-search\"></i>\n              <input\n                type=\"text\"\n                placeholder=\"Search items...\"\n                [(ngModel)]=\"itemSearchTerm\" />\n            </div>\n            @if (isCurrentUserOwner()) {\n              <div class=\"add-buttons\">\n                <button class=\"btn-secondary\" (click)=\"openAddRecordsDialog()\" title=\"Add individual records\">\n                  <i class=\"fa-solid fa-plus\"></i> Add Records\n                </button>\n                <button class=\"btn-secondary\" (click)=\"openAddFromViewDialog()\" title=\"Add records from a saved view\">\n                  <i class=\"fa-solid fa-table-list\"></i> Add From View\n                </button>\n              </div>\n            }\n            <button class=\"btn-icon\" (click)=\"refreshItems()\" title=\"Refresh\">\n              <i class=\"fa-solid fa-refresh\"></i>\n            </button>\n          </div>\n        </div>\n        <!-- Loading State -->\n        @if (isLoadingItems) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading items...\" size=\"medium\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!isLoadingItems && listItems.length === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-inbox\"\n            Title=\"No Items Yet\"\n            [Message]=\"'This list doesn\\'t have any items. Add records from the ' + entityDisplayName + ' entity.'\" />\n        }\n        <!-- Items Table -->\n        @if (!isLoadingItems && listItems.length > 0) {\n          <div class=\"items-table-container\">\n            @if (selectedItems.size > 0) {\n              <div class=\"items-toolbar\">\n                <span class=\"selection-count\">{{selectedItems.size}} selected</span>\n                <button class=\"btn-danger\" (click)=\"removeSelectedItems()\">\n                  <i class=\"fa-solid fa-trash\"></i>\n                  Remove from List\n                </button>\n              </div>\n            }\n            <table class=\"items-table\">\n              <thead>\n                <tr>\n                  <th class=\"col-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelectAllChecked\"\n                      (change)=\"toggleSelectAll()\" />\n                  </th>\n                  <th class=\"col-name\">Name</th>\n                  <th class=\"col-id\">Record ID</th>\n                  <th class=\"col-added\">Added</th>\n                  <th class=\"col-actions\"></th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (item of filteredItems; track item) {\n                  <tr\n                    [class.selected]=\"selectedItems.has(item.detail.ID)\">\n                    <td class=\"col-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"selectedItems.has(item.detail.ID)\"\n                        (change)=\"toggleItemSelection(item)\" />\n                    </td>\n                    <td class=\"col-name\">\n                      <div class=\"item-name\" [class.loading]=\"item.isLoading\">\n                        <i [class]=\"entityIcon\" class=\"item-icon\"></i>\n                        <span>{{item.recordName}}</span>\n                        @if (item.isLoading) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        }\n                      </div>\n                    </td>\n                    <td class=\"col-id\">\n                      <code class=\"record-id\">{{item.detail.RecordID}}</code>\n                    </td>\n                    <td class=\"col-added\">\n                      {{item.detail.__mj_CreatedAt | date:'shortDate'}}\n                    </td>\n                    <td class=\"col-actions\">\n                      <button\n                        class=\"btn-icon\"\n                        (click)=\"openRecord(item)\"\n                        title=\"Open record\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n            <div class=\"items-footer\">\n              <span class=\"items-count\">\n                Showing {{filteredItems.length}} of {{listItems.length}} items\n              </span>\n            </div>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Sharing Section -->\n    @if (activeSection === 'sharing') {\n      <section class=\"section sharing-section\">\n        <div class=\"section-header\">\n          <h2>Sharing</h2>\n          @if (isCurrentUserOwner()) {\n            <div class=\"section-actions\">\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Manage Sharing\n              </button>\n            </div>\n          }\n        </div>\n        <!-- Sharing summary -->\n        @if (stats.shareCount > 0 || stats.invitationCount > 0) {\n          <div class=\"sharing-summary\">\n            <div class=\"summary-card\">\n              <div class=\"summary-icon\">\n                <i class=\"fa-solid fa-users\"></i>\n              </div>\n              <div class=\"summary-content\">\n                <span class=\"summary-value\">{{stats.shareCount}}</span>\n                <span class=\"summary-label\">Active Share{{stats.shareCount !== 1 ? 's' : ''}}</span>\n              </div>\n            </div>\n            @if (stats.invitationCount > 0) {\n              <div class=\"summary-card\">\n                <div class=\"summary-icon pending\">\n                  <i class=\"fa-solid fa-envelope\"></i>\n                </div>\n                <div class=\"summary-content\">\n                  <span class=\"summary-value\">{{stats.invitationCount}}</span>\n                  <span class=\"summary-label\">Pending Invitation{{stats.invitationCount !== 1 ? 's' : ''}}</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty state for no shares -->\n        @if (stats.shareCount === 0 && stats.invitationCount === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-share-nodes\"\n            Title=\"Not Shared Yet\"\n            [Message]=\"isCurrentUserOwner() ? 'This list is private. Click &quot;Manage Sharing&quot; to share it with other users or roles.' : 'This list hasn\\'t been shared with anyone else.'\"\n            [ActionText]=\"isCurrentUserOwner() ? 'Share This List' : ''\"\n            ActionIcon=\"fa-solid fa-user-plus\"\n            (Action)=\"openShareDialog()\" />\n        }\n        <!-- Read-only notice for non-owners -->\n        @if (!isCurrentUserOwner() && (stats.shareCount > 0 || stats.invitationCount > 0)) {\n          <div class=\"readonly-notice\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Only the list owner can manage sharing settings.</span>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Activity Section -->\n    @if (activeSection === 'activity') {\n      <section class=\"section activity-section\">\n        <div class=\"section-header\">\n          <h2>Activity</h2>\n        </div>\n        <div class=\"activity-timeline\">\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon\">\n              <i class=\"fa-solid fa-edit\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List updated</p>\n              <span class=\"timeline-date\">{{record.__mj_UpdatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon create\">\n              <i class=\"fa-solid fa-plus\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List created</p>\n              <span class=\"timeline-date\">{{record.__mj_CreatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"activity-info\">\n          <p>Detailed activity tracking coming soon. You'll be able to see who added items, when shares were created, and more.</p>\n        </div>\n      </section>\n    }\n\n    <!-- Settings Section -->\n    @if (activeSection === 'settings') {\n      <section class=\"section settings-section\">\n        <div class=\"section-header\">\n          <h2>Settings</h2>\n        </div>\n        <div class=\"settings-form\">\n          <mj-collapsible-panel\n            SectionKey=\"listSettings\"\n            SectionName=\"List Settings\"\n            Icon=\"fa fa-cog\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Name\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Description\"\n                Type=\"textarea\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"CategoryID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n                LinkComponentType=\"Search\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n          <mj-collapsible-panel\n            SectionKey=\"systemInfo\"\n            SectionName=\"System Information\"\n            Icon=\"fa fa-info-circle\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"EntityID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"UserID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_CreatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_UpdatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n        </div>\n      </section>\n    }\n  </main>\n</div>\n\n<!-- Add Records Dialog -->\n@if (showAddRecordsDialog) {\n  <mj-dialog\n    [Title]=\"'Add ' + entityDisplayName + ' to List'\"\n    (Close)=\"closeAddRecordsDialog()\"\n    [Visible]=\"showAddRecordsDialog\"\n    [MinWidth]=\"400\"\n    [Width]=\"600\"\n    [Height]=\"550\">\n    <div class=\"dialog-content add-records-dialog\">\n      @if (addDialogSaving) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!addDialogSaving) {\n        <!-- Search Input -->\n        <div class=\"search-section\">\n          <div class=\"search-input-wrapper\">\n            <span class=\"fa-solid fa-search search-icon\"></span>\n            <input\n              type=\"text\"\n              class=\"mj-input search-input\"\n              [placeholder]=\"'Search ' + entityDisplayName + '...'\"\n              [(ngModel)]=\"addRecordsSearchFilter\"\n              (ngModelChange)=\"onAddRecordsSearchChange($event)\" />\n          </div>\n          <span class=\"search-hint\">Type at least 2 characters to search</span>\n        </div>\n        <!-- Records List -->\n        <div class=\"records-list\">\n          @if (addDialogLoading) {\n            <div class=\"list-loading\">\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length >= 2) {\n            <mj-empty-state\n              Variant=\"no-results\"\n              Size=\"compact\"\n              [Title]=\"'No records found matching &quot;' + addRecordsSearchFilter + '&quot;'\" />\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length < 2) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-list\"\n              Title=\"Search for records to add to this list\" />\n          }\n          @if (!addDialogLoading && addableRecords.length > 0) {\n            <!-- Selection controls -->\n            <div class=\"selection-controls\">\n              <button mjButton variant=\"flat\" (click)=\"selectAllAddable()\">Select All</button>\n              <button mjButton variant=\"flat\" (click)=\"deselectAllAddable()\">Deselect All</button>\n              <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n            </div>\n            <!-- Records -->\n            <div class=\"records-scroll\">\n              @for (record of addableRecords; track record) {\n                <div class=\"record-item\"\n                  [class.in-list]=\"record.isInList\"\n                  [class.selected]=\"record.isSelected\"\n                  (click)=\"toggleRecordSelection(record)\">\n                  <div class=\"record-checkbox\">\n                    @if (record.isInList) {\n                      <span class=\"fa-solid fa-check in-list-icon\" title=\"Already in list\"></span>\n                    }\n                    @if (!record.isInList) {\n                      <input type=\"checkbox\"\n                        [checked]=\"record.isSelected\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"toggleRecordSelection(record)\">\n                    }\n                  </div>\n                  <div class=\"record-name\">{{ record.Name }}</div>\n                  @if (record.isInList) {\n                    <span class=\"in-list-badge\">In List</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddRecords()\"\n        [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n        variant=\"primary\">\n        Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddRecordsDialog()\"\n        [disabled]=\"addDialogSaving\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Add From View Dialog -->\n@if (showAddFromViewDialog) {\n  <mj-dialog\n    Title=\"Add Records from Views\"\n    (Close)=\"closeAddFromViewDialog()\"\n    [Visible]=\"showAddFromViewDialog\"\n    [MinWidth]=\"400\"\n    [Width]=\"600\"\n    [Height]=\"500\">\n    <div class=\"dialog-content\">\n      @if (showAddFromViewLoader && fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading records from views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && addFromViewTotal > 0 && !fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addFromViewTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && !fetchingRecordsToSave && addFromViewTotal === 0) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!showAddFromViewLoader) {\n        <p class=\"dialog-instruction\">Select views to add their records to this list:</p>\n        <div class=\"views-list\">\n          @if (!userViews || userViews.length === 0) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-folder-open\"\n              Title=\"No saved views found for this entity\" />\n          }\n          @if (userViews && userViews.length > 0) {\n            @for (view of userViews; track view) {\n              <div class=\"view-item\"\n                [class.selected]=\"isViewSelected(view)\"\n                (click)=\"toggleViewSelection(view)\">\n                <input type=\"checkbox\"\n                  [checked]=\"isViewSelected(view)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleViewSelection(view)\">\n                <span class=\"fa-solid fa-table-list view-icon\"></span>\n                <span class=\"view-name\">{{ view.Name }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddFromView()\"\n        [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n        variant=\"primary\">\n        Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddFromViewDialog()\"\n        [disabled]=\"showAddFromViewLoader\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Share Dialog -->\n@if (showShareDialog && shareDialogConfig) {\n  <mj-list-share-dialog\n    [config]=\"shareDialogConfig\"\n    [visible]=\"showShareDialog\"\n    (complete)=\"onShareDialogComplete($event)\"\n    (cancel)=\"onShareDialogCancel()\"\n    (manageInvitations)=\"openInvitationsDialog()\"\n    (viewAuditLog)=\"openAuditLogDialog()\">\n  </mj-list-share-dialog>\n}\n\n<!-- Invitations Dialog (mockup 16). Opened from the share dialog's\n     \"Manage Invitations\" button. Per-list \u2014 bound to record.ID. -->\n@if (showInvitationsDialog && record?.IsSaved) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Title]=\"'Invitations \u2014 ' + record.Name\"\n    (Close)=\"closeInvitationsDialog()\"\n    [MinWidth]=\"640\"\n    [Width]=\"900\"\n    [Height]=\"640\">\n    <div class=\"dialog-content invitations-dialog\">\n      <mj-list-invitations\n        [Provider]=\"ProviderToUse\"\n        [ListID]=\"record.ID\"\n        [ListName]=\"record.Name\">\n      </mj-list-invitations>\n    </div>\n    <mj-dialog-actions>\n      <button mjButton (click)=\"closeInvitationsDialog()\" variant=\"outline\">Close</button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Audit Log Dialog (mockup 18). Opened from the share dialog's\n     \"View audit log\" link. Per-list \u2014 bound to record.ID. -->\n@if (showAuditLogDialog && record?.IsSaved) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Title]=\"'Audit Log \u2014 ' + record.Name\"\n    (Close)=\"closeAuditLogDialog()\"\n    [MinWidth]=\"720\"\n    [Width]=\"980\"\n    [Height]=\"680\">\n    <div class=\"dialog-content audit-log-dialog\">\n      <mj-list-audit-log\n        [Provider]=\"ProviderToUse\"\n        [ListID]=\"record.ID\">\n      </mj-list-audit-log>\n    </div>\n    <mj-dialog-actions>\n      <button mjButton (click)=\"closeAuditLogDialog()\" variant=\"outline\">Close</button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: ["/* ============================================\n   WORLD-CLASS LIST FORM STYLES\n   ============================================ */\n\n:host {\n    display: block;\n    height: 100%;\n}\n\n/* Layout */\n.list-form-explorer {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Header */\n.list-header {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn, .cancel-btn {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn {\n    color: var(--mj-status-success);\n}\n\n.save-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge i {\n    font-size: 12px;\n}\n\n.header-stats {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Navigation Rail */\n.nav-rail {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: white;\n}\n\n.nav-item.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item i {\n    font-size: 18px;\n}\n\n.nav-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Main Content */\n.main-content {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section {\n    animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n/* Search Box */\n.search-box {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box i {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box input {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Overview Section */\n.overview-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header h3 i {\n    color: var(--mj-text-disabled);\n}\n\n.card-body {\n    padding: 20px;\n}\n\n.description-text {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n/* Details Card */\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n/* Actions Card */\n.action-btn {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn i {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn span:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* Items Section */\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.items-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table th {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table td {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table tr:last-child td {\n    border-bottom: none;\n}\n\n.items-table tr.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table tr:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox {\n    width: 40px;\n}\n\n.col-name {\n    width: 35%;\n}\n\n.col-id {\n    width: 25%;\n}\n\n.col-added {\n    width: 20%;\n}\n\n.col-actions {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon {\n    color: var(--mj-text-disabled);\n}\n\n.record-id {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.items-count {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n/* Sharing Section */\n.coming-soon-banner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner > i {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content h3 {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Activity Section */\n.activity-timeline {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-text {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info p {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n/* Settings Section */\n.settings-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Add Buttons in Items Section */\n.add-buttons {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons .btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Sharing Summary */\n.sharing-summary {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice i {\n    color: var(--mj-text-disabled);\n}\n\n/* Dialog Styles */\n.dialog-content {\n    padding: 16px 0;\n}\n\n.dialog-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n/* Add Records Dialog */\n.add-records-dialog .search-section {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog .search-input {\n    width: 100%;\n}\n\n.add-records-dialog .search-hint {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog .records-list {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog .list-loading {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog .selection-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog .selection-info {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog .records-scroll {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog .record-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog .record-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog .record-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog .record-item.in-list {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog .record-checkbox {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog .in-list-icon {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog .record-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog .in-list-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n/* Add From View Dialog */\n.views-list {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.view-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item:last-child {\n    border-bottom: none;\n}\n\n.view-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item .view-icon {\n    color: var(--mj-brand-primary);\n}\n\n.view-item .view-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .list-form-explorer {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item::before {\n        display: none;\n    }\n\n    .header-stats {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box input {\n        width: 100%;\n    }\n\n    .section-actions {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}\n", ".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJListFormComponentExtended, { className: "MJListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 55 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJListFormComponentExtended, { className: "MJListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 56 }); })();
 //# sourceMappingURL=list-form.component.js.map