@memberjunction/ng-list-detail-grid 5.22.0 → 5.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/lib/ng-list-detail-grid.component.js +2 -2
  2. package/package.json +7 -7
package/dist/lib/ng-list-detail-grid.component.js CHANGED
@@ -358,11 +358,11 @@ export class ListDetailGridComponent {
358
358
  i0.ɵɵconditional(!ctx.isLoading && !ctx.listLoaded && !ctx.listId && !ctx.listEntity ? 2 : -1);
359
359
  i0.ɵɵadvance();
360
360
  i0.ɵɵconditional(ctx.listLoaded && ctx.gridParams ? 3 : -1);
361
- } }, dependencies: [i2.EntityDataGridComponent, i3.LoadingComponent], styles: ["[_nghost-%COMP%] {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.list-detail-grid-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.list-detail-grid-wrap[_ngcontent-%COMP%] {\n height: calc(100vh - 20px);\n}\n\n.list-detail-grid-column-header[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface);\n font-size: var(--mj-text-xl);\n font-weight: bold;\n}\n\n.title-wrapper[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 0;\n border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-2xl);\n line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n font-size: var(--mj-text-base);\n background: transparent;\n border: none;\n box-sizing: border-box;\n padding-left: 40px;\n\n }\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] {\n background: var(--light-shade);\n width: 360px;\n height: 44px;\n position: relative;\n border-radius: var(--mj-radius-lg);\n }\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 12px;\n}\n.k-table-td[_ngcontent-%COMP%] {\n border-right: none !important;\n}.btn-cmn[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n min-width: 44px;\n background: transparent;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n border: 1px solid var(--border-blue);\n}\n .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n border: 1px solid var(--gray-color);\n border-radius: var(--mj-radius-md); padding: 10px 25px;\n background: var(--white-color);\n color: var(--sideNav);\n}\n .list-detail-grid-wrap .k-grid-aria-root .k-grid-header .k-grid-header-table thead tr th {\n border-right: none;\n border-inline-start-width: 0;\n color: var(--thead-color);\n}\n .list-detail-grid-wrap .k-grid-aria-root kendo-grid-list .k-grid-table tbody tr td { \n border-inline-start-width: 0;\n color: var(--tdata-color);\n font-weight: 500;\n border-bottom-width: 1px;\n}"] });
361
+ } }, dependencies: [i2.EntityDataGridComponent, i3.LoadingComponent], styles: ["[_nghost-%COMP%] {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.list-detail-grid-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.list-detail-grid-wrap[_ngcontent-%COMP%] {\n height: calc(100vh - 20px);\n}\n\n.list-detail-grid-column-header[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface);\n font-size: var(--mj-text-xl);\n font-weight: bold;\n}\n\n.title-wrapper[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 0;\n border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-2xl);\n line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n font-size: var(--mj-text-base);\n background: transparent;\n border: none;\n box-sizing: border-box;\n padding-left: 40px;\n\n }\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] {\n background: var(--light-shade);\n width: 360px;\n height: 44px;\n position: relative;\n border-radius: var(--mj-radius-lg);\n }\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 12px;\n}\n.k-table-td[_ngcontent-%COMP%] {\n border-right: none !important;\n}.btn-cmn[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n min-width: 44px;\n background: transparent;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n border: 1px solid var(--border-blue);\n}\n .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n border: 1px solid var(--gray-color);\n border-radius: var(--mj-radius-md); padding: 10px 25px;\n background: var(--white-color);\n color: var(--sideNav);\n}\n .list-detail-grid-wrap .k-grid-aria-root .k-grid-header .k-grid-header-table thead tr th {\n border-right: none;\n border-inline-start-width: 0;\n color: var(--thead-color);\n}\n .list-detail-grid-wrap .k-grid-aria-root .k-grid-table tbody tr td {\n border-inline-start-width: 0;\n color: var(--tdata-color);\n font-weight: 500;\n border-bottom-width: 1px;\n}"] });
362
362
  }
363
363
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListDetailGridComponent, [{
364
364
  type: Component,
365
- args: [{ standalone: false, selector: 'mj-list-detail-grid', template: "<div class=\"list-detail-grid-container\">\n <!-- Loading state while list is being loaded -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading list...\"></mj-loading>\n </div>\n }\n\n <!-- Empty state when no list is selected -->\n @if (!isLoading && !listLoaded && !listId && !listEntity) {\n <div class=\"empty-state\">\n <span class=\"fa-solid fa-rectangle-list empty-icon\"></span>\n <p>Select a list to view its records</p>\n </div>\n }\n\n <!-- Grid display when list is loaded -->\n @if (listLoaded && gridParams) {\n <mj-entity-data-grid\n #entityDataGrid\n [Params]=\"gridParams\"\n [Height]=\"height\"\n [ShowToolbar]=\"showToolbar\"\n [ToolbarConfig]=\"effectiveToolbarConfig\"\n [SelectionMode]=\"selectionMode\"\n (AfterRowClick)=\"onRowClick($event)\"\n (AfterRowDoubleClick)=\"onRowDoubleClick($event)\"\n (AfterDataLoad)=\"onDataLoaded($event)\"\n (SelectionChange)=\"onSelectionChange($event)\">\n </mj-entity-data-grid>\n }\n</div>\n", styles: [":host {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.list-detail-grid-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.list-detail-grid-wrap {\n height: calc(100vh - 20px);\n}\n\n.list-detail-grid-column-header {\n background-color: var(--mj-bg-surface);\n font-size: var(--mj-text-xl);\n font-weight: bold;\n}\n\n.title-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 0;\n border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper h4 {\n margin: 0;\n font-size: var(--mj-text-2xl);\n line-height: 28px;\n }\n .main-fav-wrapper {\n background: var(--mj-bg-surface);\n padding: 20px;\n }\n .filter-wrapper {\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n align-items: center;\n}\n .title-wrapper .search input {\n width: 100%;\n height: 100%;\n font-size: var(--mj-text-base);\n background: transparent;\n border: none;\n box-sizing: border-box;\n padding-left: 40px;\n\n }\n .title-wrapper .search {\n background: var(--light-shade);\n width: 360px;\n height: 44px;\n position: relative;\n border-radius: var(--mj-radius-lg);\n }\n .title-wrapper .search svg {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 12px;\n}\n.k-table-td {\n border-right: none !important;\n}.btn-cmn {\n width: 44px;\n height: 44px;\n min-width: 44px;\n background: transparent;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--gray-color);\n}\n.btn-cmn.active {\n border: 1px solid var(--border-blue);\n}\n::ng-deep .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n border: 1px solid var(--gray-color);\n border-radius: var(--mj-radius-md); padding: 10px 25px;\n background: var(--white-color);\n color: var(--sideNav);\n}\n::ng-deep .list-detail-grid-wrap .k-grid-aria-root .k-grid-header .k-grid-header-table thead tr th {\n border-right: none;\n border-inline-start-width: 0;\n color: var(--thead-color);\n}\n::ng-deep .list-detail-grid-wrap .k-grid-aria-root kendo-grid-list .k-grid-table tbody tr td { \n border-inline-start-width: 0;\n color: var(--tdata-color);\n font-weight: 500;\n border-bottom-width: 1px;\n} "] }]
365
+ args: [{ standalone: false, selector: 'mj-list-detail-grid', template: "<div class=\"list-detail-grid-container\">\n <!-- Loading state while list is being loaded -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading list...\"></mj-loading>\n </div>\n }\n\n <!-- Empty state when no list is selected -->\n @if (!isLoading && !listLoaded && !listId && !listEntity) {\n <div class=\"empty-state\">\n <span class=\"fa-solid fa-rectangle-list empty-icon\"></span>\n <p>Select a list to view its records</p>\n </div>\n }\n\n <!-- Grid display when list is loaded -->\n @if (listLoaded && gridParams) {\n <mj-entity-data-grid\n #entityDataGrid\n [Params]=\"gridParams\"\n [Height]=\"height\"\n [ShowToolbar]=\"showToolbar\"\n [ToolbarConfig]=\"effectiveToolbarConfig\"\n [SelectionMode]=\"selectionMode\"\n (AfterRowClick)=\"onRowClick($event)\"\n (AfterRowDoubleClick)=\"onRowDoubleClick($event)\"\n (AfterDataLoad)=\"onDataLoaded($event)\"\n (SelectionChange)=\"onSelectionChange($event)\">\n </mj-entity-data-grid>\n }\n</div>\n", styles: [":host {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.list-detail-grid-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.list-detail-grid-wrap {\n height: calc(100vh - 20px);\n}\n\n.list-detail-grid-column-header {\n background-color: var(--mj-bg-surface);\n font-size: var(--mj-text-xl);\n font-weight: bold;\n}\n\n.title-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 0;\n border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper h4 {\n margin: 0;\n font-size: var(--mj-text-2xl);\n line-height: 28px;\n }\n .main-fav-wrapper {\n background: var(--mj-bg-surface);\n padding: 20px;\n }\n .filter-wrapper {\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n align-items: center;\n}\n .title-wrapper .search input {\n width: 100%;\n height: 100%;\n font-size: var(--mj-text-base);\n background: transparent;\n border: none;\n box-sizing: border-box;\n padding-left: 40px;\n\n }\n .title-wrapper .search {\n background: var(--light-shade);\n width: 360px;\n height: 44px;\n position: relative;\n border-radius: var(--mj-radius-lg);\n }\n .title-wrapper .search svg {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 12px;\n}\n.k-table-td {\n border-right: none !important;\n}.btn-cmn {\n width: 44px;\n height: 44px;\n min-width: 44px;\n background: transparent;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--gray-color);\n}\n.btn-cmn.active {\n border: 1px solid var(--border-blue);\n}\n::ng-deep .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n border: 1px solid var(--gray-color);\n border-radius: var(--mj-radius-md); padding: 10px 25px;\n background: var(--white-color);\n color: var(--sideNav);\n}\n::ng-deep .list-detail-grid-wrap .k-grid-aria-root .k-grid-header .k-grid-header-table thead tr th {\n border-right: none;\n border-inline-start-width: 0;\n color: var(--thead-color);\n}\n::ng-deep .list-detail-grid-wrap .k-grid-aria-root .k-grid-table tbody tr td {\n border-inline-start-width: 0;\n color: var(--tdata-color);\n font-weight: 500;\n border-bottom-width: 1px;\n}"] }]
366
366
  }], () => [{ type: i1.SharedService }, { type: i0.ChangeDetectorRef }], { listId: [{
367
367
  type: Input
368
368
  }], listEntity: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-list-detail-grid",
3
- "version": "5.22.0",
3
+ "version": "5.23.0",
4
4
  "description": "MemberJunction: Angular Grid to display dynamic and saved List Details for any entity in MemberJunction.",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -25,12 +25,12 @@
25
25
  "@angular/router": "21.1.3"
26
26
  },
27
27
  "dependencies": {
28
- "@memberjunction/core": "5.22.0",
29
- "@memberjunction/core-entities": "5.22.0",
30
- "@memberjunction/global": "5.22.0",
31
- "@memberjunction/ng-entity-viewer": "5.22.0",
32
- "@memberjunction/ng-shared": "5.22.0",
33
- "@memberjunction/ng-shared-generic": "5.22.0",
28
+ "@memberjunction/core": "5.23.0",
29
+ "@memberjunction/core-entities": "5.23.0",
30
+ "@memberjunction/global": "5.23.0",
31
+ "@memberjunction/ng-entity-viewer": "5.23.0",
32
+ "@memberjunction/ng-shared": "5.23.0",
33
+ "@memberjunction/ng-shared-generic": "5.23.0",
34
34
  "rxjs": "~7.8.2",
35
35
  "tslib": "^2.8.1"
36
36
  },