@elderbyte/ngx-starter 17.2.0 → 17.3.1

package/esm2022/lib/components/card-organizer/card-organizer/elder-stack-card.directive.mjs

@@ -5,10 +5,10 @@ export class ElderStackCardDirective {
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderStackCardDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderStackCardDirective, selector: "[elderStackCard]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderStackCardDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ElderStackCardDirective, selector: "[elderStackCard]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderStackCardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderStackCardDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[elderStackCard]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });

package/esm2022/lib/components/card-organizer/card-stack/elder-card-stack.component.mjs

@@ -158,10 +158,10 @@ export class ElderCardStackComponent {
             cardDrop.toStack.addCard(cardDrop.card, cardDrop.toIndex);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderCardStackComponent, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", canAdd: "canAdd", canDrag: "canDrag", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n    <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span class=\"flex\"></span>\n\n    <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div class=\"layout-col flex card-container\">\n\n    <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListDisabled]=\"!canDrag\"\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card flex-none\"\n        [ngClass]=\"cardClick.observed ? 'clickable' : 'unclickable'\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div class=\"layout-row place-between-center flex\">\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div class=\"layout-col flex\">\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.card.cdk-drag-disabled.clickable{cursor:pointer}.card.cdk-drag-disabled.unclickable{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ElderCardStackComponent, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", canAdd: "canAdd", canDrag: "canDrag", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n    <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span class=\"flex\"></span>\n\n    <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div class=\"layout-col flex card-container\">\n\n    <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListDisabled]=\"!canDrag\"\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card flex-none\"\n        [ngClass]=\"cardClick.observed ? 'clickable' : 'unclickable'\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div class=\"layout-row place-between-center flex\">\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div class=\"layout-col flex\">\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.card.cdk-drag-disabled.clickable{cursor:pointer}.card.cdk-drag-disabled.unclickable{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardStackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-card-stack', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full card-stack hoverme\">\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n    <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span class=\"flex\"></span>\n\n    <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div class=\"layout-col flex card-container\">\n\n    <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListDisabled]=\"!canDrag\"\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card flex-none\"\n        [ngClass]=\"cardClick.observed ? 'clickable' : 'unclickable'\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div class=\"layout-row place-between-center flex\">\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div class=\"layout-col flex\">\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.card.cdk-drag-disabled.clickable{cursor:pointer}.card.cdk-drag-disabled.unclickable{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { stackId: [{

package/esm2022/lib/components/card-organizer/elder-card-organizer.module.mjs

@@ -17,21 +17,21 @@ export * from './card-organizer/elder-stack-card.directive';
 export * from './card-organizer/elder-card-organizer.component';
 export * from './card-stack/elder-card-stack.component';
 export class ElderCardOrganizerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardOrganizerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderCardOrganizerModule, declarations: [ElderCardOrganizerComponent, ElderCardStackComponent, ElderStackCardDirective], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardOrganizerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderCardOrganizerModule, declarations: [ElderCardOrganizerComponent, ElderCardStackComponent, ElderStackCardDirective], imports: [CommonModule,
             MatIconModule, MatButtonModule, MatDividerModule,
             MatRippleModule,
             DragDropModule,
             TranslateModule,
             ElderCardModule], exports: [ElderCardOrganizerComponent, ElderCardStackComponent, ElderStackCardDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardOrganizerModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardOrganizerModule, imports: [CommonModule,
             MatIconModule, MatButtonModule, MatDividerModule,
             MatRippleModule,
             DragDropModule,
             TranslateModule,
             ElderCardModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardOrganizerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardOrganizerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/cards/elder-card/elder-card-header/elder-card-header.component.mjs

@@ -5,10 +5,10 @@ export class ElderCardHeaderComponent {
     constructor() {
         this.padding = '15px 15px 5px 15px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderCardHeaderComponent, selector: "elder-card-header", inputs: { padding: "padding" }, ngImport: i0, template: "\n<!-- Card Header -->\n<div class=\"layout-row place-start-center elder-card-header\" [ngStyle]=\"{'padding': padding}\">\n\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\">\n  </ng-content>\n\n  <span class=\"flex\"></span>\n\n  <!-- Card Header Actions -->\n  <div class=\"layout-row place-end-center gap-md\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ElderCardHeaderComponent, selector: "elder-card-header", inputs: { padding: "padding" }, ngImport: i0, template: "\n<!-- Card Header -->\n<div class=\"layout-row place-start-center elder-card-header\" [ngStyle]=\"{'padding': padding}\">\n\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\">\n  </ng-content>\n\n  <span class=\"flex\"></span>\n\n  <!-- Card Header Actions -->\n  <div class=\"layout-row place-end-center gap-md\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-card-header', encapsulation: ViewEncapsulation.None, template: "\n<!-- Card Header -->\n<div class=\"layout-row place-start-center elder-card-header\" [ngStyle]=\"{'padding': padding}\">\n\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\">\n  </ng-content>\n\n  <span class=\"flex\"></span>\n\n  <!-- Card Header Actions -->\n  <div class=\"layout-row place-end-center gap-md\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n\n</div>\n" }]
         }], propDecorators: { padding: [{

package/esm2022/lib/components/cards/elder-card/elder-card.component.mjs

@@ -15,10 +15,10 @@ export class ElderPaddingDirective {
         */
         this.padding = '8px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderPaddingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderPaddingDirective, selector: "elder-padding, [elder-padding], [elderPadding]", inputs: { padding: ["elderPadding", "padding"] }, host: { properties: { "style.padding": "this.padding" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderPaddingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ElderPaddingDirective, selector: "elder-padding, [elder-padding], [elderPadding]", inputs: { padding: ["elderPadding", "padding"] }, host: { properties: { "style.padding": "this.padding" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderPaddingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderPaddingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `elder-padding, [elder-padding], [elderPadding]`
@@ -34,10 +34,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
  * Title of a card, needed as it's used as a selector in the API.
  */
 export class ElderCardTitleDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderCardTitleDirective, selector: "elder-card-title, [elder-card-title], [elderCardTitle]", host: { classAttribute: "mat-subtitle-1 elder-card-title" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ElderCardTitleDirective, selector: "elder-card-title, [elder-card-title], [elderCardTitle]", host: { classAttribute: "mat-subtitle-1 elder-card-title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `elder-card-title, [elder-card-title], [elderCardTitle]`,
@@ -53,10 +53,10 @@ export class ElderCardContentDirective {
     constructor() {
         this.padding = '4px 12px 4px 12px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderCardContentDirective, selector: "elder-card-content, [elder-card-content], [elderCardContent]", inputs: { padding: "padding" }, host: { properties: { "style.padding": "this.padding" }, classAttribute: "elder-card-content" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ElderCardContentDirective, selector: "elder-card-content, [elder-card-content], [elderCardContent]", inputs: { padding: "padding" }, host: { properties: { "style.padding": "this.padding" }, classAttribute: "elder-card-content" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `elder-card-content, [elder-card-content], [elderCardContent]`,
@@ -74,10 +74,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
  * Actions in the right top corner, needed as it's used as a selector in the API.
  */
 export class ElderCardHeaderActionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderCardHeaderActionsDirective, selector: "elder-card-header-actions, [elder-card-header-actions], [elderCardHeaderActions]", host: { classAttribute: "elder-card-header-actions" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ElderCardHeaderActionsDirective, selector: "elder-card-header-actions, [elder-card-header-actions], [elderCardHeaderActions]", host: { classAttribute: "elder-card-header-actions" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardHeaderActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardHeaderActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `elder-card-header-actions, [elder-card-header-actions], [elderCardHeaderActions]`,
@@ -90,10 +90,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
  * Subsection title
  */
 export class ElderCardSubtitleDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]", host: { classAttribute: "mat-subtitle-1 elder-card-subtitle" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]", host: { classAttribute: "mat-subtitle-1 elder-card-subtitle" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]`,
@@ -129,10 +129,10 @@ export class ElderCardComponent {
     set flat(value) {
         this._appearance = coerceBooleanProperty(value) ? 'outlined' : 'raised';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderCardComponent, selector: "elder-card", inputs: { appearance: "appearance", float: "float", flat: "flat" }, host: { classAttribute: "elder-card-host" }, ngImport: i0, template: "<mat-card\n  class=\"full mat-typography\"\n  [appearance]=\"appearance\"\n>\n  <!-- If one does not want to use predefined card-sections. -->\n  <ng-content></ng-content>\n\n  <!-- Card Header -->\n  <ng-content select=\"elder-card-header\"></ng-content>\n\n  <!-- Card Content -->\n  <ng-content select=\"elder-card-content\"></ng-content>\n</mat-card>\n", styles: [".elder-card-host{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"], dependencies: [{ kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ElderCardComponent, selector: "elder-card", inputs: { appearance: "appearance", float: "float", flat: "flat" }, host: { classAttribute: "elder-card-host" }, ngImport: i0, template: "<mat-card\n  class=\"full mat-typography\"\n  [appearance]=\"appearance\"\n>\n  <!-- If one does not want to use predefined card-sections. -->\n  <ng-content></ng-content>\n\n  <!-- Card Header -->\n  <ng-content select=\"elder-card-header\"></ng-content>\n\n  <!-- Card Content -->\n  <ng-content select=\"elder-card-content\"></ng-content>\n</mat-card>\n", styles: [".elder-card-host{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"], dependencies: [{ kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-card', encapsulation: ViewEncapsulation.None, host: { 'class': 'elder-card-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card\n  class=\"full mat-typography\"\n  [appearance]=\"appearance\"\n>\n  <!-- If one does not want to use predefined card-sections. -->\n  <ng-content></ng-content>\n\n  <!-- Card Header -->\n  <ng-content select=\"elder-card-header\"></ng-content>\n\n  <!-- Card Content -->\n  <ng-content select=\"elder-card-content\"></ng-content>\n</mat-card>\n", styles: [".elder-card-host{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appearance: [{

package/esm2022/lib/components/cards/elder-card/elder-card.module.mjs

@@ -9,8 +9,8 @@ import * as i0 from "@angular/core";
 export * from './elder-card.component';
 export * from './elder-card-header/elder-card-header.component';
 export class ElderCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderCardModule, declarations: [ElderCardComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderCardModule, declarations: [ElderCardComponent,
             ElderCardTitleDirective,
             ElderCardContentDirective,
             ElderCardHeaderActionsDirective,
@@ -27,13 +27,13 @@ export class ElderCardModule {
             ElderCardSubtitleDirective,
             ElderCardHeaderComponent,
             ElderPaddingDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardModule, imports: [
             // Angular
             CommonModule, RouterModule,
             // Third Party
             TranslateModule, MatCardModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/chips/elder-chip-label.directive.mjs

@@ -142,10 +142,10 @@ export class ElderChipLabelDirective {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderChipLabelDirective, deps: [{ token: i1.MatChip, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: { appearance: "appearance", themeColor: ["color", "themeColor"], stateColor: "stateColor", levelColor: "levelColor" }, host: { properties: { "class": "this.classes" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderChipLabelDirective, deps: [{ token: i1.MatChip, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: { appearance: "appearance", themeColor: ["color", "themeColor"], stateColor: "stateColor", levelColor: "levelColor" }, host: { properties: { "class": "this.classes" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderChipLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderChipLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderChipLabel]'

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

@@ -7,8 +7,8 @@ import { ElderChipLabelDirective } from './elder-chip-label.directive';
 import * as i0 from "@angular/core";
 export { ElderChipLabelDirective } from './elder-chip-label.directive';
 export class ElderChipsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderChipsModule, declarations: [ElderChipLabelDirective], imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderChipsModule, declarations: [ElderChipLabelDirective], imports: [
             // Angular
             CommonModule,
             // Third Party
@@ -16,7 +16,7 @@ export class ElderChipsModule {
             // Material
             MatChipsModule,
             A11yModule], exports: [ElderChipLabelDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderChipsModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderChipsModule, imports: [
             // Angular
             CommonModule,
             // Third Party
@@ -25,7 +25,7 @@ export class ElderChipsModule {
             MatChipsModule,
             A11yModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -9,8 +9,8 @@ import { ElderPipesModule } from '../../pipes/elder-pipes.module';
 import * as i0 from "@angular/core";
 export { ElderOfflineIndicatorComponent } from './offline-indicator/elder-offline-indicator.component';
 export class ElderConnectivityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderConnectivityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderConnectivityModule, declarations: [ElderOfflineIndicatorComponent], imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderConnectivityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderConnectivityModule, declarations: [ElderOfflineIndicatorComponent], imports: [
             // Angular
             CommonModule,
             // Third Party
@@ -20,7 +20,7 @@ export class ElderConnectivityModule {
             MatButtonModule,
             // ElderByte
             ElderPipesModule], exports: [ElderOfflineIndicatorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderConnectivityModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderConnectivityModule, imports: [
             // Angular
             CommonModule,
             // Third Party
@@ -31,7 +31,7 @@ export class ElderConnectivityModule {
             // ElderByte
             ElderPipesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderConnectivityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderConnectivityModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/connectivity/elder-connectivity.service.mjs

@@ -51,10 +51,10 @@ export class ElderConnectivityService {
     get online$() {
         return this._online$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderConnectivityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderConnectivityService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderConnectivityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderConnectivityService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderConnectivityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderConnectivityService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/lib/components/connectivity/offline-indicator/elder-offline-indicator.component.mjs

@@ -36,10 +36,10 @@ export class ElderOfflineIndicatorComponent {
     get status$() {
         return this.connectivityService.online$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderOfflineIndicatorComponent, deps: [{ token: i1.ElderConnectivityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderOfflineIndicatorComponent, selector: "elder-offline-indicator", ngImport: i0, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderOfflineIndicatorComponent, deps: [{ token: i1.ElderConnectivityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ElderOfflineIndicatorComponent, selector: "elder-offline-indicator", ngImport: i0, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderOfflineIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderOfflineIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-offline-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n" }]
         }], ctorParameters: () => [{ type: i1.ElderConnectivityService }] });

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

@@ -4,11 +4,11 @@ import { ElderScrollContainerComponent } from './elder-scroll-container/elder-sc
 import * as i0 from "@angular/core";
 export * from './elder-scroll-container/elder-scroll-container.component';
 export class ElderContainersModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderContainersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderContainersModule, declarations: [ElderScrollContainerComponent], imports: [CommonModule], exports: [ElderScrollContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderContainersModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderContainersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderContainersModule, declarations: [ElderScrollContainerComponent], imports: [CommonModule], exports: [ElderScrollContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderContainersModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderContainersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderContainersModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/containers/elder-scroll-container/elder-scroll-container.component.mjs

@@ -10,10 +10,10 @@ export class ElderScrollContainerComponent {
     isVertical(direction) {
         return direction === 'vertical';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderScrollContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderScrollContainerComponent, selector: "elder-scroll-container", inputs: { direction: "direction", padding: "padding" }, ngImport: i0, template: "<div class=\"layout-col full scroll-fix\">\n  <div class=\"layout-col flex scroll-fix\">\n    <div\n      [class.layout-col]=\"isVertical(direction)\"\n      [class.layout-row]=\"!isVertical(direction)\"\n      class=\"gap-sm\"\n      [ngStyle]=\"{'padding': padding}\"\n      [class.vertical-scroll-wrapper]=\"isVertical(direction)\"\n      [class.horizontal-scroll-wrapper]=\"!isVertical(direction)\"\n      >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".vertical-scroll-wrapper{min-height:100%;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch}.horizontal-scroll-wrapper{min-width:100%;overflow-y:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderScrollContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ElderScrollContainerComponent, selector: "elder-scroll-container", inputs: { direction: "direction", padding: "padding" }, ngImport: i0, template: "<div class=\"layout-col full scroll-fix\">\n  <div class=\"layout-col flex scroll-fix\">\n    <div\n      [class.layout-col]=\"isVertical(direction)\"\n      [class.layout-row]=\"!isVertical(direction)\"\n      class=\"gap-sm\"\n      [ngStyle]=\"{'padding': padding}\"\n      [class.vertical-scroll-wrapper]=\"isVertical(direction)\"\n      [class.horizontal-scroll-wrapper]=\"!isVertical(direction)\"\n      >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".vertical-scroll-wrapper{min-height:100%;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch}.horizontal-scroll-wrapper{min-width:100%;overflow-y:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderScrollContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderScrollContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-scroll-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full scroll-fix\">\n  <div class=\"layout-col flex scroll-fix\">\n    <div\n      [class.layout-col]=\"isVertical(direction)\"\n      [class.layout-row]=\"!isVertical(direction)\"\n      class=\"gap-sm\"\n      [ngStyle]=\"{'padding': padding}\"\n      [class.vertical-scroll-wrapper]=\"isVertical(direction)\"\n      [class.horizontal-scroll-wrapper]=\"!isVertical(direction)\"\n      >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".vertical-scroll-wrapper{min-height:100%;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch}.horizontal-scroll-wrapper{min-width:100%;overflow-y:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}\n"] }]
         }], ctorParameters: () => [], propDecorators: { direction: [{

package/esm2022/lib/components/csv/elder-csv-export-btn/elder-csv-export-btn.component.mjs

@@ -57,10 +57,10 @@ export class ElderCsvExportBtnComponent {
                 .build();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCsvExportBtnComponent, deps: [{ token: i1.CsvStreamExporterBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderCsvExportBtnComponent, selector: "elder-csv-export-btn", inputs: { dataSource: "dataSource", csvSpec: "csvSpec", filters: "filters", sorts: "sorts", chunkSize: "chunkSize" }, ngImport: i0, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCsvExportBtnComponent, deps: [{ token: i1.CsvStreamExporterBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ElderCsvExportBtnComponent, selector: "elder-csv-export-btn", inputs: { dataSource: "dataSource", csvSpec: "csvSpec", filters: "filters", sorts: "sorts", chunkSize: "chunkSize" }, ngImport: i0, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCsvExportBtnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCsvExportBtnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-csv-export-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i1.CsvStreamExporterBuilderService }], propDecorators: { dataSource: [{

package/esm2022/lib/components/csv/elder-csv-stream-exporter-builder.service.mjs

@@ -26,10 +26,10 @@ export class CsvStreamExporterBuilderService {
     start(dataSource, csvSpec) {
         return new CsvStreamExporterBuilder(this.translateService, dataSource, csvSpec);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CsvStreamExporterBuilderService, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CsvStreamExporterBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CsvStreamExporterBuilderService, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CsvStreamExporterBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CsvStreamExporterBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CsvStreamExporterBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

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

@@ -9,15 +9,15 @@ export * from './elder-csv-stream-exporter-builder.service';
 export * from './elder-csv-stream-exporter-builder';
 export * from './elder-csv-stream-exporter';
 export class ElderCsvModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCsvModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderCsvModule, declarations: [ElderCsvExportBtnComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCsvModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderCsvModule, declarations: [ElderCsvExportBtnComponent], imports: [CommonModule,
             MatButtonModule,
             MatIconModule], exports: [ElderCsvExportBtnComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCsvModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCsvModule, imports: [CommonModule,
             MatButtonModule,
             MatIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCsvModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCsvModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -3,14 +3,14 @@ import { CommonModule, CurrencyPipe } from '@angular/common';
 import { ElderCurrencyPipe } from './elder-currency.pipe';
 import * as i0 from "@angular/core";
 export class ElderCurrencyModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCurrencyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderCurrencyModule, declarations: [ElderCurrencyPipe], imports: [CommonModule], exports: [ElderCurrencyPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCurrencyModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCurrencyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderCurrencyModule, declarations: [ElderCurrencyPipe], imports: [CommonModule], exports: [ElderCurrencyPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCurrencyModule, providers: [
             CurrencyPipe,
             ElderCurrencyPipe
         ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCurrencyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCurrencyModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/currency/elder-currency.pipe.mjs

@@ -21,10 +21,10 @@ export class ElderCurrencyPipe {
         }
         return this.currencyPipe.transform(currency.value, currency.unit, display, digitsInfo, locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCurrencyPipe, deps: [{ token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderCurrencyPipe, name: "elderCurrency" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCurrencyPipe, deps: [{ token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderCurrencyPipe, name: "elderCurrency" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderCurrencyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elderCurrency'

package/esm2022/lib/components/data-transfer/elder-data-transfer.module.mjs

@@ -22,8 +22,8 @@ export { HttpDataTransferAggregateComponent } from './http-data-transfer-aggrega
 export { HttpDataTransferOverviewComponent } from './http-data-transfer-overview/http-data-transfer-overview.component';
 export { HttpDataTransferIndicatorComponent } from './http-data-transfer-indicator/http-data-transfer-indicator.component';
 export class ElderDataTransferModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderDataTransferModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderDataTransferModule, declarations: [HttpDataTransferComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderDataTransferModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: ElderDataTransferModule, declarations: [HttpDataTransferComponent,
             HttpDataTransferAggregateComponent,
             HttpDataTransferOverviewComponent,
             HttpDataTransferIndicatorComponent], imports: [CommonModule,
@@ -37,7 +37,7 @@ export class ElderDataTransferModule {
             HttpDataTransferAggregateComponent,
             HttpDataTransferOverviewComponent,
             HttpDataTransferIndicatorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderDataTransferModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderDataTransferModule, imports: [CommonModule,
             MatIconModule, MatProgressBarModule,
             MatTooltipModule, MatToolbarModule,
             MatButtonModule, MatBadgeModule,
@@ -46,7 +46,7 @@ export class ElderDataTransferModule {
             ElderPipesModule,
             ElderOverlayModule, MatCardModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderDataTransferModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderDataTransferModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/data-transfer/elder-data-transfer.service.mjs

@@ -79,10 +79,10 @@ export class ElderDataTransferService {
             .map(t => t.state$);
         return combineLatest(transfersInProgress).pipe(map(latestTransferStates => DataTransferProgressAggregate.aggregate(latestTransferStates)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderDataTransferService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderDataTransferService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderDataTransferService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderDataTransferService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderDataTransferService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElderDataTransferService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/lib/components/data-transfer/http-data-transfer/http-data-transfer.component.mjs

@@ -79,10 +79,10 @@ export class HttpDataTransferComponent {
             return progress;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: HttpDataTransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: { transfer: "transfer" }, ngImport: i0, template: "\n\n<div *ngIf=\"($state | async) as state\"\n  class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <mat-icon class=\"noselect\">\n      {{statusIcon(state)}}\n    </mat-icon>\n\n    <!--\n    <mat-icon\n      *ngIf=\"!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100\"\n      class=\"green-icon\"\n    >check</mat-icon>\n    -->\n\n  </div>\n\n\n  <div class=\"layout-col flex-80\" style=\"overflow: hidden\">\n\n    <span class=\"mat-subtitle-2 noselect title\">{{transfer.name}}</span>\n\n    <mat-progress-bar\n      [matTooltip]=\"state.error?.message\"\n      [color]=\"(state.error ? 'warn' : '')\"\n      mode=\"determinate\"\n      [value]=\"state.progress.percentDone\"\n    ></mat-progress-bar>\n\n    <span class=\"mat-caption noselect\">{{($detail | async)}}</span>\n\n  </div>\n\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <button mat-icon-button type=\"button\"\n            (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n      <mat-icon>\n        close\n      </mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\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.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: HttpDataTransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: { transfer: "transfer" }, ngImport: i0, template: "\n\n<div *ngIf=\"($state | async) as state\"\n  class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <mat-icon class=\"noselect\">\n      {{statusIcon(state)}}\n    </mat-icon>\n\n    <!--\n    <mat-icon\n      *ngIf=\"!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100\"\n      class=\"green-icon\"\n    >check</mat-icon>\n    -->\n\n  </div>\n\n\n  <div class=\"layout-col flex-80\" style=\"overflow: hidden\">\n\n    <span class=\"mat-subtitle-2 noselect title\">{{transfer.name}}</span>\n\n    <mat-progress-bar\n      [matTooltip]=\"state.error?.message\"\n      [color]=\"(state.error ? 'warn' : '')\"\n      mode=\"determinate\"\n      [value]=\"state.progress.percentDone\"\n    ></mat-progress-bar>\n\n    <span class=\"mat-caption noselect\">{{($detail | async)}}</span>\n\n  </div>\n\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <button mat-icon-button type=\"button\"\n            (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n      <mat-icon>\n        close\n      </mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\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.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: HttpDataTransferComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: HttpDataTransferComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-transfer', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div *ngIf=\"($state | async) as state\"\n  class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <mat-icon class=\"noselect\">\n      {{statusIcon(state)}}\n    </mat-icon>\n\n    <!--\n    <mat-icon\n      *ngIf=\"!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100\"\n      class=\"green-icon\"\n    >check</mat-icon>\n    -->\n\n  </div>\n\n\n  <div class=\"layout-col flex-80\" style=\"overflow: hidden\">\n\n    <span class=\"mat-subtitle-2 noselect title\">{{transfer.name}}</span>\n\n    <mat-progress-bar\n      [matTooltip]=\"state.error?.message\"\n      [color]=\"(state.error ? 'warn' : '')\"\n      mode=\"determinate\"\n      [value]=\"state.progress.percentDone\"\n    ></mat-progress-bar>\n\n    <span class=\"mat-caption noselect\">{{($detail | async)}}</span>\n\n  </div>\n\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <button mat-icon-button type=\"button\"\n            (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n      <mat-icon>\n        close\n      </mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { transfer: [{