@elderbyte/ngx-starter 19.6.1 → 19.6.3

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -63,6 +63,7 @@ import * as i1$9 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import * as i2$4 from '@angular/material/sort';
 import { MatSortModule, MatSort, MatSortHeader } from '@angular/material/sort';
+import { __decorate, __param } from 'tslib';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
@@ -3483,7 +3484,7 @@ class TokenChunkRequest {
     }
     static nextIfAvailable(listing, filters, sorts) {
         if (listing.hasMore && listing.nextContinuationToken) {
-            return new TokenChunkRequest(listing.nextContinuationToken, filters, sorts, listing.chunkSize);
+            return new TokenChunkRequest(listing.nextContinuationToken, filters, sorts, listing.chunkSize ?? listing.maxChunkSize);
         }
         else {
             return undefined;
@@ -4240,18 +4241,20 @@ class DataContextContinuableBase extends DataContextBase {
         return this._chunkSize$.value;
     }
     set chunkSize(size) {
-        if (this._chunkSize$.value !== size) {
-            this._chunkSize$.next(size);
-            this.onChunkSizeChanged(size);
-        }
+        this.updateChunkSize(size, true);
     }
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    onChunkSizeChanged(newSize) {
-        this.reload('ChunkSizeChanged:' + newSize);
+    updateChunkSize(newSize, reloadOnChange) {
+        if (this._chunkSize$.value !== newSize) {
+            this._chunkSize$.next(newSize);
+            if (reloadOnChange) {
+                this.reload('ChunkSizeChanged:' + newSize);
+            }
+        }
     }
     loadAllRec() {
         this.loadMore().subscribe({
@@ -4504,7 +4507,7 @@ class DataContextContinuableToken extends DataContextContinuableBase {
     onChunkFetched(chunk) {
         this.logger.debug(this.id + ': Got next chunk data:', chunk);
         this._hasMoreData.next(chunk.hasMore);
-        this.chunkSize = chunk.chunkSize;
+        this.updateChunkSize(chunk.chunkSize ?? chunk.maxChunkSize, false);
         this.populateChunkData(chunk);
         this.onIdle();
     }
@@ -5498,10 +5501,10 @@ function isListDataSource(object) {
     return object.findAllFiltered !== undefined;
 }
 function isLocalListDataSource(object) {
-    return isListDataSource(object) &&
+    return (isListDataSource(object) &&
         object.delete !== undefined &&
         object.save !== undefined &&
-        object.replaceAll !== undefined;
+        object.replaceAll !== undefined);
 }
 function isPagedDataSource(object) {
     return object.findAllPaged !== undefined;
@@ -10041,7 +10044,7 @@ class ElderLabelInputComponent extends FormFieldBaseComponent {
      *                                                                         *
      **************************************************************************/
     labelSelected(event) {
-        console.log('labelSelected:', event);
+        this.logger.debug('labelSelected:', event);
         const selection = event.option.value;
         if (selection) {
             this.resetInput();
@@ -13501,8 +13504,6 @@ class ElderCompositeSortComponent {
                 this.selectedSort.set(best);
                 this.selectedSortDirection.set(sorts[0]?.dir ?? 'asc');
             }
-        }, {
-            allowSignalWrites: true,
         });
     }
     /***************************************************************************
@@ -15339,8 +15340,8 @@ class ElderDataViewItemDragDirective {
          * user defined this or if we should fall back to a superior predicate fn.
          * */
         this.canDragItem = input(null); // this is on purpose
-        const canDragItemPredicate = this.dndController ?
-            toSignal(dndController.canDragItemPredicate$)
+        const canDragItemPredicate = this.dndController
+            ? toSignal(dndController.canDragItemPredicate$)
             : signal(null);
         effect(() => {
             this.bindCanDragItem(this.cdkDrag, this.canDragItem(), canDragItemPredicate());
@@ -15381,7 +15382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[elderElderDataViewItemDrag]',
-                    hostDirectives: [CdkDrag] // adds cdkDrag to host
+                    hostDirectives: [CdkDrag], // adds cdkDrag to host
                 }]
         }], ctorParameters: () => [{ type: DataViewDndControllerService, decorators: [{
                     type: Optional
@@ -16039,7 +16040,7 @@ class ElderContinuatorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderContinuatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-continuator', imports: [MatFormField, MatIcon, MatIconButton, MatSelect, MatOption$1, MatTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-end-center gap-md flex-none\">\n  <mat-form-field class=\"elder-chunk-size-select\" subscriptSizing=\"dynamic\">\n    <mat-select\n      [value]=\"chunkSize()\"\n      [placeholder]=\"chunkSize() + ''\"\n      [disabled]=\"!canModifyChunkSize()\"\n      (valueChange)=\"onChunkSizeChange($event)\"\n    >\n      @for (sizeOption of chunkSizeOptions(); track sizeOption) {\n        <mat-option [value]=\"sizeOption\">{{ sizeOption }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n\n  <span class=\"mat-caption noselect loaded-info-text\"> {{ loadedCount() }} / {{ total() }} </span>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    [disabled]=\"!canLoadMore()\"\n    (click)=\"loadMoreRequested.emit()\"\n  >\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n</div>\n", styles: [".loaded-info-text{color:var(--md-sys-color-outline)}.elder-chunk-size-select.mat-mdc-form-field{width:84px}.elder-chunk-size-select.mat-mdc-form-field{--mat-form-field-container-height: 36px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 6px;--mat-form-field-filled-with-label-container-padding-top: 6px;--mat-form-field-filled-with-label-container-padding-bottom: 6px}.elder-chunk-size-select.mat-mdc-form-field .mat-mdc-select{--mat-select-trigger-text-size: var( --mat-paginator-container-text-size, var(--mat-sys-body-small-size) )}\n"] }]
+            args: [{ selector: 'elder-continuator', imports: [MatFormField, MatIcon, MatIconButton, MatSelect, MatOption$1], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-end-center gap-md flex-none\">\n  <mat-form-field class=\"elder-chunk-size-select\" subscriptSizing=\"dynamic\">\n    <mat-select\n      [value]=\"chunkSize()\"\n      [placeholder]=\"chunkSize() + ''\"\n      [disabled]=\"!canModifyChunkSize()\"\n      (valueChange)=\"onChunkSizeChange($event)\"\n    >\n      @for (sizeOption of chunkSizeOptions(); track sizeOption) {\n        <mat-option [value]=\"sizeOption\">{{ sizeOption }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n\n  <span class=\"mat-caption noselect loaded-info-text\"> {{ loadedCount() }} / {{ total() }} </span>\n\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    [disabled]=\"!canLoadMore()\"\n    (click)=\"loadMoreRequested.emit()\"\n  >\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n</div>\n", styles: [".loaded-info-text{color:var(--md-sys-color-outline)}.elder-chunk-size-select.mat-mdc-form-field{width:84px}.elder-chunk-size-select.mat-mdc-form-field{--mat-form-field-container-height: 36px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 6px;--mat-form-field-filled-with-label-container-padding-top: 6px;--mat-form-field-filled-with-label-container-padding-bottom: 6px}.elder-chunk-size-select.mat-mdc-form-field .mat-mdc-select{--mat-select-trigger-text-size: var( --mat-paginator-container-text-size, var(--mat-sys-body-small-size) )}\n"] }]
         }] });
 
 class ElderTableRowDirective {
@@ -18399,7 +18400,7 @@ var TripleCheckboxState;
     TripleCheckboxState[TripleCheckboxState["CHECKED"] = 1] = "CHECKED";
     TripleCheckboxState[TripleCheckboxState["INDETERMINATE"] = 2] = "INDETERMINATE";
 })(TripleCheckboxState || (TripleCheckboxState = {}));
-class ElderTripleStateCheckboxController {
+let ElderTripleStateCheckboxController = class ElderTripleStateCheckboxController {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -18408,8 +18409,14 @@ class ElderTripleStateCheckboxController {
     constructor(checkbox, ngModel) {
         this.checkbox = checkbox;
         this.ngModel = ngModel;
-        this._stateChange = this.ngModel.valueChanges.pipe(takeUntilDestroyed(), map((value) => this.controlValueToState(value)));
-        this.stateChange.subscribe((value) => this.writeState(value));
+        this._valueChange = new BehaviorSubject(undefined);
+        if (this.ngModel) {
+            this._stateChange = this.ngModel.valueChanges.pipe(takeUntilDestroyed(), map((value) => this.controlValueToState(value)));
+            this.stateChange.subscribe((value) => this.writeState(value));
+        }
+        else {
+            this._stateChange = this._valueChange.pipe(takeUntilDestroyed(), map((value) => this.controlValueToState(value)));
+        }
     }
     /***************************************************************************
      *                                                                         *
@@ -18419,6 +18426,9 @@ class ElderTripleStateCheckboxController {
     get stateChange() {
         return this._stateChange;
     }
+    get valueChange() {
+        return this._valueChange.asObservable();
+    }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -18477,6 +18487,7 @@ class ElderTripleStateCheckboxController {
         this.checkbox.value = isDefined ? String(value) : undefined;
         this.checkbox.checked = !!value;
         this.checkbox.indeterminate = !isDefined;
+        this._valueChange.next(value);
         this.updateModelIfPresent(value);
     }
     updateModelIfPresent(val) {
@@ -18489,7 +18500,10 @@ class ElderTripleStateCheckboxController {
             });
         }
     }
-}
+};
+ElderTripleStateCheckboxController = __decorate([
+    __param(1, Optional())
+], ElderTripleStateCheckboxController);
 
 class ElderTripleStateCheckboxDirective {
     /***************************************************************************
@@ -18505,6 +18519,12 @@ class ElderTripleStateCheckboxDirective {
          *                                                                         *
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
+        /***************************************************************************
+         *                                                                         *
+         * Properties                                                              *
+         *                                                                         *
+         **************************************************************************/
+        this.valueChange = new EventEmitter();
         this.controller = new ElderTripleStateCheckboxController(checkbox, ngModel);
     }
     /***************************************************************************
@@ -18515,6 +18535,10 @@ class ElderTripleStateCheckboxDirective {
     ngOnInit() {
         this.controller.writeState(this.controller.readState());
         this.checkbox.registerOnChange(() => this.toggleNextState());
+        // Subscribe to value changes from the controller
+        this.controller.valueChange.subscribe((value) => {
+            this.valueChange.emit(value);
+        });
     }
     /***************************************************************************
      *                                                                         *
@@ -18524,8 +18548,8 @@ class ElderTripleStateCheckboxDirective {
     toggleNextState() {
         this.controller.toggleNextState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTripleStateCheckboxDirective, deps: [{ token: i1$c.MatCheckbox }, { token: i1$4.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: ElderTripleStateCheckboxDirective, isStandalone: true, selector: "mat-checkbox[elderTripleStateCheckbox]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTripleStateCheckboxDirective, deps: [{ token: i1$c.MatCheckbox }, { token: i1$4.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: ElderTripleStateCheckboxDirective, isStandalone: true, selector: "mat-checkbox[elderTripleStateCheckbox]", outputs: { valueChange: "valueChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTripleStateCheckboxDirective, decorators: [{
             type: Directive,
@@ -18533,7 +18557,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                     selector: 'mat-checkbox[elderTripleStateCheckbox]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$c.MatCheckbox }, { type: i1$4.NgModel }] });
+        }], ctorParameters: () => [{ type: i1$c.MatCheckbox }, { type: i1$4.NgModel, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { valueChange: [{
+                type: Output
+            }] } });
 
 /**
  * Traps tab focus inside the host elements children.
@@ -19701,9 +19729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
         }] });
 
 class ElderSimpleSelectionViewComponent {
-    constructor(selectionModel) {
-        console.log('Received selection model:', selectionModel);
-    }
+    constructor(selectionModel) { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderSimpleSelectionViewComponent, deps: [{ token: SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ElderSimpleSelectionViewComponent, isStandalone: true, selector: "elder-simple-selection-view", ngImport: i0, template: "<p>elder-simple-selection-view works!</p>\n", styles: [""] }); }
@@ -21330,7 +21356,7 @@ class ElderMasterDetailComponent {
             panelClass: 'custom-dialog-container',
         });
         this.dialogRef.afterClosed().subscribe((result) => {
-            console.log('The dialog was closed');
+            this.log.debug('The dialog was closed');
         });
     }
     onCurrentItemChange(active) {
@@ -31126,10 +31152,10 @@ class ElderIntervalPickerComponent {
             }
             const elderInterval = IntervalPickerUtil.createElderInterval(srcInterval);
             if (this.emitType() === 'iso') {
-                console.log('emitting type iso', coerceIntervalIsoStr(elderInterval));
+                this.log.debug('emitting type iso', coerceIntervalIsoStr(elderInterval));
                 return coerceIntervalIsoStr(elderInterval);
             }
-            console.log('emitting type elder interval', elderInterval);
+            this.log.debug('emitting type elder interval', elderInterval);
             return elderInterval;
         }));
         this.manager.anchor$.pipe(takeUntilDestroyed()).subscribe((anchor) => {
@@ -31159,7 +31185,7 @@ class ElderIntervalPickerComponent {
         setTimeout(() => {
             // this prevents ngmodel issue
             this.manager.isInitialized = true;
-            console.log('externalInterval', this.externalInterval());
+            this.log.debug('externalInterval', this.externalInterval());
         }, 0);
     }
     ngOnDestroy() {
@@ -31209,7 +31235,7 @@ class ElderIntervalPickerComponent {
             IntervalPickerUtil.updateMatCalendarActiveDate(this.calendarStart, this.calendarEnd, interval.startDate, interval.endDate);
         }
         catch (e) {
-            console.debug('Failed to update calendar active date', e);
+            this.log.debug('Failed to update calendar active date', e);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -32788,16 +32814,13 @@ class ElderSearchBoxComponent {
         this.queryKey = 'query';
         this._dense = false;
         this.autocomplete = 'off';
-        this.touchedSearchInputs$ = searchContextDirective.touchedSearchInputs$
-            .pipe();
+        this.touchedSearchInputs$ = searchContextDirective.touchedSearchInputs$;
         effect(() => {
             const customSearchPanel = this.customSearchPanel();
             const overlay = this.overlayComponent();
             if (customSearchPanel) {
                 customSearchPanel.overlay.set(overlay);
             }
-        }, {
-            allowSignalWrites: true,
         });
     }
     /***************************************************************************
@@ -32826,7 +32849,7 @@ class ElderSearchBoxComponent {
         this.searchContextDirective.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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-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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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              aria-hidden=\"false\"\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-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.2.4", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
@@ -32849,7 +32872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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-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"] }]
+                    ], 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              aria-hidden=\"false\"\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-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: [{
@@ -35021,8 +35044,6 @@ class ElderUrlFragmentSwitcherComponent {
      **************************************************************************/
     ngOnInit() {
         if (!this.disable) {
-            console.log('URL FRAGMEENTS');
-            console.log(this.urlFragments);
             const urlFragment = this.urlFragments.find((c) => {
                 try {
                     return c.fragment === this.urlRegex.exec(window.location.href)[this.regexArrayIndex];
@@ -35031,8 +35052,6 @@ class ElderUrlFragmentSwitcherComponent {
                     return false;
                 }
             });
-            console.log('URL FRAGMENT');
-            console.log(urlFragment);
             if (urlFragment) {
                 this.activeUrlFragment$.next(urlFragment);
             }