@elderbyte/ngx-starter 17.1.2 → 17.2.0

package/esm2022/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.mjs

@@ -187,16 +187,16 @@ export class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         }
         return new ChipModel(e, dPR(e), chipSpec?.colorSpec, removable, chipSpec.avatarSpec, chipSpec.trailingSpec);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.ElderDialogService }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { defaultChipSpec: "defaultChipSpec", chipSpecFn: "chipSpecFn", allowRemove: "allowRemove", allowSorting: "allowSorting", stacked: "stacked", chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate", customInputTemplate: "customInputTemplate" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.ElderDialogService }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { defaultChipSpec: "defaultChipSpec", chipSpecFn: "chipSpecFn", allowRemove: "allowRemove", allowSorting: "allowSorting", stacked: "stacked", chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate", customInputTemplate: "customInputTemplate" }, providers: [
             { provide: MatFormFieldControl, useExisting: ElderMultiSelectChipsComponent },
             {
                 provide: ELDER_SELECT_BASE,
                 useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
             }
-        ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\"\n                class=\"elder-flex-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n  <mat-chip-set #chips\n                [class.mat-mdc-chip-set-stacked]=\"stacked\"\n                cdkDropList\n                [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n                (cdkDropListDropped)=\"drop($event)\"\n                [cdkDropListDisabled]=\"!allowSorting\"\n  >\n\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\"\n           class=\"elder-input-prefix-icon-container flex-none\"\n      >\n        <mat-icon *ngIf=\"icon\" disabled\n                  class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n                  [class.loading]=\"state.loading\"\n        >\n          {{icon}}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row elderChipLabel *ngFor=\"let chipModel of chipValues\"\n                class=\"noselect clickable-chip\"\n                [value]=\"resolveChipValue(chipModel.value)\"\n                [color]=\"chipModel.colorSpec?.themeColor\"\n                [levelColor]=\"chipModel.colorSpec?.levelColor\"\n                [stateColor]=\"chipModel.colorSpec?.stateColor\"\n                [removable]=\"chipModel.removable\"\n                (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n                (click)=\"onCurrentClicked(chipModel.value)\"\n                cdkDrag [cdkDragData]=\"chipModel.value\" [cdkDragDisabled]=\"!allowSorting\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec?.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"templates.avatar; context: {$implicit: chipModel}\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n\n        <mat-icon matChipTrailingIcon class=\"elder-trailing-icon\"\n                  *ngIf=\"chipModel.trailingSpec?.icon\"\n                  [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n        >{{chipModel.trailingSpec?.icon}}</mat-icon>\n\n        <mat-icon matChipRemove\n                  *ngIf=\"chipModel.removable\"\n                  (click)=\"onClickRemoveChip($event, chipModel.value)\">\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container\n          *ngTemplateOutlet=\"templates.input || selectInput;\">\n        </ng-container>\n\n        <button mat-icon-button type=\"button\" class=\"elder-control-icon-button elder-browse-icon\"\n                *ngIf=\"selectionPopup\"\n                [disabled]=\"isLocked\"\n                (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n                elderStopEventPropagation\n                tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input-select flex\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i8.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "directive", type: i8.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.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: i10.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: "directive", type: i11.ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: i12.ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "component", type: i13.ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: i14.ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i15.ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\"\n                class=\"elder-flex-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n  <mat-chip-set #chips\n                [class.mat-mdc-chip-set-stacked]=\"stacked\"\n                cdkDropList\n                [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n                (cdkDropListDropped)=\"drop($event)\"\n                [cdkDropListDisabled]=\"!allowSorting\"\n  >\n\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\"\n           class=\"elder-input-prefix-icon-container flex-none\"\n      >\n        <mat-icon *ngIf=\"icon\" disabled\n                  class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n                  [class.loading]=\"state.loading\"\n        >\n          {{icon}}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row elderChipLabel *ngFor=\"let chipModel of chipValues\"\n                class=\"noselect clickable-chip\"\n                [value]=\"resolveChipValue(chipModel.value)\"\n                [color]=\"chipModel.colorSpec?.themeColor\"\n                [levelColor]=\"chipModel.colorSpec?.levelColor\"\n                [stateColor]=\"chipModel.colorSpec?.stateColor\"\n                [removable]=\"chipModel.removable\"\n                (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n                (click)=\"onCurrentClicked(chipModel.value)\"\n                cdkDrag [cdkDragData]=\"chipModel.value\" [cdkDragDisabled]=\"!allowSorting\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec?.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"templates.avatar; context: {$implicit: chipModel}\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n\n        <mat-icon matChipTrailingIcon class=\"elder-trailing-icon\"\n                  *ngIf=\"chipModel.trailingSpec?.icon\"\n                  [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n        >{{chipModel.trailingSpec?.icon}}</mat-icon>\n\n        <mat-icon matChipRemove\n                  *ngIf=\"chipModel.removable\"\n                  (click)=\"onClickRemoveChip($event, chipModel.value)\">\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container\n          *ngTemplateOutlet=\"templates.input || selectInput;\">\n        </ng-container>\n\n        <button mat-icon-button type=\"button\" class=\"elder-control-icon-button elder-browse-icon\"\n                *ngIf=\"selectionPopup\"\n                [disabled]=\"isLocked\"\n                (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n                elderStopEventPropagation\n                tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input-select flex\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i8.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.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: i10.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: "directive", type: i11.ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: i12.ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "component", type: i13.ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: i14.ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i15.ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: MatFormFieldControl, useExisting: ElderMultiSelectChipsComponent },

package/esm2022/lib/components/select/multi/elder-multi-select-form-field.mjs

@@ -62,10 +62,10 @@ export class ElderMultiSelectFormField extends ElderFromFieldMultiEntityBase {
             control.customInputTemplate = dir?.templateRef;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderMultiSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderMultiSelectFormField, viewQueries: [{ propertyName: "selectValueTemplate", first: true, predicate: ElderSelectValueDirective, descendants: true }, { propertyName: "selectionModelPopupDirective", first: true, predicate: SelectionModelPopupDirective, descendants: true }, { propertyName: "selectChipDirective", first: true, predicate: ElderSelectChipDirective, descendants: true }, { propertyName: "selectChipAvatarDirective", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true }, { propertyName: "selectCustomInputDirective", first: true, predicate: ElderSelectCustomInputDirective, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderMultiSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderMultiSelectFormField, viewQueries: [{ propertyName: "selectValueTemplate", first: true, predicate: ElderSelectValueDirective, descendants: true }, { propertyName: "selectionModelPopupDirective", first: true, predicate: SelectionModelPopupDirective, descendants: true }, { propertyName: "selectChipDirective", first: true, predicate: ElderSelectChipDirective, descendants: true }, { propertyName: "selectChipAvatarDirective", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true }, { propertyName: "selectCustomInputDirective", first: true, predicate: ElderSelectCustomInputDirective, descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderMultiSelectFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderMultiSelectFormField, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { selectValueTemplate: [{
                 type: ViewChild,

package/esm2022/lib/components/select/popup/selection-model-popup-trigger-adapter.directive.mjs

@@ -53,10 +53,10 @@ export class ElderSelectionPopupTriggerAdapterDirective {
             this.log.warn('Cant open selection browser popup, since [SelectionModelPopupDirective] was not found!');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderSelectionPopupTriggerAdapterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderSelectionPopupTriggerAdapterDirective, selector: "[elderSelectionPopupTriggerAdapter]", inputs: { keyGetter: "keyGetter", selection: "selection", filters: "filters", sorts: "sorts", multiSelectionEnabled: "multiSelectionEnabled" }, outputs: { selectionChange: "selectionChange", selectionSingleChange: "selectionSingleChange" }, host: { listeners: { "click": "handleClick($event)" } }, queries: [{ propertyName: "selectionPopup", first: true, predicate: SelectionModelPopupDirective, descendants: true }], exportAs: ["elderSelectionPopupTriggerAdapter"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderSelectionPopupTriggerAdapterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderSelectionPopupTriggerAdapterDirective, selector: "[elderSelectionPopupTriggerAdapter]", inputs: { keyGetter: "keyGetter", selection: "selection", filters: "filters", sorts: "sorts", multiSelectionEnabled: "multiSelectionEnabled" }, outputs: { selectionChange: "selectionChange", selectionSingleChange: "selectionSingleChange" }, host: { listeners: { "click": "handleClick($event)" } }, queries: [{ propertyName: "selectionPopup", first: true, predicate: SelectionModelPopupDirective, descendants: true }], exportAs: ["elderSelectionPopupTriggerAdapter"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderSelectionPopupTriggerAdapterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderSelectionPopupTriggerAdapterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderSelectionPopupTriggerAdapter]',

package/esm2022/lib/components/select/popup/selection-model-popup.directive.mjs

@@ -89,8 +89,8 @@ export class SelectionModelPopupDirective {
             viewContainerRef: this.viewContainer
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: SelectionModelPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1.MatDialog }, { token: i2.ElderDataViewOptionsProvider }, { token: i3.SelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: SelectionModelPopupDirective, selector: "[elderSelectionModelPopup]", inputs: { elderSelectionModelPopupTransform: "elderSelectionModelPopupTransform" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SelectionModelPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1.MatDialog }, { token: i2.ElderDataViewOptionsProvider }, { token: i3.SelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: SelectionModelPopupDirective, selector: "[elderSelectionModelPopup]", inputs: { elderSelectionModelPopupTransform: "elderSelectionModelPopupTransform" }, providers: [
             {
                 provide: SelectionModel,
                 useFactory: createSelectionModel
@@ -102,7 +102,7 @@ export class SelectionModelPopupDirective {
             ElderTableProviders.ClearTableModel // Since this popup is frequently used inside an elder-table search box
         ], exportAs: ["elderSelectionModelPopup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: SelectionModelPopupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SelectionModelPopupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderSelectionModelPopup]',

package/esm2022/lib/components/select/popup/templated-selection-dialog/templated-selection-dialog.component.mjs

@@ -34,10 +34,10 @@ export class TemplatedSelectionDialogComponent {
      **************************************************************************/
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.SelectionModel }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i7.ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.SelectionModel }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i7.ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: TemplatedSelectionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TemplatedSelectionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-templated-selection-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{

package/esm2022/lib/components/select/single/elder-clear-select.directive.mjs

@@ -43,10 +43,10 @@ export class ElderClearSelectDirective {
             this.select.value = null;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderClearSelectDirective, deps: [{ token: i1.ElderSelectComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderClearSelectDirective, selector: "[elderClearSelect]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderClearSelectDirective, deps: [{ token: i1.ElderSelectComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderClearSelectDirective, selector: "[elderClearSelect]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderClearSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderClearSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderClearSelect]'

package/esm2022/lib/components/select/single/elder-select/elder-select.component.mjs

@@ -384,8 +384,8 @@ export class ElderSelectComponent extends ElderSelectBase {
         }
         super.writeToControl(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderSelectComponent, selector: "elder-select", inputs: { nullDisplay: "nullDisplay", autocomplete: "autocomplete", allowNull: "allowNull", entity: "entity", entityId: "entityId" }, outputs: { entityIdChange: "entityIdChange", entityIdUpdated: "entityIdUpdated", entityChange: "entityChange", entityUpdated: "entityUpdated" }, host: { properties: { "class": "this.hostClass", "class.mat-select-disabled": "this.disabledClass", "class.mat-select-invalid": "this.errorStateClass", "class.mat-select-required": "this.requiredClass", "class.mat-select-empty": "this.emptyClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderSelectComponent, selector: "elder-select", inputs: { nullDisplay: "nullDisplay", autocomplete: "autocomplete", allowNull: "allowNull", entity: "entity", entityId: "entityId" }, outputs: { entityIdChange: "entityIdChange", entityIdUpdated: "entityIdUpdated", entityChange: "entityChange", entityUpdated: "entityUpdated" }, host: { properties: { "class": "this.hostClass", "class.mat-select-disabled": "this.disabledClass", "class.mat-select-invalid": "this.errorStateClass", "class.mat-select-required": "this.requiredClass", "class.mat-select-empty": "this.emptyClass" } }, providers: [
             { provide: MatFormFieldControl, useExisting: ElderSelectComponent },
             {
                 provide: ELDER_SELECT_BASE,
@@ -393,7 +393,7 @@ export class ElderSelectComponent extends ElderSelectBase {
             }
         ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"layout-row place-start-center elder-flex-control\"\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\"\n         class=\"elder-input-prefix-icon-container flex-none\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-mdc-control-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" class=\"flex-grow elder-select-input mdc-text-field__input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [dataContext]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div class=\"layout-row place-start-center flex-none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete && !entityWrapper.displayRemove\"\n      class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"selectionPopup && !entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n    </button>\n\n\n  </div>\n</div>\n\n\n\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7.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: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i11.ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataContext", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: i12.ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i13.ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: MatFormFieldControl, useExisting: ElderSelectComponent },

package/esm2022/lib/components/select/single/elder-select-form-field.mjs

@@ -30,10 +30,10 @@ export class ElderSelectFormField extends ElderFromFieldEntityBase {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderSelectFormField, viewQueries: [{ propertyName: "selectValueTemplate", first: true, predicate: ElderSelectValueDirective, descendants: true }, { propertyName: "selectionModelPopupDirective", first: true, predicate: SelectionModelPopupDirective, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderSelectFormField, viewQueries: [{ propertyName: "selectValueTemplate", first: true, predicate: ElderSelectValueDirective, descendants: true }, { propertyName: "selectionModelPopupDirective", first: true, predicate: SelectionModelPopupDirective, descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderSelectFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderSelectFormField, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { selectValueTemplate: [{
                 type: ViewChild,

package/esm2022/lib/components/select-chip-list/chip-list-select/elder-chip-list-select.component.mjs

@@ -105,15 +105,15 @@ export class ElderChipListSelectComponent {
         return entity[this.idField] ?
             entity[this.idField] : entity;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderChipListSelectComponent, deps: [{ token: i1.SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderChipListSelectComponent, selector: "elder-chip-list-select", inputs: { data$: "data$", idField: "idField", displayField: "displayField", color: "color", stacked: "stacked", data: "data", selection: "selection", selectionMultiEnabled: "selectionMultiEnabled" }, outputs: { itemClick: "itemClick", selectionChange: "selectionChange", selectionSingleChange: "selectionSingleChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderChipListSelectComponent, deps: [{ token: i1.SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderChipListSelectComponent, selector: "elder-chip-list-select", inputs: { data$: "data$", idField: "idField", displayField: "displayField", color: "color", stacked: "stacked", data: "data", selection: "selection", selectionMultiEnabled: "selectionMultiEnabled" }, outputs: { itemClick: "itemClick", selectionChange: "selectionChange", selectionSingleChange: "selectionSingleChange" }, providers: [
             {
                 provide: ELDER_DATA_VIEW,
                 useExisting: forwardRef(() => ElderChipListSelectComponent)
             }
-        ], ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-chip-listbox\n    [multiple]=\"selectionModel.isMultipleSelection\"\n    [ngClass]=\"{'mat-mdc-chip-set-stacked' : stacked}\"\n  >\n    <mat-chip-option *ngFor=\"let chip of data$ | async\"\n              selectable\n              [selected]=\"isSelected(chip)\"\n              (click)=\"onItemClick(chip)\"\n              [color]=\"color\"\n    >\n      {{getDisplayText(chip)}}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-chip-listbox\n    [multiple]=\"selectionModel.isMultipleSelection\"\n    [ngClass]=\"{'mat-mdc-chip-set-stacked' : stacked}\"\n  >\n    <mat-chip-option *ngFor=\"let chip of data$ | async\"\n              selectable\n              [selected]=\"isSelected(chip)\"\n              (click)=\"onItemClick(chip)\"\n              [color]=\"color\"\n    >\n      {{getDisplayText(chip)}}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderChipListSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderChipListSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-chip-list-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {

package/esm2022/lib/components/select-chip-list/elder-chip-list-select.module.mjs

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

package/esm2022/lib/components/shell/drawers/elder-route-outlet-drawer.service.mjs

@@ -105,10 +105,10 @@ export class ElderRouteOutletDrawerService {
             this._outletChangeSubscription = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderRouteOutletDrawerService, deps: [{ token: i1.ElderRouterOutletService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderRouteOutletDrawerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderRouteOutletDrawerService, deps: [{ token: i1.ElderRouterOutletService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderRouteOutletDrawerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderRouteOutletDrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderRouteOutletDrawerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/lib/components/shell/drawers/elder-router-outlet.service.mjs

@@ -116,10 +116,10 @@ export class ElderRouterOutletService {
             this.collectActiveOutletsRecursive(c, outlets);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderRouterOutletService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderRouterOutletService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderRouterOutletService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderRouterOutletService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderRouterOutletService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderRouterOutletService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/lib/components/shell/elder-shell-slot.directive.mjs

@@ -30,10 +30,10 @@ export class ElderShellSlotDirective {
     ngOnDestroy() {
         this.elderShellService.deregisterColumn(this.templateRef, this.elderShellSlot);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellSlotDirective, deps: [{ token: i0.ViewContainerRef }, { token: i1.ElderShellService }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderShellSlotDirective, selector: "[elderShellSlot]", inputs: { elderShellSlot: "elderShellSlot", elderShellSlotDefault: "elderShellSlotDefault" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellSlotDirective, deps: [{ token: i0.ViewContainerRef }, { token: i1.ElderShellService }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderShellSlotDirective, selector: "[elderShellSlot]", inputs: { elderShellSlot: "elderShellSlot", elderShellSlotDefault: "elderShellSlotDefault" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellSlotDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellSlotDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderShellSlot]'

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

@@ -24,8 +24,8 @@ export { ElderShellService } from './elder-shell.service';
 export { ElderShellSlotDirective } from './elder-shell-slot.directive';
 export { ElderAppHeaderComponent } from './header/elder-app-header/elder-app-header.component';
 export class ElderShellModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ElderShellModule, declarations: [ElderShellComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: ElderShellModule, declarations: [ElderShellComponent,
             ElderShellSideLeftDirective,
             ElderShellSideRightDirective,
             ElderShellCenterDirective,
@@ -47,7 +47,7 @@ export class ElderShellModule {
             ElderShellNavigationToggleComponent,
             ElderShellSlotDirective,
             ElderAppHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellModule, imports: [CommonModule, RouterModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellModule, imports: [CommonModule, RouterModule,
             MatSidenavModule,
             MatToolbarModule,
             MatIconModule,
@@ -58,7 +58,7 @@ export class ElderShellModule {
             ElderThemeModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -133,10 +133,10 @@ export class ElderShellService {
         this.clickOutsideToClose = clickOutsideToClose;
         return this.routerOutletService.activate(this.detailContentOutlet, args, extras);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellService, deps: [{ token: i1.Router }, { token: i2.ElderRouterOutletService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellService, deps: [{ token: i1.Router }, { token: i2.ElderRouterOutletService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/lib/components/shell/header/elder-app-header/elder-app-header.component.mjs

@@ -49,10 +49,10 @@ export class ElderAppHeaderComponent {
     set iconColor(c) {
         this.iconColor$.next(c);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAppHeaderComponent, deps: [{ token: i1.ElderThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderAppHeaderComponent, selector: "elder-app-header", inputs: { icon: "icon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"], 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: "component", type: i4.ElderPanelComponent, selector: "elder-panel, mat-panel", inputs: ["color"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderAppHeaderComponent, deps: [{ token: i1.ElderThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderAppHeaderComponent, selector: "elder-app-header", inputs: { icon: "icon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"], 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: "component", type: i4.ElderPanelComponent, selector: "elder-panel, mat-panel", inputs: ["color"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"] }]
         }], ctorParameters: () => [{ type: i1.ElderThemeService }], propDecorators: { icon: [{

package/esm2022/lib/components/shell/shell/elder-shell.component.mjs

@@ -20,10 +20,10 @@ export class ElderShellSideLeftDirective {
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellSideLeftDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderShellSideLeftDirective, selector: "[elderShellSideLeft]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellSideLeftDirective, 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: ElderShellSideLeftDirective, selector: "[elderShellSideLeft]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellSideLeftDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellSideLeftDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[elderShellSideLeft]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
@@ -32,10 +32,10 @@ export class ElderShellSideRightDirective {
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellSideRightDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderShellSideRightDirective, selector: "[elderShellSideRight]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellSideRightDirective, 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: ElderShellSideRightDirective, selector: "[elderShellSideRight]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellSideRightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellSideRightDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[elderShellSideRight]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
@@ -44,10 +44,10 @@ export class ElderShellCenterDirective {
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellCenterDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderShellCenterDirective, selector: "[elderShellCenter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellCenterDirective, 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: ElderShellCenterDirective, selector: "[elderShellCenter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellCenterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellCenterDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[elderShellCenter]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
@@ -175,10 +175,10 @@ export class ElderShellComponent {
             this.changeDetectorRef.markForCheck();
         }, 5);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellComponent, deps: [{ token: i1.ElderShellService }, { token: i2.ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: i3.ElderThemeService }, { token: i4.GlobalDragDropService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderShellComponent, selector: "elder-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", menuColor: "menuColor", menuIconColor: "menuIconColor" }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\" class=\"flex-none\" style=\"max-width: 100%; min-width: 100%\" >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\"\n                 [color]=\"menuColor$ | async\"\n                 class=\"flex-none\" style=\"width: auto\"\n    >\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i7.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i7.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i7.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11.ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "directive", type: i12.ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellComponent, deps: [{ token: i1.ElderShellService }, { token: i2.ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: i3.ElderThemeService }, { token: i4.GlobalDragDropService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderShellComponent, selector: "elder-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", menuColor: "menuColor", menuIconColor: "menuIconColor" }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\" class=\"flex-none\" style=\"max-width: 100%; min-width: 100%\" >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\"\n                 [color]=\"menuColor$ | async\"\n                 class=\"flex-none\" style=\"width: auto\"\n    >\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i7.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i7.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i7.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11.ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "directive", type: i12.ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\" class=\"flex-none\" style=\"max-width: 100%; min-width: 100%\" >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\"\n                 [color]=\"menuColor$ | async\"\n                 class=\"flex-none\" style=\"width: auto\"\n    >\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i1.ElderShellService }, { type: i2.ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: i3.ElderThemeService }, { type: i4.GlobalDragDropService }], propDecorators: { sideNavToggleEnabled: [{

package/esm2022/lib/components/shell/shell-navigation-toggle/elder-shell-navigation-toggle.component.mjs

@@ -123,10 +123,10 @@ export class ElderShellNavigationToggleComponent {
         parts.splice(parts.length - 1, 1);
         return parts.join('/');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellNavigationToggleComponent, deps: [{ token: i1.Router }, { token: i2.ElderShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ElderShellNavigationToggleComponent, selector: "elder-shell-nav-toggle", inputs: { roots: "roots", hide: "hide" }, ngImport: i0, template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellNavigationToggleComponent, deps: [{ token: i1.Router }, { token: i2.ElderShellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ElderShellNavigationToggleComponent, selector: "elder-shell-nav-toggle", inputs: { roots: "roots", hide: "hide" }, ngImport: i0, template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderShellNavigationToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderShellNavigationToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell-nav-toggle', template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: i2.ElderShellService }], propDecorators: { roots: [{

package/esm2022/lib/components/tabs/elder-tab/elder-tab.directive.mjs

@@ -10,10 +10,10 @@ export class ElderTabDirective {
     constructor(tab) {
         this.tab = tab;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1.MatTab }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ElderTabDirective, selector: "[elderTab]", inputs: { id: ["elderTab", "id"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1.MatTab }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: ElderTabDirective, selector: "[elderTab]", inputs: { id: ["elderTab", "id"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ElderTabDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ElderTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderTab]'