@elderbyte/ngx-starter 16.3.1 → 16.3.3

package/esm2022/lib/components/errors/exception-detail/elder-exception-detail.component.mjs

@@ -50,10 +50,10 @@ export class ElderExceptionDetailComponent {
     set error(error) {
         this.errorCtx$.next(ExceptionDetailCtx.of(error));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderExceptionDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ElderExceptionDetailComponent, selector: "elder-exception-detail", inputs: { expanded: "expanded", stacktraceRows: "stacktraceRows", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"errorCtx$ | async as errorCtx\">\n\n  <mat-accordion *ngIf=\"errorCtx.detail as error\" class=\"full\">\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\" class=\"noselect\">warning</mat-icon>\n          <span class=\"noselect\">{{errorCtx.panelTitle}}</span>\n        </mat-panel-title>\n        <mat-panel-description class=\"noselect\">\n          <span class=\"mat-caption\">{{errorCtx.panelDescription}}</span>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n\n      <div class=\"layout-col flex p-xs\" style=\"overflow: hidden\">\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Detail</mat-label>\n          <input matInput [value]=\"error.detail\" readonly>\n        </mat-form-field>\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Stacktrace</mat-label>\n          <textarea class=\"stacktrace\" matInput [value]=\"error.stacktrace\" [rows]=\"stacktraceRows\"></textarea>\n        </mat-form-field>\n\n      </div>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n</ng-container>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderExceptionDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElderExceptionDetailComponent, selector: "elder-exception-detail", inputs: { expanded: "expanded", stacktraceRows: "stacktraceRows", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"errorCtx$ | async as errorCtx\">\n\n  <mat-accordion *ngIf=\"errorCtx.detail as error\" class=\"full\">\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\" class=\"noselect\">warning</mat-icon>\n          <span class=\"noselect\">{{errorCtx.panelTitle}}</span>\n        </mat-panel-title>\n        <mat-panel-description class=\"noselect\">\n          <span class=\"mat-caption\">{{errorCtx.panelDescription}}</span>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n\n      <div class=\"layout-col flex p-xs\" style=\"overflow: hidden\">\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Detail</mat-label>\n          <input matInput [value]=\"error.detail\" readonly>\n        </mat-form-field>\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Stacktrace</mat-label>\n          <textarea class=\"stacktrace\" matInput [value]=\"error.stacktrace\" [rows]=\"stacktraceRows\"></textarea>\n        </mat-form-field>\n\n      </div>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n</ng-container>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderExceptionDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderExceptionDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-exception-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"errorCtx$ | async as errorCtx\">\n\n  <mat-accordion *ngIf=\"errorCtx.detail as error\" class=\"full\">\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\" class=\"noselect\">warning</mat-icon>\n          <span class=\"noselect\">{{errorCtx.panelTitle}}</span>\n        </mat-panel-title>\n        <mat-panel-description class=\"noselect\">\n          <span class=\"mat-caption\">{{errorCtx.panelDescription}}</span>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n\n      <div class=\"layout-col flex p-xs\" style=\"overflow: hidden\">\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Detail</mat-label>\n          <input matInput [value]=\"error.detail\" readonly>\n        </mat-form-field>\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Stacktrace</mat-label>\n          <textarea class=\"stacktrace\" matInput [value]=\"error.stacktrace\" [rows]=\"stacktraceRows\"></textarea>\n        </mat-form-field>\n\n      </div>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n</ng-container>\n\n\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { expanded: [{

package/esm2022/lib/components/expand-toggle-button/elder-expand-toggle-button.component.mjs

@@ -41,10 +41,10 @@ export class ElderExpandToggleButtonComponent {
     onToggleExpand(event) {
         this.expanded = !this.expanded;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderExpandToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ElderExpandToggleButtonComponent, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "\n<a matRipple class=\"layout-row place-start-center full toggle-button\"\n        (click)=\"onToggleExpand($event)\">\n  <div class=\"layout-row place-start-center flex\">\n\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</a>\n", dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderExpandToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElderExpandToggleButtonComponent, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "\n<a matRipple class=\"layout-row place-start-center full toggle-button\"\n        (click)=\"onToggleExpand($event)\">\n  <div class=\"layout-row place-start-center flex\">\n\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</a>\n", dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderExpandToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderExpandToggleButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<a matRipple class=\"layout-row place-start-center full toggle-button\"\n        (click)=\"onToggleExpand($event)\">\n  <div class=\"layout-row place-start-center flex\">\n\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</a>\n" }]
         }], propDecorators: { expandedChange: [{

package/esm2022/lib/components/expand-toggle-button/elder-expand-toggle-button.module.mjs

@@ -7,11 +7,11 @@ import { MatRippleModule } from '@angular/material/core';
 import * as i0 from "@angular/core";
 export { ElderExpandToggleButtonComponent } from './elder-expand-toggle-button.component';
 export class ElderExpandToggleButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderExpandToggleButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.11", ngImport: i0, type: ElderExpandToggleButtonModule, declarations: [ElderExpandToggleButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule], exports: [ElderExpandToggleButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderExpandToggleButtonModule, imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderExpandToggleButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ElderExpandToggleButtonModule, declarations: [ElderExpandToggleButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule], exports: [ElderExpandToggleButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderExpandToggleButtonModule, imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderExpandToggleButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderExpandToggleButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/files/blob-viewer/elder-blob-viewer.component.mjs

@@ -205,10 +205,10 @@ export class ElderBlobViewerComponent {
             responseType: 'text'
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderBlobViewerComponent, deps: [{ token: i1.HttpClientPristine }, { token: i2.DomSanitizer }, { token: i3.ElderToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ElderBlobViewerComponent, selector: "elder-blob-viewer", inputs: { displayUnknownAsText: "displayUnknownAsText", blob: "blob", blobUrl: "blobUrl", url: "url", mimeType: "mimeType" }, ngImport: i0, template: "<div class=\"layout-col full place-center-center document-viewer\">\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\"\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderBlobViewerComponent, deps: [{ token: i1.HttpClientPristine }, { token: i2.DomSanitizer }, { token: i3.ElderToastService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElderBlobViewerComponent, selector: "elder-blob-viewer", inputs: { displayUnknownAsText: "displayUnknownAsText", blob: "blob", blobUrl: "blobUrl", url: "url", mimeType: "mimeType" }, ngImport: i0, template: "<div class=\"layout-col full place-center-center document-viewer\">\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\"\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderBlobViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderBlobViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full place-center-center document-viewer\">\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\"\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.HttpClientPristine }, { type: i2.DomSanitizer }, { type: i3.ElderToastService }]; }, propDecorators: { displayUnknownAsText: [{

package/esm2022/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.mjs

@@ -23,10 +23,10 @@ export class ElderDropZoneComponent {
         this.icon = 'upload_file';
         this.prompt = 'Drop Files here.';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderDropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ElderDropZoneComponent, selector: "elder-drop-zone", inputs: { icon: "icon", prompt: "prompt" }, outputs: { filesDropped: "filesDropped", dragOver: "dragOver", dragEnd: "dragEnd" }, ngImport: i0, template: "<div class=\"layout-col full elder-drop-zone\"\n     elderFileDropZone\n     (dropFiles)=\"filesDropped.emit($event)\"\n     (dragOver)=\"dragOver.emit($event)\"\n     (dragEnd)=\"dragEnd.emit($event)\"\n>\n  <div class=\"layout-col flex\">\n    <ng-content></ng-content>\n    <!-- Default content -->\n    <div class=\"layout-col flex place-center-center gap-sm elder-default-content\">\n      <mat-icon class=\"elder-drop-zone-icon\">{{icon}}</mat-icon>\n      <span class=\"elder-drop-zone-prompt\">{{prompt | translate}}</span>\n    </div>\n  </div>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.ElderFileDropZoneDirective, selector: "[elderFileDropZone]", inputs: ["dragOverClass"], outputs: ["dragEnter", "dragOver", "dragEnd", "dragEnterFiles", "dropFiles", "elderFileDropZoneChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderDropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElderDropZoneComponent, selector: "elder-drop-zone", inputs: { icon: "icon", prompt: "prompt" }, outputs: { filesDropped: "filesDropped", dragOver: "dragOver", dragEnd: "dragEnd" }, ngImport: i0, template: "<div class=\"layout-col full elder-drop-zone\"\n     elderFileDropZone\n     (dropFiles)=\"filesDropped.emit($event)\"\n     (dragOver)=\"dragOver.emit($event)\"\n     (dragEnd)=\"dragEnd.emit($event)\"\n>\n  <div class=\"layout-col flex\">\n    <ng-content></ng-content>\n    <!-- Default content -->\n    <div class=\"layout-col flex place-center-center gap-sm elder-default-content\">\n      <mat-icon class=\"elder-drop-zone-icon\">{{icon}}</mat-icon>\n      <span class=\"elder-drop-zone-prompt\">{{prompt | translate}}</span>\n    </div>\n  </div>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.ElderFileDropZoneDirective, selector: "[elderFileDropZone]", inputs: ["dragOverClass"], outputs: ["dragEnter", "dragOver", "dragEnd", "dragEnterFiles", "dropFiles", "elderFileDropZoneChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderDropZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderDropZoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-drop-zone', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full elder-drop-zone\"\n     elderFileDropZone\n     (dropFiles)=\"filesDropped.emit($event)\"\n     (dragOver)=\"dragOver.emit($event)\"\n     (dragEnd)=\"dragEnd.emit($event)\"\n>\n  <div class=\"layout-col flex\">\n    <ng-content></ng-content>\n    <!-- Default content -->\n    <div class=\"layout-col flex place-center-center gap-sm elder-default-content\">\n      <mat-icon class=\"elder-drop-zone-icon\">{{icon}}</mat-icon>\n      <span class=\"elder-drop-zone-prompt\">{{prompt | translate}}</span>\n    </div>\n  </div>\n</div>\n\n\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { filesDropped: [{

package/esm2022/lib/components/files/drag-n-drop/global-drag-drop.service.mjs

@@ -72,10 +72,10 @@ export class GlobalDragDropService {
         e.preventDefault();
         this.log.warn('Prevented default Browser Action on DragEvent ', e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: GlobalDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: GlobalDragDropService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalDragDropService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: GlobalDragDropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalDragDropService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/lib/components/files/elder-file-drop-zone.directive.mjs

@@ -103,10 +103,10 @@ export class ElderFileDropZoneDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileDropZoneDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderFileDropZoneDirective, selector: "[elderFileDropZone]", inputs: { dragOverClass: "dragOverClass" }, outputs: { dragEnter: "dragEnter", dragOver: "dragOver", dragEnd: "dragEnd", dragEnterFiles: "dragEnterFiles", dropFiles: "dropFiles", elderFileDropZoneChange: "elderFileDropZoneChange" }, host: { listeners: { "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragend": "onDragEnd($event)", "dragleave": "onDragEnd($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileDropZoneDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderFileDropZoneDirective, selector: "[elderFileDropZone]", inputs: { dragOverClass: "dragOverClass" }, outputs: { dragEnter: "dragEnter", dragOver: "dragOver", dragEnd: "dragEnd", dragEnterFiles: "dragEnterFiles", dropFiles: "dropFiles", elderFileDropZoneChange: "elderFileDropZoneChange" }, host: { listeners: { "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragend": "onDragEnd($event)", "dragleave": "onDragEnd($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileDropZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderFileDropZone]'

package/esm2022/lib/components/files/elder-file-select.directive.mjs

@@ -141,10 +141,10 @@ export class ElderFileSelectDirective {
         }
         return files;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileSelectDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: { elderFileSelect: "elderFileSelect", elderFileSelectMultiple: "elderFileSelectMultiple", elderFileSelectDirectory: "elderFileSelectDirectory" }, outputs: { elderFileSelectChange: "elderFileSelectChange", elderSingleFileSelectChange: "elderSingleFileSelectChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileSelectDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: { elderFileSelect: "elderFileSelect", elderFileSelectMultiple: "elderFileSelectMultiple", elderFileSelectDirectory: "elderFileSelectDirectory" }, outputs: { elderFileSelectChange: "elderFileSelectChange", elderSingleFileSelectChange: "elderSingleFileSelectChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderFileSelect]'

package/esm2022/lib/components/files/elder-file.module.mjs

@@ -24,8 +24,8 @@ export * from './blob-url';
 export * from './listing/file-entry';
 export * from './listing/file-listing-rx';
 export class ElderFileModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.11", ngImport: i0, type: ElderFileModule, declarations: [ElderFileSelectComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ElderFileModule, declarations: [ElderFileSelectComponent,
             ElderFileUploadComponent,
             ElderFileSelectDirective,
             ElderFileDropZoneDirective,
@@ -40,13 +40,13 @@ export class ElderFileModule {
             ElderFileDropZoneDirective,
             ElderBlobViewerComponent,
             ElderDropZoneComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileModule, imports: [CommonModule,
             MatListModule,
             MatButtonModule, MatIconModule,
             MatProgressBarModule,
             ElderPipesModule, TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/files/file-select/file-select.component.mjs

@@ -35,10 +35,10 @@ export class ElderFileSelectComponent {
     fileInputChanged(files) {
         this.filesChange.next(files);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: { multiple: "multiple", accept: "accept", icon: "icon", color: "color" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: ["elderFileSelect", "elderFileSelectMultiple", "elderFileSelectDirectory"], outputs: ["elderFileSelectChange", "elderSingleFileSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: { multiple: "multiple", accept: "accept", icon: "icon", color: "color" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: ["elderFileSelect", "elderFileSelectMultiple", "elderFileSelectDirectory"], outputs: ["elderFileSelectChange", "elderSingleFileSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-file-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { multiple: [{

package/esm2022/lib/components/files/file-upload/file-upload.component.mjs

@@ -49,10 +49,10 @@ export class ElderFileUploadComponent {
         this.uploadProgress = this.uploadClient.uploadFiles(FileEntry.toFileArray(entries));
         return forkJoin(Array.from(this.uploadProgress.values()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ElderFileUploadComponent, selector: "elder-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.length === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.length}})</h2>\n    <mat-list-item *ngFor=\"let fileEntry of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{fileEntry.relativePath}}</h4>\n      <p mat-line> {{fileEntry.file.size | bytes}}  - {{fileEntry.file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(fileEntry.file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : undefined)\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\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: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6.ElderFileSelectComponent, selector: "elder-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.BytesPipe, name: "bytes" }, { kind: "pipe", type: i8.TimeAgoPipe, name: "timeAgo" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElderFileUploadComponent, selector: "elder-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.length === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.length}})</h2>\n    <mat-list-item *ngFor=\"let fileEntry of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{fileEntry.relativePath}}</h4>\n      <p mat-line> {{fileEntry.file.size | bytes}}  - {{fileEntry.file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(fileEntry.file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : undefined)\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\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: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6.ElderFileSelectComponent, selector: "elder-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.BytesPipe, name: "bytes" }, { kind: "pipe", type: i8.TimeAgoPipe, name: "timeAgo" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-file-upload', template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.length === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.length}})</h2>\n    <mat-list-item *ngFor=\"let fileEntry of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{fileEntry.relativePath}}</h4>\n      <p mat-line> {{fileEntry.file.size | bytes}}  - {{fileEntry.file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(fileEntry.file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : undefined)\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { files: [{

package/esm2022/lib/components/forms/clipboard/elder-clipboard.service.mjs

@@ -39,10 +39,10 @@ export class ElderClipboardService {
         document.execCommand('copy');
         return copiedEvent.pipe(first());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderClipboardService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderClipboardService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderClipboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderClipboardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/lib/components/forms/directives/base/elder-class-hostbinding-base.mjs

@@ -22,10 +22,10 @@ export class ElderClassHostBindingBase {
     get enabled() {
         return this._enabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderClassHostBindingBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderClassHostBindingBase, host: { properties: { "class": "this.elementClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderClassHostBindingBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderClassHostBindingBase, host: { properties: { "class": "this.elementClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderClassHostBindingBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderClassHostBindingBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }]; }, propDecorators: { elementClass: [{
                 type: HostBinding,

package/esm2022/lib/components/forms/directives/elder-clipboard-put.directive.mjs

@@ -15,10 +15,10 @@ export class ElderClipboardPutDirective {
         event.preventDefault();
         this.elderClipboardService.writeText(this.payload.toString()).subscribe(copied => this.clipboardCopied.emit(this.payload));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderClipboardPutDirective, deps: [{ token: i1.ElderClipboardService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderClipboardPutDirective, selector: "[elderClipboardPut]", inputs: { payload: ["elderClipboardPut", "payload"] }, outputs: { clipboardCopied: "clipboardCopied" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderClipboardPutDirective, deps: [{ token: i1.ElderClipboardService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderClipboardPutDirective, selector: "[elderClipboardPut]", inputs: { payload: ["elderClipboardPut", "payload"] }, outputs: { clipboardCopied: "clipboardCopied" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderClipboardPutDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderClipboardPutDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderClipboardPut]'

package/esm2022/lib/components/forms/directives/elder-delayed-focus.directive.mjs

@@ -28,10 +28,10 @@ export class ElderDelayedFocusDirective {
             console.warn('ElderDelayedFocusDirective - No element found to focus!');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderDelayedFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderDelayedFocusDirective, selector: "[elderDelayedFocus]", inputs: { elderDelayedFocus: "elderDelayedFocus" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderDelayedFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderDelayedFocusDirective, selector: "[elderDelayedFocus]", inputs: { elderDelayedFocus: "elderDelayedFocus" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderDelayedFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderDelayedFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderDelayedFocus]'

package/esm2022/lib/components/forms/directives/elder-form-field-dense.directive.mjs

@@ -64,10 +64,10 @@ export class ElderFormFieldDenseDirective extends ElderClassHostBindingBase {
             this._matFormField.floatLabel = this._floatLabel; // Always float label so it is not out of bounds
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormFieldDenseDirective, deps: [{ token: i1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: { elderDense: "elderDense", subscriptSizing: "subscriptSizing", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormFieldDenseDirective, deps: [{ token: i1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: { elderDense: "elderDense", subscriptSizing: "subscriptSizing", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormFieldDenseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormFieldDenseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-form-field[elderDense]',

package/esm2022/lib/components/forms/directives/elder-form-field-label.directive.mjs

@@ -65,10 +65,10 @@ export class ElderFormFieldLabelDirective {
             this._matFormField.subscriptSizing = 'dynamic'; // Auto collapse hint/error line
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormFieldLabelDirective, deps: [{ token: i1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderFormFieldLabelDirective, selector: "mat-form-field[elderFormFieldLabel]", inputs: { enabled: ["elderFormFieldLabel", "enabled"] }, host: { properties: { "class.elder-form-field-label": "this.getFormFieldLabelStyle" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormFieldLabelDirective, deps: [{ token: i1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderFormFieldLabelDirective, selector: "mat-form-field[elderFormFieldLabel]", inputs: { enabled: ["elderFormFieldLabel", "enabled"] }, host: { properties: { "class.elder-form-field-label": "this.getFormFieldLabelStyle" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormFieldLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormFieldLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-form-field[elderFormFieldLabel]'

package/esm2022/lib/components/forms/directives/elder-form-field-no-hint.directive.mjs

@@ -27,10 +27,10 @@ export class ElderFormFieldNoHintDirective extends ElderClassHostBindingBase {
             this._matFormField.subscriptSizing = 'dynamic'; // Auto collapse hint/error line
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormFieldNoHintDirective, deps: [{ token: i1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderFormFieldNoHintDirective, selector: "mat-form-field[elderNoHint]", inputs: { elderNoHint: "elderNoHint" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormFieldNoHintDirective, deps: [{ token: i1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderFormFieldNoHintDirective, selector: "mat-form-field[elderNoHint]", inputs: { elderNoHint: "elderNoHint" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormFieldNoHintDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormFieldNoHintDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-form-field[elderNoHint]'

package/esm2022/lib/components/forms/directives/elder-form-field-no-spinner.directive.mjs

@@ -20,10 +20,10 @@ export class ElderFormFieldNoSpinnerDirective extends ElderClassHostBindingBase
     set elderNoSpinner(enabled) {
         this.enabled = coerceBooleanProperty(enabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormFieldNoSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: { elderNoSpinner: "elderNoSpinner" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormFieldNoSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: { elderNoSpinner: "elderNoSpinner" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormFieldNoSpinnerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormFieldNoSpinnerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[elderNoSpinner]'

package/esm2022/lib/components/forms/directives/elder-forms-directives.module.mjs

@@ -41,8 +41,8 @@ export * from './elder-tab-focus-trap.directive';
 export * from './elder-triple-state-checkbox.directive';
 export * from './elder-input-pattern.directive';
 export class ElderFormsDirectivesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormsDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.11", ngImport: i0, type: ElderFormsDirectivesModule, declarations: [ElderDelayedFocusDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormsDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ElderFormsDirectivesModule, declarations: [ElderDelayedFocusDirective,
             ElderTouchedDirective,
             ElderPlugParentFormDirective,
             ElderStopEventPropagationDirective,
@@ -79,9 +79,9 @@ export class ElderFormsDirectivesModule {
             ElderFormFieldNoHintDirective,
             ElderInputPatternDirective,
             ElderValidationErrorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormsDirectivesModule, imports: [CommonModule, MatFormFieldModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormsDirectivesModule, imports: [CommonModule, MatFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderFormsDirectivesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderFormsDirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatFormFieldModule],

package/esm2022/lib/components/forms/directives/elder-initial-value.directive.mjs

@@ -15,7 +15,7 @@ export class ElderInitialValueDirective {
      **************************************************************************/
     constructor(ngModel) {
         //TODO: The debounce time is a hacky workaround, find a proper way to set initial value.
-        // Currently two way binding ngModel deosnt work.
+        // ngModel regular and two way binding differ in initial value, which led to this solution
         this.ngModel = ngModel;
         /***************************************************************************
          *                                                                         *
@@ -26,18 +26,15 @@ export class ElderInitialValueDirective {
         this.initialValue$ = new BehaviorSubject(null);
         this.destroy$ = new Subject();
         this.initialDone$ = new Subject();
-        this.isInitial = true;
         const ngModelValue$ = of("dummy")
             .pipe(delay(10), map(() => this.ngModel.model));
         ngModelValue$
-            .pipe(combineLatestWith(this.initialValue$), takeUntil(this.initialDone$), takeUntil(this.destroy$)).subscribe({
-            next: ([ngModelValue, initialValue]) => {
-                if (initialValue) {
-                    ngModel.control.setValue(initialValue);
-                }
-                this.initialDone$.next();
-                this.initialDone$.complete();
+            .pipe(combineLatestWith(this.initialValue$), takeUntil(this.initialDone$), takeUntil(this.destroy$)).subscribe(([ngModelValue, initialValue]) => {
+            if (initialValue) {
+                ngModel.control.setValue(initialValue);
             }
+            this.initialDone$.next();
+            this.initialDone$.complete();
         });
         // this.ngModelValue = this.ngModel.model;
         // ngModel.control.valueChanges
@@ -74,9 +71,7 @@ export class ElderInitialValueDirective {
      **************************************************************************/
     get valueChanges$() {
         return this.ngModel.control.valueChanges
-            .pipe(takeUntil(this.destroy$)
-        //filter(value => this.filterInitialValue(value))
-        );
+            .pipe(takeUntil(this.destroy$));
     }
     applyInitialValue(value) {
         this.initialValue$.next(value);
@@ -85,22 +80,10 @@ export class ElderInitialValueDirective {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    filterInitialValue(value) {
-        if (this.isInitial && this.ngModelValue$ === value) {
-            this.isInitial = false;
-            return false;
-        }
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderInitialValueDirective, deps: [{ token: i1.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderInitialValueDirective, selector: "[elderInitialValue]", exportAs: ["elderInitialValue"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderInitialValueDirective, deps: [{ token: i1.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderInitialValueDirective, selector: "[elderInitialValue]", exportAs: ["elderInitialValue"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderInitialValueDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderInitialValueDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[elderInitialValue]",
@@ -109,4 +92,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
         }], ctorParameters: function () { return [{ type: i1.NgModel, decorators: [{
                     type: Host
                 }] }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxkZXItaW5pdGlhbC12YWx1ZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lbGRlcmJ5dGUvbmd4LXN0YXJ0ZXIvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm1zL2RpcmVjdGl2ZXMvZWxkZXItaW5pdGlhbC12YWx1ZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFFM0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxFQUFFLEVBQWEsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ2xGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNyRCxPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQU8sTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRTVEOztHQUVHO0FBS0gsTUFBTSxPQUFPLDBCQUEwQjtJQWdCckM7Ozs7Z0ZBSTRFO0lBRTVFLFlBQTRCLE9BQWdCO1FBQzFDLHdGQUF3RjtRQUN4RixpREFBaUQ7UUFGdkIsWUFBTyxHQUFQLE9BQU8sQ0FBUztRQXBCNUM7Ozs7b0ZBSTRFO1FBRTNELFFBQUcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFOUQsa0JBQWEsR0FBeUIsSUFBSSxlQUFlLENBQU0sSUFBSSxDQUFDLENBQUM7UUFFNUQsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFDL0IsaUJBQVksR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBQzVDLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFZdkIsTUFBTSxhQUFhLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQzthQUM5QixJQUFJLENBQ0gsS0FBSyxDQUFDLEVBQUUsQ0FBQyxFQUNULEdBQUcsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUM5QixDQUFDO1FBRUosYUFBYTthQUNWLElBQUksQ0FDSCxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLEVBQ3JDLFNBQVMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEVBQzVCLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQ3pCLENBQUMsU0FBUyxDQUFDO1lBQ1YsSUFBSSxFQUFFLENBQUMsQ0FBQyxZQUFZLEVBQUUsWUFBWSxDQUFDLEVBQUUsRUFBRTtnQkFDckMsSUFBSSxZQUFZLEVBQUU7b0JBQ2hCLE9BQU8sQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxDQUFDO2lCQUN4QztnQkFDRCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxDQUFDO2dCQUN6QixJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQy9CLENBQUM7U0FDRixDQUFDLENBQUM7UUFFTCwwQ0FBMEM7UUFDMUMsK0JBQStCO1FBQy9CLFdBQVc7UUFDWCxvQ0FBb0M7UUFDcEMsb0NBQW9DO1FBQ3BDLHlDQUF5QztRQUN6Qyx3QkFBd0I7UUFDeEIsa0JBQWtCO1FBQ2xCLDBDQUEwQztRQUMxQyxnREFBZ0Q7UUFDaEQsa0NBQWtDO1FBQ2xDLHNDQUFzQztRQUN0QyxzR0FBc0c7UUFDdEcsZUFBZTtRQUNmLHdEQUF3RDtRQUN4RCwyQ0FBMkM7UUFDM0Msc0NBQXNDO1FBQ3RDLDZCQUE2QjtRQUM3QixZQUFZO1FBQ1osUUFBUTtRQUNSLE1BQU07UUFDTixNQUFNO0lBQ1IsQ0FBQztJQUVEOzs7O2dGQUk0RTtJQUc1RTs7OztnRkFJNEU7SUFFNUUsSUFBVyxhQUFhO1FBQ3RCLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsWUFBWTthQUNyQyxJQUFJLENBQ0gsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDeEIsaURBQWlEO1NBQ2xELENBQUM7SUFDTixDQUFDO0lBRU0saUJBQWlCLENBQUMsS0FBVTtRQUNqQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRU0sV0FBVztRQUNoQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVEOzs7O2dGQUk0RTtJQUVwRSxrQkFBa0IsQ0FBQyxLQUFVO1FBQ25DLElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsYUFBYSxLQUFLLEtBQUssRUFBRTtZQUNsRCxJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztZQUN2QixPQUFPLEtBQUssQ0FBQztTQUNkO1FBQ0QsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDOytHQWpIVSwwQkFBMEI7bUdBQTFCLDBCQUEwQjs7NEZBQTFCLDBCQUEwQjtrQkFKdEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUscUJBQXFCO29CQUMvQixRQUFRLEVBQUUsbUJBQW1CO2lCQUM5Qjs7MEJBdUJjLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3QsIE9uRGVzdHJveSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBOZ01vZGVsIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIGNvbWJpbmVMYXRlc3RXaXRoLCBvZiwgc2tpcFVudGlsLCBTdWJqZWN0IH0gZnJvbSBcInJ4anNcIjtcbmltcG9ydCB7IExvZ2dlckZhY3RvcnkgfSBmcm9tIFwiQGVsZGVyYnl0ZS90cy1sb2dnZXJcIjtcbmltcG9ydCB7IGRlbGF5LCBtYXAsIHRha2VVbnRpbCwgdGFwIH0gZnJvbSBcInJ4anMvb3BlcmF0b3JzXCI7XG5cbi8qKlxuICogU2VhcmNoIG5hbWUgYWRhcHRlciBmb3IgaW5wdXQgY29udHJvbHMuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogXCJbZWxkZXJJbml0aWFsVmFsdWVdXCIsXG4gIGV4cG9ydEFzOiBcImVsZGVySW5pdGlhbFZhbHVlXCJcbn0pXG5leHBvcnQgY2xhc3MgRWxkZXJJbml0aWFsVmFsdWVEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuXG4gIC8qKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcbiAgICogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKiBGaWVsZHMgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqL1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgbG9nID0gTG9nZ2VyRmFjdG9yeS5nZXRMb2dnZXIodGhpcy5jb25zdHJ1Y3Rvci5uYW1lKTtcblxuICBwcml2YXRlIGluaXRpYWxWYWx1ZSQ6IEJlaGF2aW9yU3ViamVjdDxhbnk+ID0gbmV3IEJlaGF2aW9yU3ViamVjdDxhbnk+KG51bGwpO1xuICBwcml2YXRlIG5nTW9kZWxWYWx1ZSQ6IGFueTtcbiAgcHJpdmF0ZSByZWFkb25seSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG4gIHByaXZhdGUgcmVhZG9ubHkgaW5pdGlhbERvbmUkID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgcHJpdmF0ZSBpc0luaXRpYWwgPSB0cnVlO1xuXG4gIC8qKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcbiAgICogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKiBDb25zdHJ1Y3RvciAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqL1xuXG4gIGNvbnN0cnVjdG9yKEBIb3N0KCkgcHJpdmF0ZSBuZ01vZGVsOiBOZ01vZGVsKSB7XG4gICAgLy9UT0RPOiBUaGUgZGVib3VuY2UgdGltZSBpcyBhIGhhY2t5IHdvcmthcm91bmQsIGZpbmQgYSBwcm9wZXIgd2F5IHRvIHNldCBpbml0aWFsIHZhbHVlLlxuICAgIC8vIEN1cnJlbnRseSB0d28gd2F5IGJpbmRpbmcgbmdNb2RlbCBkZW9zbnQgd29yay5cblxuICAgIGNvbnN0IG5nTW9kZWxWYWx1ZSQgPSBvZihcImR1bW15XCIpXG4gICAgICAucGlwZShcbiAgICAgICAgZGVsYXkoMTApLFxuICAgICAgICBtYXAoKCkgPT4gdGhpcy5uZ01vZGVsLm1vZGVsKVxuICAgICAgKTtcblxuICAgIG5nTW9kZWxWYWx1ZSRcbiAgICAgIC5waXBlKFxuICAgICAgICBjb21iaW5lTGF0ZXN0V2l0aCh0aGlzLmluaXRpYWxWYWx1ZSQpLFxuICAgICAgICB0YWtlVW50aWwodGhpcy5pbml0aWFsRG9uZSQpLFxuICAgICAgICB0YWtlVW50aWwodGhpcy5kZXN0cm95JCksXG4gICAgICApLnN1YnNjcmliZSh7XG4gICAgICAgIG5leHQ6IChbbmdNb2RlbFZhbHVlLCBpbml0aWFsVmFsdWVdKSA9PiB7XG4gICAgICAgICAgaWYgKGluaXRpYWxWYWx1ZSkge1xuICAgICAgICAgICAgbmdNb2RlbC5jb250cm9sLnNldFZhbHVlKGluaXRpYWxWYWx1ZSk7XG4gICAgICAgICAgfVxuICAgICAgICAgIHRoaXMuaW5pdGlhbERvbmUkLm5leHQoKTtcbiAgICAgICAgICB0aGlzLmluaXRpYWxEb25lJC5jb21wbGV0ZSgpO1xuICAgICAgICB9XG4gICAgICB9KTtcblxuICAgIC8vIHRoaXMubmdNb2RlbFZhbHVlID0gdGhpcy5uZ01vZGVsLm1vZGVsO1xuICAgIC8vIG5nTW9kZWwuY29udHJvbC52YWx1ZUNoYW5nZXNcbiAgICAvLyAgIC5waXBlKFxuICAgIC8vICAgICB0YWtlVW50aWwodGhpcy5pbml0aWFsRG9uZSQpLFxuICAgIC8vICAgICB0YWtlVW50aWwodGhpcy51bnN1YnNjcmliZSQpLFxuICAgIC8vICAgICBjb21iaW5lTGF0ZXN0V2l0aCh0aGlzLm5ld1ZhbHVlJCksXG4gICAgLy8gICAgIGRlYm91bmNlVGltZSg1MDApXG4gICAgLy8gICApLnN1YnNjcmliZSh7XG4gICAgLy8gICBuZXh0OiAoW25nTW9kZWxWYWx1ZSwgbmV3VmFsdWVdKSA9PiB7XG4gICAgLy8gICAgIGlmICh0aGlzLmluaXRpYWxWYWx1ZSA9PT0gbmdNb2RlbFZhbHVlKSB7XG4gICAgLy8gICAgICAgdGhpcy5pbml0aWFsRG9uZSQubmV4dCgpO1xuICAgIC8vICAgICAgIHRoaXMuaW5pdGlhbERvbmUkLmNvbXBsZXRlKCk7XG4gICAgLy8gICAgICAgbmdNb2RlbC5jb250cm9sLnNldFZhbHVlKG5ld1ZhbHVlID8gbmV3VmFsdWUgOiBuZ01vZGVsVmFsdWUpOyAvLyBXaHkgc2V0IG5nTW9kZWxWYWx1ZSBhZ2Fpbj8/XG4gICAgLy8gICAgIH0gZWxzZSB7XG4gICAgLy8gICAgICAgdGhpcy5sb2cud2FybignSW5pdGlhbGlzYXRpb24gbm90IHlldCBkb25lIScsIHtcbiAgICAvLyAgICAgICAgIGluaXRpYWxWYWx1ZTogdGhpcy5pbml0aWFsVmFsdWUsXG4gICAgLy8gICAgICAgICBuZ01vZGVsVmFsdWU6IG5nTW9kZWxWYWx1ZSxcbiAgICAvLyAgICAgICAgIG5ld1ZhbHVlOiBuZXdWYWx1ZVxuICAgIC8vICAgICAgIH0pO1xuICAgIC8vICAgICB9XG4gICAgLy8gICB9XG4gICAgLy8gfSk7XG4gIH1cblxuICAvKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXG4gICAqICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICogTGlmZSBDeWNsZSAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cblxuXG4gIC8qKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcbiAgICogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKiBQcm9wZXJ0aWVzICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqL1xuXG4gIHB1YmxpYyBnZXQgdmFsdWVDaGFuZ2VzJCgpIHtcbiAgICByZXR1cm4gdGhpcy5uZ01vZGVsLmNvbnRyb2wudmFsdWVDaGFuZ2VzXG4gICAgICAucGlwZShcbiAgICAgICAgdGFrZVVudGlsKHRoaXMuZGVzdHJveSQpXG4gICAgICAgIC8vZmlsdGVyKHZhbHVlID0+IHRoaXMuZmlsdGVySW5pdGlhbFZhbHVlKHZhbHVlKSlcbiAgICAgICk7XG4gIH1cblxuICBwdWJsaWMgYXBwbHlJbml0aWFsVmFsdWUodmFsdWU6IGFueSkge1xuICAgIHRoaXMuaW5pdGlhbFZhbHVlJC5uZXh0KHZhbHVlKTtcbiAgfVxuXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKTtcbiAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gIH1cblxuICAvKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXG4gICAqICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICogUHJpdmF0ZSBtZXRob2RzICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cblxuICBwcml2YXRlIGZpbHRlckluaXRpYWxWYWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgaWYgKHRoaXMuaXNJbml0aWFsICYmIHRoaXMubmdNb2RlbFZhbHVlJCA9PT0gdmFsdWUpIHtcbiAgICAgIHRoaXMuaXNJbml0aWFsID0gZmFsc2U7XG4gICAgICByZXR1cm4gZmFsc2U7XG4gICAgfVxuICAgIHJldHVybiB0cnVlO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxkZXItaW5pdGlhbC12YWx1ZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lbGRlcmJ5dGUvbmd4LXN0YXJ0ZXIvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm1zL2RpcmVjdGl2ZXMvZWxkZXItaW5pdGlhbC12YWx1ZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFFM0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxFQUFFLEVBQWEsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ2xGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNyRCxPQUFPLEVBQUUsS0FBSyxFQUFVLEdBQUcsRUFBRSxTQUFTLEVBQU8sTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRXBFOztHQUVHO0FBS0gsTUFBTSxPQUFPLDBCQUEwQjtJQWNyQzs7OztnRkFJNEU7SUFFNUUsWUFBNEIsT0FBZ0I7UUFDMUMsd0ZBQXdGO1FBQ3hGLDBGQUEwRjtRQUZoRSxZQUFPLEdBQVAsT0FBTyxDQUFTO1FBbEI1Qzs7OztvRkFJNEU7UUFFM0QsUUFBRyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUU5RCxrQkFBYSxHQUF5QixJQUFJLGVBQWUsQ0FBTSxJQUFJLENBQUMsQ0FBQztRQUM1RCxhQUFRLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUMvQixpQkFBWSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFZbEQsTUFBTSxhQUFhLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQzthQUM5QixJQUFJLENBQ0gsS0FBSyxDQUFDLEVBQUUsQ0FBQyxFQUNULEdBQUcsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUM5QixDQUFDO1FBRUosYUFBYTthQUNWLElBQUksQ0FDSCxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLEVBQ3JDLFNBQVMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEVBQzVCLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQ3pCLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxZQUFZLEVBQUUsWUFBWSxDQUFDLEVBQUUsRUFBRTtZQUN6QyxJQUFJLFlBQVksRUFBRTtnQkFDaEIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLENBQUM7YUFDeEM7WUFDRCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ3pCLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDL0IsQ0FBQyxDQUNGLENBQUM7UUFFSiwwQ0FBMEM7UUFDMUMsK0JBQStCO1FBQy9CLFdBQVc7UUFDWCxvQ0FBb0M7UUFDcEMsb0NBQW9DO1FBQ3BDLHlDQUF5QztRQUN6Qyx3QkFBd0I7UUFDeEIsa0JBQWtCO1FBQ2xCLDBDQUEwQztRQUMxQyxnREFBZ0Q7UUFDaEQsa0NBQWtDO1FBQ2xDLHNDQUFzQztRQUN0QyxzR0FBc0c7UUFDdEcsZUFBZTtRQUNmLHdEQUF3RDtRQUN4RCwyQ0FBMkM7UUFDM0Msc0NBQXNDO1FBQ3RDLDZCQUE2QjtRQUM3QixZQUFZO1FBQ1osUUFBUTtRQUNSLE1BQU07UUFDTixNQUFNO0lBQ1IsQ0FBQztJQUVEOzs7O2dGQUk0RTtJQUc1RTs7OztnRkFJNEU7SUFFNUUsSUFBVyxhQUFhO1FBQ3RCLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsWUFBWTthQUNyQyxJQUFJLENBQ0gsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FDekIsQ0FBQztJQUNOLENBQUM7SUFFTSxpQkFBaUIsQ0FBQyxLQUFVO1FBQ2pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2pDLENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMzQixDQUFDOytHQS9GVSwwQkFBMEI7bUdBQTFCLDBCQUEwQjs7NEZBQTFCLDBCQUEwQjtrQkFKdEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUscUJBQXFCO29CQUMvQixRQUFRLEVBQUUsbUJBQW1CO2lCQUM5Qjs7MEJBcUJjLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3QsIE9uRGVzdHJveSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBOZ01vZGVsIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIGNvbWJpbmVMYXRlc3RXaXRoLCBvZiwgc2tpcFVudGlsLCBTdWJqZWN0IH0gZnJvbSBcInJ4anNcIjtcbmltcG9ydCB7IExvZ2dlckZhY3RvcnkgfSBmcm9tIFwiQGVsZGVyYnl0ZS90cy1sb2dnZXJcIjtcbmltcG9ydCB7IGRlbGF5LCBmaWx0ZXIsIG1hcCwgdGFrZVVudGlsLCB0YXAgfSBmcm9tIFwicnhqcy9vcGVyYXRvcnNcIjtcblxuLyoqXG4gKiBTZWFyY2ggbmFtZSBhZGFwdGVyIGZvciBpbnB1dCBjb250cm9scy5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiBcIltlbGRlckluaXRpYWxWYWx1ZV1cIixcbiAgZXhwb3J0QXM6IFwiZWxkZXJJbml0aWFsVmFsdWVcIlxufSlcbmV4cG9ydCBjbGFzcyBFbGRlckluaXRpYWxWYWx1ZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG5cbiAgLyoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKlxuICAgKiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqIEZpZWxkcyAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKiovXG5cbiAgcHJpdmF0ZSByZWFkb25seSBsb2cgPSBMb2dnZXJGYWN0b3J5LmdldExvZ2dlcih0aGlzLmNvbnN0cnVjdG9yLm5hbWUpO1xuXG4gIHByaXZhdGUgaW5pdGlhbFZhbHVlJDogQmVoYXZpb3JTdWJqZWN0PGFueT4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0PGFueT4obnVsbCk7XG4gIHByaXZhdGUgcmVhZG9ubHkgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuICBwcml2YXRlIHJlYWRvbmx5IGluaXRpYWxEb25lJCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgLyoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKlxuICAgKiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqIENvbnN0cnVjdG9yICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKiovXG5cbiAgY29uc3RydWN0b3IoQEhvc3QoKSBwcml2YXRlIG5nTW9kZWw6IE5nTW9kZWwpIHtcbiAgICAvL1RPRE86IFRoZSBkZWJvdW5jZSB0aW1lIGlzIGEgaGFja3kgd29ya2Fyb3VuZCwgZmluZCBhIHByb3BlciB3YXkgdG8gc2V0IGluaXRpYWwgdmFsdWUuXG4gICAgLy8gbmdNb2RlbCByZWd1bGFyIGFuZCB0d28gd2F5IGJpbmRpbmcgZGlmZmVyIGluIGluaXRpYWwgdmFsdWUsIHdoaWNoIGxlZCB0byB0aGlzIHNvbHV0aW9uXG5cbiAgICBjb25zdCBuZ01vZGVsVmFsdWUkID0gb2YoXCJkdW1teVwiKVxuICAgICAgLnBpcGUoXG4gICAgICAgIGRlbGF5KDEwKSxcbiAgICAgICAgbWFwKCgpID0+IHRoaXMubmdNb2RlbC5tb2RlbClcbiAgICAgICk7XG5cbiAgICBuZ01vZGVsVmFsdWUkXG4gICAgICAucGlwZShcbiAgICAgICAgY29tYmluZUxhdGVzdFdpdGgodGhpcy5pbml0aWFsVmFsdWUkKSxcbiAgICAgICAgdGFrZVVudGlsKHRoaXMuaW5pdGlhbERvbmUkKSxcbiAgICAgICAgdGFrZVVudGlsKHRoaXMuZGVzdHJveSQpLFxuICAgICAgKS5zdWJzY3JpYmUoKFtuZ01vZGVsVmFsdWUsIGluaXRpYWxWYWx1ZV0pID0+IHtcbiAgICAgICAgICBpZiAoaW5pdGlhbFZhbHVlKSB7XG4gICAgICAgICAgICBuZ01vZGVsLmNvbnRyb2wuc2V0VmFsdWUoaW5pdGlhbFZhbHVlKTtcbiAgICAgICAgICB9XG4gICAgICAgICAgdGhpcy5pbml0aWFsRG9uZSQubmV4dCgpO1xuICAgICAgICAgIHRoaXMuaW5pdGlhbERvbmUkLmNvbXBsZXRlKCk7XG4gICAgICAgIH1cbiAgICAgICk7XG5cbiAgICAvLyB0aGlzLm5nTW9kZWxWYWx1ZSA9IHRoaXMubmdNb2RlbC5tb2RlbDtcbiAgICAvLyBuZ01vZGVsLmNvbnRyb2wudmFsdWVDaGFuZ2VzXG4gICAgLy8gICAucGlwZShcbiAgICAvLyAgICAgdGFrZVVudGlsKHRoaXMuaW5pdGlhbERvbmUkKSxcbiAgICAvLyAgICAgdGFrZVVudGlsKHRoaXMudW5zdWJzY3JpYmUkKSxcbiAgICAvLyAgICAgY29tYmluZUxhdGVzdFdpdGgodGhpcy5uZXdWYWx1ZSQpLFxuICAgIC8vICAgICBkZWJvdW5jZVRpbWUoNTAwKVxuICAgIC8vICAgKS5zdWJzY3JpYmUoe1xuICAgIC8vICAgbmV4dDogKFtuZ01vZGVsVmFsdWUsIG5ld1ZhbHVlXSkgPT4ge1xuICAgIC8vICAgICBpZiAodGhpcy5pbml0aWFsVmFsdWUgPT09IG5nTW9kZWxWYWx1ZSkge1xuICAgIC8vICAgICAgIHRoaXMuaW5pdGlhbERvbmUkLm5leHQoKTtcbiAgICAvLyAgICAgICB0aGlzLmluaXRpYWxEb25lJC5jb21wbGV0ZSgpO1xuICAgIC8vICAgICAgIG5nTW9kZWwuY29udHJvbC5zZXRWYWx1ZShuZXdWYWx1ZSA/IG5ld1ZhbHVlIDogbmdNb2RlbFZhbHVlKTsgLy8gV2h5IHNldCBuZ01vZGVsVmFsdWUgYWdhaW4/P1xuICAgIC8vICAgICB9IGVsc2Uge1xuICAgIC8vICAgICAgIHRoaXMubG9nLndhcm4oJ0luaXRpYWxpc2F0aW9uIG5vdCB5ZXQgZG9uZSEnLCB7XG4gICAgLy8gICAgICAgICBpbml0aWFsVmFsdWU6IHRoaXMuaW5pdGlhbFZhbHVlLFxuICAgIC8vICAgICAgICAgbmdNb2RlbFZhbHVlOiBuZ01vZGVsVmFsdWUsXG4gICAgLy8gICAgICAgICBuZXdWYWx1ZTogbmV3VmFsdWVcbiAgICAvLyAgICAgICB9KTtcbiAgICAvLyAgICAgfVxuICAgIC8vICAgfVxuICAgIC8vIH0pO1xuICB9XG5cbiAgLyoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKlxuICAgKiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqIExpZmUgQ3ljbGUgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKiovXG5cblxuICAvKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXG4gICAqICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpcbiAgICogUHJvcGVydGllcyAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKlxuICAgKiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqXG4gICAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cblxuICBwdWJsaWMgZ2V0IHZhbHVlQ2hhbmdlcyQoKSB7XG4gICAgcmV0dXJuIHRoaXMubmdNb2RlbC5jb250cm9sLnZhbHVlQ2hhbmdlc1xuICAgICAgLnBpcGUoXG4gICAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKVxuICAgICAgKTtcbiAgfVxuXG4gIHB1YmxpYyBhcHBseUluaXRpYWxWYWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgdGhpcy5pbml0aWFsVmFsdWUkLm5leHQodmFsdWUpO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKTtcbiAgfVxufVxuIl19

package/esm2022/lib/components/forms/directives/elder-input-pattern.directive.mjs

@@ -57,10 +57,10 @@ export class ElderInputPatternDirective {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderInputPatternDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ElderInputPatternDirective, selector: "textarea[elderInputPattern],input[elderInputPattern]", inputs: { elderInputPattern: "elderInputPattern" }, host: { listeners: { "beforeinput": "onBeforeInput($event)", "paste": "onPasteEvent($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderInputPatternDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElderInputPatternDirective, selector: "textarea[elderInputPattern],input[elderInputPattern]", inputs: { elderInputPattern: "elderInputPattern" }, host: { listeners: { "beforeinput": "onBeforeInput($event)", "paste": "onPasteEvent($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ElderInputPatternDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderInputPatternDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'textarea[elderInputPattern],input[elderInputPattern]'