@memberjunction/ng-dashboards 5.22.0 → 5.23.0

package/dist/Lists/components/lists-operations-resource.component.js

@@ -14,8 +14,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "../services/list-set-operations.service";
 import * as i2 from "@memberjunction/ng-notifications";
 import * as i3 from "@angular/forms";
-import * as i4 from "@memberjunction/ng-shared-generic";
-import * as i5 from "./venn-diagram/venn-diagram.component";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "@memberjunction/ng-shared-generic";
+import * as i6 from "./venn-diagram/venn-diagram.component";
 function ListsOperationsResource_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 35);
@@ -1115,7 +1116,7 @@ let ListsOperationsResource = class ListsOperationsResource extends BaseResource
         }
     }
     static ɵfac = function ListsOperationsResource_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListsOperationsResource)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ListSetOperationsService), i0.ɵɵdirectiveInject(i2.MJNotificationService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsOperationsResource, selectors: [["mj-lists-operations-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 48, vars: 18, consts: [[1, "operations-container"], [1, "operations-header"], [1, "header-top"], [1, "header-title"], [1, "fa-solid", "fa-diagram-project"], ["title", "Clear all selections", 1, "clear-all-btn"], [1, "header-subtitle"], [1, "operations-content"], [1, "selection-panel"], [1, "panel-header"], [1, "list-count"], [1, "entity-filter-section"], [1, "filter-label"], [1, "entity-selector"], [1, "entity-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], [1, "selected-lists"], [1, "selected-item"], [1, "add-list-area"], [1, "lists-full"], [1, "entity-note"], [1, "quick-operations"], [1, "venn-panel"], [3, "data", "selectedRegion"], [1, "venn-empty"], [1, "loading-overlay"], [1, "results-panel"], [1, "fa-solid", "fa-crosshairs"], [1, "region-details"], [1, "operation-result"], [1, "results-empty"], [1, "modal-overlay"], [1, "modal-dialog"], [1, "modal-dialog", "add-to-list-dialog"], ["title", "Clear all selections", 1, "clear-all-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "item-color"], [1, "item-info"], [1, "item-name"], [1, "item-entity"], [1, "remove-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "add-list-search"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists to add...", 3, "ngModelChange", "focus", "ngModel"], [1, "list-dropdown"], [1, "dropdown-backdrop", 3, "click"], [1, "dropdown-content"], [1, "dropdown-item"], [1, "dropdown-item", 3, "click"], [1, "dropdown-name"], [1, "dropdown-entity"], [1, "fa-solid", "fa-info-circle"], [1, "operation-buttons"], [1, "op-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-circle-notch"], [1, "fa-solid", "fa-arrows-split-up-and-left"], [3, "regionClick", "data", "selectedRegion"], [1, "empty-icon"], [1, "fa-solid", "fa-circle-nodes"], ["text", "Calculating..."], [1, "region-header"], [1, "region-label"], [1, "region-count"], [1, "region-actions"], [1, "action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], [1, "fa-solid", "fa-file-excel"], [1, "record-preview"], [1, "preview-list"], [1, "preview-card"], [1, "preview-loading"], [1, "preview-card-content"], [1, "preview-name"], [1, "preview-secondary"], ["title", "Open record", 1, "preview-open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], ["text", "Loading preview...", "size", "small"], [1, "result-header"], [1, "result-operation"], [1, "result-count"], [1, "fa-solid", "fa-hand-pointer"], [1, "modal-overlay", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], [1, "form-group"], ["type", "text", "placeholder", "Enter list name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-info"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn-secondary", 3, "click"], [1, "form-info", 2, "margin-bottom", "16px"], [1, "list-search"], ["type", "text", "placeholder", "Search lists...", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "list-options"], [1, "list-option", 3, "selected"], [1, "list-options-empty"], [1, "list-option", 3, "click"], [1, "list-option-radio"], ["type", "radio", "name", "targetList", 3, "checked"], [1, "list-option-info"], [1, "list-option-name"], [1, "list-option-entity"], [1, "fa-solid", "fa-inbox"]], template: function ListsOperationsResource_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsOperationsResource, selectors: [["mj-lists-operations-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 48, vars: 18, consts: [[1, "operations-container"], [1, "operations-header"], [1, "header-top"], [1, "header-title"], [1, "fa-solid", "fa-diagram-project"], ["title", "Clear all selections", 1, "clear-all-btn"], [1, "header-subtitle"], [1, "operations-content"], [1, "selection-panel"], [1, "panel-header"], [1, "list-count"], [1, "entity-filter-section"], [1, "filter-label"], [1, "entity-selector"], [1, "entity-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], [1, "selected-lists"], [1, "selected-item"], [1, "add-list-area"], [1, "lists-full"], [1, "entity-note"], [1, "quick-operations"], [1, "venn-panel"], [3, "data", "selectedRegion"], [1, "venn-empty"], [1, "loading-overlay"], [1, "results-panel"], [1, "fa-solid", "fa-crosshairs"], [1, "region-details"], [1, "operation-result"], [1, "results-empty"], [1, "modal-overlay"], [1, "modal-dialog"], [1, "modal-dialog", "add-to-list-dialog"], ["title", "Clear all selections", 1, "clear-all-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "item-color"], [1, "item-info"], [1, "item-name"], [1, "item-entity"], [1, "remove-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "add-list-search"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists to add...", 3, "ngModelChange", "focus", "ngModel"], [1, "list-dropdown"], [1, "dropdown-backdrop", 3, "click"], [1, "dropdown-content"], [1, "dropdown-item"], [1, "dropdown-item", 3, "click"], [1, "dropdown-name"], [1, "dropdown-entity"], [1, "fa-solid", "fa-info-circle"], [1, "operation-buttons"], [1, "op-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-circle-notch"], [1, "fa-solid", "fa-arrows-split-up-and-left"], [3, "regionClick", "data", "selectedRegion"], [1, "empty-icon"], [1, "fa-solid", "fa-circle-nodes"], ["text", "Calculating..."], [1, "region-header"], [1, "region-label"], [1, "region-count"], [1, "region-actions"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", 3, "click"], [1, "fa-solid", "fa-folder-plus"], [1, "fa-solid", "fa-file-excel"], [1, "record-preview"], [1, "preview-list"], [1, "preview-card"], [1, "preview-loading"], [1, "preview-card-content"], [1, "preview-name"], [1, "preview-secondary"], ["title", "Open record", 1, "preview-open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], ["text", "Loading preview...", "size", "small"], [1, "result-header"], [1, "result-operation"], [1, "result-count"], [1, "fa-solid", "fa-hand-pointer"], [1, "modal-overlay", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], [1, "form-group"], ["type", "text", "placeholder", "Enter list name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-info"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn-secondary", 3, "click"], [1, "form-info", 2, "margin-bottom", "16px"], [1, "list-search"], ["type", "text", "placeholder", "Search lists...", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "list-options"], [1, "list-option", 3, "selected"], [1, "list-options-empty"], [1, "list-option", 3, "click"], [1, "list-option-radio"], ["type", "radio", "name", "targetList", 3, "checked"], [1, "list-option-info"], [1, "list-option-name"], [1, "list-option-entity"], [1, "fa-solid", "fa-inbox"]], template: function ListsOperationsResource_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵelementStart(5, "h2");
@@ -1209,7 +1210,7 @@ let ListsOperationsResource = class ListsOperationsResource extends BaseResource
             i0.ɵɵconditional(ctx.showAddToListDialog ? 46 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showAddToListDialog ? 47 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.VennDiagramComponent], styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-status-error);\n      color: var(--mj-status-error);\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .header-subtitle {\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      background: var(--mj-bg-surface-card);\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: var(--mj-brand-primary);\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 6px;\n      font-size: 12px;\n      color: var(--mj-status-success);\n    }\n\n    .entity-note i {\n      color: var(--mj-status-success);\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed var(--mj-border-default);\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: var(--mj-brand-primary);\n    }\n\n    .add-list-search i {\n      color: var(--mj-text-muted);\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      box-shadow: var(--mj-shadow-md);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border-radius: 6px;\n      font-size: 12px;\n      color: var(--mj-status-warning);\n    }\n\n    .entity-warning i {\n      color: var(--mj-status-warning);\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: var(--mj-brand-primary);\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: var(--mj-text-primary);\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface-card) 90%, transparent);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .action-btn.primary {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .action-btn.primary:hover {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: var(--mj-bg-surface-sunken);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: var(--mj-bg-surface-card);\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-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    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-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    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-info i {\n      color: var(--mj-brand-primary);\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: var(--mj-bg-surface-card);\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    }\n\n    .btn-secondary:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: var(--mj-text-muted);\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .list-option.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "], encapsulation: 2 });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i5.LoadingComponent, i6.VennDiagramComponent], styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-status-error);\n      color: var(--mj-status-error);\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .header-subtitle {\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      background: var(--mj-bg-surface-card);\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: var(--mj-brand-primary);\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 6px;\n      font-size: 12px;\n      color: var(--mj-status-success);\n    }\n\n    .entity-note i {\n      color: var(--mj-status-success);\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed var(--mj-border-default);\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: var(--mj-brand-primary);\n    }\n\n    .add-list-search i {\n      color: var(--mj-text-muted);\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      box-shadow: var(--mj-shadow-md);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border-radius: 6px;\n      font-size: 12px;\n      color: var(--mj-status-warning);\n    }\n\n    .entity-warning i {\n      color: var(--mj-status-warning);\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: var(--mj-brand-primary);\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: var(--mj-text-primary);\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface-card) 90%, transparent);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .action-btn.primary {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .action-btn.primary:hover {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: var(--mj-bg-surface-sunken);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: var(--mj-bg-surface-card);\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-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    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-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    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-info i {\n      color: var(--mj-brand-primary);\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: var(--mj-bg-surface-card);\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    }\n\n    .btn-secondary:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: var(--mj-text-muted);\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .list-option.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "], encapsulation: 2 });
 };
 ListsOperationsResource = __decorate([
     RegisterClass(BaseResourceComponent, 'ListsOperationsResource')
@@ -1399,15 +1400,15 @@ export { ListsOperationsResource };
                 <span class="region-count">{{selectedRegion.size}} records</span>
               </div>
               <div class="region-actions">
-                <button class="action-btn primary" (click)="createListFromSelection()">
+                <button mjButton variant="primary" (click)="createListFromSelection()">
                   <i class="fa-solid fa-plus"></i>
                   Create New List
                 </button>
-                <button class="action-btn" (click)="addToExistingList()">
+                <button mjButton (click)="addToExistingList()">
                   <i class="fa-solid fa-folder-plus"></i>
                   Add to List
                 </button>
-                <button class="action-btn" (click)="exportToExcel()">
+                <button mjButton (click)="exportToExcel()">
                   <i class="fa-solid fa-file-excel"></i>
                   Export
                 </button>
@@ -1448,11 +1449,11 @@ export { ListsOperationsResource };
                 <span class="result-count">{{lastOperationResult.resultCount}} records</span>
               </div>
               <div class="region-actions">
-                <button class="action-btn primary" (click)="createListFromResult()">
+                <button mjButton variant="primary" (click)="createListFromResult()">
                   <i class="fa-solid fa-plus"></i>
                   Create New List
                 </button>
-                <button class="action-btn" (click)="addResultToExistingList()">
+                <button mjButton (click)="addResultToExistingList()">
                   <i class="fa-solid fa-folder-plus"></i>
                   Add to List
                 </button>