@vendure/admin-ui 2.0.5 → 2.1.0-next.0

package/esm2022/core/providers/dashboard-widget/dashboard-widget.service.mjs

@@ -15,12 +15,12 @@ export class DashboardWidgetService {
         }
         this.registry.set(id, config);
     }
-    getAvailableIds(currentUserPermissions) {
+    getAvailableWidgets(currentUserPermissions) {
         const hasAllPermissions = (requiredPerms, userPerms) => requiredPerms.every(p => userPerms.includes(p));
         return [...this.registry.entries()]
-            .filter(([id, config]) => (!config.requiresPermissions ||
-            hasAllPermissions(config.requiresPermissions, currentUserPermissions)))
-            .map(([id]) => id);
+            .filter(([id, config]) => !config.requiresPermissions ||
+            hasAllPermissions(config.requiresPermissions, currentUserPermissions))
+            .map(([id, config]) => ({ id, config }));
     }
     getWidgetById(id) {
         return this.registry.get(id);
@@ -88,4 +88,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
                     providedIn: 'root',
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGFzaGJvYXJkLXdpZGdldC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb3JlL3NyYy9wcm92aWRlcnMvZGFzaGJvYXJkLXdpZGdldC9kYXNoYm9hcmQtd2lkZ2V0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7QUFXdEU7O0dBRUc7QUFJSCxNQUFNLE9BQU8sc0JBQXNCO0lBSG5DO1FBSVksYUFBUSxHQUFHLElBQUksR0FBRyxFQUFpQyxDQUFDO1FBQ3BELGNBQVMsR0FBMkIsRUFBRSxDQUFDO0tBK0ZsRDtJQTdGRyxjQUFjLENBQUMsRUFBVSxFQUFFLE1BQTZCO1FBQ3BELElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEVBQUU7WUFDdkIsTUFBTSxJQUFJLEtBQUssQ0FBQyxtQ0FBbUMsRUFBRSxrQkFBa0IsQ0FBQyxDQUFDO1NBQzVFO1FBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxlQUFlLENBQUMsc0JBQW9DO1FBQ2hELE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxhQUF1QixFQUFFLFNBQW1CLEVBQVcsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFckksT0FBTyxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsQ0FBQzthQUM5QixNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxNQUFNLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FDbEIsQ0FBQyxNQUFNLENBQUMsbUJBQW1CO1lBQzNCLGlCQUFpQixDQUFDLE1BQU0sQ0FBQyxtQkFBbUIsRUFBRSxzQkFBc0IsQ0FBQyxDQUN4RSxDQUFDO2FBQ0wsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELGFBQWEsQ0FBQyxFQUFVO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELGdCQUFnQixDQUFDLE1BQThCO1FBQzNDLElBQUksQ0FBQyxTQUFTLEdBQUcsTUFBTSxDQUFDO0lBQzVCLENBQUM7SUFFRCxnQkFBZ0I7UUFDWixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDMUIsQ0FBQztJQUVELGVBQWUsQ0FBQyxTQUFrQztRQUM5QyxNQUFNLGtCQUFrQixHQUFHLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUM7YUFDbkQsR0FBRyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRTtZQUNuQixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUNyQyxJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUNULE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFFLENBQUMsQ0FBQzthQUM5QjtZQUNELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxDQUFDLEVBQUUsQ0FBQztRQUN4RSxDQUFDLENBQUM7YUFDRCxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUVoQyxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsa0JBQWtCLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBRU8sVUFBVSxDQUFDLEVBQVU7UUFDekIsc0NBQXNDO1FBQ3RDLE9BQU8sQ0FBQyxLQUFLLENBQ1QsOENBQThDLEVBQUUscUJBQXFCLENBQUMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO2FBQ3pGLEdBQUcsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLElBQUksR0FBRyxHQUFHLENBQUM7YUFDdEIsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQ3BCLENBQUM7UUFDRixPQUFPO0lBQ1gsQ0FBQztJQUVPLGFBQWEsQ0FDakIsRUFBVSxFQUNWLE1BQTZCLEVBQzdCLFdBQWlDO1FBRWpDLElBQUksYUFBYSxHQUFHLFdBQVcsQ0FBQztRQUNoQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsZUFBZSxFQUFFLE1BQU07WUFDbEQsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxlQUFlO1lBQ3hCLENBQUMsQ0FBRSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQTRCLENBQUM7UUFDbkQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLEVBQUU7WUFDeEMsMkNBQTJDO1lBQzNDLE1BQU0sWUFBWSxHQUFHLGVBQWUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDM0QsTUFBTSxhQUFhLEdBQUcsZUFBZSxDQUFDLFlBQVksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDL0Qsc0NBQXNDO1lBQ3RDLE9BQU8sQ0FBQyxLQUFLLENBQ1QsUUFBUSxFQUFFLGtEQUFrRCxXQUFXLDhCQUE4QixZQUFZLENBQUMsSUFBSSxDQUNsSCxJQUFJLENBQ1AsY0FBYyxhQUFhLFlBQVksQ0FDM0MsQ0FBQztZQUNGLGFBQWEsR0FBRyxhQUFhLENBQUM7U0FDakM7UUFDRCxPQUFPLGFBQWEsQ0FBQztJQUN6QixDQUFDO0lBRU8sV0FBVyxDQUFDLGtCQUF3QztRQUN4RCxNQUFNLE1BQU0sR0FBaUIsRUFBRSxDQUFDO1FBQ2hDLElBQUksR0FBRyxHQUF5QixFQUFFLENBQUM7UUFDbkMsS0FBSyxNQUFNLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsSUFBSSxrQkFBa0IsRUFBRTtZQUNwRCxNQUFNLE9BQU8sR0FBRyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7WUFDM0QsSUFBSSxFQUFFLEdBQUcsT0FBTyxHQUFHLEtBQUssRUFBRTtnQkFDdEIsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztnQkFDakIsR0FBRyxHQUFHLEVBQUUsQ0FBQzthQUNaO1lBQ0QsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztTQUNuQztRQUNELE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDakIsT0FBTyxNQUFNLENBQUM7SUFDbEIsQ0FBQzs4R0FoR1Esc0JBQXNCO2tIQUF0QixzQkFBc0IsY0FGbkIsTUFBTTs7MkZBRVQsc0JBQXNCO2tCQUhsQyxVQUFVO21CQUFDO29CQUNSLFVBQVUsRUFBRSxNQUFNO2lCQUNyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgbm90TnVsbE9yVW5kZWZpbmVkIH0gZnJvbSAnQHZlbmR1cmUvY29tbW9uL2xpYi9zaGFyZWQtdXRpbHMnO1xyXG5cclxuaW1wb3J0IHsgUGVybWlzc2lvbiB9IGZyb20gJy4uLy4uL2NvbW1vbi9nZW5lcmF0ZWQtdHlwZXMnO1xyXG5cclxuaW1wb3J0IHtcclxuICAgIERhc2hib2FyZFdpZGdldENvbmZpZyxcclxuICAgIERhc2hib2FyZFdpZGdldFdpZHRoLFxyXG4gICAgV2lkZ2V0TGF5b3V0LFxyXG4gICAgV2lkZ2V0TGF5b3V0RGVmaW5pdGlvbixcclxufSBmcm9tICcuL2Rhc2hib2FyZC13aWRnZXQtdHlwZXMnO1xyXG5cclxuLyoqXHJcbiAqIFJlc3BvbnNpYmxlIGZvciByZWdpc3RlcmluZyBkYXNoYm9hcmQgd2lkZ2V0IGNvbXBvbmVudHMgYW5kIHF1ZXJ5aW5nIGZvciBsYXlvdXRzLlxyXG4gKi9cclxuQEluamVjdGFibGUoe1xyXG4gICAgcHJvdmlkZWRJbjogJ3Jvb3QnLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGFzaGJvYXJkV2lkZ2V0U2VydmljZSB7XHJcbiAgICBwcml2YXRlIHJlZ2lzdHJ5ID0gbmV3IE1hcDxzdHJpbmcsIERhc2hib2FyZFdpZGdldENvbmZpZz4oKTtcclxuICAgIHByaXZhdGUgbGF5b3V0RGVmOiBXaWRnZXRMYXlvdXREZWZpbml0aW9uID0gW107XHJcblxyXG4gICAgcmVnaXN0ZXJXaWRnZXQoaWQ6IHN0cmluZywgY29uZmlnOiBEYXNoYm9hcmRXaWRnZXRDb25maWcpIHtcclxuICAgICAgICBpZiAodGhpcy5yZWdpc3RyeS5oYXMoaWQpKSB7XHJcbiAgICAgICAgICAgIHRocm93IG5ldyBFcnJvcihgQSBkYXNoYm9hcmQgd2lkZ2V0IHdpdGggdGhlIGlkIFwiJHtpZH1cIiBhbHJlYWR5IGV4aXN0c2ApO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgdGhpcy5yZWdpc3RyeS5zZXQoaWQsIGNvbmZpZyk7XHJcbiAgICB9XHJcblxyXG4gICAgZ2V0QXZhaWxhYmxlSWRzKGN1cnJlbnRVc2VyUGVybWlzc2lvbnM6IFBlcm1pc3Npb25bXSk6IHN0cmluZ1tdIHtcclxuICAgICAgICBjb25zdCBoYXNBbGxQZXJtaXNzaW9ucyA9IChyZXF1aXJlZFBlcm1zOiBzdHJpbmdbXSwgdXNlclBlcm1zOiBzdHJpbmdbXSk6IGJvb2xlYW4gPT4gcmVxdWlyZWRQZXJtcy5ldmVyeShwID0+IHVzZXJQZXJtcy5pbmNsdWRlcyhwKSk7XHJcblxyXG4gICAgICAgIHJldHVybiBbLi4udGhpcy5yZWdpc3RyeS5lbnRyaWVzKCldXHJcbiAgICAgICAgICAgIC5maWx0ZXIoKFtpZCwgY29uZmlnXSkgPT4gKFxyXG4gICAgICAgICAgICAgICAgICAgICFjb25maWcucmVxdWlyZXNQZXJtaXNzaW9ucyB8fFxyXG4gICAgICAgICAgICAgICAgICAgIGhhc0FsbFBlcm1pc3Npb25zKGNvbmZpZy5yZXF1aXJlc1Blcm1pc3Npb25zLCBjdXJyZW50VXNlclBlcm1pc3Npb25zKVxyXG4gICAgICAgICAgICAgICAgKSlcclxuICAgICAgICAgICAgLm1hcCgoW2lkXSkgPT4gaWQpO1xyXG4gICAgfVxyXG5cclxuICAgIGdldFdpZGdldEJ5SWQoaWQ6IHN0cmluZykge1xyXG4gICAgICAgIHJldHVybiB0aGlzLnJlZ2lzdHJ5LmdldChpZCk7XHJcbiAgICB9XHJcblxyXG4gICAgc2V0RGVmYXVsdExheW91dChsYXlvdXQ6IFdpZGdldExheW91dERlZmluaXRpb24pIHtcclxuICAgICAgICB0aGlzLmxheW91dERlZiA9IGxheW91dDtcclxuICAgIH1cclxuXHJcbiAgICBnZXREZWZhdWx0TGF5b3V0KCk6IFdpZGdldExheW91dERlZmluaXRpb24ge1xyXG4gICAgICAgIHJldHVybiB0aGlzLmxheW91dERlZjtcclxuICAgIH1cclxuXHJcbiAgICBnZXRXaWRnZXRMYXlvdXQobGF5b3V0RGVmPzogV2lkZ2V0TGF5b3V0RGVmaW5pdGlvbik6IFdpZGdldExheW91dCB7XHJcbiAgICAgICAgY29uc3QgaW50ZXJtZWRpYXRlTGF5b3V0ID0gKGxheW91dERlZiB8fCB0aGlzLmxheW91dERlZilcclxuICAgICAgICAgICAgLm1hcCgoeyBpZCwgd2lkdGggfSkgPT4ge1xyXG4gICAgICAgICAgICAgICAgY29uc3QgY29uZmlnID0gdGhpcy5yZWdpc3RyeS5nZXQoaWQpO1xyXG4gICAgICAgICAgICAgICAgaWYgKCFjb25maWcpIHtcclxuICAgICAgICAgICAgICAgICAgICByZXR1cm4gdGhpcy5pZE5vdEZvdW5kKGlkKTtcclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgICAgIHJldHVybiB7IGlkLCBjb25maWcsIHdpZHRoOiB0aGlzLmdldFZhbGlkV2lkdGgoaWQsIGNvbmZpZywgd2lkdGgpIH07XHJcbiAgICAgICAgICAgIH0pXHJcbiAgICAgICAgICAgIC5maWx0ZXIobm90TnVsbE9yVW5kZWZpbmVkKTtcclxuXHJcbiAgICAgICAgcmV0dXJuIHRoaXMuYnVpbGRMYXlvdXQoaW50ZXJtZWRpYXRlTGF5b3V0KTtcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIGlkTm90Rm91bmQoaWQ6IHN0cmluZyk6IHVuZGVmaW5lZCB7XHJcbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcclxuICAgICAgICBjb25zb2xlLmVycm9yKFxyXG4gICAgICAgICAgICBgTm8gZGFzaGJvYXJkIHdpZGdldCB3YXMgZm91bmQgd2l0aCB0aGUgaWQgXCIke2lkfVwiXFxuQXZhaWxhYmxlIGlkczogJHtbLi4udGhpcy5yZWdpc3RyeS5rZXlzKCldXHJcbiAgICAgICAgICAgICAgICAubWFwKF9pZCA9PiBgXCIke19pZH1cImApXHJcbiAgICAgICAgICAgICAgICAuam9pbignLCAnKX1gLFxyXG4gICAgICAgICk7XHJcbiAgICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgZ2V0VmFsaWRXaWR0aChcclxuICAgICAgICBpZDogc3RyaW5nLFxyXG4gICAgICAgIGNvbmZpZzogRGFzaGJvYXJkV2lkZ2V0Q29uZmlnLFxyXG4gICAgICAgIHRhcmdldFdpZHRoOiBEYXNoYm9hcmRXaWRnZXRXaWR0aCxcclxuICAgICk6IERhc2hib2FyZFdpZGdldFdpZHRoIHtcclxuICAgICAgICBsZXQgYWRqdXN0ZWRXaWR0aCA9IHRhcmdldFdpZHRoO1xyXG4gICAgICAgIGNvbnN0IHN1cHBvcnRlZFdpZHRocyA9IGNvbmZpZy5zdXBwb3J0ZWRXaWR0aHM/Lmxlbmd0aFxyXG4gICAgICAgICAgICA/IGNvbmZpZy5zdXBwb3J0ZWRXaWR0aHNcclxuICAgICAgICAgICAgOiAoWzMsIDQsIDYsIDgsIDEyXSBhcyBEYXNoYm9hcmRXaWRnZXRXaWR0aFtdKTtcclxuICAgICAgICBpZiAoIXN1cHBvcnRlZFdpZHRocy5pbmNsdWRlcyh0YXJnZXRXaWR0aCkpIHtcclxuICAgICAgICAgICAgLy8gRmFsbCBiYWNrIHRvIHRoZSBsYXJnZXN0IHN1cHBvcnRlZCB3aWR0aFxyXG4gICAgICAgICAgICBjb25zdCBzb3J0ZWRXaWR0aHMgPSBzdXBwb3J0ZWRXaWR0aHMuc29ydCgoYSwgYikgPT4gYSAtIGIpO1xyXG4gICAgICAgICAgICBjb25zdCBmYWxsYmFja1dpZHRoID0gc3VwcG9ydGVkV2lkdGhzW3NvcnRlZFdpZHRocy5sZW5ndGggLSAxXTtcclxuICAgICAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcclxuICAgICAgICAgICAgY29uc29sZS5lcnJvcihcclxuICAgICAgICAgICAgICAgIGBUaGUgXCIke2lkfVwiIHdpZGdldCBkb2VzIG5vdCBzdXBwb3J0IHRoZSBzcGVjaWZpZWQgd2lkdGggKCR7dGFyZ2V0V2lkdGh9KS5cXG5TdXBwb3J0ZWQgd2lkdGhzIGFyZTogWyR7c29ydGVkV2lkdGhzLmpvaW4oXHJcbiAgICAgICAgICAgICAgICAgICAgJywgJyxcclxuICAgICAgICAgICAgICAgICl9XS5cXG5Vc2luZyAoJHtmYWxsYmFja1dpZHRofSkgaW5zdGVhZC5gLFxyXG4gICAgICAgICAgICApO1xyXG4gICAgICAgICAgICBhZGp1c3RlZFdpZHRoID0gZmFsbGJhY2tXaWR0aDtcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIGFkanVzdGVkV2lkdGg7XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBidWlsZExheW91dChpbnRlcm1lZGlhdGVMYXlvdXQ6IFdpZGdldExheW91dFtudW1iZXJdKTogV2lkZ2V0TGF5b3V0IHtcclxuICAgICAgICBjb25zdCBsYXlvdXQ6IFdpZGdldExheW91dCA9IFtdO1xyXG4gICAgICAgIGxldCByb3c6IFdpZGdldExheW91dFtudW1iZXJdID0gW107XHJcbiAgICAgICAgZm9yIChjb25zdCB7IGlkLCBjb25maWcsIHdpZHRoIH0gb2YgaW50ZXJtZWRpYXRlTGF5b3V0KSB7XHJcbiAgICAgICAgICAgIGNvbnN0IHJvd1NpemUgPSByb3cucmVkdWNlKChzaXplLCBjKSA9PiBzaXplICsgYy53aWR0aCwgMCk7XHJcbiAgICAgICAgICAgIGlmICgxMiA8IHJvd1NpemUgKyB3aWR0aCkge1xyXG4gICAgICAgICAgICAgICAgbGF5b3V0LnB1c2gocm93KTtcclxuICAgICAgICAgICAgICAgIHJvdyA9IFtdO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIHJvdy5wdXNoKHsgaWQsIGNvbmZpZywgd2lkdGggfSk7XHJcbiAgICAgICAgfVxyXG4gICAgICAgIGxheW91dC5wdXNoKHJvdyk7XHJcbiAgICAgICAgcmV0dXJuIGxheW91dDtcclxuICAgIH1cclxufVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGFzaGJvYXJkLXdpZGdldC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb3JlL3NyYy9wcm92aWRlcnMvZGFzaGJvYXJkLXdpZGdldC9kYXNoYm9hcmQtd2lkZ2V0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7QUFXdEU7O0dBRUc7QUFJSCxNQUFNLE9BQU8sc0JBQXNCO0lBSG5DO1FBSVksYUFBUSxHQUFHLElBQUksR0FBRyxFQUFpQyxDQUFDO1FBQ3BELGNBQVMsR0FBMkIsRUFBRSxDQUFDO0tBbUdsRDtJQWpHRyxjQUFjLENBQUMsRUFBVSxFQUFFLE1BQTZCO1FBQ3BELElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEVBQUU7WUFDdkIsTUFBTSxJQUFJLEtBQUssQ0FBQyxtQ0FBbUMsRUFBRSxrQkFBa0IsQ0FBQyxDQUFDO1NBQzVFO1FBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxtQkFBbUIsQ0FDZixzQkFBb0M7UUFFcEMsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLGFBQXVCLEVBQUUsU0FBbUIsRUFBVyxFQUFFLENBQ2hGLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFcEQsT0FBTyxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsQ0FBQzthQUM5QixNQUFNLENBQ0gsQ0FBQyxDQUFDLEVBQUUsRUFBRSxNQUFNLENBQUMsRUFBRSxFQUFFLENBQ2IsQ0FBQyxNQUFNLENBQUMsbUJBQW1CO1lBQzNCLGlCQUFpQixDQUFDLE1BQU0sQ0FBQyxtQkFBbUIsRUFBRSxzQkFBc0IsQ0FBQyxDQUM1RTthQUNBLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLE1BQU0sQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQsYUFBYSxDQUFDLEVBQVU7UUFDcEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsTUFBOEI7UUFDM0MsSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUM7SUFDNUIsQ0FBQztJQUVELGdCQUFnQjtRQUNaLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUMxQixDQUFDO0lBRUQsZUFBZSxDQUFDLFNBQWtDO1FBQzlDLE1BQU0sa0JBQWtCLEdBQUcsQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQzthQUNuRCxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFO1lBQ25CLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQ3JDLElBQUksQ0FBQyxNQUFNLEVBQUU7Z0JBQ1QsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUUsQ0FBQyxDQUFDO2FBQzlCO1lBQ0QsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsRUFBRSxDQUFDO1FBQ3hFLENBQUMsQ0FBQzthQUNELE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBRWhDLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFFTyxVQUFVLENBQUMsRUFBVTtRQUN6QixzQ0FBc0M7UUFDdEMsT0FBTyxDQUFDLEtBQUssQ0FDVCw4Q0FBOEMsRUFBRSxxQkFBcUIsQ0FBQyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7YUFDekYsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsSUFBSSxHQUFHLEdBQUcsQ0FBQzthQUN0QixJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FDcEIsQ0FBQztRQUNGLE9BQU87SUFDWCxDQUFDO0lBRU8sYUFBYSxDQUNqQixFQUFVLEVBQ1YsTUFBNkIsRUFDN0IsV0FBaUM7UUFFakMsSUFBSSxhQUFhLEdBQUcsV0FBVyxDQUFDO1FBQ2hDLE1BQU0sZUFBZSxHQUFHLE1BQU0sQ0FBQyxlQUFlLEVBQUUsTUFBTTtZQUNsRCxDQUFDLENBQUMsTUFBTSxDQUFDLGVBQWU7WUFDeEIsQ0FBQyxDQUFFLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBNEIsQ0FBQztRQUNuRCxJQUFJLENBQUMsZUFBZSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsRUFBRTtZQUN4QywyQ0FBMkM7WUFDM0MsTUFBTSxZQUFZLEdBQUcsZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztZQUMzRCxNQUFNLGFBQWEsR0FBRyxlQUFlLENBQUMsWUFBWSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztZQUMvRCxzQ0FBc0M7WUFDdEMsT0FBTyxDQUFDLEtBQUssQ0FDVCxRQUFRLEVBQUUsa0RBQWtELFdBQVcsOEJBQThCLFlBQVksQ0FBQyxJQUFJLENBQ2xILElBQUksQ0FDUCxjQUFjLGFBQWEsWUFBWSxDQUMzQyxDQUFDO1lBQ0YsYUFBYSxHQUFHLGFBQWEsQ0FBQztTQUNqQztRQUNELE9BQU8sYUFBYSxDQUFDO0lBQ3pCLENBQUM7SUFFTyxXQUFXLENBQUMsa0JBQXdDO1FBQ3hELE1BQU0sTUFBTSxHQUFpQixFQUFFLENBQUM7UUFDaEMsSUFBSSxHQUFHLEdBQXlCLEVBQUUsQ0FBQztRQUNuQyxLQUFLLE1BQU0sRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxJQUFJLGtCQUFrQixFQUFFO1lBQ3BELE1BQU0sT0FBTyxHQUFHLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztZQUMzRCxJQUFJLEVBQUUsR0FBRyxPQUFPLEdBQUcsS0FBSyxFQUFFO2dCQUN0QixNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2dCQUNqQixHQUFHLEdBQUcsRUFBRSxDQUFDO2FBQ1o7WUFDRCxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO1NBQ25DO1FBQ0QsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNqQixPQUFPLE1BQU0sQ0FBQztJQUNsQixDQUFDOzhHQXBHUSxzQkFBc0I7a0hBQXRCLHNCQUFzQixjQUZuQixNQUFNOzsyRkFFVCxzQkFBc0I7a0JBSGxDLFVBQVU7bUJBQUM7b0JBQ1IsVUFBVSxFQUFFLE1BQU07aUJBQ3JCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBub3ROdWxsT3JVbmRlZmluZWQgfSBmcm9tICdAdmVuZHVyZS9jb21tb24vbGliL3NoYXJlZC11dGlscyc7XHJcblxyXG5pbXBvcnQgeyBQZXJtaXNzaW9uIH0gZnJvbSAnLi4vLi4vY29tbW9uL2dlbmVyYXRlZC10eXBlcyc7XHJcblxyXG5pbXBvcnQge1xyXG4gICAgRGFzaGJvYXJkV2lkZ2V0Q29uZmlnLFxyXG4gICAgRGFzaGJvYXJkV2lkZ2V0V2lkdGgsXHJcbiAgICBXaWRnZXRMYXlvdXQsXHJcbiAgICBXaWRnZXRMYXlvdXREZWZpbml0aW9uLFxyXG59IGZyb20gJy4vZGFzaGJvYXJkLXdpZGdldC10eXBlcyc7XHJcblxyXG4vKipcclxuICogUmVzcG9uc2libGUgZm9yIHJlZ2lzdGVyaW5nIGRhc2hib2FyZCB3aWRnZXQgY29tcG9uZW50cyBhbmQgcXVlcnlpbmcgZm9yIGxheW91dHMuXHJcbiAqL1xyXG5ASW5qZWN0YWJsZSh7XHJcbiAgICBwcm92aWRlZEluOiAncm9vdCcsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEYXNoYm9hcmRXaWRnZXRTZXJ2aWNlIHtcclxuICAgIHByaXZhdGUgcmVnaXN0cnkgPSBuZXcgTWFwPHN0cmluZywgRGFzaGJvYXJkV2lkZ2V0Q29uZmlnPigpO1xyXG4gICAgcHJpdmF0ZSBsYXlvdXREZWY6IFdpZGdldExheW91dERlZmluaXRpb24gPSBbXTtcclxuXHJcbiAgICByZWdpc3RlcldpZGdldChpZDogc3RyaW5nLCBjb25maWc6IERhc2hib2FyZFdpZGdldENvbmZpZykge1xyXG4gICAgICAgIGlmICh0aGlzLnJlZ2lzdHJ5LmhhcyhpZCkpIHtcclxuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKGBBIGRhc2hib2FyZCB3aWRnZXQgd2l0aCB0aGUgaWQgXCIke2lkfVwiIGFscmVhZHkgZXhpc3RzYCk7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICB0aGlzLnJlZ2lzdHJ5LnNldChpZCwgY29uZmlnKTtcclxuICAgIH1cclxuXHJcbiAgICBnZXRBdmFpbGFibGVXaWRnZXRzKFxyXG4gICAgICAgIGN1cnJlbnRVc2VyUGVybWlzc2lvbnM6IFBlcm1pc3Npb25bXSxcclxuICAgICk6IEFycmF5PHsgaWQ6IHN0cmluZzsgY29uZmlnOiBEYXNoYm9hcmRXaWRnZXRDb25maWcgfT4ge1xyXG4gICAgICAgIGNvbnN0IGhhc0FsbFBlcm1pc3Npb25zID0gKHJlcXVpcmVkUGVybXM6IHN0cmluZ1tdLCB1c2VyUGVybXM6IHN0cmluZ1tdKTogYm9vbGVhbiA9PlxyXG4gICAgICAgICAgICByZXF1aXJlZFBlcm1zLmV2ZXJ5KHAgPT4gdXNlclBlcm1zLmluY2x1ZGVzKHApKTtcclxuXHJcbiAgICAgICAgcmV0dXJuIFsuLi50aGlzLnJlZ2lzdHJ5LmVudHJpZXMoKV1cclxuICAgICAgICAgICAgLmZpbHRlcihcclxuICAgICAgICAgICAgICAgIChbaWQsIGNvbmZpZ10pID0+XHJcbiAgICAgICAgICAgICAgICAgICAgIWNvbmZpZy5yZXF1aXJlc1Blcm1pc3Npb25zIHx8XHJcbiAgICAgICAgICAgICAgICAgICAgaGFzQWxsUGVybWlzc2lvbnMoY29uZmlnLnJlcXVpcmVzUGVybWlzc2lvbnMsIGN1cnJlbnRVc2VyUGVybWlzc2lvbnMpLFxyXG4gICAgICAgICAgICApXHJcbiAgICAgICAgICAgIC5tYXAoKFtpZCwgY29uZmlnXSkgPT4gKHsgaWQsIGNvbmZpZyB9KSk7XHJcbiAgICB9XHJcblxyXG4gICAgZ2V0V2lkZ2V0QnlJZChpZDogc3RyaW5nKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMucmVnaXN0cnkuZ2V0KGlkKTtcclxuICAgIH1cclxuXHJcbiAgICBzZXREZWZhdWx0TGF5b3V0KGxheW91dDogV2lkZ2V0TGF5b3V0RGVmaW5pdGlvbikge1xyXG4gICAgICAgIHRoaXMubGF5b3V0RGVmID0gbGF5b3V0O1xyXG4gICAgfVxyXG5cclxuICAgIGdldERlZmF1bHRMYXlvdXQoKTogV2lkZ2V0TGF5b3V0RGVmaW5pdGlvbiB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMubGF5b3V0RGVmO1xyXG4gICAgfVxyXG5cclxuICAgIGdldFdpZGdldExheW91dChsYXlvdXREZWY/OiBXaWRnZXRMYXlvdXREZWZpbml0aW9uKTogV2lkZ2V0TGF5b3V0IHtcclxuICAgICAgICBjb25zdCBpbnRlcm1lZGlhdGVMYXlvdXQgPSAobGF5b3V0RGVmIHx8IHRoaXMubGF5b3V0RGVmKVxyXG4gICAgICAgICAgICAubWFwKCh7IGlkLCB3aWR0aCB9KSA9PiB7XHJcbiAgICAgICAgICAgICAgICBjb25zdCBjb25maWcgPSB0aGlzLnJlZ2lzdHJ5LmdldChpZCk7XHJcbiAgICAgICAgICAgICAgICBpZiAoIWNvbmZpZykge1xyXG4gICAgICAgICAgICAgICAgICAgIHJldHVybiB0aGlzLmlkTm90Rm91bmQoaWQpO1xyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICAgICAgcmV0dXJuIHsgaWQsIGNvbmZpZywgd2lkdGg6IHRoaXMuZ2V0VmFsaWRXaWR0aChpZCwgY29uZmlnLCB3aWR0aCkgfTtcclxuICAgICAgICAgICAgfSlcclxuICAgICAgICAgICAgLmZpbHRlcihub3ROdWxsT3JVbmRlZmluZWQpO1xyXG5cclxuICAgICAgICByZXR1cm4gdGhpcy5idWlsZExheW91dChpbnRlcm1lZGlhdGVMYXlvdXQpO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgaWROb3RGb3VuZChpZDogc3RyaW5nKTogdW5kZWZpbmVkIHtcclxuICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tY29uc29sZVxyXG4gICAgICAgIGNvbnNvbGUuZXJyb3IoXHJcbiAgICAgICAgICAgIGBObyBkYXNoYm9hcmQgd2lkZ2V0IHdhcyBmb3VuZCB3aXRoIHRoZSBpZCBcIiR7aWR9XCJcXG5BdmFpbGFibGUgaWRzOiAke1suLi50aGlzLnJlZ2lzdHJ5LmtleXMoKV1cclxuICAgICAgICAgICAgICAgIC5tYXAoX2lkID0+IGBcIiR7X2lkfVwiYClcclxuICAgICAgICAgICAgICAgIC5qb2luKCcsICcpfWAsXHJcbiAgICAgICAgKTtcclxuICAgICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBnZXRWYWxpZFdpZHRoKFxyXG4gICAgICAgIGlkOiBzdHJpbmcsXHJcbiAgICAgICAgY29uZmlnOiBEYXNoYm9hcmRXaWRnZXRDb25maWcsXHJcbiAgICAgICAgdGFyZ2V0V2lkdGg6IERhc2hib2FyZFdpZGdldFdpZHRoLFxyXG4gICAgKTogRGFzaGJvYXJkV2lkZ2V0V2lkdGgge1xyXG4gICAgICAgIGxldCBhZGp1c3RlZFdpZHRoID0gdGFyZ2V0V2lkdGg7XHJcbiAgICAgICAgY29uc3Qgc3VwcG9ydGVkV2lkdGhzID0gY29uZmlnLnN1cHBvcnRlZFdpZHRocz8ubGVuZ3RoXHJcbiAgICAgICAgICAgID8gY29uZmlnLnN1cHBvcnRlZFdpZHRoc1xyXG4gICAgICAgICAgICA6IChbMywgNCwgNiwgOCwgMTJdIGFzIERhc2hib2FyZFdpZGdldFdpZHRoW10pO1xyXG4gICAgICAgIGlmICghc3VwcG9ydGVkV2lkdGhzLmluY2x1ZGVzKHRhcmdldFdpZHRoKSkge1xyXG4gICAgICAgICAgICAvLyBGYWxsIGJhY2sgdG8gdGhlIGxhcmdlc3Qgc3VwcG9ydGVkIHdpZHRoXHJcbiAgICAgICAgICAgIGNvbnN0IHNvcnRlZFdpZHRocyA9IHN1cHBvcnRlZFdpZHRocy5zb3J0KChhLCBiKSA9PiBhIC0gYik7XHJcbiAgICAgICAgICAgIGNvbnN0IGZhbGxiYWNrV2lkdGggPSBzdXBwb3J0ZWRXaWR0aHNbc29ydGVkV2lkdGhzLmxlbmd0aCAtIDFdO1xyXG4gICAgICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tY29uc29sZVxyXG4gICAgICAgICAgICBjb25zb2xlLmVycm9yKFxyXG4gICAgICAgICAgICAgICAgYFRoZSBcIiR7aWR9XCIgd2lkZ2V0IGRvZXMgbm90IHN1cHBvcnQgdGhlIHNwZWNpZmllZCB3aWR0aCAoJHt0YXJnZXRXaWR0aH0pLlxcblN1cHBvcnRlZCB3aWR0aHMgYXJlOiBbJHtzb3J0ZWRXaWR0aHMuam9pbihcclxuICAgICAgICAgICAgICAgICAgICAnLCAnLFxyXG4gICAgICAgICAgICAgICAgKX1dLlxcblVzaW5nICgke2ZhbGxiYWNrV2lkdGh9KSBpbnN0ZWFkLmAsXHJcbiAgICAgICAgICAgICk7XHJcbiAgICAgICAgICAgIGFkanVzdGVkV2lkdGggPSBmYWxsYmFja1dpZHRoO1xyXG4gICAgICAgIH1cclxuICAgICAgICByZXR1cm4gYWRqdXN0ZWRXaWR0aDtcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIGJ1aWxkTGF5b3V0KGludGVybWVkaWF0ZUxheW91dDogV2lkZ2V0TGF5b3V0W251bWJlcl0pOiBXaWRnZXRMYXlvdXQge1xyXG4gICAgICAgIGNvbnN0IGxheW91dDogV2lkZ2V0TGF5b3V0ID0gW107XHJcbiAgICAgICAgbGV0IHJvdzogV2lkZ2V0TGF5b3V0W251bWJlcl0gPSBbXTtcclxuICAgICAgICBmb3IgKGNvbnN0IHsgaWQsIGNvbmZpZywgd2lkdGggfSBvZiBpbnRlcm1lZGlhdGVMYXlvdXQpIHtcclxuICAgICAgICAgICAgY29uc3Qgcm93U2l6ZSA9IHJvdy5yZWR1Y2UoKHNpemUsIGMpID0+IHNpemUgKyBjLndpZHRoLCAwKTtcclxuICAgICAgICAgICAgaWYgKDEyIDwgcm93U2l6ZSArIHdpZHRoKSB7XHJcbiAgICAgICAgICAgICAgICBsYXlvdXQucHVzaChyb3cpO1xyXG4gICAgICAgICAgICAgICAgcm93ID0gW107XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgcm93LnB1c2goeyBpZCwgY29uZmlnLCB3aWR0aCB9KTtcclxuICAgICAgICB9XHJcbiAgICAgICAgbGF5b3V0LnB1c2gocm93KTtcclxuICAgICAgICByZXR1cm4gbGF5b3V0O1xyXG4gICAgfVxyXG59XHJcbiJdfQ==

package/esm2022/core/shared/components/action-bar/action-bar.component.mjs

@@ -39,11 +39,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
             }] } });
 export class ActionBarComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ActionBarComponent, selector: "vdr-action-bar", queries: [{ propertyName: "left", first: true, predicate: ActionBarLeftComponent, descendants: true }, { propertyName: "right", first: true, predicate: ActionBarRightComponent, descendants: true }], ngImport: i0, template: "<div class=\"left-content\" [class.grow]=\"left?.grow\"><ng-content select=\"vdr-ab-left\"></ng-content></div>\r\n<div class=\"right-content\" [class.grow]=\"right?.grow\"><ng-content select=\"vdr-ab-right\"></ng-content></div>\r\n", styles: [":host{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow{flex:1}:host .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child{margin-right:0}@media screen and (min-width: 768px){:host{flex-direction:row}:host .right-content{width:initial}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ActionBarComponent, selector: "vdr-action-bar", queries: [{ propertyName: "left", first: true, predicate: ActionBarLeftComponent, descendants: true }, { propertyName: "right", first: true, predicate: ActionBarRightComponent, descendants: true }], ngImport: i0, template: "<div class=\"left-content\" [class.grow]=\"left?.grow\"><ng-content select=\"vdr-ab-left\"></ng-content></div>\r\n<div class=\"right-content\" [class.grow]=\"right?.grow\"><ng-content select=\"vdr-ab-right\"></ng-content></div>\r\n", styles: [":host{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow{flex:1}:host .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host{flex-direction:row}:host .right-content{width:initial}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ActionBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-action-bar', template: "<div class=\"left-content\" [class.grow]=\"left?.grow\"><ng-content select=\"vdr-ab-left\"></ng-content></div>\r\n<div class=\"right-content\" [class.grow]=\"right?.grow\"><ng-content select=\"vdr-ab-right\"></ng-content></div>\r\n", styles: [":host{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow{flex:1}:host .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child{margin-right:0}@media screen and (min-width: 768px){:host{flex-direction:row}:host .right-content{width:initial}}\n"] }]
+            args: [{ selector: 'vdr-action-bar', template: "<div class=\"left-content\" [class.grow]=\"left?.grow\"><ng-content select=\"vdr-ab-left\"></ng-content></div>\r\n<div class=\"right-content\" [class.grow]=\"right?.grow\"><ng-content select=\"vdr-ab-right\"></ng-content></div>\r\n", styles: [":host{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow{flex:1}:host .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host{flex-direction:row}:host .right-content{width:initial}}\n"] }]
         }], propDecorators: { left: [{
                 type: ContentChild,
                 args: [ActionBarLeftComponent]

package/esm2022/core/shared/components/affixed-input/affixed-input.component.mjs

@@ -6,11 +6,11 @@ import * as i1 from "@angular/common";
  */
 export class AffixedInputComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AffixedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: { prefix: "prefix", suffix: "suffix" }, ngImport: i0, template: "<div [class.has-prefix]=\"!!prefix\" [class.has-suffix]=\"!!suffix\" class=\"input-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>\r\n<div class=\"affix prefix\" *ngIf=\"prefix\">{{ prefix }}</div>\r\n<div class=\"affix suffix\" *ngIf=\"suffix\">{{ suffix }}</div>\r\n", styles: [":host{display:flex}.input-wrapper{flex:1}.affix{color:var(--color-grey-800);display:flex;align-items:center;background-color:var(--color-component-bg-200);color:var(--color-text-200);border:1px solid var(--color-component-border-300);top:1px;padding:3px;line-height:.58333rem;transition:border .2s}::ng-deep .has-prefix>input[type=text],::ng-deep .has-prefix>input[type=number]{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.prefix{order:-1;border-radius:3px 0 0 3px;border-right:none}::ng-deep .has-suffix>input[type=text],::ng-deep .has-suffix>input[type=number]{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.suffix{border-radius:0 3px 3px 0;border-left:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: { prefix: "prefix", suffix: "suffix" }, ngImport: i0, template: "<div [class.has-prefix]=\"!!prefix\" [class.has-suffix]=\"!!suffix\" class=\"input-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>\r\n<div class=\"affix prefix\" *ngIf=\"prefix\">{{ prefix }}</div>\r\n<div class=\"affix suffix\" *ngIf=\"suffix\">{{ suffix }}</div>\r\n", styles: [":host{display:flex}.input-wrapper{flex:1}.affix{color:var(--color-grey-800);display:flex;align-items:center;background-color:var(--color-component-bg-200);color:var(--color-text-200);border:1px solid var(--color-component-border-300);top:1px;padding:3px;line-height:.58333rem;transition:border .2s}::ng-deep .has-prefix>input[type=text],::ng-deep .has-prefix>input[type=number]{border-top-left-radius:0!important;border-bottom-left-radius:0!important;width:100%}.prefix{order:-1;border-radius:3px 0 0 3px;border-inline-end:none}::ng-deep .has-suffix>input[type=text],::ng-deep .has-suffix>input[type=number]{border-top-right-radius:0!important;border-bottom-right-radius:0!important;width:100%}.suffix{border-radius:0 3px 3px 0;border-inline-start:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AffixedInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-affixed-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.has-prefix]=\"!!prefix\" [class.has-suffix]=\"!!suffix\" class=\"input-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>\r\n<div class=\"affix prefix\" *ngIf=\"prefix\">{{ prefix }}</div>\r\n<div class=\"affix suffix\" *ngIf=\"suffix\">{{ suffix }}</div>\r\n", styles: [":host{display:flex}.input-wrapper{flex:1}.affix{color:var(--color-grey-800);display:flex;align-items:center;background-color:var(--color-component-bg-200);color:var(--color-text-200);border:1px solid var(--color-component-border-300);top:1px;padding:3px;line-height:.58333rem;transition:border .2s}::ng-deep .has-prefix>input[type=text],::ng-deep .has-prefix>input[type=number]{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.prefix{order:-1;border-radius:3px 0 0 3px;border-right:none}::ng-deep .has-suffix>input[type=text],::ng-deep .has-suffix>input[type=number]{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.suffix{border-radius:0 3px 3px 0;border-left:none}\n"] }]
+            args: [{ selector: 'vdr-affixed-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.has-prefix]=\"!!prefix\" [class.has-suffix]=\"!!suffix\" class=\"input-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>\r\n<div class=\"affix prefix\" *ngIf=\"prefix\">{{ prefix }}</div>\r\n<div class=\"affix suffix\" *ngIf=\"suffix\">{{ suffix }}</div>\r\n", styles: [":host{display:flex}.input-wrapper{flex:1}.affix{color:var(--color-grey-800);display:flex;align-items:center;background-color:var(--color-component-bg-200);color:var(--color-text-200);border:1px solid var(--color-component-border-300);top:1px;padding:3px;line-height:.58333rem;transition:border .2s}::ng-deep .has-prefix>input[type=text],::ng-deep .has-prefix>input[type=number]{border-top-left-radius:0!important;border-bottom-left-radius:0!important;width:100%}.prefix{order:-1;border-radius:3px 0 0 3px;border-inline-end:none}::ng-deep .has-suffix>input[type=text],::ng-deep .has-suffix>input[type=number]{border-top-right-radius:0!important;border-bottom-right-radius:0!important;width:100%}.suffix{border-radius:0 3px 3px 0;border-inline-start:none}\n"] }]
         }], propDecorators: { prefix: [{
                 type: Input
             }], suffix: [{

package/esm2022/core/shared/components/asset-gallery/asset-gallery.component.mjs

@@ -74,11 +74,11 @@ export class AssetGalleryComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i6.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i7.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: i8.AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i10.FileSizePipe, name: "filesize" }, { kind: "pipe", type: i11.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:start;list-style-type:none;margin-inline-start:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i6.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i7.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: i8.AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i10.FileSizePipe, name: "filesize" }, { kind: "pipe", type: i11.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"] }]
+            args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:start;list-style-type:none;margin-inline-start:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ModalService }]; }, propDecorators: { assets: [{
                 type: Input
             }], multiSelect: [{

package/esm2022/core/shared/components/asset-preview/asset-preview.component.mjs

@@ -169,11 +169,11 @@ export class AssetPreviewComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i1.FormBuilder }, { token: i2.DataService }, { token: i3.NotificationService }, { token: i0.ChangeDetectorRef }, { token: i4.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:800px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}\n"], dependencies: [{ kind: "directive", type: i5.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i9.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i10.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i11.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i12.FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: i13.TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: i14.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i15.AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: i16.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i17.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i18.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i19.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i20.TranslatePipe, name: "translate" }, { kind: "pipe", type: i21.FileSizePipe, name: "filesize" }, { kind: "pipe", type: i22.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i23.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:800px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}\n"], dependencies: [{ kind: "directive", type: i5.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i9.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i10.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i11.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i12.FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: i13.TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: i14.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i15.AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: i16.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i17.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i18.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i19.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i20.TranslatePipe, name: "translate" }, { kind: "pipe", type: i21.FileSizePipe, name: "filesize" }, { kind: "pipe", type: i22.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i23.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:800px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}\n"] }]
+            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:800px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.DataService }, { type: i3.NotificationService }, { type: i0.ChangeDetectorRef }, { type: i4.ModalService }]; }, propDecorators: { asset: [{
                 type: Input
             }], editable: [{

package/esm2022/core/shared/components/card/card.component.mjs

@@ -16,11 +16,11 @@ export class CardComponent {
         this.paddingX = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CardComponent, selector: "vdr-card", inputs: { title: "title", paddingX: "paddingX" }, queries: [{ propertyName: "controlsTemplate", first: true, predicate: CardControlsDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"card-container\" [class.padding-x]=\"paddingX\">\r\n    <div *ngIf=\"title || controlsTemplate\" class=\"title-row\">\r\n        <span class=\"title\">{{ title }}</span>\r\n        <div class=\"controls\" *ngIf=\"controlsTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"controlsTemplate\"></ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"contents\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-left:var(--card-padding);padding-right:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CardComponent, selector: "vdr-card", inputs: { title: "title", paddingX: "paddingX" }, queries: [{ propertyName: "controlsTemplate", first: true, predicate: CardControlsDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"card-container\" [class.padding-x]=\"paddingX\">\r\n    <div *ngIf=\"title || controlsTemplate\" class=\"title-row\">\r\n        <span class=\"title\">{{ title }}</span>\r\n        <div class=\"controls\" *ngIf=\"controlsTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"controlsTemplate\"></ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"contents\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\" [class.padding-x]=\"paddingX\">\r\n    <div *ngIf=\"title || controlsTemplate\" class=\"title-row\">\r\n        <span class=\"title\">{{ title }}</span>\r\n        <div class=\"controls\" *ngIf=\"controlsTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"controlsTemplate\"></ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"contents\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-left:var(--card-padding);padding-right:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}\n"] }]
+            args: [{ selector: 'vdr-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\" [class.padding-x]=\"paddingX\">\r\n    <div *ngIf=\"title || controlsTemplate\" class=\"title-row\">\r\n        <span class=\"title\">{{ title }}</span>\r\n        <div class=\"controls\" *ngIf=\"controlsTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"controlsTemplate\"></ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"contents\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], paddingX: [{

package/esm2022/core/shared/components/channel-assignment-control/channel-assignment-control.component.mjs

@@ -95,7 +95,7 @@ export class ChannelAssignmentControlComponent {
                 useExisting: ChannelAssignmentControlComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-left:6px}.channel-label{margin-right:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i5.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+        ], ngImport: i0, template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-inline-start:6px}.channel-label{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i5.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChannelAssignmentControlComponent, decorators: [{
             type: Component,
@@ -105,7 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
                             useExisting: ChannelAssignmentControlComponent,
                             multi: true,
                         },
-                    ], template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-left:6px}.channel-label{margin-right:6px}\n"] }]
+                    ], template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-inline-start:6px}.channel-label{margin-inline-end:6px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }]; }, propDecorators: { multiple: [{
                 type: Input
             }], includeDefaultChannel: [{

package/esm2022/core/shared/components/channel-badge/channel-badge.component.mjs

@@ -8,11 +8,11 @@ export class ChannelBadgeComponent {
         return this.channelCode === DEFAULT_CHANNEL_CODE;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChannelBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: { channelCode: "channelCode" }, ngImport: i0, template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n", styles: [":host{display:inline-block}@media screen and (max-width: 992px){clr-icon{margin-right:0}}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i2.StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: { channelCode: "channelCode" }, ngImport: i0, template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n", styles: [":host{display:inline-block}@media screen and (max-width: 992px){clr-icon{margin-inline-end:0}}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i2.StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChannelBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-channel-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n", styles: [":host{display:inline-block}@media screen and (max-width: 992px){clr-icon{margin-right:0}}\n"] }]
+            args: [{ selector: 'vdr-channel-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n", styles: [":host{display:inline-block}@media screen and (max-width: 992px){clr-icon{margin-inline-end:0}}\n"] }]
         }], propDecorators: { channelCode: [{
                 type: Input
             }] } });

package/esm2022/core/shared/components/chip/chip.component.mjs

@@ -28,11 +28,11 @@ export class ChipComponent {
         this.iconClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChipComponent, selector: "vdr-chip", inputs: { icon: "icon", invert: "invert", colorFrom: "colorFrom", colorType: "colorType" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:baseline;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChipComponent, selector: "vdr-chip", inputs: { icon: "icon", invert: "invert", colorFrom: "colorFrom", colorType: "colorType" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:baseline;gap:2px}.chip-icon{border-inline-start:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:baseline;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"] }]
+            args: [{ selector: 'vdr-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:baseline;gap:2px}.chip-icon{border-inline-start:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], invert: [{

package/esm2022/core/shared/components/configurable-input/configurable-input.component.mjs

@@ -124,7 +124,7 @@ export class ConfigurableInputComponent {
                 useExisting: forwardRef(() => ConfigurableInputComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"button-small warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-right:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { kind: "component", type: i5.DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.SentenceCasePipe, name: "sentenceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"button-small warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-inline-end:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { kind: "component", type: i5.DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.SentenceCasePipe, name: "sentenceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ConfigurableInputComponent, decorators: [{
             type: Component,
@@ -139,7 +139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
                             useExisting: forwardRef(() => ConfigurableInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"button-small warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-right:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"] }]
+                    ], template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"button-small warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-inline-end:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"] }]
         }], propDecorators: { operation: [{
                 type: Input
             }], operationDefinition: [{

package/esm2022/core/shared/components/customer-label/customer-label.component.mjs

@@ -6,11 +6,11 @@ import * as i3 from "@angular/router";
 import * as i4 from "@ngx-translate/core";
 export class CustomerLabelComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CustomerLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CustomerLabelComponent, selector: "vdr-customer-label", inputs: { customer: "customer" }, ngImport: i0, template: "<a *ngIf=\"customer\" class=\"button-ghost\" [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n    <clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n    <span>{{ customer.firstName }} {{ customer.lastName }}</span>\r\n    <clr-icon shape=\"arrow right\"></clr-icon>\r\n</a>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-right:6px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CustomerLabelComponent, selector: "vdr-customer-label", inputs: { customer: "customer" }, ngImport: i0, template: "<a *ngIf=\"customer\" class=\"button-ghost\" [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n    <clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n    <span>{{ customer.firstName }} {{ customer.lastName }}</span>\r\n    <clr-icon shape=\"arrow right\"></clr-icon>\r\n</a>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CustomerLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a *ngIf=\"customer\" class=\"button-ghost\" [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n    <clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n    <span>{{ customer.firstName }} {{ customer.lastName }}</span>\r\n    <clr-icon shape=\"arrow right\"></clr-icon>\r\n</a>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-right:6px}\n"] }]
+            args: [{ selector: 'vdr-customer-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a *ngIf=\"customer\" class=\"button-ghost\" [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n    <clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n    <span>{{ customer.firstName }} {{ customer.lastName }}</span>\r\n    <clr-icon shape=\"arrow right\"></clr-icon>\r\n</a>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-inline-end:6px}\n"] }]
         }], propDecorators: { customer: [{
                 type: Input
             }] } });

package/esm2022/core/shared/components/data-table-2/data-table-search.component.mjs

@@ -5,11 +5,11 @@ import * as i2 from "@angular/forms";
 import * as i3 from "../form-field/form-field-control.directive";
 export class DataTable2SearchComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTable2SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: { searchTermControl: "searchTermControl", searchTermPlaceholder: "searchTermPlaceholder" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template #vdrDt2Search>\r\n    <div class=\"search-wrapper\">\r\n        <clr-icon shape=\"search\" class=\"search-icon\"></clr-icon>\r\n        <input [formControl]=\"searchTermControl\" [placeholder]=\"searchTermPlaceholder\" />\r\n    </div>\r\n</ng-template>\r\n", styles: [".search-wrapper{position:relative}.search-wrapper .search-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;color:var(--color-weight-600)}.search-wrapper>input{padding-left:32px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormFieldControlDirective, selector: "input, textarea, select" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: { searchTermControl: "searchTermControl", searchTermPlaceholder: "searchTermPlaceholder" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template #vdrDt2Search>\r\n    <div class=\"search-wrapper\">\r\n        <clr-icon shape=\"search\" class=\"search-icon\"></clr-icon>\r\n        <input [formControl]=\"searchTermControl\" [placeholder]=\"searchTermPlaceholder\" />\r\n    </div>\r\n</ng-template>\r\n", styles: [".search-wrapper{position:relative}.search-wrapper .search-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;color:var(--color-weight-600)}.search-wrapper>input{padding-inline-start:32px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormFieldControlDirective, selector: "input, textarea, select" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTable2SearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-dt2-search', template: "<ng-template #vdrDt2Search>\r\n    <div class=\"search-wrapper\">\r\n        <clr-icon shape=\"search\" class=\"search-icon\"></clr-icon>\r\n        <input [formControl]=\"searchTermControl\" [placeholder]=\"searchTermPlaceholder\" />\r\n    </div>\r\n</ng-template>\r\n", styles: [".search-wrapper{position:relative}.search-wrapper .search-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;color:var(--color-weight-600)}.search-wrapper>input{padding-left:32px!important;width:100%}\n"] }]
+            args: [{ selector: 'vdr-dt2-search', template: "<ng-template #vdrDt2Search>\r\n    <div class=\"search-wrapper\">\r\n        <clr-icon shape=\"search\" class=\"search-icon\"></clr-icon>\r\n        <input [formControl]=\"searchTermControl\" [placeholder]=\"searchTermPlaceholder\" />\r\n    </div>\r\n</ng-template>\r\n", styles: [".search-wrapper{position:relative}.search-wrapper .search-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;color:var(--color-weight-600)}.search-wrapper>input{padding-inline-start:32px!important;width:100%}\n"] }]
         }], propDecorators: { searchTermControl: [{
                 type: Input
             }], searchTermPlaceholder: [{