@onecx/angular-accelerator 5.20.1 → 5.21.0

package/esm2022/lib/utils/create-remote-component-translate-loader.utils.mjs

@@ -16,8 +16,10 @@ export function createRemoteComponentTranslateLoader(http, baseUrlReplaySubject$
         new CachingTranslateLoader(ts, http, `./assets/i18n/`, '.json'), 
         // translations of portal-integration-angular of app
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(baseUrl, `onecx-portal-lib/assets/i18n/`), '.json'), 
+        // translations of portal-integration-angular of shell
+        new CachingTranslateLoader(ts, http, `./onecx-portal-lib/assets/i18n/`, '.json'), 
         // translations of the app
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(baseUrl, `assets/i18n/`), '.json'));
     }), tap(() => console.timeEnd('createRemoteComponentTranslateLoader_' + timerId))));
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLXJlbW90ZS1jb21wb25lbnQtdHJhbnNsYXRlLWxvYWRlci51dGlscy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1hY2NlbGVyYXRvci9zcmMvbGliL3V0aWxzL2NyZWF0ZS1yZW1vdGUtY29tcG9uZW50LXRyYW5zbGF0ZS1sb2FkZXIudXRpbHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBRTFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFFdEMsT0FBTyxFQUFFLEdBQUcsRUFBaUIsR0FBRyxFQUFFLE1BQU0sTUFBTSxDQUFBO0FBQzlDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFBO0FBQy9FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFBO0FBQ3JFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ3pFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBRXJFLElBQUksMEJBQTBCLEdBQUcsQ0FBQyxDQUFBO0FBRWxDLE1BQU0sVUFBVSxvQ0FBb0MsQ0FDbEQsSUFBZ0IsRUFDaEIscUJBQTRDLEVBQzVDLHVCQUFpRDtJQUVqRCxNQUFNLEVBQUUsR0FBRyx1QkFBdUIsSUFBSSxNQUFNLENBQUMsdUJBQXVCLENBQUMsQ0FBQTtJQUNyRSxNQUFNLE9BQU8sR0FBRywwQkFBMEIsRUFBRSxDQUFBO0lBRTVDLE9BQU8sQ0FBQyxJQUFJLENBQUMsdUNBQXVDLEdBQUcsT0FBTyxDQUFDLENBQUE7SUFDL0QsT0FBTyxJQUFJLG9CQUFvQixDQUM3QixxQkFBcUIsQ0FBQyxJQUFJLENBQ3hCLEdBQUcsQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFO1FBQ2QsT0FBTyxJQUFJLHVCQUF1QjtRQUNoQyxxREFBcUQ7UUFDckQsSUFBSSxzQkFBc0IsQ0FBQyxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE9BQU8sQ0FBQztRQUMvRCxvREFBb0Q7UUFDcEQsSUFBSSxzQkFBc0IsQ0FDeEIsRUFBRSxFQUNGLElBQUksRUFDSixRQUFRLENBQUMsYUFBYSxDQUFDLE9BQU8sRUFBRSwrQkFBK0IsQ0FBQyxFQUNoRSxPQUFPLENBQ1I7UUFDRCwwQkFBMEI7UUFDMUIsSUFBSSxzQkFBc0IsQ0FBQyxFQUFFLEVBQUUsSUFBSSxFQUFFLFFBQVEsQ0FBQyxhQUFhLENBQUMsT0FBTyxFQUFFLGNBQWMsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxDQUMvRixDQUFBO0lBQ0gsQ0FBQyxDQUFDLEVBQ0YsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsdUNBQXVDLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FDOUUsQ0FDRixDQUFBO0FBQ0gsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IExvY2F0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJ1xuaW1wb3J0IHsgSHR0cENsaWVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJ1xuaW1wb3J0IHsgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7IFRyYW5zbGF0ZUxvYWRlciB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnXG5pbXBvcnQgeyBtYXAsIFJlcGxheVN1YmplY3QsIHRhcCB9IGZyb20gJ3J4anMnXG5pbXBvcnQgeyBUcmFuc2xhdGlvbkNhY2hlU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL3RyYW5zbGF0aW9uLWNhY2hlLnNlcnZpY2UnXG5pbXBvcnQgeyBBc3luY1RyYW5zbGF0ZUxvYWRlciB9IGZyb20gJy4vYXN5bmMtdHJhbnNsYXRlLWxvYWRlci51dGlscydcbmltcG9ydCB7IENhY2hpbmdUcmFuc2xhdGVMb2FkZXIgfSBmcm9tICcuL2NhY2hpbmctdHJhbnNsYXRlLWxvYWRlci51dGlscydcbmltcG9ydCB7IFRyYW5zbGF0ZUNvbWJpbmVkTG9hZGVyIH0gZnJvbSAnLi90cmFuc2xhdGUuY29tYmluZWQubG9hZGVyJ1xuXG5sZXQgbGFzdFRyYW5zbGF0ZUxvYWRlclRpbWVySWQgPSAwXG5cbmV4cG9ydCBmdW5jdGlvbiBjcmVhdGVSZW1vdGVDb21wb25lbnRUcmFuc2xhdGVMb2FkZXIoXG4gIGh0dHA6IEh0dHBDbGllbnQsXG4gIGJhc2VVcmxSZXBsYXlTdWJqZWN0JDogUmVwbGF5U3ViamVjdDxzdHJpbmc+LFxuICB0cmFuc2xhdGlvbkNhY2hlU2VydmljZT86IFRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlXG4pOiBUcmFuc2xhdGVMb2FkZXIge1xuICBjb25zdCB0cyA9IHRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlID8/IGluamVjdChUcmFuc2xhdGlvbkNhY2hlU2VydmljZSlcbiAgY29uc3QgdGltZXJJZCA9IGxhc3RUcmFuc2xhdGVMb2FkZXJUaW1lcklkKytcblxuICBjb25zb2xlLnRpbWUoJ2NyZWF0ZVJlbW90ZUNvbXBvbmVudFRyYW5zbGF0ZUxvYWRlcl8nICsgdGltZXJJZClcbiAgcmV0dXJuIG5ldyBBc3luY1RyYW5zbGF0ZUxvYWRlcihcbiAgICBiYXNlVXJsUmVwbGF5U3ViamVjdCQucGlwZShcbiAgICAgIG1hcCgoYmFzZVVybCkgPT4ge1xuICAgICAgICByZXR1cm4gbmV3IFRyYW5zbGF0ZUNvbWJpbmVkTG9hZGVyKFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBzaGVsbCBvciBvZiBhcHAgaW4gc3RhbmRhbG9uZSBtb2RlXG4gICAgICAgICAgbmV3IENhY2hpbmdUcmFuc2xhdGVMb2FkZXIodHMsIGh0dHAsIGAuL2Fzc2V0cy9pMThuL2AsICcuanNvbicpLFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBwb3J0YWwtaW50ZWdyYXRpb24tYW5ndWxhciBvZiBhcHBcbiAgICAgICAgICBuZXcgQ2FjaGluZ1RyYW5zbGF0ZUxvYWRlcihcbiAgICAgICAgICAgIHRzLFxuICAgICAgICAgICAgaHR0cCxcbiAgICAgICAgICAgIExvY2F0aW9uLmpvaW5XaXRoU2xhc2goYmFzZVVybCwgYG9uZWN4LXBvcnRhbC1saWIvYXNzZXRzL2kxOG4vYCksXG4gICAgICAgICAgICAnLmpzb24nXG4gICAgICAgICAgKSxcbiAgICAgICAgICAvLyB0cmFuc2xhdGlvbnMgb2YgdGhlIGFwcFxuICAgICAgICAgIG5ldyBDYWNoaW5nVHJhbnNsYXRlTG9hZGVyKHRzLCBodHRwLCBMb2NhdGlvbi5qb2luV2l0aFNsYXNoKGJhc2VVcmwsIGBhc3NldHMvaTE4bi9gKSwgJy5qc29uJylcbiAgICAgICAgKVxuICAgICAgfSksXG4gICAgICB0YXAoKCkgPT4gY29uc29sZS50aW1lRW5kKCdjcmVhdGVSZW1vdGVDb21wb25lbnRUcmFuc2xhdGVMb2FkZXJfJyArIHRpbWVySWQpKVxuICAgIClcbiAgKVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLXJlbW90ZS1jb21wb25lbnQtdHJhbnNsYXRlLWxvYWRlci51dGlscy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1hY2NlbGVyYXRvci9zcmMvbGliL3V0aWxzL2NyZWF0ZS1yZW1vdGUtY29tcG9uZW50LXRyYW5zbGF0ZS1sb2FkZXIudXRpbHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBRTFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFFdEMsT0FBTyxFQUFFLEdBQUcsRUFBaUIsR0FBRyxFQUFFLE1BQU0sTUFBTSxDQUFBO0FBQzlDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFBO0FBQy9FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFBO0FBQ3JFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ3pFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBRXJFLElBQUksMEJBQTBCLEdBQUcsQ0FBQyxDQUFBO0FBRWxDLE1BQU0sVUFBVSxvQ0FBb0MsQ0FDbEQsSUFBZ0IsRUFDaEIscUJBQTRDLEVBQzVDLHVCQUFpRDtJQUVqRCxNQUFNLEVBQUUsR0FBRyx1QkFBdUIsSUFBSSxNQUFNLENBQUMsdUJBQXVCLENBQUMsQ0FBQTtJQUNyRSxNQUFNLE9BQU8sR0FBRywwQkFBMEIsRUFBRSxDQUFBO0lBRTVDLE9BQU8sQ0FBQyxJQUFJLENBQUMsdUNBQXVDLEdBQUcsT0FBTyxDQUFDLENBQUE7SUFDL0QsT0FBTyxJQUFJLG9CQUFvQixDQUM3QixxQkFBcUIsQ0FBQyxJQUFJLENBQ3hCLEdBQUcsQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFO1FBQ2QsT0FBTyxJQUFJLHVCQUF1QjtRQUNoQyxxREFBcUQ7UUFDckQsSUFBSSxzQkFBc0IsQ0FBQyxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE9BQU8sQ0FBQztRQUMvRCxvREFBb0Q7UUFDcEQsSUFBSSxzQkFBc0IsQ0FDeEIsRUFBRSxFQUNGLElBQUksRUFDSixRQUFRLENBQUMsYUFBYSxDQUFDLE9BQU8sRUFBRSwrQkFBK0IsQ0FBQyxFQUNoRSxPQUFPLENBQ1I7UUFDRCxzREFBc0Q7UUFDdEQsSUFBSSxzQkFBc0IsQ0FBQyxFQUFFLEVBQUUsSUFBSSxFQUFFLGlDQUFpQyxFQUFFLE9BQU8sQ0FBQztRQUNoRiwwQkFBMEI7UUFDMUIsSUFBSSxzQkFBc0IsQ0FBQyxFQUFFLEVBQUUsSUFBSSxFQUFFLFFBQVEsQ0FBQyxhQUFhLENBQUMsT0FBTyxFQUFFLGNBQWMsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxDQUMvRixDQUFBO0lBQ0gsQ0FBQyxDQUFDLEVBQ0YsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsdUNBQXVDLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FDOUUsQ0FDRixDQUFBO0FBQ0gsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IExvY2F0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJ1xuaW1wb3J0IHsgSHR0cENsaWVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJ1xuaW1wb3J0IHsgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7IFRyYW5zbGF0ZUxvYWRlciB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnXG5pbXBvcnQgeyBtYXAsIFJlcGxheVN1YmplY3QsIHRhcCB9IGZyb20gJ3J4anMnXG5pbXBvcnQgeyBUcmFuc2xhdGlvbkNhY2hlU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL3RyYW5zbGF0aW9uLWNhY2hlLnNlcnZpY2UnXG5pbXBvcnQgeyBBc3luY1RyYW5zbGF0ZUxvYWRlciB9IGZyb20gJy4vYXN5bmMtdHJhbnNsYXRlLWxvYWRlci51dGlscydcbmltcG9ydCB7IENhY2hpbmdUcmFuc2xhdGVMb2FkZXIgfSBmcm9tICcuL2NhY2hpbmctdHJhbnNsYXRlLWxvYWRlci51dGlscydcbmltcG9ydCB7IFRyYW5zbGF0ZUNvbWJpbmVkTG9hZGVyIH0gZnJvbSAnLi90cmFuc2xhdGUuY29tYmluZWQubG9hZGVyJ1xuXG5sZXQgbGFzdFRyYW5zbGF0ZUxvYWRlclRpbWVySWQgPSAwXG5cbmV4cG9ydCBmdW5jdGlvbiBjcmVhdGVSZW1vdGVDb21wb25lbnRUcmFuc2xhdGVMb2FkZXIoXG4gIGh0dHA6IEh0dHBDbGllbnQsXG4gIGJhc2VVcmxSZXBsYXlTdWJqZWN0JDogUmVwbGF5U3ViamVjdDxzdHJpbmc+LFxuICB0cmFuc2xhdGlvbkNhY2hlU2VydmljZT86IFRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlXG4pOiBUcmFuc2xhdGVMb2FkZXIge1xuICBjb25zdCB0cyA9IHRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlID8/IGluamVjdChUcmFuc2xhdGlvbkNhY2hlU2VydmljZSlcbiAgY29uc3QgdGltZXJJZCA9IGxhc3RUcmFuc2xhdGVMb2FkZXJUaW1lcklkKytcblxuICBjb25zb2xlLnRpbWUoJ2NyZWF0ZVJlbW90ZUNvbXBvbmVudFRyYW5zbGF0ZUxvYWRlcl8nICsgdGltZXJJZClcbiAgcmV0dXJuIG5ldyBBc3luY1RyYW5zbGF0ZUxvYWRlcihcbiAgICBiYXNlVXJsUmVwbGF5U3ViamVjdCQucGlwZShcbiAgICAgIG1hcCgoYmFzZVVybCkgPT4ge1xuICAgICAgICByZXR1cm4gbmV3IFRyYW5zbGF0ZUNvbWJpbmVkTG9hZGVyKFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBzaGVsbCBvciBvZiBhcHAgaW4gc3RhbmRhbG9uZSBtb2RlXG4gICAgICAgICAgbmV3IENhY2hpbmdUcmFuc2xhdGVMb2FkZXIodHMsIGh0dHAsIGAuL2Fzc2V0cy9pMThuL2AsICcuanNvbicpLFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBwb3J0YWwtaW50ZWdyYXRpb24tYW5ndWxhciBvZiBhcHBcbiAgICAgICAgICBuZXcgQ2FjaGluZ1RyYW5zbGF0ZUxvYWRlcihcbiAgICAgICAgICAgIHRzLFxuICAgICAgICAgICAgaHR0cCxcbiAgICAgICAgICAgIExvY2F0aW9uLmpvaW5XaXRoU2xhc2goYmFzZVVybCwgYG9uZWN4LXBvcnRhbC1saWIvYXNzZXRzL2kxOG4vYCksXG4gICAgICAgICAgICAnLmpzb24nXG4gICAgICAgICAgKSxcbiAgICAgICAgICAvLyB0cmFuc2xhdGlvbnMgb2YgcG9ydGFsLWludGVncmF0aW9uLWFuZ3VsYXIgb2Ygc2hlbGxcbiAgICAgICAgICBuZXcgQ2FjaGluZ1RyYW5zbGF0ZUxvYWRlcih0cywgaHR0cCwgYC4vb25lY3gtcG9ydGFsLWxpYi9hc3NldHMvaTE4bi9gLCAnLmpzb24nKSxcbiAgICAgICAgICAvLyB0cmFuc2xhdGlvbnMgb2YgdGhlIGFwcFxuICAgICAgICAgIG5ldyBDYWNoaW5nVHJhbnNsYXRlTG9hZGVyKHRzLCBodHRwLCBMb2NhdGlvbi5qb2luV2l0aFNsYXNoKGJhc2VVcmwsIGBhc3NldHMvaTE4bi9gKSwgJy5qc29uJylcbiAgICAgICAgKVxuICAgICAgfSksXG4gICAgICB0YXAoKCkgPT4gY29uc29sZS50aW1lRW5kKCdjcmVhdGVSZW1vdGVDb21wb25lbnRUcmFuc2xhdGVMb2FkZXJfJyArIHRpbWVySWQpKVxuICAgIClcbiAgKVxufVxuIl19

package/esm2022/lib/utils/create-translate-loader.utils.mjs

@@ -16,10 +16,12 @@ export function createTranslateLoader(http, appStateService, translationCacheSer
         new CachingTranslateLoader(ts, http, `./assets/i18n/`, '.json'), 
         // translations of portal-integration-angular of app
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `onecx-portal-lib/assets/i18n/`), '.json'), 
+        // translations of portal-integration-angular of shell
+        new CachingTranslateLoader(ts, http, `./onecx-portal-lib/assets/i18n/`, '.json'), 
         // Primelocale Translations
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `onecx-portal-lib/assets/i18n/primeng/`), '.json'), 
         // translations of the app
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `assets/i18n/`), '.json'));
     }), tap(() => console.timeEnd('createTranslateLoader_' + timerId))));
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLXRyYW5zbGF0ZS1sb2FkZXIudXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItYWNjZWxlcmF0b3Ivc3JjL2xpYi91dGlscy9jcmVhdGUtdHJhbnNsYXRlLWxvYWRlci51dGlscy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUE7QUFFMUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUd0QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLE1BQU0sTUFBTSxDQUFBO0FBQ3RELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFBO0FBQy9FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFBO0FBQ3JFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ3pFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBRXJFLElBQUksMEJBQTBCLEdBQUcsQ0FBQyxDQUFBO0FBRWxDLE1BQU0sVUFBVSxxQkFBcUIsQ0FDbkMsSUFBZ0IsRUFDaEIsZUFBZ0MsRUFDaEMsdUJBQWlEO0lBRWpELE1BQU0sRUFBRSxHQUFHLHVCQUF1QixJQUFJLE1BQU0sQ0FBQyx1QkFBdUIsQ0FBQyxDQUFBO0lBQ3JFLE1BQU0sT0FBTyxHQUFHLDBCQUEwQixFQUFFLENBQUE7SUFFNUMsT0FBTyxDQUFDLElBQUksQ0FBQyx3QkFBd0IsR0FBRyxPQUFPLENBQUMsQ0FBQTtJQUNoRCxPQUFPLElBQUksb0JBQW9CLENBQzdCLGFBQWEsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxXQUFXLENBQUMsWUFBWSxFQUFFLEVBQUUsZUFBZSxDQUFDLGNBQWMsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUM3RyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsU0FBUyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDLEVBQ3JDLEdBQUcsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLEVBQUUsRUFBRTtRQUNuQixPQUFPLElBQUksdUJBQXVCO1FBQ2hDLHFEQUFxRDtRQUNyRCxJQUFJLHNCQUFzQixDQUFDLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsT0FBTyxDQUFDO1FBQy9ELG9EQUFvRDtRQUNwRCxJQUFJLHNCQUFzQixDQUN4QixFQUFFLEVBQ0YsSUFBSSxFQUNKLFFBQVEsQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSwrQkFBK0IsQ0FBQyxFQUNqRixPQUFPLENBQ1I7UUFDRCwyQkFBMkI7UUFDM0IsSUFBSSxzQkFBc0IsQ0FDeEIsRUFBRSxFQUNGLElBQUksRUFDSixRQUFRLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsdUNBQXVDLENBQUMsRUFDekYsT0FBTyxDQUNSO1FBQ0QsMEJBQTBCO1FBQzFCLElBQUksc0JBQXNCLENBQ3hCLEVBQUUsRUFDRixJQUFJLEVBQ0osUUFBUSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLGNBQWMsQ0FBQyxFQUNoRSxPQUFPLENBQ1IsQ0FDRixDQUFBO0lBQ0gsQ0FBQyxDQUFDLEVBQ0YsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FDL0QsQ0FDRixDQUFBO0FBQ0gsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IExvY2F0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJ1xuaW1wb3J0IHsgSHR0cENsaWVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJ1xuaW1wb3J0IHsgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7IFRyYW5zbGF0ZUxvYWRlciB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnXG5pbXBvcnQgeyBBcHBTdGF0ZVNlcnZpY2UgfSBmcm9tICdAb25lY3gvYW5ndWxhci1pbnRlZ3JhdGlvbi1pbnRlcmZhY2UnXG5pbXBvcnQgeyBjb21iaW5lTGF0ZXN0LCBmaWx0ZXIsIG1hcCwgdGFwIH0gZnJvbSAncnhqcydcbmltcG9ydCB7IFRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvdHJhbnNsYXRpb24tY2FjaGUuc2VydmljZSdcbmltcG9ydCB7IEFzeW5jVHJhbnNsYXRlTG9hZGVyIH0gZnJvbSAnLi9hc3luYy10cmFuc2xhdGUtbG9hZGVyLnV0aWxzJ1xuaW1wb3J0IHsgQ2FjaGluZ1RyYW5zbGF0ZUxvYWRlciB9IGZyb20gJy4vY2FjaGluZy10cmFuc2xhdGUtbG9hZGVyLnV0aWxzJ1xuaW1wb3J0IHsgVHJhbnNsYXRlQ29tYmluZWRMb2FkZXIgfSBmcm9tICcuL3RyYW5zbGF0ZS5jb21iaW5lZC5sb2FkZXInXG5cbmxldCBsYXN0VHJhbnNsYXRlTG9hZGVyVGltZXJJZCA9IDBcblxuZXhwb3J0IGZ1bmN0aW9uIGNyZWF0ZVRyYW5zbGF0ZUxvYWRlcihcbiAgaHR0cDogSHR0cENsaWVudCxcbiAgYXBwU3RhdGVTZXJ2aWNlOiBBcHBTdGF0ZVNlcnZpY2UsXG4gIHRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlPzogVHJhbnNsYXRpb25DYWNoZVNlcnZpY2Vcbik6IFRyYW5zbGF0ZUxvYWRlciB7XG4gIGNvbnN0IHRzID0gdHJhbnNsYXRpb25DYWNoZVNlcnZpY2UgPz8gaW5qZWN0KFRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlKVxuICBjb25zdCB0aW1lcklkID0gbGFzdFRyYW5zbGF0ZUxvYWRlclRpbWVySWQrK1xuXG4gIGNvbnNvbGUudGltZSgnY3JlYXRlVHJhbnNsYXRlTG9hZGVyXycgKyB0aW1lcklkKVxuICByZXR1cm4gbmV3IEFzeW5jVHJhbnNsYXRlTG9hZGVyKFxuICAgIGNvbWJpbmVMYXRlc3QoW2FwcFN0YXRlU2VydmljZS5jdXJyZW50TWZlJC5hc09ic2VydmFibGUoKSwgYXBwU3RhdGVTZXJ2aWNlLmdsb2JhbExvYWRpbmckLmFzT2JzZXJ2YWJsZSgpXSkucGlwZShcbiAgICAgIGZpbHRlcigoWywgaXNMb2FkaW5nXSkgPT4gIWlzTG9hZGluZyksXG4gICAgICBtYXAoKFtjdXJyZW50TWZlXSkgPT4ge1xuICAgICAgICByZXR1cm4gbmV3IFRyYW5zbGF0ZUNvbWJpbmVkTG9hZGVyKFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBzaGVsbCBvciBvZiBhcHAgaW4gc3RhbmRhbG9uZSBtb2RlXG4gICAgICAgICAgbmV3IENhY2hpbmdUcmFuc2xhdGVMb2FkZXIodHMsIGh0dHAsIGAuL2Fzc2V0cy9pMThuL2AsICcuanNvbicpLFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBwb3J0YWwtaW50ZWdyYXRpb24tYW5ndWxhciBvZiBhcHBcbiAgICAgICAgICBuZXcgQ2FjaGluZ1RyYW5zbGF0ZUxvYWRlcihcbiAgICAgICAgICAgIHRzLFxuICAgICAgICAgICAgaHR0cCxcbiAgICAgICAgICAgIExvY2F0aW9uLmpvaW5XaXRoU2xhc2goY3VycmVudE1mZS5yZW1vdGVCYXNlVXJsLCBgb25lY3gtcG9ydGFsLWxpYi9hc3NldHMvaTE4bi9gKSxcbiAgICAgICAgICAgICcuanNvbidcbiAgICAgICAgICApLFxuICAgICAgICAgIC8vIFByaW1lbG9jYWxlIFRyYW5zbGF0aW9uc1xuICAgICAgICAgIG5ldyBDYWNoaW5nVHJhbnNsYXRlTG9hZGVyKFxuICAgICAgICAgICAgdHMsXG4gICAgICAgICAgICBodHRwLFxuICAgICAgICAgICAgTG9jYXRpb24uam9pbldpdGhTbGFzaChjdXJyZW50TWZlLnJlbW90ZUJhc2VVcmwsIGBvbmVjeC1wb3J0YWwtbGliL2Fzc2V0cy9pMThuL3ByaW1lbmcvYCksXG4gICAgICAgICAgICAnLmpzb24nXG4gICAgICAgICAgKSxcbiAgICAgICAgICAvLyB0cmFuc2xhdGlvbnMgb2YgdGhlIGFwcFxuICAgICAgICAgIG5ldyBDYWNoaW5nVHJhbnNsYXRlTG9hZGVyKFxuICAgICAgICAgICAgdHMsXG4gICAgICAgICAgICBodHRwLFxuICAgICAgICAgICAgTG9jYXRpb24uam9pbldpdGhTbGFzaChjdXJyZW50TWZlLnJlbW90ZUJhc2VVcmwsIGBhc3NldHMvaTE4bi9gKSxcbiAgICAgICAgICAgICcuanNvbidcbiAgICAgICAgICApXG4gICAgICAgIClcbiAgICAgIH0pLFxuICAgICAgdGFwKCgpID0+IGNvbnNvbGUudGltZUVuZCgnY3JlYXRlVHJhbnNsYXRlTG9hZGVyXycgKyB0aW1lcklkKSlcbiAgICApXG4gIClcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLXRyYW5zbGF0ZS1sb2FkZXIudXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItYWNjZWxlcmF0b3Ivc3JjL2xpYi91dGlscy9jcmVhdGUtdHJhbnNsYXRlLWxvYWRlci51dGlscy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUE7QUFFMUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUd0QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLE1BQU0sTUFBTSxDQUFBO0FBQ3RELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFBO0FBQy9FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFBO0FBQ3JFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ3pFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBRXJFLElBQUksMEJBQTBCLEdBQUcsQ0FBQyxDQUFBO0FBRWxDLE1BQU0sVUFBVSxxQkFBcUIsQ0FDbkMsSUFBZ0IsRUFDaEIsZUFBZ0MsRUFDaEMsdUJBQWlEO0lBRWpELE1BQU0sRUFBRSxHQUFHLHVCQUF1QixJQUFJLE1BQU0sQ0FBQyx1QkFBdUIsQ0FBQyxDQUFBO0lBQ3JFLE1BQU0sT0FBTyxHQUFHLDBCQUEwQixFQUFFLENBQUE7SUFFNUMsT0FBTyxDQUFDLElBQUksQ0FBQyx3QkFBd0IsR0FBRyxPQUFPLENBQUMsQ0FBQTtJQUNoRCxPQUFPLElBQUksb0JBQW9CLENBQzdCLGFBQWEsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxXQUFXLENBQUMsWUFBWSxFQUFFLEVBQUUsZUFBZSxDQUFDLGNBQWMsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUM3RyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsU0FBUyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDLEVBQ3JDLEdBQUcsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLEVBQUUsRUFBRTtRQUNuQixPQUFPLElBQUksdUJBQXVCO1FBQ2hDLHFEQUFxRDtRQUNyRCxJQUFJLHNCQUFzQixDQUFDLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsT0FBTyxDQUFDO1FBQy9ELG9EQUFvRDtRQUNwRCxJQUFJLHNCQUFzQixDQUN4QixFQUFFLEVBQ0YsSUFBSSxFQUNKLFFBQVEsQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSwrQkFBK0IsQ0FBQyxFQUNqRixPQUFPLENBQ1I7UUFDRCxzREFBc0Q7UUFDdEQsSUFBSSxzQkFBc0IsQ0FBQyxFQUFFLEVBQUUsSUFBSSxFQUFFLGlDQUFpQyxFQUFFLE9BQU8sQ0FBQztRQUNoRiwyQkFBMkI7UUFDM0IsSUFBSSxzQkFBc0IsQ0FDeEIsRUFBRSxFQUNGLElBQUksRUFDSixRQUFRLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsdUNBQXVDLENBQUMsRUFDekYsT0FBTyxDQUNSO1FBQ0QsMEJBQTBCO1FBQzFCLElBQUksc0JBQXNCLENBQ3hCLEVBQUUsRUFDRixJQUFJLEVBQ0osUUFBUSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLGNBQWMsQ0FBQyxFQUNoRSxPQUFPLENBQ1IsQ0FDRixDQUFBO0lBQ0gsQ0FBQyxDQUFDLEVBQ0YsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FDL0QsQ0FDRixDQUFBO0FBQ0gsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IExvY2F0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJ1xuaW1wb3J0IHsgSHR0cENsaWVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJ1xuaW1wb3J0IHsgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7IFRyYW5zbGF0ZUxvYWRlciB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnXG5pbXBvcnQgeyBBcHBTdGF0ZVNlcnZpY2UgfSBmcm9tICdAb25lY3gvYW5ndWxhci1pbnRlZ3JhdGlvbi1pbnRlcmZhY2UnXG5pbXBvcnQgeyBjb21iaW5lTGF0ZXN0LCBmaWx0ZXIsIG1hcCwgdGFwIH0gZnJvbSAncnhqcydcbmltcG9ydCB7IFRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvdHJhbnNsYXRpb24tY2FjaGUuc2VydmljZSdcbmltcG9ydCB7IEFzeW5jVHJhbnNsYXRlTG9hZGVyIH0gZnJvbSAnLi9hc3luYy10cmFuc2xhdGUtbG9hZGVyLnV0aWxzJ1xuaW1wb3J0IHsgQ2FjaGluZ1RyYW5zbGF0ZUxvYWRlciB9IGZyb20gJy4vY2FjaGluZy10cmFuc2xhdGUtbG9hZGVyLnV0aWxzJ1xuaW1wb3J0IHsgVHJhbnNsYXRlQ29tYmluZWRMb2FkZXIgfSBmcm9tICcuL3RyYW5zbGF0ZS5jb21iaW5lZC5sb2FkZXInXG5cbmxldCBsYXN0VHJhbnNsYXRlTG9hZGVyVGltZXJJZCA9IDBcblxuZXhwb3J0IGZ1bmN0aW9uIGNyZWF0ZVRyYW5zbGF0ZUxvYWRlcihcbiAgaHR0cDogSHR0cENsaWVudCxcbiAgYXBwU3RhdGVTZXJ2aWNlOiBBcHBTdGF0ZVNlcnZpY2UsXG4gIHRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlPzogVHJhbnNsYXRpb25DYWNoZVNlcnZpY2Vcbik6IFRyYW5zbGF0ZUxvYWRlciB7XG4gIGNvbnN0IHRzID0gdHJhbnNsYXRpb25DYWNoZVNlcnZpY2UgPz8gaW5qZWN0KFRyYW5zbGF0aW9uQ2FjaGVTZXJ2aWNlKVxuICBjb25zdCB0aW1lcklkID0gbGFzdFRyYW5zbGF0ZUxvYWRlclRpbWVySWQrK1xuXG4gIGNvbnNvbGUudGltZSgnY3JlYXRlVHJhbnNsYXRlTG9hZGVyXycgKyB0aW1lcklkKVxuICByZXR1cm4gbmV3IEFzeW5jVHJhbnNsYXRlTG9hZGVyKFxuICAgIGNvbWJpbmVMYXRlc3QoW2FwcFN0YXRlU2VydmljZS5jdXJyZW50TWZlJC5hc09ic2VydmFibGUoKSwgYXBwU3RhdGVTZXJ2aWNlLmdsb2JhbExvYWRpbmckLmFzT2JzZXJ2YWJsZSgpXSkucGlwZShcbiAgICAgIGZpbHRlcigoWywgaXNMb2FkaW5nXSkgPT4gIWlzTG9hZGluZyksXG4gICAgICBtYXAoKFtjdXJyZW50TWZlXSkgPT4ge1xuICAgICAgICByZXR1cm4gbmV3IFRyYW5zbGF0ZUNvbWJpbmVkTG9hZGVyKFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBzaGVsbCBvciBvZiBhcHAgaW4gc3RhbmRhbG9uZSBtb2RlXG4gICAgICAgICAgbmV3IENhY2hpbmdUcmFuc2xhdGVMb2FkZXIodHMsIGh0dHAsIGAuL2Fzc2V0cy9pMThuL2AsICcuanNvbicpLFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBwb3J0YWwtaW50ZWdyYXRpb24tYW5ndWxhciBvZiBhcHBcbiAgICAgICAgICBuZXcgQ2FjaGluZ1RyYW5zbGF0ZUxvYWRlcihcbiAgICAgICAgICAgIHRzLFxuICAgICAgICAgICAgaHR0cCxcbiAgICAgICAgICAgIExvY2F0aW9uLmpvaW5XaXRoU2xhc2goY3VycmVudE1mZS5yZW1vdGVCYXNlVXJsLCBgb25lY3gtcG9ydGFsLWxpYi9hc3NldHMvaTE4bi9gKSxcbiAgICAgICAgICAgICcuanNvbidcbiAgICAgICAgICApLFxuICAgICAgICAgIC8vIHRyYW5zbGF0aW9ucyBvZiBwb3J0YWwtaW50ZWdyYXRpb24tYW5ndWxhciBvZiBzaGVsbFxuICAgICAgICAgIG5ldyBDYWNoaW5nVHJhbnNsYXRlTG9hZGVyKHRzLCBodHRwLCBgLi9vbmVjeC1wb3J0YWwtbGliL2Fzc2V0cy9pMThuL2AsICcuanNvbicpLFxuICAgICAgICAgIC8vIFByaW1lbG9jYWxlIFRyYW5zbGF0aW9uc1xuICAgICAgICAgIG5ldyBDYWNoaW5nVHJhbnNsYXRlTG9hZGVyKFxuICAgICAgICAgICAgdHMsXG4gICAgICAgICAgICBodHRwLFxuICAgICAgICAgICAgTG9jYXRpb24uam9pbldpdGhTbGFzaChjdXJyZW50TWZlLnJlbW90ZUJhc2VVcmwsIGBvbmVjeC1wb3J0YWwtbGliL2Fzc2V0cy9pMThuL3ByaW1lbmcvYCksXG4gICAgICAgICAgICAnLmpzb24nXG4gICAgICAgICAgKSxcbiAgICAgICAgICAvLyB0cmFuc2xhdGlvbnMgb2YgdGhlIGFwcFxuICAgICAgICAgIG5ldyBDYWNoaW5nVHJhbnNsYXRlTG9hZGVyKFxuICAgICAgICAgICAgdHMsXG4gICAgICAgICAgICBodHRwLFxuICAgICAgICAgICAgTG9jYXRpb24uam9pbldpdGhTbGFzaChjdXJyZW50TWZlLnJlbW90ZUJhc2VVcmwsIGBhc3NldHMvaTE4bi9gKSxcbiAgICAgICAgICAgICcuanNvbidcbiAgICAgICAgICApXG4gICAgICAgIClcbiAgICAgIH0pLFxuICAgICAgdGFwKCgpID0+IGNvbnNvbGUudGltZUVuZCgnY3JlYXRlVHJhbnNsYXRlTG9hZGVyXycgKyB0aW1lcklkKSlcbiAgICApXG4gIClcbn1cbiJdfQ==

package/fesm2022/onecx-angular-accelerator.mjs

@@ -906,6 +906,11 @@ class ColumnGroupSelectionComponent {
     }
     set selectedGroupKey(value) {
         this.selectedGroupKey$.next(value);
+        if (this.selectedGroupKey === this.customGroupKey) {
+            this.componentStateChanged.emit({
+                activeColumnGroupKey: value,
+            });
+        }
     }
     get columns() {
         return this.columns$.getValue();
@@ -921,11 +926,18 @@ class ColumnGroupSelectionComponent {
             .concat([selectedGroupKey])
             .filter((value) => !!value)
             .filter((value, index, self) => self.indexOf(value) === index && value != null)));
-        const activeColumns = this.columns.filter((c) => c.predefinedGroupKeys?.includes(this.selectedGroupKey$.getValue() ?? this.defaultGroupKey));
-        this.componentStateChanged.emit({
-            activeColumnGroupKey: this.selectedGroupKey,
-            displayedColumns: activeColumns,
-        });
+        if (this.selectedGroupKey === this.customGroupKey) {
+            this.componentStateChanged.emit({
+                activeColumnGroupKey: this.selectedGroupKey,
+            });
+        }
+        else {
+            const activeColumns = this.columns.filter((c) => c.predefinedGroupKeys?.includes(this.selectedGroupKey$.getValue() ?? this.defaultGroupKey));
+            this.componentStateChanged.emit({
+                activeColumnGroupKey: this.selectedGroupKey,
+                displayedColumns: activeColumns,
+            });
+        }
     }
     changeGroupSelection(event) {
         if (event.value === this.customGroupKey) {
@@ -938,23 +950,12 @@ class ColumnGroupSelectionComponent {
             displayedColumns: activeColumns,
         });
     }
-    clearGroupSelection() {
-        let activeColumns = this.columns;
-        if (this.defaultGroupKey) {
-            activeColumns = this.columns.filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey));
-        }
-        this.groupSelectionChanged.emit({ activeColumns, groupKey: this.defaultGroupKey });
-        this.componentStateChanged.emit({
-            activeColumnGroupKey: this.defaultGroupKey,
-            displayedColumns: activeColumns,
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatLabel>\n  <p-dropdown\n    inputId=\"columnGroupSelectionDropdown\"\n    *ngIf=\"(allGroupKeys$ | async)?.length\"\n    (onClear)=\"clearGroupSelection()\"\n    (onChange)=\"changeGroupSelection($event)\"\n    [options]=\"(allGroupKeys$ | async) || []\"\n    [placeholder]=\"placeholderKey | translate\"\n    [showClear]=\"selectedGroupKey !== defaultGroupKey\"\n    [(ngModel)]=\"selectedGroupKey\"\n    [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n  </p-dropdown>\n  <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n    >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n  >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$1.FloatLabel, selector: "p-floatLabel" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatLabel>\n  <p-dropdown\n    inputId=\"columnGroupSelectionDropdown\"\n    *ngIf=\"(allGroupKeys$ | async)?.length\"\n    (onChange)=\"changeGroupSelection($event)\"\n    [options]=\"(allGroupKeys$ | async) || []\"\n    [placeholder]=\"placeholderKey | translate\"\n    [(ngModel)]=\"selectedGroupKey\"\n    [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n  </p-dropdown>\n  <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n    >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n  >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$1.FloatLabel, selector: "p-floatLabel" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-column-group-selection', template: "<p-floatLabel>\n  <p-dropdown\n    inputId=\"columnGroupSelectionDropdown\"\n    *ngIf=\"(allGroupKeys$ | async)?.length\"\n    (onClear)=\"clearGroupSelection()\"\n    (onChange)=\"changeGroupSelection($event)\"\n    [options]=\"(allGroupKeys$ | async) || []\"\n    [placeholder]=\"placeholderKey | translate\"\n    [showClear]=\"selectedGroupKey !== defaultGroupKey\"\n    [(ngModel)]=\"selectedGroupKey\"\n    [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n  </p-dropdown>\n  <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n    >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n  >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"] }]
+            args: [{ selector: 'ocx-column-group-selection', template: "<p-floatLabel>\n  <p-dropdown\n    inputId=\"columnGroupSelectionDropdown\"\n    *ngIf=\"(allGroupKeys$ | async)?.length\"\n    (onChange)=\"changeGroupSelection($event)\"\n    [options]=\"(allGroupKeys$ | async) || []\"\n    [placeholder]=\"placeholderKey | translate\"\n    [(ngModel)]=\"selectedGroupKey\"\n    [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n  </p-dropdown>\n  <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n    >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n  >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"] }]
         }], propDecorators: { selectedGroupKey: [{
                 type: Input
             }], columns: [{
@@ -989,6 +990,7 @@ class CustomGroupColumnSelectorComponent {
         this.translate = translate;
         this.columns = [];
         this._displayedColumns = [];
+        this.customGroupKey = '';
         this.dialogTitle = '';
         this.dialogTitleKey = '';
         this.openButtonTitle = '';
@@ -1076,6 +1078,7 @@ class CustomGroupColumnSelectorComponent {
                     frozen: this.frozenActionColumnModel,
                     position: this.actionColumnPositionModel,
                 },
+                activeColumnGroupKey: this.customGroupKey,
             });
         }
     }
@@ -1083,7 +1086,7 @@ class CustomGroupColumnSelectorComponent {
         this.visible = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [pTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item pTemplate=\"item\">\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectButton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n        >\n          <ng-template let-option pTemplate>\n            <label id=\"{{option.label}}\">{{option.label | translate}}</label>\n          </ng-template>\n        </p-selectButton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectButton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          class=\"mt-2\"\n          name=\"action-column-position-select-button\"\n        >\n          <ng-template let-option pTemplate>\n            <label id=\"{{option.label}}\">{{option.label | translate}}</label>\n          </ng-template>\n        </p-selectButton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i6.PickList, selector: "p-pickList", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i7$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [pTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item pTemplate=\"item\">\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectButton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n        >\n          <ng-template let-option pTemplate>\n            <label id=\"{{option.label}}\">{{option.label | translate}}</label>\n          </ng-template>\n        </p-selectButton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectButton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          class=\"mt-2\"\n          name=\"action-column-position-select-button\"\n        >\n          <ng-template let-option pTemplate>\n            <label id=\"{{option.label}}\">{{option.label | translate}}</label>\n          </ng-template>\n        </p-selectButton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i6.PickList, selector: "p-pickList", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i7$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
             type: Component,
@@ -1092,6 +1095,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 type: Input
             }], displayedColumns: [{
                 type: Input
+            }], customGroupKey: [{
+                type: Input
             }], dialogTitle: [{
                 type: Input
             }], dialogTitleKey: [{
@@ -4343,11 +4348,11 @@ class InteractiveDataViewComponent {
         this.pageSizeChanged.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: InteractiveDataViewComponent, deps: [{ token: i1$3.SlotService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: InteractiveDataViewComponent, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCell", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValue", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCell", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <ocx-data-layout-selection\n      [supportedViewLayouts]=\"supportedViewLayouts\"\n      [layout]=\"layout\"\n      (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n      (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n    ></ocx-data-layout-selection>\n\n    <div *ngIf=\"topCenter\">\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n\n    <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      <ng-container *ngIf=\"isColumnGroupSelectionComponentDefined$ | async; else defaultColumnGroupSelectionComponent\">\n        <ng-container *ngIf=\"displayedColumnKeys$ | async as displayedColumnKeys\">\n          <ocx-slot\n            [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n            *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n            name=\"{{columnGroupSlotName}}\"\n            [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n            [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n          >\n            <ng-template #skeleton>\n              <div class=\"flex\">\n                <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n              </div>\n            </ng-template>\n          </ocx-slot>\n        </ng-container>\n      </ng-container>\n\n      <ocx-custom-group-column-selector\n        *ngIf=\"layout === 'table'\"\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n    </div>\n  </div>\n</div>\n<div class=\"p-3\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i9$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i1$3.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: InteractiveDataViewComponent, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCell", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValue", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCell", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <ocx-data-layout-selection\n      [supportedViewLayouts]=\"supportedViewLayouts\"\n      [layout]=\"layout\"\n      (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n      (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n    ></ocx-data-layout-selection>\n\n    <div *ngIf=\"topCenter\">\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n\n    <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      <ng-container *ngIf=\"isColumnGroupSelectionComponentDefined$ | async; else defaultColumnGroupSelectionComponent\">\n        <ng-container *ngIf=\"displayedColumnKeys$ | async as displayedColumnKeys\">\n          <ocx-slot\n            [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n            *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n            name=\"{{columnGroupSlotName}}\"\n            [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n            [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n          >\n            <ng-template #skeleton>\n              <div class=\"flex\">\n                <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n              </div>\n            </ng-template>\n          </ocx-slot>\n        </ng-container>\n      </ng-container>\n\n      <ocx-custom-group-column-selector\n        *ngIf=\"layout === 'table'\"\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n    </div>\n  </div>\n</div>\n<div class=\"p-3\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i9$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i1$3.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <ocx-data-layout-selection\n      [supportedViewLayouts]=\"supportedViewLayouts\"\n      [layout]=\"layout\"\n      (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n      (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n    ></ocx-data-layout-selection>\n\n    <div *ngIf=\"topCenter\">\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n\n    <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      <ng-container *ngIf=\"isColumnGroupSelectionComponentDefined$ | async; else defaultColumnGroupSelectionComponent\">\n        <ng-container *ngIf=\"displayedColumnKeys$ | async as displayedColumnKeys\">\n          <ocx-slot\n            [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n            *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n            name=\"{{columnGroupSlotName}}\"\n            [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n            [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n          >\n            <ng-template #skeleton>\n              <div class=\"flex\">\n                <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n              </div>\n            </ng-template>\n          </ocx-slot>\n        </ng-container>\n      </ng-container>\n\n      <ocx-custom-group-column-selector\n        *ngIf=\"layout === 'table'\"\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n    </div>\n  </div>\n</div>\n<div class=\"p-3\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n" }]
+            args: [{ selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <ocx-data-layout-selection\n      [supportedViewLayouts]=\"supportedViewLayouts\"\n      [layout]=\"layout\"\n      (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n      (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n    ></ocx-data-layout-selection>\n\n    <div *ngIf=\"topCenter\">\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n\n    <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      <ng-container *ngIf=\"isColumnGroupSelectionComponentDefined$ | async; else defaultColumnGroupSelectionComponent\">\n        <ng-container *ngIf=\"displayedColumnKeys$ | async as displayedColumnKeys\">\n          <ocx-slot\n            [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n            *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n            name=\"{{columnGroupSlotName}}\"\n            [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n            [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n          >\n            <ng-template #skeleton>\n              <div class=\"flex\">\n                <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n              </div>\n            </ng-template>\n          </ocx-slot>\n        </ng-container>\n      </ng-container>\n\n      <ocx-custom-group-column-selector\n        *ngIf=\"layout === 'table'\"\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n    </div>\n  </div>\n</div>\n<div class=\"p-3\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$3.SlotService }], propDecorators: { dataView: [{
                 type: ViewChild,
                 args: [DataViewComponent]
@@ -4986,6 +4991,8 @@ function createTranslateLoader(http, appStateService, translationCacheService) {
         new CachingTranslateLoader(ts, http, `./assets/i18n/`, '.json'), 
         // translations of portal-integration-angular of app
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `onecx-portal-lib/assets/i18n/`), '.json'), 
+        // translations of portal-integration-angular of shell
+        new CachingTranslateLoader(ts, http, `./onecx-portal-lib/assets/i18n/`, '.json'), 
         // Primelocale Translations
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `onecx-portal-lib/assets/i18n/primeng/`), '.json'), 
         // translations of the app
@@ -5040,6 +5047,8 @@ function createRemoteComponentTranslateLoader(http, baseUrlReplaySubject$, trans
         new CachingTranslateLoader(ts, http, `./assets/i18n/`, '.json'), 
         // translations of portal-integration-angular of app
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(baseUrl, `onecx-portal-lib/assets/i18n/`), '.json'), 
+        // translations of portal-integration-angular of shell
+        new CachingTranslateLoader(ts, http, `./onecx-portal-lib/assets/i18n/`, '.json'), 
         // translations of the app
         new CachingTranslateLoader(ts, http, Location.joinWithSlash(baseUrl, `assets/i18n/`), '.json'));
     }), tap(() => console.timeEnd('createRemoteComponentTranslateLoader_' + timerId))));