@elderbyte/ngx-starter 17.1.1 → 17.1.3

package/esm2022/lib/components/i18n/locales/elder-locales-de-ch.module.mjs

@@ -31,15 +31,15 @@ export class ElderLocalesDeChModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderLocalesDeChModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderLocalesDeChModule, imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderLocalesDeChModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ElderLocalesDeChModule, imports: [
             // common
             CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderLocalesDeChModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderLocalesDeChModule, imports: [
             // common
             CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderLocalesDeChModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderLocalesDeChModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/iframes/data-view/data-view-iframe/data-view-iframe.component.mjs

@@ -105,10 +105,10 @@ export class DataViewIframeComponent {
     buildDataViewInitMessage(options, initialSelection) {
         return DataViewMessage.initialSelection(new DataViewSelectionInit(options, initialSelection, this.idField));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: DataViewIframeComponent, deps: [{ token: i1.ElderDataViewOptionsProvider, optional: true }, { token: i2.SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: DataViewIframeComponent, selector: "elder-data-view-iframe", inputs: { srcUrl: "srcUrl", idField: "idField", initialSelection: "initialSelection", dataViewOptions: "dataViewOptions" }, viewQueries: [{ propertyName: "iframeHost", first: true, predicate: IframeHostComponent, descendants: true }], ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-i-frame-host class=\"flex\"\n                      [iframeParams]=\"{srcUrl: srcUrl, hideActionBar: true}\"\n                      (message)=\"onMessageFromChild($event)\">\n  </elder-i-frame-host>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i3.IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataViewIframeComponent, deps: [{ token: i1.ElderDataViewOptionsProvider, optional: true }, { token: i2.SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DataViewIframeComponent, selector: "elder-data-view-iframe", inputs: { srcUrl: "srcUrl", idField: "idField", initialSelection: "initialSelection", dataViewOptions: "dataViewOptions" }, viewQueries: [{ propertyName: "iframeHost", first: true, predicate: IframeHostComponent, descendants: true }], ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-i-frame-host class=\"flex\"\n                      [iframeParams]=\"{srcUrl: srcUrl, hideActionBar: true}\"\n                      (message)=\"onMessageFromChild($event)\">\n  </elder-i-frame-host>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i3.IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: DataViewIframeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataViewIframeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-view-iframe', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full\">\n  <elder-i-frame-host class=\"flex\"\n                      [iframeParams]=\"{srcUrl: srcUrl, hideActionBar: true}\"\n                      (message)=\"onMessageFromChild($event)\">\n  </elder-i-frame-host>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.ElderDataViewOptionsProvider, decorators: [{

package/esm2022/lib/components/iframes/data-view/data-view-iframe-adapter.directive.mjs

@@ -104,8 +104,8 @@ export class DataViewIframeAdapterDirective {
     buildSelectionMessage(selection) {
         return DataViewMessage.selection(new DataViewSelection(selection));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: DataViewIframeAdapterDirective, deps: [{ token: i1.IframeService }, { token: i2.SelectionModel }, { token: i3.ElderDataViewOptionsProvider }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: DataViewIframeAdapterDirective, selector: "[elderDataViewIframeAdapter]", host: { listeners: { "window:message": "onWindowsMessage($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataViewIframeAdapterDirective, deps: [{ token: i1.IframeService }, { token: i2.SelectionModel }, { token: i3.ElderDataViewOptionsProvider }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: DataViewIframeAdapterDirective, selector: "[elderDataViewIframeAdapter]", host: { listeners: { "window:message": "onWindowsMessage($event)" } }, providers: [
             {
                 provide: SelectionModel,
                 useFactory: createSelectionModel
@@ -116,7 +116,7 @@ export class DataViewIframeAdapterDirective {
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: DataViewIframeAdapterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DataViewIframeAdapterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderDataViewIframeAdapter]',

package/esm2022/lib/components/iframes/elder-iframe.module.mjs

@@ -24,8 +24,8 @@ export * from './typed-event-message';
 export * from './data-view/data-view-iframe/data-view-iframe.component';
 export * from './data-view/data-view-iframe-adapter.directive';
 export class ElderIFrameModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderIFrameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderIFrameModule, declarations: [IframeHostComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderIFrameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ElderIFrameModule, declarations: [IframeHostComponent,
             IframeDialogComponent,
             IframeSideContentComponent,
             IframeCloseDirective,
@@ -49,7 +49,7 @@ export class ElderIFrameModule {
             IframeCloseDirective,
             DataViewIframeComponent,
             DataViewIframeAdapterDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderIFrameModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderIFrameModule, imports: [
             // Angular
             CommonModule,
             RouterModule,
@@ -64,7 +64,7 @@ export class ElderIFrameModule {
             MatToolbarModule,
             ElderThemeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderIFrameModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderIFrameModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/iframes/iframe-close.directive.mjs

@@ -21,10 +21,10 @@ export class IframeCloseDirective {
         this.logger.debug('Iframe result:', this.iframeResult);
         this.iframeService.postCloseMessage(this.iframeResult);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeCloseDirective, deps: [{ token: i1.IframeService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: IframeCloseDirective, selector: "[elderIframeClose]", inputs: { iframeResult: ["elderIframeClose", "iframeResult"] }, host: { listeners: { "click": "onClick($event)" } }, exportAs: ["elderIframeClose"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeCloseDirective, deps: [{ token: i1.IframeService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: IframeCloseDirective, selector: "[elderIframeClose]", inputs: { iframeResult: ["elderIframeClose", "iframeResult"] }, host: { listeners: { "click": "onClick($event)" } }, exportAs: ["elderIframeClose"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderIframeClose]',

package/esm2022/lib/components/iframes/iframe-dialog/iframe-dialog.component.mjs

@@ -38,10 +38,10 @@ export class IframeDialogComponent {
     close(data) {
         this.dialogRef.close(data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: IframeDialogComponent, selector: "elder-i-frame-dialog", ngImport: i0, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" class=\"full\">\n    <elder-i-frame-host class=\"full\"\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: IframeDialogComponent, selector: "elder-i-frame-dialog", ngImport: i0, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" class=\"full\">\n    <elder-i-frame-host class=\"full\"\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" class=\"full\">\n    <elder-i-frame-host class=\"full\"\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n</div>\n\n\n\n" }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{

package/esm2022/lib/components/iframes/iframe-host/iframe-host.component.mjs

@@ -114,10 +114,10 @@ export class IframeHostComponent {
             this.iframeState$.next(new IFrameState('VIEW_READY'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: { iframeParams: "iframeParams" }, outputs: { message: "message", close: "close" }, host: { listeners: { "window:message": "onWindowMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div class=\"layout-col full\">\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             class=\"layout-row place-center-center flex\"\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe #iframe\n                *ngIf=\"!ctx.state.hasError\"\n                (load)=\"onIframeLoadEvent($event)\"\n                (error)=\"onIframeErrorEvent($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe flex\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n      <mat-toolbar *ngIf=\"!ctx.params.hideActionBar\" elderTheme class=\"layout-row place-between-center flex-none elder-dense-toolbar\">\n\n        <a mat-icon-button (click)=\"doClose($event)\" class=\"elder-icon-button-sm\">\n          <mat-icon>close</mat-icon>\n        </a>\n\n        <a mat-icon-button class=\"elder-icon-button-sm\"\n           [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n          <mat-icon>open_in_new</mat-icon>\n        </a>\n      </mat-toolbar>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}.elder-dense-toolbar,.elder-dense-toolbar .mat-toolbar-row{height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i5.ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.ElderSafeUrlPipe, name: "elderSafeUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: { iframeParams: "iframeParams" }, outputs: { message: "message", close: "close" }, host: { listeners: { "window:message": "onWindowMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div class=\"layout-col full\">\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             class=\"layout-row place-center-center flex\"\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe #iframe\n                *ngIf=\"!ctx.state.hasError\"\n                (load)=\"onIframeLoadEvent($event)\"\n                (error)=\"onIframeErrorEvent($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe flex\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n      <mat-toolbar *ngIf=\"!ctx.params.hideActionBar\" elderTheme class=\"layout-row place-between-center flex-none elder-dense-toolbar\">\n\n        <a mat-icon-button (click)=\"doClose($event)\" class=\"elder-icon-button-sm\">\n          <mat-icon>close</mat-icon>\n        </a>\n\n        <a mat-icon-button class=\"elder-icon-button-sm\"\n           [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n          <mat-icon>open_in_new</mat-icon>\n        </a>\n      </mat-toolbar>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}.elder-dense-toolbar,.elder-dense-toolbar .mat-toolbar-row{height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i5.ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.ElderSafeUrlPipe, name: "elderSafeUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div class=\"layout-col full\">\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             class=\"layout-row place-center-center flex\"\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe #iframe\n                *ngIf=\"!ctx.state.hasError\"\n                (load)=\"onIframeLoadEvent($event)\"\n                (error)=\"onIframeErrorEvent($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe flex\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n      <mat-toolbar *ngIf=\"!ctx.params.hideActionBar\" elderTheme class=\"layout-row place-between-center flex-none elder-dense-toolbar\">\n\n        <a mat-icon-button (click)=\"doClose($event)\" class=\"elder-icon-button-sm\">\n          <mat-icon>close</mat-icon>\n        </a>\n\n        <a mat-icon-button class=\"elder-icon-button-sm\"\n           [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n          <mat-icon>open_in_new</mat-icon>\n        </a>\n      </mat-toolbar>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}.elder-dense-toolbar,.elder-dense-toolbar .mat-toolbar-row{height:40px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { iframe: [{

package/esm2022/lib/components/iframes/iframe-side-content/iframe-side-content.component.mjs

@@ -68,10 +68,10 @@ export class IframeSideContentComponent {
             queryParamsHandling: 'merge'
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeSideContentComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.ElderShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: IframeSideContentComponent, selector: "elder-i-frame-side-host", ngImport: i0, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" class=\"full\"\n>\n    <elder-i-frame-host class=\"full\"\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeSideContentComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.ElderShellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: IframeSideContentComponent, selector: "elder-i-frame-side-host", ngImport: i0, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" class=\"full\"\n>\n    <elder-i-frame-host class=\"full\"\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeSideContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeSideContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-side-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" class=\"full\"\n>\n    <elder-i-frame-host class=\"full\"\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.ElderShellService }] });

package/esm2022/lib/components/iframes/iframe.service.mjs

@@ -40,10 +40,10 @@ export class IframeService {
     postDataMessage(message) {
         IframeService.postToParent(message);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: IframeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: IframeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/lib/components/infinitescroll/elder-infinite-autocomplete.directive.mjs

@@ -45,10 +45,10 @@ export class ElderInfiniteAutocompleteDirective {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderInfiniteAutocompleteDirective, deps: [{ token: i1.MatAutocomplete, host: true }, { token: i2.ElderInfiniteScrollDirective, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderInfiniteAutocompleteDirective, deps: [{ token: i1.MatAutocomplete, host: true }, { token: i2.ElderInfiniteScrollDirective, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderInfiniteAutocompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderInfiniteAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-autocomplete[elderElderInfiniteAutocomplete]'

package/esm2022/lib/components/infinitescroll/elder-infinite-scroll.directive.mjs

@@ -132,10 +132,10 @@ export class ElderInfiniteScrollDirective {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderInfiniteScrollDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: { listenToHost: "listenToHost", eventThrottle: "eventThrottle", offsetFactor: "offsetFactor", ignoreScrollEvent: "ignoreScrollEvent", containerId: "containerId", scrollContainer: "scrollContainer" }, outputs: { closeToEnd: "closeToEnd", scrolling: "scrolling" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderInfiniteScrollDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: { listenToHost: "listenToHost", eventThrottle: "eventThrottle", offsetFactor: "offsetFactor", ignoreScrollEvent: "ignoreScrollEvent", containerId: "containerId", scrollContainer: "scrollContainer" }, outputs: { closeToEnd: "closeToEnd", scrolling: "scrolling" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderInfiniteScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderInfiniteScrollDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[elderInfiniteScroll]' }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { listenToHost: [{

package/esm2022/lib/components/infinitescroll/elder-infinite-scroll.module.mjs

@@ -6,13 +6,13 @@ import * as i0 from "@angular/core";
 export { ElderInfiniteScrollDirective } from './elder-infinite-scroll.directive';
 export { ElderInfiniteAutocompleteDirective } from './elder-infinite-autocomplete.directive';
 export class ElderInfiniteScrollModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderInfiniteScrollModule, declarations: [ElderInfiniteScrollDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ElderInfiniteScrollModule, declarations: [ElderInfiniteScrollDirective,
             ElderInfiniteAutocompleteDirective], imports: [CommonModule], exports: [ElderInfiniteScrollDirective,
             ElderInfiniteAutocompleteDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderInfiniteScrollModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderInfiniteScrollModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderInfiniteScrollModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderInfiniteScrollModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/lib/components/input/autocomplete/elder-autocomplete/elder-autocomplete.component.mjs

@@ -154,10 +154,10 @@ export class ElderAutocompleteComponent {
         }
         return String(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", optionValueConverterFn: "optionValueConverterFn", enabled: "enabled", valueTemplate: "valueTemplate", dataContext: "dataContext", displayPropertyResolver: "displayPropertyResolver" }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderAutocomplete"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(dataContext$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"dataContext$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div class=\"layout-row place-start-center gap-sm\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"mat-caption\">DataContext Closed!</span>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"availableSuggestions$ | async as suggestions\">\n\n      <mat-option *ngIf=\"suggestions.length === 0\" disabled>\n        No Data.\n      </mat-option>\n\n      <ng-container *ngFor=\"let suggestion of suggestions\">\n        <mat-option\n          *ngIf=\"isOptionVisible(suggestion)\"\n          [value]=\"toOptionValue(suggestion)\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n          <!--\n          <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n          -->\n        </mat-option>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{propertyResolver(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: i5.ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", optionValueConverterFn: "optionValueConverterFn", enabled: "enabled", valueTemplate: "valueTemplate", dataContext: "dataContext", displayPropertyResolver: "displayPropertyResolver" }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderAutocomplete"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(dataContext$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"dataContext$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div class=\"layout-row place-start-center gap-sm\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"mat-caption\">DataContext Closed!</span>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"availableSuggestions$ | async as suggestions\">\n\n      <mat-option *ngIf=\"suggestions.length === 0\" disabled>\n        No Data.\n      </mat-option>\n\n      <ng-container *ngFor=\"let suggestion of suggestions\">\n        <mat-option\n          *ngIf=\"isOptionVisible(suggestion)\"\n          [value]=\"toOptionValue(suggestion)\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n          <!--\n          <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n          -->\n        </mat-option>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{propertyResolver(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: i5.ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-autocomplete', exportAs: 'elderAutocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(dataContext$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"dataContext$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div class=\"layout-row place-start-center gap-sm\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"mat-caption\">DataContext Closed!</span>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"availableSuggestions$ | async as suggestions\">\n\n      <mat-option *ngIf=\"suggestions.length === 0\" disabled>\n        No Data.\n      </mat-option>\n\n      <ng-container *ngFor=\"let suggestion of suggestions\">\n        <mat-option\n          *ngIf=\"isOptionVisible(suggestion)\"\n          [value]=\"toOptionValue(suggestion)\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n          <!--\n          <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n          -->\n        </mat-option>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{propertyResolver(value)}}</span>\n  </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { valueTemplateQuery: [{

package/esm2022/lib/components/input/autocomplete/elder-autocomplete-many.directive.mjs

@@ -169,10 +169,10 @@ export class ElderAutocompleteManyDirective {
         // The wordAtCursor might not be the full autocompleted phrase (if there are multiple words)
         this.cursorPosition = wordAtCursor.start + autocompletedPhrase.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteManyDirective, deps: [{ token: i1.MatAutocompleteTrigger }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderAutocompleteManyDirective, selector: "[elderAutocompleteMany]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", textProperty: "textProperty", textPropertyResolverFn: "textPropertyResolverFn", autocomplete: ["elderAutocompleteMany", "autocomplete"] }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteManyDirective, deps: [{ token: i1.MatAutocompleteTrigger }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ElderAutocompleteManyDirective, selector: "[elderAutocompleteMany]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", textProperty: "textProperty", textPropertyResolverFn: "textPropertyResolverFn", autocomplete: ["elderAutocompleteMany", "autocomplete"] }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteManyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteManyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderAutocompleteMany]'

package/esm2022/lib/components/input/autocomplete/elder-autocomplete.directive.mjs

@@ -90,10 +90,10 @@ export class ElderAutocompleteDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteDirective, deps: [{ token: i1.MatAutocompleteTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", autocomplete: ["elderAutocomplete", "autocomplete"] }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteDirective, deps: [{ token: i1.MatAutocompleteTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", autocomplete: ["elderAutocomplete", "autocomplete"] }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderAutocomplete]'

package/esm2022/lib/components/input/autocomplete/elder-autocomplete.module.mjs

@@ -14,8 +14,8 @@ export { ElderAutocompleteComponent } from './elder-autocomplete/elder-autocompl
 export { ElderAutocompleteManyDirective } from './elder-autocomplete-many.directive';
 export { ElderAutocompleteDirective } from './elder-autocomplete.directive';
 export class ElderAutocompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteModule, declarations: [ElderAutocompleteComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteModule, declarations: [ElderAutocompleteComponent,
             ElderAutocompleteDirective,
             ElderAutocompleteManyDirective], imports: [CommonModule, ReactiveFormsModule,
             MatInputModule,
@@ -25,14 +25,14 @@ export class ElderAutocompleteModule {
             MatProgressBarModule], exports: [ElderAutocompleteComponent,
             ElderAutocompleteDirective,
             ElderAutocompleteManyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteModule, imports: [CommonModule, ReactiveFormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteModule, imports: [CommonModule, ReactiveFormsModule,
             MatInputModule,
             MatAutocompleteModule,
             ElderInfiniteScrollModule,
             MatIconModule,
             MatProgressBarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/lib/components/labels/elder-labels.module.mjs

@@ -10,13 +10,13 @@ import { TranslateModule } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 export { ElderLabelInputComponent } from './labels-input/labels-input.component';
 export class ElderLabelsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderLabelsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderLabelsModule, declarations: [ElderLabelInputComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderLabelsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ElderLabelsModule, declarations: [ElderLabelInputComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule,
             MatIconModule, MatInputModule, MatChipsModule, MatAutocompleteModule, TranslateModule], exports: [ElderLabelInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderLabelsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderLabelsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
             MatIconModule, MatInputModule, MatChipsModule, MatAutocompleteModule, TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderLabelsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderLabelsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/labels/labels-input/labels-input.component.mjs

@@ -192,10 +192,10 @@ export class ElderLabelInputComponent extends FormFieldBaseComponent {
     areEqual(a, b) {
         return this._compareWith ? this._compareWith(a, b) : a === b;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderLabelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderLabelInputComponent, selector: "elder-label-input", inputs: { labels: "labels", suggestionLoader: "suggestionLoader", allowNew: "allowNew", compareWith: "compareWith", colorResolver: "colorResolver", nameResolver: "nameResolver", labelBuilder: "labelBuilder" }, outputs: { labelsChanged: "labelsChanged" }, providers: buildFormIntegrationProviders(ElderLabelInputComponent), viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["labelInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\" [disabled]=\"disabled\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly && removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-grid>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      panelWidth=\"auto\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderLabelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ElderLabelInputComponent, selector: "elder-label-input", inputs: { labels: "labels", suggestionLoader: "suggestionLoader", allowNew: "allowNew", compareWith: "compareWith", colorResolver: "colorResolver", nameResolver: "nameResolver", labelBuilder: "labelBuilder" }, outputs: { labelsChanged: "labelsChanged" }, providers: buildFormIntegrationProviders(ElderLabelInputComponent), viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["labelInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\" [disabled]=\"disabled\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly && removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-grid>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      panelWidth=\"auto\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderLabelInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderLabelInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-label-input', providers: buildFormIntegrationProviders(ElderLabelInputComponent), changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\" [disabled]=\"disabled\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly && removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-grid>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      panelWidth=\"auto\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputControl: [{

package/esm2022/lib/components/measures/dimensions/dimensions-input/elder-dimensions-input.component.mjs

@@ -217,12 +217,12 @@ export class ElderDimensionsInputComponent extends ElderFormFieldControlBase {
     dimensionsOfHeight(value) {
         return Dimensions.from(this.unit, this.lengthValue, this.widthValue, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderDimensionsInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderDimensionsInputComponent, selector: "elder-dimensions-input", inputs: { name: "name", appearance: "appearance", color: "color", placeholderLength: "placeholderLength", placeholderWidth: "placeholderWidth", placeholderHeight: "placeholderHeight", displayFormat: "displayFormat", mode: "mode", requiredLength: "requiredLength", requiredWidth: "requiredWidth", requiredHeight: "requiredHeight", unit: "unit", lengthValue: "lengthValue", widthValue: "widthValue", heightValue: "heightValue" }, outputs: { unitChange: "unitChange", lengthValueChange: "lengthValueChange", widthValueChange: "widthValueChange", heightValueChange: "heightValueChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderDimensionsInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ElderDimensionsInputComponent, selector: "elder-dimensions-input", inputs: { name: "name", appearance: "appearance", color: "color", placeholderLength: "placeholderLength", placeholderWidth: "placeholderWidth", placeholderHeight: "placeholderHeight", displayFormat: "displayFormat", mode: "mode", requiredLength: "requiredLength", requiredWidth: "requiredWidth", requiredHeight: "requiredHeight", unit: "unit", lengthValue: "lengthValue", widthValue: "widthValue", heightValue: "heightValue" }, outputs: { unitChange: "unitChange", lengthValueChange: "lengthValueChange", widthValueChange: "widthValueChange", heightValueChange: "heightValueChange" }, providers: [
             { provide: MatFormFieldControl, useExisting: ElderDimensionsInputComponent },
         ], usesInheritance: true, ngImport: i0, template: "<div role=\"group\" class=\"layout-row place-start-baseline g-md full\"\n     *ngIf=\"context$ | async as context\">\n\n  <!-- elder-form-field-small -->\n  <elder-quantity-input *ngIf=\"context.lengthActive\"\n    [quantityValue]=\"lengthValue\"\n    (quantityValueChange)=\"onLengthValueChanged($event)\"\n    [unit]=\"unit\"\n    [placeholder]=\"(placeholderLength ? placeholderLength : 'dimensions.length') | translate\"\n    [displayFormat]=\"displayFormat\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [hideUnit]=\"!context.isLengthLast\"\n  >\n  </elder-quantity-input>\n\n  <span class=\"noselect\" *ngIf=\"context.lengthActive && context.widthActive\">&times;</span>\n\n  <elder-quantity-input *ngIf=\"context.widthActive\"\n    [quantityValue]=\"widthValue\"\n    (quantityValueChange)=\"onWidthValueChanged($event)\"\n    [unit]=\"unit\"\n    [displayFormat]=\"displayFormat\"\n    [placeholder]=\"(placeholderWidth ? placeholderWidth : 'dimensions.width') | translate\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [hideUnit]=\"!context.isWidthLast\"\n  >\n  </elder-quantity-input>\n\n  <span class=\"noselect\" *ngIf=\"context.widthActive && context.heightActive\">&times;</span>\n\n  <elder-quantity-input *ngIf=\"context.heightActive\"\n    [quantityValue]=\"heightValue\"\n    (quantityValueChange)=\"onHeightValueChanged($event)\"\n    [unit]=\"unit\"\n    [displayFormat]=\"displayFormat\"\n    [placeholder]=\"(placeholderHeight ? placeholderHeight : 'dimensions.height') | translate\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n  >\n  </elder-quantity-input>\n\n  <!--\n[requiredIgnoreZero]=\"requiredIgnoreZero\"\n                      [elderMultipleOf]=\"multipleOf\" ngModel\n                      [min]=\"min\"\n                      [max]=\"max\"\n                      [required]=\"requiredLength\"\n                      -->\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ElderQuantityInputControlComponent, selector: "elder-quantity-input", inputs: ["displayFormat", "quantityValue", "unit", "hideUnit"], outputs: ["quantityValueChange", "unitChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderDimensionsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderDimensionsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-dimensions-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: MatFormFieldControl, useExisting: ElderDimensionsInputComponent },

package/esm2022/lib/components/measures/dimensions/validation/elder-required-dimensions.validator.mjs

@@ -69,12 +69,12 @@ export class ElderRequiredDimensionsValidator {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderRequiredDimensionsValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderRequiredDimensionsValidator, selector: "elder-dimensions-input[required][formControl],elder-dimensions-input[required][formControlName],elder-dimensions-input[required][ngModel]", inputs: { requiredIgnoreZero: "requiredIgnoreZero", required: "required" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderRequiredDimensionsValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ElderRequiredDimensionsValidator, selector: "elder-dimensions-input[required][formControl],elder-dimensions-input[required][formControlName],elder-dimensions-input[required][ngModel]", inputs: { requiredIgnoreZero: "requiredIgnoreZero", required: "required" }, providers: [
             { provide: NG_VALIDATORS, useExisting: ElderRequiredDimensionsValidator, multi: true }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderRequiredDimensionsValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderRequiredDimensionsValidator, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/esm2022/lib/components/measures/directives/elder-unit-select.directive.mjs

@@ -48,10 +48,10 @@ export class ElderUnitSelectDirective {
     resetFilters() {
         this.select.filters = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderUnitSelectDirective, deps: [{ token: i1.ElderSelectComponent }, { token: i2.ElderUnitService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderUnitSelectDirective, selector: "[elderUnitSelect]", inputs: { unitDimension: "unitDimension", baseUnit: "baseUnit" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderUnitSelectDirective, deps: [{ token: i1.ElderSelectComponent }, { token: i2.ElderUnitService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: ElderUnitSelectDirective, selector: "[elderUnitSelect]", inputs: { unitDimension: "unitDimension", baseUnit: "baseUnit" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderUnitSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderUnitSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderUnitSelect]'

package/esm2022/lib/components/measures/elder-measures.module.mjs

@@ -27,8 +27,8 @@ export * from './directives/elder-unit-select.directive';
 export * from './dimensions/dimensions-input/elder-dimensions-input.component';
 export * from './dimensions/validation/elder-required-dimensions.validator';
 export class ElderMeasuresModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderMeasuresModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderMeasuresModule, declarations: [ElderQuantityFormFieldComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderMeasuresModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ElderMeasuresModule, declarations: [ElderQuantityFormFieldComponent,
             ElderQuantityPipe,
             ElderQuantityTransformPipe,
             ElderUnitSelectDirective,
@@ -56,7 +56,7 @@ export class ElderMeasuresModule {
             ElderRequiredQuantityValidator,
             ElderQuantityRangeValidator,
             ElderRequiredDimensionsValidator] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderMeasuresModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderMeasuresModule, providers: [
             DecimalPipe,
             ElderQuantityPipe,
             ElderQuantityTransformPipe
@@ -73,7 +73,7 @@ export class ElderMeasuresModule {
             // ElderByte
             ElderFormsDirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderMeasuresModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderMeasuresModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -122,11 +122,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
  * @deprecated Please switch to the ElderMeasuresModule
  */
 export class ElderQuantityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderQuantityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderQuantityModule, imports: [ElderMeasuresModule], exports: [ElderMeasuresModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderQuantityModule, imports: [ElderMeasuresModule, ElderMeasuresModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderQuantityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ElderQuantityModule, imports: [ElderMeasuresModule], exports: [ElderMeasuresModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderQuantityModule, imports: [ElderMeasuresModule, ElderMeasuresModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderQuantityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderQuantityModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/measures/elder-quantity-transform.pipe.mjs

@@ -29,10 +29,10 @@ export class ElderQuantityTransformPipe {
             return quantity;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderQuantityTransformPipe, deps: [{ token: i1.ElderQuantityService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderQuantityTransformPipe, name: "elderQuantityTransform" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderQuantityTransformPipe, deps: [{ token: i1.ElderQuantityService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ElderQuantityTransformPipe, name: "elderQuantityTransform" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderQuantityTransformPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ElderQuantityTransformPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elderQuantityTransform'