@memberjunction/ng-dashboards 5.24.0 → 5.26.0

package/dist/DataExplorer/components/filter-dialog/filter-dialog.component.js

@@ -170,11 +170,11 @@ export class FilterDialogComponent {
             i0.ɵɵconditionalCreate(0, FilterDialogComponent_Conditional_0_Template, 22, 9);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen ? 0 : -1);
-        } }, dependencies: [i1.FilterBuilderComponent], styles: ["\n\n.dialog-backdrop[_ngcontent-%COMP%] {\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  animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n\n\n.filter-dialog[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90%;\n  max-width: 800px;\n  max-height: 85vh;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 16px;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  min-height: 200px;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  border-radius: 0 0 12px 12px;\n  flex-shrink: 0;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-border-default);\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.apply-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.apply-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n@media (max-width: 600px) {\n  .filter-dialog[_ngcontent-%COMP%] {\n    width: 95%;\n    max-height: 90vh;\n    border-radius: 8px;\n  }\n\n  .dialog-header[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n  }\n\n  .header-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .dialog-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .footer-right[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .footer-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .clear-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n  }\n}"] });
+        } }, dependencies: [i1.FilterBuilderComponent], styles: ["\n\n.dialog-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 2000; \n\n  animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n\n\n.filter-dialog[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90%;\n  max-width: 800px;\n  max-height: 85vh;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n  z-index: 2001; \n\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 16px;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  min-height: 200px;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  border-radius: 0 0 12px 12px;\n  flex-shrink: 0;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-border-default);\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.apply-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.apply-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n@media (max-width: 600px) {\n  .filter-dialog[_ngcontent-%COMP%] {\n    width: 95%;\n    max-height: 90vh;\n    border-radius: 8px;\n  }\n\n  .dialog-header[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n  }\n\n  .header-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .dialog-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .footer-right[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .footer-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .clear-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-filter-dialog', template: "@if (isOpen) {\n  <!-- Backdrop -->\n  <div class=\"dialog-backdrop\" (click)=\"onCancel()\"></div>\n\n  <!-- Dialog -->\n  <div class=\"filter-dialog\">\n    <!-- Header -->\n    <div class=\"dialog-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-filter\"></i>\n        <span>Edit Filters</span>\n        @if (getFilterCount() > 0) {\n          <span class=\"filter-badge\">{{ getFilterCount() }}</span>\n        }\n      </div>\n      <button class=\"close-btn\" (click)=\"onCancel()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"dialog-content\">\n      <mj-filter-builder\n        [fields]=\"fields\"\n        [filter]=\"workingFilter\"\n        [disabled]=\"disabled\"\n        [showSummary]=\"true\"\n        [config]=\"{ showClearButton: false, applyOnChange: true }\"\n        (filterChange)=\"onFilterChange($event)\">\n      </mj-filter-builder>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"dialog-footer\">\n      <button class=\"footer-btn clear-btn\" (click)=\"onClear()\" [disabled]=\"disabled || getFilterCount() === 0\">\n        <i class=\"fa-solid fa-eraser\"></i>\n        Clear All\n      </button>\n      <div class=\"footer-right\">\n        <button class=\"footer-btn cancel-btn\" (click)=\"onCancel()\">\n          Cancel\n        </button>\n        <button class=\"footer-btn apply-btn\" (click)=\"onApply()\" [disabled]=\"disabled\">\n          <i class=\"fa-solid fa-check\"></i>\n          Apply Filters\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* Backdrop */\n.dialog-backdrop {\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  animation: fadeIn 0.15s ease;\n}\n\n/* Dialog */\n.filter-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90%;\n  max-width: 800px;\n  max-height: 85vh;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  animation: slideIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* Header */\n.dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-title i {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.close-btn {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 16px;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n/* Content */\n.dialog-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  min-height: 200px;\n}\n\n/* Footer */\n.dialog-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  border-radius: 0 0 12px 12px;\n  flex-shrink: 0;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn i {\n  font-size: 12px;\n}\n\n.clear-btn {\n  background: transparent;\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-border-default);\n}\n\n.clear-btn:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.cancel-btn {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.cancel-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.apply-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.apply-btn:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* Responsive */\n@media (max-width: 600px) {\n  .filter-dialog {\n    width: 95%;\n    max-height: 90vh;\n    border-radius: 8px;\n  }\n\n  .dialog-header {\n    padding: 14px 16px;\n  }\n\n  .header-title {\n    font-size: 16px;\n  }\n\n  .dialog-content {\n    padding: 16px;\n  }\n\n  .dialog-footer {\n    flex-direction: column;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .footer-right {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .footer-btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .clear-btn {\n    width: 100%;\n    justify-content: center;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-filter-dialog', template: "@if (isOpen) {\n  <!-- Backdrop -->\n  <div class=\"dialog-backdrop\" (click)=\"onCancel()\"></div>\n\n  <!-- Dialog -->\n  <div class=\"filter-dialog\">\n    <!-- Header -->\n    <div class=\"dialog-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-filter\"></i>\n        <span>Edit Filters</span>\n        @if (getFilterCount() > 0) {\n          <span class=\"filter-badge\">{{ getFilterCount() }}</span>\n        }\n      </div>\n      <button class=\"close-btn\" (click)=\"onCancel()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"dialog-content\">\n      <mj-filter-builder\n        [fields]=\"fields\"\n        [filter]=\"workingFilter\"\n        [disabled]=\"disabled\"\n        [showSummary]=\"true\"\n        [config]=\"{ showClearButton: false, applyOnChange: true }\"\n        (filterChange)=\"onFilterChange($event)\">\n      </mj-filter-builder>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"dialog-footer\">\n      <button class=\"footer-btn clear-btn\" (click)=\"onClear()\" [disabled]=\"disabled || getFilterCount() === 0\">\n        <i class=\"fa-solid fa-eraser\"></i>\n        Clear All\n      </button>\n      <div class=\"footer-right\">\n        <button class=\"footer-btn cancel-btn\" (click)=\"onCancel()\">\n          Cancel\n        </button>\n        <button class=\"footer-btn apply-btn\" (click)=\"onApply()\" [disabled]=\"disabled\">\n          <i class=\"fa-solid fa-check\"></i>\n          Apply Filters\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* Backdrop */\n.dialog-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 2000; /* Above view-config-panel (1201) and Leaflet map (1000) */\n  animation: fadeIn 0.15s ease;\n}\n\n/* Dialog */\n.filter-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90%;\n  max-width: 800px;\n  max-height: 85vh;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n  z-index: 2001; /* Above backdrop (2000) */\n  display: flex;\n  flex-direction: column;\n  animation: slideIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* Header */\n.dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-title i {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.close-btn {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 16px;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n/* Content */\n.dialog-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  min-height: 200px;\n}\n\n/* Footer */\n.dialog-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  border-radius: 0 0 12px 12px;\n  flex-shrink: 0;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn i {\n  font-size: 12px;\n}\n\n.clear-btn {\n  background: transparent;\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-border-default);\n}\n\n.clear-btn:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.cancel-btn {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.cancel-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.apply-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.apply-btn:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* Responsive */\n@media (max-width: 600px) {\n  .filter-dialog {\n    width: 95%;\n    max-height: 90vh;\n    border-radius: 8px;\n  }\n\n  .dialog-header {\n    padding: 14px 16px;\n  }\n\n  .header-title {\n    font-size: 16px;\n  }\n\n  .dialog-content {\n    padding: 16px;\n  }\n\n  .dialog-footer {\n    flex-direction: column;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .footer-right {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .footer-btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .clear-btn {\n    width: 100%;\n    justify-content: center;\n  }\n}\n"] }]
     }], null, { isOpen: [{
             type: Input
         }], fields: [{

package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.d.ts

@@ -1,5 +1,6 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { EntityInfo, CompositeKey } from '@memberjunction/core';
+import { TreeBranchConfig, TreeLeafConfig, TreeNode, TreeComponent } from '@memberjunction/ng-trees';
 import { RecentItem, FavoriteItem, AppEntityGroup } from '../../models/explorer-state.interface';
 import * as i0 from "@angular/core";
 /**
@@ -16,7 +17,7 @@ export interface SelectRecordEvent {
     entityName: string;
     recordId: string;
 }
-export declare class NavigationPanelComponent {
+export declare class NavigationPanelComponent implements OnChanges {
     entities: EntityInfo[];
     selectedEntityName: string | null;
     favorites: FavoriteItem[];
@@ -29,6 +30,8 @@ export declare class NavigationPanelComponent {
     allowedEntityNames: Set<string> | null;
     /** Application-based entity groups from the parent dashboard */
     appEntityGroups: AppEntityGroup[];
+    /** Optional application ID filter for the tree */
+    applicationIdFilter: string | null;
     favoritesSectionExpanded: boolean;
     recentSectionExpanded: boolean;
     entitiesSectionExpanded: boolean;
@@ -44,29 +47,34 @@ export declare class NavigationPanelComponent {
     /** Emitted when a nav panel app group is toggled */
     appGroupToggled: EventEmitter<string>;
     private metadata;
+    treeBranchConfig: TreeBranchConfig;
+    treeLeafConfig: TreeLeafConfig;
+    entityTree?: TreeComponent;
+    /** Selected entity ID for tree highlighting */
+    selectedEntityIds: string[];
+    /** Search term for filtering the entity tree */
     entitySearchTerm: string;
-    private navGroupExpanded;
+    ngOnChanges(changes: SimpleChanges): void;
     /**
-     * Whether to show grouped entity view (when groups are available)
+     * Update the selected entity IDs for tree highlighting when selected entity changes
      */
-    get hasAppGroups(): boolean;
+    private updateSelectedEntityKey;
     /**
-     * Get filtered entities based on search term (used in flat/ungrouped mode)
+     * Update the tree's branch filter when application filter changes
      */
-    get filteredEntities(): EntityInfo[];
+    private updateTreeBranchFilter;
     /**
-     * Get app entity groups filtered by search term
-     * Auto-expands groups when searching to show matches
+     * Filter the entity tree when search term changes
      */
-    get filteredNavGroups(): AppEntityGroup[];
+    onEntitySearchChanged(): void;
     /**
-     * Check if a nav panel group is expanded
+     * Clear the entity search
      */
-    isNavGroupExpanded(groupId: string): boolean;
+    clearEntitySearch(): void;
     /**
-     * Toggle a nav panel group expand/collapse
+     * Handle tree selection change - map TreeNode to EntityInfo and emit
      */
-    onNavGroupToggle(groupId: string): void;
+    onTreeEntitySelected(nodes: TreeNode[]): void;
     /**
      * Get recent items filtered by allowed entities (if filter is active)
      */
@@ -124,6 +132,6 @@ export declare class NavigationPanelComponent {
      */
     getFavoriteIcon(favorite: FavoriteItem): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NavigationPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationPanelComponent, "mj-explorer-navigation-panel", never, { "entities": { "alias": "entities"; "required": false; }; "selectedEntityName": { "alias": "selectedEntityName"; "required": false; }; "favorites": { "alias": "favorites"; "required": false; }; "recentItems": { "alias": "recentItems"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "allowedEntityNames": { "alias": "allowedEntityNames"; "required": false; }; "appEntityGroups": { "alias": "appEntityGroups"; "required": false; }; "favoritesSectionExpanded": { "alias": "favoritesSectionExpanded"; "required": false; }; "recentSectionExpanded": { "alias": "recentSectionExpanded"; "required": false; }; "entitiesSectionExpanded": { "alias": "entitiesSectionExpanded"; "required": false; }; "viewsSectionExpanded": { "alias": "viewsSectionExpanded"; "required": false; }; }, { "entitySelected": "entitySelected"; "toggleCollapse": "toggleCollapse"; "sectionToggled": "sectionToggled"; "openRecord": "openRecord"; "selectRecord": "selectRecord"; "expandAndFocus": "expandAndFocus"; "appGroupToggled": "appGroupToggled"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationPanelComponent, "mj-explorer-navigation-panel", never, { "entities": { "alias": "entities"; "required": false; }; "selectedEntityName": { "alias": "selectedEntityName"; "required": false; }; "favorites": { "alias": "favorites"; "required": false; }; "recentItems": { "alias": "recentItems"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "allowedEntityNames": { "alias": "allowedEntityNames"; "required": false; }; "appEntityGroups": { "alias": "appEntityGroups"; "required": false; }; "applicationIdFilter": { "alias": "applicationIdFilter"; "required": false; }; "favoritesSectionExpanded": { "alias": "favoritesSectionExpanded"; "required": false; }; "recentSectionExpanded": { "alias": "recentSectionExpanded"; "required": false; }; "entitiesSectionExpanded": { "alias": "entitiesSectionExpanded"; "required": false; }; "viewsSectionExpanded": { "alias": "viewsSectionExpanded"; "required": false; }; }, { "entitySelected": "entitySelected"; "toggleCollapse": "toggleCollapse"; "sectionToggled": "sectionToggled"; "openRecord": "openRecord"; "selectRecord": "selectRecord"; "expandAndFocus": "expandAndFocus"; "appGroupToggled": "appGroupToggled"; }, never, never, false, never>;
 }
 //# sourceMappingURL=navigation-panel.component.d.ts.map

package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/DataExplorer/components/navigation-panel/navigation-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,UAAU,EAAY,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;;AAEjG;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,qBAMa,wBAAwB;IAC1B,QAAQ,EAAE,UAAU,EAAE,CAAM;IAC5B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACzC,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,WAAW,EAAE,UAAU,EAAE,CAAM;IAC/B,SAAS,UAAS;IAC3B;;;OAGG;IACM,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAQ;IACvD,gEAAgE;IACvD,eAAe,EAAE,cAAc,EAAE,CAAM;IAGvC,wBAAwB,UAAQ;IAChC,qBAAqB,UAAQ;IAC7B,uBAAuB,UAAQ;IAC/B,oBAAoB,UAAQ;IAE3B,cAAc,2BAAkC;IAChD,cAAc,qBAA4B;IAC1C,cAAc,8DAAqE;IACnF,UAAU,gCAAuC;IAC3D,yGAAyG;IAC/F,YAAY,kCAAyC;IAC/D,mFAAmF;IACzE,cAAc,oDAA2D;IACnF,oDAAoD;IAC1C,eAAe,uBAA8B;IAEvD,OAAO,CAAC,QAAQ,CAAkB;IAG3B,gBAAgB,SAAM;IAE7B,OAAO,CAAC,gBAAgB,CAA8B;IAEtD;;OAEG;IACH,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED;;OAEG;IACH,IAAI,gBAAgB,IAAI,UAAU,EAAE,CASnC;IAED;;;OAGG;IACH,IAAI,iBAAiB,IAAI,cAAc,EAAE,CAexC;IAED;;OAEG;IACH,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAS5C;;OAEG;IACH,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKvC;;OAEG;IACH,IAAI,mBAAmB,IAAI,UAAU,EAAE,CAKtC;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,YAAY,EAAE,CAMpC;IAED;;OAEG;IACH,IAAI,gBAAgB,IAAI,YAAY,EAAE,CAMrC;IAED;;OAEG;IACH,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAIvC;;OAEG;IACH,eAAe,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI;IAqB7C;;OAEG;IACH,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAarC;;OAEG;IACH,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,IAAI;IAI7E;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAIxB;;OAEG;IACH,oBAAoB,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,IAAI;IAIxE;;OAEG;IACH,gBAAgB,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO;IAI7C;;OAEG;IACH,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM;IAoBzC;;OAEG;IACH,eAAe,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM;IAkBxC;;OAEG;IACH,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAQ3C;;OAEG;IACH,eAAe,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM;yCAzQpC,wBAAwB;2CAAxB,wBAAwB;CA4RpC"}
+{"version":3,"file":"navigation-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/DataExplorer/components/navigation-panel/navigation-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,SAAS,EAAE,aAAa,EAAa,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,UAAU,EAAY,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACrG,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;;AAEjG;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,qBAMa,wBAAyB,YAAW,SAAS;IAC/C,QAAQ,EAAE,UAAU,EAAE,CAAM;IAC5B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACzC,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,WAAW,EAAE,UAAU,EAAE,CAAM;IAC/B,SAAS,UAAS;IAC3B;;;OAGG;IACM,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAQ;IACvD,gEAAgE;IACvD,eAAe,EAAE,cAAc,EAAE,CAAM;IAChD,kDAAkD;IACzC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG1C,wBAAwB,UAAQ;IAChC,qBAAqB,UAAQ;IAC7B,uBAAuB,UAAQ;IAC/B,oBAAoB,UAAQ;IAE3B,cAAc,2BAAkC;IAChD,cAAc,qBAA4B;IAC1C,cAAc,8DAAqE;IACnF,UAAU,gCAAuC;IAC3D,yGAAyG;IAC/F,YAAY,kCAAyC;IAC/D,mFAAmF;IACzE,cAAc,oDAA2D;IACnF,oDAAoD;IAC1C,eAAe,uBAA8B;IAEvD,OAAO,CAAC,QAAQ,CAAkB;IAG3B,gBAAgB,EAAE,gBAAgB,CAMvC;IAEK,cAAc,EAAE,cAAc,CAYnC;IAEuB,UAAU,CAAC,EAAE,aAAa,CAAC;IAEpD,+CAA+C;IACxC,iBAAiB,EAAE,MAAM,EAAE,CAAM;IAExC,gDAAgD;IACzC,gBAAgB,SAAM;IAE7B,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IASzC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAW/B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAc9B;;OAEG;IACH,qBAAqB,IAAI,IAAI;IAU7B;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI;IAY7C;;OAEG;IACH,IAAI,mBAAmB,IAAI,UAAU,EAAE,CAKtC;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,YAAY,EAAE,CAMpC;IAED;;OAEG;IACH,IAAI,gBAAgB,IAAI,YAAY,EAAE,CAMrC;IAED;;OAEG;IACH,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAIvC;;OAEG;IACH,eAAe,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI;IAqB7C;;OAEG;IACH,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAarC;;OAEG;IACH,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,IAAI;IAI7E;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAIxB;;OAEG;IACH,oBAAoB,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,IAAI;IAIxE;;OAEG;IACH,gBAAgB,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO;IAI7C;;OAEG;IACH,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM;IAoBzC;;OAEG;IACH,eAAe,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM;IAkBxC;;OAEG;IACH,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAQ3C;;OAEG;IACH,eAAe,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM;yCAnTpC,wBAAwB;2CAAxB,wBAAwB;CAsUpC"}