@memberjunction/ng-data-context 2.43.0 → 2.45.0

package/README.md

@@ -1,14 +1,20 @@
-# Data Context Component
+# @memberjunction/ng-data-context
 
-This Angular component package provides a way to display and interact with MemberJunction Data Contexts, which are collections of data items from different sources that can be used together.
+Angular component package for displaying and editing MemberJunction Data Contexts - collections of data items from different sources that can be used together for analysis, reporting, or other data operations.
+
+## Overview
+
+This package provides Angular components to display Data Contexts and their associated items in a clean, user-friendly interface. Data Contexts in MemberJunction are powerful constructs that allow users to group related data from various sources (SQL queries, views, entities, etc.) into a single logical unit.
 
 ## Features
 
-- **Display Data Context Details**: View information about a data context including ID, name, and description
-- **View Data Context Items**: See all items within a data context in a grid format
-- **Dialog Wrapper**: Includes a dialog component for easy integration into existing UIs
-- **Metadata Provider Integration**: Works with MemberJunction metadata providers
-- **Loading State Management**: Provides visual feedback during data loading
+- **Display Data Context Details**: View comprehensive information about a data context including ID, name, and description
+- **View Data Context Items**: Display all items within a data context in a sortable, scrollable grid format
+- **Dialog Wrapper**: Ready-to-use dialog component for popup displays
+- **Metadata Provider Integration**: Seamlessly integrates with MemberJunction's metadata system
+- **Loading State Management**: Built-in loading indicators for better user experience
+- **Virtual Scrolling**: Efficiently handle large datasets with Kendo Grid's virtual scrolling
+- **Responsive Design**: Components adapt to different screen sizes
 
 ## Installation
 
@@ -50,41 +56,65 @@ export class YourModule { }
 <mj-data-context-dialog
   *ngIf="showDataContextDialog"
   [dataContextId]="selectedDataContextId"
+  [Provider]="metadataProvider"
   (dialogClosed)="showDataContextDialog = false">
 </mj-data-context-dialog>
 ```
 
-### TypeScript Component Example
+### Complete TypeScript Example
 
 ```typescript
 import { Component } from '@angular/core';
-import { IMetadataProvider } from '@memberjunction/core';
+import { IMetadataProvider, Metadata } from '@memberjunction/core';
 
 @Component({
   selector: 'app-data-context-viewer',
   template: `
-    <button (click)="showDialog()">View Data Context</button>
-    
-    <mj-data-context-dialog
-      *ngIf="isDialogVisible"
-      [dataContextId]="currentDataContextId"
-      [Provider]="metadataProvider"
-      (dialogClosed)="isDialogVisible = false">
-    </mj-data-context-dialog>
-  `
+    <div class="data-context-container">
+      <h2>Data Context Viewer</h2>
+      
+      <!-- Inline component usage -->
+      <mj-data-context
+        [dataContextId]="selectedDataContextId"
+        [Provider]="metadataProvider">
+      </mj-data-context>
+      
+      <!-- Dialog trigger button -->
+      <button (click)="showDialog()">View in Dialog</button>
+      
+      <!-- Dialog component -->
+      <mj-data-context-dialog
+        *ngIf="isDialogVisible"
+        [dataContextId]="selectedDataContextId"
+        [Provider]="metadataProvider"
+        (dialogClosed)="onDialogClose()">
+      </mj-data-context-dialog>
+    </div>
+  `,
+  styles: [`
+    .data-context-container {
+      padding: 20px;
+    }
+  `]
 })
 export class DataContextViewerComponent {
   isDialogVisible = false;
-  currentDataContextId = '12345';
+  selectedDataContextId = '12345-67890-abcdef';
   metadataProvider: IMetadataProvider;
   
-  constructor(metadataService: YourMetadataService) {
-    this.metadataProvider = metadataService.getProvider();
+  constructor() {
+    // Use the global metadata provider or inject your own
+    this.metadataProvider = Metadata.Provider;
   }
   
-  showDialog() {
+  showDialog(): void {
     this.isDialogVisible = true;
   }
+  
+  onDialogClose(): void {
+    this.isDialogVisible = false;
+    // Additional cleanup or refresh logic here
+  }
 }
 ```
 
@@ -92,48 +122,144 @@ export class DataContextViewerComponent {
 
 ### DataContextComponent
 
-This is the main component for displaying a data context and its items.
+The main component for displaying a data context and its items.
+
+**Selector**: `mj-data-context`
 
 #### Inputs
 
-- `dataContextId`: string - The ID of the data context to display (required)
-- `Provider`: IMetadataProvider - Custom metadata provider (optional, will use global provider if not specified)
+| Input | Type | Required | Default | Description |
+|-------|------|----------|---------|-------------|
+| `dataContextId` | `string` | Yes | - | The ID of the data context to display |
+| `Provider` | `IMetadataProvider \| null` | No | `Metadata.Provider` | Custom metadata provider. If not provided, uses the global MemberJunction metadata provider |
+
+#### Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `dataContextRecord` | `DataContextEntity \| undefined` | The loaded data context entity |
+| `dataContextItems` | `any[]` | Array of data context items |
+| `showLoader` | `boolean` | Loading state indicator |
 
 ### DataContextDialogComponent
 
-This component wraps the DataContextComponent in a Kendo dialog window.
+Dialog wrapper component that displays the DataContextComponent in a Kendo dialog.
+
+**Selector**: `mj-data-context-dialog`
 
 #### Inputs
 
-- `dataContextId`: string - The ID of the data context to display (required)
-- `Provider`: IMetadataProvider - Custom metadata provider (optional)
+| Input | Type | Required | Default | Description |
+|-------|------|----------|---------|-------------|
+| `dataContextId` | `string` | Yes | - | The ID of the data context to display |
+| `Provider` | `IMetadataProvider \| null` | No | `null` | Custom metadata provider |
 
 #### Outputs
 
-- `dialogClosed`: EventEmitter<void> - Emitted when the dialog is closed
+| Output | Type | Description |
+|--------|------|-------------|
+| `dialogClosed` | `EventEmitter<void>` | Emitted when the dialog is closed |
+
+### DataContextModule
+
+The NgModule that exports both components.
+
+**Exports**:
+- `DataContextComponent`
+- `DataContextDialogComponent`
 
 ## Data Context Structure
 
-A data context in MemberJunction typically consists of:
+A data context in MemberJunction consists of:
+
+1. **Context Record** (`DataContextEntity`)
+   - `ID`: Unique identifier
+   - `Name`: Display name
+   - `Description`: Detailed description
+   - Additional metadata fields
+
+2. **Context Items** (`Data Context Items` entity)
+   - `Type`: The type of data item (SQL, View, Query, Entity, Record)
+   - `SQL`: Direct SQL query (if applicable)
+   - `ViewID`: Reference to a view
+   - `QueryID`: Reference to a saved query
+   - `EntityID`: Reference to an entity
+   - `RecordID`: Specific record reference
 
-1. **Context Record** - Contains metadata about the context (name, description, etc.)
-2. **Context Items** - The actual data items that make up the context, which can be:
-   - SQL queries
-   - Views
-   - Entity records
-   - Query results
-   - Other data items
+## Grid Features
 
-The component displays both the context metadata and a grid of the items contained within it.
+The component uses Kendo Grid with the following features enabled:
+- **Virtual Scrolling**: Efficiently handles large datasets
+- **Sorting**: Click column headers to sort
+- **Resizable Columns**: Drag column borders to resize
+- **Keyboard Navigation**: Navigate cells with keyboard
+- **Page Size**: Default 100 items per virtual page
 
 ## Styling
 
-The component uses Kendo UI components for consistent styling and includes basic CSS that can be overridden in your application.
+The components use Kendo UI for Angular styling. You can override styles by targeting the component selectors:
+
+```css
+/* Custom styling example */
+mj-data-context {
+  /* Your custom styles */
+}
+
+.kendo-grid-container {
+  height: 500px; /* Adjust grid height */
+}
+```
 
 ## Dependencies
 
-- `@memberjunction/core`: For metadata and entity access
-- `@memberjunction/core-entities`: For DataContextEntity type
-- `@memberjunction/global`: For global utilities
-- `@progress/kendo-angular-grid`: For displaying data context items
-- `@progress/kendo-angular-indicators`: For loading indicators
+### Runtime Dependencies
+- `@memberjunction/core` (v2.43.0): Core MemberJunction functionality
+- `@memberjunction/core-entities` (v2.43.0): Entity type definitions
+- `@memberjunction/global` (v2.43.0): Global utilities
+- `tslib` (^2.3.0): TypeScript runtime helpers
+
+### Peer Dependencies
+- `@angular/common` (18.0.2)
+- `@angular/core` (18.0.2)
+- `@progress/kendo-angular-grid` (16.2.0)
+- `@progress/kendo-angular-indicators` (16.2.0)
+- `@progress/kendo-angular-dialog` (imported via module)
+- `@progress/kendo-angular-buttons` (imported via module)
+
+## Integration with MemberJunction
+
+This package integrates seamlessly with other MemberJunction packages:
+
+- Uses the MemberJunction metadata system for entity loading
+- Leverages `RunView` for efficient data retrieval
+- Compatible with MemberJunction's security and permission system
+- Works with custom metadata providers for multi-tenant scenarios
+
+## Build and Development
+
+To build this package individually:
+
+```bash
+cd packages/Angular/Generic/data-context
+npm run build
+```
+
+The package uses Angular CLI's `ngc` compiler for building the library.
+
+## Error Handling
+
+The component includes built-in error handling:
+- Logs errors using MemberJunction's `LogError` function
+- Hides the loader on error
+- Gracefully handles missing or invalid data context IDs
+
+## Best Practices
+
+1. **Provider Usage**: Only provide a custom `Provider` if you need to override the global metadata provider
+2. **Dialog Management**: Always handle the `dialogClosed` event to properly manage dialog state
+3. **Performance**: The virtual scrolling is optimized for datasets up to several thousand items
+4. **Error Handling**: Monitor console logs for any data loading errors
+
+## License
+
+ISC

package/dist/lib/module.d.ts

@@ -2,13 +2,16 @@ import * as i0 from "@angular/core";
 import * as i1 from "./ng-data-context.component";
 import * as i2 from "./ng-data-context-dialog.component";
 import * as i3 from "@angular/common";
-import * as i4 from "@progress/kendo-angular-grid";
-import * as i5 from "@progress/kendo-angular-dialog";
-import * as i6 from "@progress/kendo-angular-buttons";
-import * as i7 from "@progress/kendo-angular-indicators";
+import * as i4 from "@angular/forms";
+import * as i5 from "@progress/kendo-angular-grid";
+import * as i6 from "@progress/kendo-angular-dialog";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "@progress/kendo-angular-indicators";
+import * as i9 from "@progress/kendo-angular-inputs";
+import * as i10 from "@memberjunction/ng-container-directives";
 export declare class DataContextModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DataContextModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DataContextModule, [typeof i1.DataContextComponent, typeof i2.DataContextDialogComponent], [typeof i3.CommonModule, typeof i4.GridModule, typeof i5.DialogsModule, typeof i6.ButtonsModule, typeof i7.IndicatorsModule], [typeof i1.DataContextComponent, typeof i2.DataContextDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DataContextModule, [typeof i1.DataContextComponent, typeof i2.DataContextDialogComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.GridModule, typeof i6.DialogsModule, typeof i7.ButtonsModule, typeof i8.IndicatorsModule, typeof i9.InputsModule, typeof i10.ContainerDirectivesModule], [typeof i1.DataContextComponent, typeof i2.DataContextDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DataContextModule>;
 }
 //# sourceMappingURL=module.d.ts.map

package/dist/lib/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":";;;;;;;;AAYA,qBAiBa,iBAAiB;yCAAjB,iBAAiB;0CAAjB,iBAAiB;0CAAjB,iBAAiB;CAAI"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":";;;;;;;;;;;AAeA,qBAoBa,iBAAiB;yCAAjB,iBAAiB;0CAAjB,iBAAiB;0CAAjB,iBAAiB;CAAI"}

package/dist/lib/module.js

@@ -1,22 +1,28 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 // Kendo UI Angular imports
 import { GridModule } from '@progress/kendo-angular-grid';
 import { DialogsModule } from "@progress/kendo-angular-dialog";
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import { InputsModule } from '@progress/kendo-angular-inputs';
 import { DataContextComponent } from './ng-data-context.component';
 import { DataContextDialogComponent } from './ng-data-context-dialog.component';
+import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
 import * as i0 from "@angular/core";
 export class DataContextModule {
 }
 DataContextModule.ɵfac = function DataContextModule_Factory(t) { return new (t || DataContextModule)(); };
 DataContextModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DataContextModule });
 DataContextModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        FormsModule,
         GridModule,
         DialogsModule,
         ButtonsModule,
-        IndicatorsModule] });
+        IndicatorsModule,
+        InputsModule,
+        ContainerDirectivesModule] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataContextModule, [{
         type: NgModule,
         args: [{
@@ -26,10 +32,13 @@ DataContextModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Common
                 ],
                 imports: [
                     CommonModule,
+                    FormsModule,
                     GridModule,
                     DialogsModule,
                     ButtonsModule,
-                    IndicatorsModule
+                    IndicatorsModule,
+                    InputsModule,
+                    ContainerDirectivesModule
                 ],
                 exports: [
                     DataContextComponent,
@@ -39,9 +48,12 @@ DataContextModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Common
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DataContextModule, { declarations: [DataContextComponent,
         DataContextDialogComponent], imports: [CommonModule,
+        FormsModule,
         GridModule,
         DialogsModule,
         ButtonsModule,
-        IndicatorsModule], exports: [DataContextComponent,
+        IndicatorsModule,
+        InputsModule,
+        ContainerDirectivesModule], exports: [DataContextComponent,
         DataContextDialogComponent] }); })();
 //# sourceMappingURL=module.js.map

package/dist/lib/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,2BAA2B;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;;AAmBhF,MAAM,OAAO,iBAAiB;;kFAAjB,iBAAiB;mEAAjB,iBAAiB;uEAX1B,YAAY;QACZ,UAAU;QACV,aAAa;QACb,aAAa;QACb,gBAAgB;iFAOP,iBAAiB;cAjB7B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;oBACpB,0BAA0B;iBAC3B;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,UAAU;oBACV,aAAa;oBACb,aAAa;oBACb,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,oBAAoB;oBACpB,0BAA0B;iBAC3B;aACF;;wFACY,iBAAiB,mBAf1B,oBAAoB;QACpB,0BAA0B,aAG1B,YAAY;QACZ,UAAU;QACV,aAAa;QACb,aAAa;QACb,gBAAgB,aAGhB,oBAAoB;QACpB,0BAA0B"}
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,2BAA2B;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;;AAsBpF,MAAM,OAAO,iBAAiB;;kFAAjB,iBAAiB;mEAAjB,iBAAiB;uEAd1B,YAAY;QACZ,WAAW;QACX,UAAU;QACV,aAAa;QACb,aAAa;QACb,gBAAgB;QAChB,YAAY;QACZ,yBAAyB;iFAOhB,iBAAiB;cApB7B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;oBACpB,0BAA0B;iBAC3B;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,UAAU;oBACV,aAAa;oBACb,aAAa;oBACb,gBAAgB;oBAChB,YAAY;oBACZ,yBAAyB;iBAC1B;gBACD,OAAO,EAAE;oBACP,oBAAoB;oBACpB,0BAA0B;iBAC3B;aACF;;wFACY,iBAAiB,mBAlB1B,oBAAoB;QACpB,0BAA0B,aAG1B,YAAY;QACZ,WAAW;QACX,UAAU;QACV,aAAa;QACb,aAAa;QACb,gBAAgB;QAChB,YAAY;QACZ,yBAAyB,aAGzB,oBAAoB;QACpB,0BAA0B"}

package/dist/lib/ng-data-context-dialog.component.d.ts

@@ -2,14 +2,19 @@ import { EventEmitter } from '@angular/core';
 import { IMetadataProvider } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 /**
- * Simple dialog wrapper component for the data context component
+ * Enhanced dialog wrapper component for the data context viewer
  */
 export declare class DataContextDialogComponent {
     dialogClosed: EventEmitter<any>;
     dataContextId: string;
+    dataContextName?: string;
     Provider: IMetadataProvider | null;
-    closePropertiesDialog(): void;
+    isMaximized: boolean;
+    get dialogWidth(): number;
+    get dialogHeight(): number;
+    closeDialog(): void;
+    toggleMaximize(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataContextDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataContextDialogComponent, "mj-data-context-dialog", never, { "dataContextId": { "alias": "dataContextId"; "required": false; }; "Provider": { "alias": "Provider"; "required": false; }; }, { "dialogClosed": "dialogClosed"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataContextDialogComponent, "mj-data-context-dialog", never, { "dataContextId": { "alias": "dataContextId"; "required": false; }; "dataContextName": { "alias": "dataContextName"; "required": false; }; "Provider": { "alias": "Provider"; "required": false; }; }, { "dialogClosed": "dialogClosed"; }, never, never, false, never>;
 }
 //# sourceMappingURL=ng-data-context-dialog.component.d.ts.map

package/dist/lib/ng-data-context-dialog.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ng-data-context-dialog.component.d.ts","sourceRoot":"","sources":["../../src/lib/ng-data-context-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;;AAEzD;;GAEG;AACH,qBAKa,0BAA0B;IAC3B,YAAY,oBAAsB;IACnC,aAAa,EAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAEnD,qBAAqB;yCALV,0BAA0B;2CAA1B,0BAA0B;CAQtC"}
+{"version":3,"file":"ng-data-context-dialog.component.d.ts","sourceRoot":"","sources":["../../src/lib/ng-data-context-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;;AAEzD;;GAEG;AACH,qBAKa,0BAA0B;IAC3B,YAAY,oBAAsB;IACnC,aAAa,EAAG,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAE5C,WAAW,EAAE,OAAO,CAAS;IAEpC,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,WAAW,IAAI,IAAI;IAInB,cAAc,IAAI,IAAI;yCApBX,0BAA0B;2CAA1B,0BAA0B;CAuBtC"}

package/dist/lib/ng-data-context-dialog.component.js

@@ -3,38 +3,71 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dialog";
 import * as i2 from "./ng-data-context.component";
 /**
- * Simple dialog wrapper component for the data context component
+ * Enhanced dialog wrapper component for the data context viewer
  */
 export class DataContextDialogComponent {
     constructor() {
         this.dialogClosed = new EventEmitter();
         this.Provider = null;
+        this.isMaximized = false;
     }
-    closePropertiesDialog() {
+    get dialogWidth() {
+        return this.isMaximized ? window.innerWidth * 0.95 : 900;
+    }
+    get dialogHeight() {
+        return this.isMaximized ? window.innerHeight * 0.95 : 700;
+    }
+    closeDialog() {
         this.dialogClosed.emit();
     }
+    toggleMaximize() {
+        this.isMaximized = !this.isMaximized;
+    }
 }
 DataContextDialogComponent.ɵfac = function DataContextDialogComponent_Factory(t) { return new (t || DataContextDialogComponent)(); };
-DataContextDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataContextDialogComponent, selectors: [["mj-data-context-dialog"]], inputs: { dataContextId: "dataContextId", Provider: "Provider" }, outputs: { dialogClosed: "dialogClosed" }, decls: 4, vars: 7, consts: [[1, "k-overlay"], ["title", "Data Context", 1, "kendo-window-custom", 3, "close", "width", "height", "minHeight", "minWidth", "resizable"], [3, "dataContextId", "Provider"]], template: function DataContextDialogComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div");
-        i0.ɵɵelement(1, "div", 0);
-        i0.ɵɵelementStart(2, "kendo-window", 1);
-        i0.ɵɵlistener("close", function DataContextDialogComponent_Template_kendo_window_close_2_listener() { return ctx.closePropertiesDialog(); });
-        i0.ɵɵelement(3, "mj-data-context", 2);
+DataContextDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataContextDialogComponent, selectors: [["mj-data-context-dialog"]], inputs: { dataContextId: "dataContextId", dataContextName: "dataContextName", Provider: "Provider" }, outputs: { dialogClosed: "dialogClosed" }, decls: 15, vars: 16, consts: [[1, "data-context-dialog-wrapper"], [1, "k-overlay"], [1, "data-context-window", 3, "close", "width", "height", "minHeight", "minWidth", "resizable", "draggable"], [1, "window-title"], [1, "fa-solid", "fa-layer-group", "title-icon"], [1, "window-actions"], [1, "window-action-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Close", 1, "window-action-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "dialog-content"], [3, "dataContextId", "Provider"]], template: function DataContextDialogComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵelement(1, "div", 1);
+        i0.ɵɵelementStart(2, "kendo-window", 2);
+        i0.ɵɵlistener("close", function DataContextDialogComponent_Template_kendo_window_close_2_listener() { return ctx.closeDialog(); });
+        i0.ɵɵelementStart(3, "kendo-window-titlebar")(4, "div", 3);
+        i0.ɵɵelement(5, "i", 4);
+        i0.ɵɵelementStart(6, "span");
+        i0.ɵɵtext(7);
         i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(8, "div", 5)(9, "button", 6);
+        i0.ɵɵlistener("click", function DataContextDialogComponent_Template_button_click_9_listener() { return ctx.toggleMaximize(); });
+        i0.ɵɵelement(10, "i", 7);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(11, "button", 8);
+        i0.ɵɵlistener("click", function DataContextDialogComponent_Template_button_click_11_listener() { return ctx.closeDialog(); });
+        i0.ɵɵelement(12, "i", 9);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(13, "div", 10);
+        i0.ɵɵelement(14, "mj-data-context", 11);
+        i0.ɵɵelementEnd()()();
     } if (rf & 2) {
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("width", 700)("height", 525)("minHeight", 300)("minWidth", 400)("resizable", true);
+        i0.ɵɵclassProp("maximized", ctx.isMaximized);
+        i0.ɵɵproperty("width", ctx.dialogWidth)("height", ctx.dialogHeight)("minHeight", 400)("minWidth", 600)("resizable", !ctx.isMaximized)("draggable", !ctx.isMaximized);
+        i0.ɵɵadvance(5);
+        i0.ɵɵtextInterpolate1("Data Context", ctx.dataContextName ? ": " + ctx.dataContextName : "", "");
+        i0.ɵɵadvance(2);
+        i0.ɵɵpropertyInterpolate("title", ctx.isMaximized ? "Restore" : "Maximize");
         i0.ɵɵadvance();
+        i0.ɵɵclassProp("fa-maximize", !ctx.isMaximized)("fa-compress", ctx.isMaximized);
+        i0.ɵɵadvance(4);
         i0.ɵɵproperty("dataContextId", ctx.dataContextId)("Provider", ctx.Provider);
-    } }, dependencies: [i1.WindowComponent, i2.DataContextComponent] });
+    } }, dependencies: [i1.WindowComponent, i1.WindowTitleBarComponent, i2.DataContextComponent], styles: [".data-context-dialog-wrapper[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.data-context-window[_ngcontent-%COMP%] {\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n}\n\n\n\n[_nghost-%COMP%]     .k-window {\n    margin: 0 auto;\n    top: 10% !important;\n    position: fixed !important;\n}\n\n\n.data-context-window.maximized[_ngcontent-%COMP%] {\n    position: fixed !important;\n    top: 2.5% !important;\n    left: 2.5% !important;\n}\n\n\n\n.window-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 16px;\n    font-weight: 500;\n    color: #333333;\n}\n\n.title-icon[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 18px;\n}\n\n.window-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-left: auto;\n}\n\n.window-action-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 8px 10px;\n    cursor: pointer;\n    color: #656565;\n    transition: all 0.2s;\n    border-radius: 4px;\n    font-size: 14px;\n}\n\n.window-action-btn[_ngcontent-%COMP%]:hover {\n    background-color: #e3f2fd;\n    color: #2196f3;\n}\n\n.window-action-btn[_ngcontent-%COMP%]:last-child:hover {\n    background-color: #ffebee;\n    color: #f44336;\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n[_nghost-%COMP%]     .k-window-titlebar {\n    background-color: #ffffff;\n    border-bottom: 1px solid #e2e8f0;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n[_nghost-%COMP%]     .k-window-title {\n    display: contents;\n}\n\n[_nghost-%COMP%]     .k-window-actions {\n    display: none; \n\n}\n\n[_nghost-%COMP%]     .k-window-content {\n    padding: 0;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n[_nghost-%COMP%]     .k-window {\n    border: none;\n}\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n        transform: scale(0.95);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n.data-context-window[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataContextDialogComponent, [{
         type: Component,
-        args: [{ selector: 'mj-data-context-dialog', template: "<div>\n    <div class=\"k-overlay\"></div>\n    <kendo-window \n        class=\"kendo-window-custom\"\n        [width]=\"700\"\n        [height]=\"525\"\n        [minHeight]=\"300\"\n        [minWidth]=\"400\"\n        [resizable]=\"true\"\n        title=\"Data Context\"\n        (close)=\"closePropertiesDialog()\"\n    >\n        <mj-data-context \n                [dataContextId]=\"dataContextId\" \n                [Provider]=\"Provider\"\n        ></mj-data-context>\n    </kendo-window>\n</div>" }]
+        args: [{ selector: 'mj-data-context-dialog', template: "<div class=\"data-context-dialog-wrapper\">\n    <div class=\"k-overlay\"></div>\n    <kendo-window \n        class=\"data-context-window\"\n        [class.maximized]=\"isMaximized\"\n        [width]=\"dialogWidth\"\n        [height]=\"dialogHeight\"\n        [minHeight]=\"400\"\n        [minWidth]=\"600\"\n        [resizable]=\"!isMaximized\"\n        [draggable]=\"!isMaximized\"\n        (close)=\"closeDialog()\">\n        \n        <kendo-window-titlebar>\n            <div class=\"window-title\">\n                <i class=\"fa-solid fa-layer-group title-icon\"></i>\n                <span>Data Context{{ dataContextName ? ': ' + dataContextName : '' }}</span>\n            </div>\n            <div class=\"window-actions\">\n                <button \n                    (click)=\"toggleMaximize()\"\n                    title=\"{{ isMaximized ? 'Restore' : 'Maximize' }}\"\n                    class=\"window-action-btn\">\n                    <i class=\"fa-solid\" [class.fa-maximize]=\"!isMaximized\" [class.fa-compress]=\"isMaximized\"></i>\n                </button>\n                <button \n                    (click)=\"closeDialog()\"\n                    title=\"Close\"\n                    class=\"window-action-btn\">\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            </div>\n        </kendo-window-titlebar>\n        \n        <div class=\"dialog-content\">\n            <mj-data-context \n                [dataContextId]=\"dataContextId\" \n                [Provider]=\"Provider\">\n            </mj-data-context>\n        </div>\n    </kendo-window>\n</div>", styles: [".data-context-dialog-wrapper {\n    position: relative;\n}\n\n.data-context-window {\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n}\n\n/* Position the window properly */\n:host ::ng-deep .k-window {\n    margin: 0 auto;\n    top: 10% !important;\n    position: fixed !important;\n}\n\n\n.data-context-window.maximized {\n    position: fixed !important;\n    top: 2.5% !important;\n    left: 2.5% !important;\n}\n\n/* Custom Title Bar */\n.window-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 16px;\n    font-weight: 500;\n    color: #333333;\n}\n\n.title-icon {\n    color: #2196f3;\n    font-size: 18px;\n}\n\n.window-actions {\n    display: flex;\n    gap: 4px;\n    margin-left: auto;\n}\n\n.window-action-btn {\n    background: none;\n    border: none;\n    padding: 8px 10px;\n    cursor: pointer;\n    color: #656565;\n    transition: all 0.2s;\n    border-radius: 4px;\n    font-size: 14px;\n}\n\n.window-action-btn:hover {\n    background-color: #e3f2fd;\n    color: #2196f3;\n}\n\n.window-action-btn:last-child:hover {\n    background-color: #ffebee;\n    color: #f44336;\n}\n\n/* Dialog Content */\n.dialog-content {\n    height: 100%;\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Override Kendo Window Styles */\n:host ::ng-deep .k-window-titlebar {\n    background-color: #ffffff;\n    border-bottom: 1px solid #e2e8f0;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n:host ::ng-deep .k-window-title {\n    display: contents;\n}\n\n:host ::ng-deep .k-window-actions {\n    display: none; /* Hide default Kendo window actions since we have custom ones */\n}\n\n:host ::ng-deep .k-window-content {\n    padding: 0;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n:host ::ng-deep .k-window {\n    border: none;\n}\n\n/* Animations */\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: scale(0.95);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n.data-context-window {\n    animation: fadeIn 0.2s ease-out;\n}"] }]
     }], null, { dialogClosed: [{
             type: Output
         }], dataContextId: [{
             type: Input
+        }], dataContextName: [{
+            type: Input
         }], Provider: [{
             type: Input
         }] }); })();

package/dist/lib/ng-data-context-dialog.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"ng-data-context-dialog.component.js","sourceRoot":"","sources":["../../src/lib/ng-data-context-dialog.component.ts","../../src/lib/ng-data-context-dialog.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;;AAGvE;;GAEG;AAMH,MAAM,OAAO,0BAA0B;IALvC;QAMY,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QAEnC,aAAQ,GAA6B,IAAI,CAAC;KAKpD;IAHC,qBAAqB;QACnB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;;oGAPU,0BAA0B;6EAA1B,0BAA0B;QCXvC,2BAAK;QACD,yBAA6B;QAC7B,uCASC;QADG,6GAAS,2BAAuB,IAAC;QAEjC,qCAGmB;QAE3B,AADI,iBAAe,EACb;;QAbE,eAAa;QAIb,AADA,AADA,AADA,AADA,2BAAa,eACC,kBACG,iBACD,mBACE;QAKV,cAA+B;QAC/B,AADA,iDAA+B,0BACV;;iFDHxB,0BAA0B;cALtC,SAAS;2BACE,wBAAwB;gBAKxB,YAAY;kBAArB,MAAM;YACE,aAAa;kBAArB,KAAK;YACG,QAAQ;kBAAhB,KAAK;;kFAHK,0BAA0B"}
+{"version":3,"file":"ng-data-context-dialog.component.js","sourceRoot":"","sources":["../../src/lib/ng-data-context-dialog.component.ts","../../src/lib/ng-data-context-dialog.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;;AAGvE;;GAEG;AAMH,MAAM,OAAO,0BAA0B;IALvC;QAMY,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QAGnC,aAAQ,GAA6B,IAAI,CAAC;QAE5C,gBAAW,GAAY,KAAK,CAAC;KAiBrC;IAfC,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAC3D,CAAC;IAED,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5D,CAAC;IAED,WAAW;QACT,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACvC,CAAC;;oGAtBU,0BAA0B;6EAA1B,0BAA0B;QCXvC,8BAAyC;QACrC,yBAA6B;QAC7B,uCAS4B;QAAxB,6GAAS,iBAAa,IAAC;QAGnB,AADJ,6CAAuB,aACO;QACtB,uBAAkD;QAClD,4BAAM;QAAA,YAA+D;QACzE,AADyE,iBAAO,EAC1E;QAEF,AADJ,8BAA4B,gBAIM;QAF1B,uGAAS,oBAAgB,IAAC;QAG1B,wBAA6F;QACjG,iBAAS;QACT,kCAG8B;QAF1B,wGAAS,iBAAa,IAAC;QAGvB,wBAAiC;QAG7C,AADI,AADI,iBAAS,EACP,EACc;QAExB,gCAA4B;QACxB,uCAGkB;QAG9B,AADI,AADI,iBAAM,EACK,EACb;;QArCE,eAA+B;QAA/B,4CAA+B;QAM/B,AADA,AADA,AADA,AADA,AADA,uCAAqB,4BACE,kBACN,iBACD,+BACU,+BACA;QAMZ,eAA+D;QAA/D,gGAA+D;QAKjE,eAAkD;QAAlD,2EAAkD;QAE9B,cAAkC;QAAC,AAAnC,+CAAkC,gCAAkC;QAa5F,eAA+B;QAC/B,AADA,iDAA+B,0BACV;;iFD1BxB,0BAA0B;cALtC,SAAS;2BACE,wBAAwB;gBAKxB,YAAY;kBAArB,MAAM;YACE,aAAa;kBAArB,KAAK;YACG,eAAe;kBAAvB,KAAK;YACG,QAAQ;kBAAhB,KAAK;;kFAJK,0BAA0B"}

package/dist/lib/ng-data-context.component.d.ts

@@ -1,16 +1,41 @@
 import { OnInit } from '@angular/core';
 import { IMetadataProvider } from '@memberjunction/core';
-import { DataContextEntity } from '@memberjunction/core-entities';
+import { DataContextEntity, DataContextItemEntity } from '@memberjunction/core-entities';
 import * as i0 from "@angular/core";
 export declare class DataContextComponent implements OnInit {
     dataContextId: string;
     Provider: IMetadataProvider | null;
     dataContextRecord?: DataContextEntity;
-    dataContextItems: any;
+    dataContextItems: DataContextItemEntity[];
     showLoader: boolean;
+    errorMessage: string;
+    searchTerm: string;
+    showSQLPreview: boolean;
+    previewSQL: string;
+    copiedField: string;
+    expandedItems: {
+        [key: string]: boolean;
+    };
     get ProviderToUse(): IMetadataProvider;
+    get filteredItems(): DataContextItemEntity[];
+    get itemCount(): number;
     ngOnInit(): void;
     LoadDataContext(dataContextId: string): Promise<void>;
+    getTypeIcon(type: string): string;
+    getTypeColor(type: string): string;
+    getEntityName(entityId: string | null): string | undefined;
+    getViewName(viewId: string): Promise<string | undefined>;
+    getQueryName(queryId: string): Promise<string | undefined>;
+    onSearchChange(): void;
+    toggleItemExpansion(itemId: string): void;
+    copyToClipboard(text: string, fieldName: string): Promise<void>;
+    previewSQLCode(sql: string): void;
+    closeSQLPreview(): void;
+    navigateToEntity(entityId: string): void;
+    navigateToView(viewId: string): void;
+    navigateToQuery(queryId: string): void;
+    refresh(): Promise<void>;
+    exportToCSV(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataContextComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DataContextComponent, "mj-data-context", never, { "dataContextId": { "alias": "dataContextId"; "required": false; }; "Provider": { "alias": "Provider"; "required": false; }; }, {}, never, never, false, never>;
 }

package/dist/lib/ng-data-context.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ng-data-context.component.d.ts","sourceRoot":"","sources":["../../src/lib/ng-data-context.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAiD,MAAM,sBAAsB,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;;AAElE,qBAKa,oBAAqB,YAAW,MAAM;IACxC,aAAa,EAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAE5C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,gBAAgB,EAAE,GAAG,CAAM;IAC3B,UAAU,EAAE,OAAO,CAAS;IAEnC,IAAW,aAAa,IAAI,iBAAiB,CAE5C;IAED,QAAQ,IAAI,IAAI;IAOV,eAAe,CAAC,aAAa,EAAE,MAAM;yCAnBhC,oBAAoB;2CAApB,oBAAoB;CA0ChC"}
+{"version":3,"file":"ng-data-context.component.d.ts","sourceRoot":"","sources":["../../src/lib/ng-data-context.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAiD,MAAM,sBAAsB,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAEzF,qBAKa,oBAAqB,YAAW,MAAM;IACxC,aAAa,EAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAE5C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,gBAAgB,EAAE,qBAAqB,EAAE,CAAM;IAC/C,UAAU,EAAE,OAAO,CAAS;IAC5B,YAAY,EAAE,MAAM,CAAM;IAC1B,UAAU,EAAE,MAAM,CAAM;IAGxB,cAAc,EAAE,OAAO,CAAS;IAChC,UAAU,EAAE,MAAM,CAAM;IACxB,WAAW,EAAE,MAAM,CAAM;IACzB,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAM;IAEtD,IAAW,aAAa,IAAI,iBAAiB,CAE5C;IAED,IAAW,aAAa,IAAI,qBAAqB,EAAE,CAYlD;IAED,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED,QAAQ,IAAI,IAAI;IAOV,eAAe,CAAC,aAAa,EAAE,MAAM;IAgCpC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAYjC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAYlC,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS;IAMpD,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;IAWxD,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;IAWhE,cAAc,IAAI,IAAI;IAKtB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAInC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAYrE,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKjC,eAAe,IAAI,IAAI;IAKvB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAKxC,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAKpC,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKhC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAK9B,WAAW,IAAI,IAAI;yCApLf,oBAAoB;2CAApB,oBAAoB;CA0MhC"}