@elderbyte/ngx-starter 19.1.0-beta.14 → 19.1.0-beta.16

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -10019,11 +10019,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 class ElderDialogPanelComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderDialogPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderDialogPanelComponent, isStandalone: true, selector: "elder-dialog-panel", ngImport: i0, template: "<div class=\"layout-col elder-dialog-panel\">\n  <ng-content></ng-content>\n</div>\n", styles: [".elder-dialog-panel{background-color:var(--elder-dialog-panel-bg-color);color:var(--md-sys-color-on-surface);padding:10px;border-radius:var(--elder-border-radius-sm);box-shadow:var(--elder-box-shadow-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderDialogPanelComponent, isStandalone: true, selector: "elder-dialog-panel", ngImport: i0, template: "<div class=\"layout-col elder-dialog-panel\">\n  <ng-content></ng-content>\n</div>\n", styles: [".elder-dialog-panel{background-color:var(--elder-dialog-panel-bg-color);color:var(--md-sys-color-on-surface);padding:10px;border-radius:var(--elder-pane-border-radius);box-shadow:var(--elder-box-shadow-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderDialogPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-dialog-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col elder-dialog-panel\">\n  <ng-content></ng-content>\n</div>\n", styles: [".elder-dialog-panel{background-color:var(--elder-dialog-panel-bg-color);color:var(--md-sys-color-on-surface);padding:10px;border-radius:var(--elder-border-radius-sm);box-shadow:var(--elder-box-shadow-default)}\n"] }]
+            args: [{ selector: 'elder-dialog-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col elder-dialog-panel\">\n  <ng-content></ng-content>\n</div>\n", styles: [".elder-dialog-panel{background-color:var(--elder-dialog-panel-bg-color);color:var(--md-sys-color-on-surface);padding:10px;border-radius:var(--elder-pane-border-radius);box-shadow:var(--elder-box-shadow-default)}\n"] }]
         }], ctorParameters: () => [] });
 
 class ElderTogglePanelPrimaryDirective {
@@ -31591,7 +31591,7 @@ class ElderSearchBoxComponent {
         this.searchContextDirective.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ElderSearchBoxComponent, isStandalone: true, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "customSearchPanel", first: true, predicate: ElderSearchPanelComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "overlayComponent", first: true, predicate: ElderOverlayComponent, descendants: true, isSignal: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-flat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback", "valueAsId", "elderSearchInputKey"], exportAs: ["elderSearchInput"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ElderSearchBoxComponent, isStandalone: true, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "customSearchPanel", first: true, predicate: ElderSearchPanelComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "overlayComponent", first: true, predicate: ElderOverlayComponent, descendants: true, isSignal: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-flat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback", "valueAsId", "elderSearchInputKey"], exportAs: ["elderSearchInput"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
@@ -31615,7 +31615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         MatButton,
                         AsyncPipe,
                         TranslateModule,
-                    ], template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-flat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px}\n"] }]
+                    ], template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-flat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"] }]
         }], ctorParameters: () => [{ type: ElderSearchContextDirective }], propDecorators: { autoPanel: [{
                 type: Input
             }], name: [{
@@ -32658,11 +32658,11 @@ class HttpDataTransferAggregateComponent {
         this.aggregate$ = this.transferService.transferAggregate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HttpDataTransferAggregateComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: HttpDataTransferAggregateComponent, isStandalone: true, selector: "elder-data-transfer-aggregate", inputs: { hiddenWhenInactive: "hiddenWhenInactive" }, ngImport: i0, template: "<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <div *ngIf=\"!hiddenWhenInactive || aggregate.inTransfer > 0\" class=\"layout-col flex\">\n    <div class=\"layout-row place-center-center\">\n      <span>{{ aggregate.bps }}</span>\n    </div>\n\n    <mat-progress-bar\n      [color]=\"'accent'\"\n      mode=\"determinate\"\n      [value]=\"aggregate.percentDone\"\n    ></mat-progress-bar>\n\n    <div class=\"layout-row\">\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{ aggregate.percentDone }}%</span>\n\n      <span class=\"flex\"></span>\n      <span class=\"mat-caption\">TOTAL {{ aggregate.totalBytesAgg | bytes: 1 }}</span>\n    </div>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: HttpDataTransferAggregateComponent, isStandalone: true, selector: "elder-data-transfer-aggregate", inputs: { hiddenWhenInactive: "hiddenWhenInactive" }, ngImport: i0, template: "<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <div *ngIf=\"!hiddenWhenInactive || aggregate.inTransfer > 0\" class=\"layout-col flex\">\n    <div class=\"layout-row place-center-center\">\n      <span>{{ aggregate.bps }}</span>\n    </div>\n\n    <mat-progress-bar\n      [color]=\"'accent'\"\n      mode=\"determinate\"\n      [value]=\"aggregate.percentDone\"\n    ></mat-progress-bar>\n\n    <div class=\"layout-row pt-xs pb-sm\">\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{ aggregate.percentDone }}%</span>\n\n      <span class=\"flex\"></span>\n      <span class=\"mat-caption\">TOTAL {{ aggregate.totalBytesAgg | bytes: 1 }}</span>\n    </div>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HttpDataTransferAggregateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-data-transfer-aggregate', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatProgressBar, AsyncPipe, BytesPipe], template: "<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <div *ngIf=\"!hiddenWhenInactive || aggregate.inTransfer > 0\" class=\"layout-col flex\">\n    <div class=\"layout-row place-center-center\">\n      <span>{{ aggregate.bps }}</span>\n    </div>\n\n    <mat-progress-bar\n      [color]=\"'accent'\"\n      mode=\"determinate\"\n      [value]=\"aggregate.percentDone\"\n    ></mat-progress-bar>\n\n    <div class=\"layout-row\">\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{ aggregate.percentDone }}%</span>\n\n      <span class=\"flex\"></span>\n      <span class=\"mat-caption\">TOTAL {{ aggregate.totalBytesAgg | bytes: 1 }}</span>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'elder-data-transfer-aggregate', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatProgressBar, AsyncPipe, BytesPipe], template: "<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <div *ngIf=\"!hiddenWhenInactive || aggregate.inTransfer > 0\" class=\"layout-col flex\">\n    <div class=\"layout-row place-center-center\">\n      <span>{{ aggregate.bps }}</span>\n    </div>\n\n    <mat-progress-bar\n      [color]=\"'accent'\"\n      mode=\"determinate\"\n      [value]=\"aggregate.percentDone\"\n    ></mat-progress-bar>\n\n    <div class=\"layout-row pt-xs pb-sm\">\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{ aggregate.percentDone }}%</span>\n\n      <span class=\"flex\"></span>\n      <span class=\"mat-caption\">TOTAL {{ aggregate.totalBytesAgg | bytes: 1 }}</span>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: ElderDataTransferService }], propDecorators: { hiddenWhenInactive: [{
                 type: Input
             }] } });
@@ -32678,7 +32678,7 @@ class HttpDataTransferOverviewComponent {
         this.transfers$ = this.transferService.transfers;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HttpDataTransferOverviewComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: HttpDataTransferOverviewComponent, isStandalone: true, selector: "elder-data-transfer-overview", ngImport: i0, template: "<div class=\"layout-col full elevated-card\">\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n    <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer\n        class=\"flex-none\"\n        *ngFor=\"let transfer of transfers\"\n        [transfer]=\"transfer\"\n      >\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <mat-toolbar class=\"flex-none toolbar-dark-bg\">\n    <elder-data-transfer-aggregate\n      class=\"flex\"\n      [hiddenWhenInactive]=\"false\"\n    ></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}.elevated-card{background-color:var(--mdc-elevated-card-container-color);border-radius:var(--elder-border-radius-sm);overflow:hidden}.toolbar-dark-bg{background-color:var(--md-sys-color-surface-container);border-radius:10px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: ["transfer"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: ["hiddenWhenInactive"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: HttpDataTransferOverviewComponent, isStandalone: true, selector: "elder-data-transfer-overview", ngImport: i0, template: "<div class=\"layout-col full elevated-card\">\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n    <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer\n        class=\"flex-none\"\n        *ngFor=\"let transfer of transfers\"\n        [transfer]=\"transfer\"\n      >\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <mat-toolbar class=\"flex-none toolbar-dark-bg\">\n    <elder-data-transfer-aggregate\n      class=\"flex\"\n      [hiddenWhenInactive]=\"false\"\n    ></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}.elevated-card{background-color:var(--mdc-elevated-card-container-color);border-radius:var(--elder-border-radius-sm);border-radius:var(--elder-pane-border-radius);overflow:hidden;box-shadow:var(--mat-app-elevation-shadow-level-5, none)}.toolbar-dark-bg{background-color:var(--md-sys-color-surface-container-low)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: ["transfer"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: ["hiddenWhenInactive"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HttpDataTransferOverviewComponent, decorators: [{
             type: Component,
@@ -32690,7 +32690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         MatToolbar,
                         HttpDataTransferAggregateComponent,
                         AsyncPipe,
-                    ], template: "<div class=\"layout-col full elevated-card\">\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n    <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer\n        class=\"flex-none\"\n        *ngFor=\"let transfer of transfers\"\n        [transfer]=\"transfer\"\n      >\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <mat-toolbar class=\"flex-none toolbar-dark-bg\">\n    <elder-data-transfer-aggregate\n      class=\"flex\"\n      [hiddenWhenInactive]=\"false\"\n    ></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}.elevated-card{background-color:var(--mdc-elevated-card-container-color);border-radius:var(--elder-border-radius-sm);overflow:hidden}.toolbar-dark-bg{background-color:var(--md-sys-color-surface-container);border-radius:10px}\n"] }]
+                    ], template: "<div class=\"layout-col full elevated-card\">\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n    <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer\n        class=\"flex-none\"\n        *ngFor=\"let transfer of transfers\"\n        [transfer]=\"transfer\"\n      >\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <mat-toolbar class=\"flex-none toolbar-dark-bg\">\n    <elder-data-transfer-aggregate\n      class=\"flex\"\n      [hiddenWhenInactive]=\"false\"\n    ></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}.elevated-card{background-color:var(--mdc-elevated-card-container-color);border-radius:var(--elder-border-radius-sm);border-radius:var(--elder-pane-border-radius);overflow:hidden;box-shadow:var(--mat-app-elevation-shadow-level-5, none)}.toolbar-dark-bg{background-color:var(--md-sys-color-surface-container-low)}\n"] }]
         }], ctorParameters: () => [{ type: ElderDataTransferService }] });
 
 class HttpDataTransferIndicatorComponent {