axioma-material 1.0.1

package/fesm2022/axioma-material.mjs

@@ -0,0 +1,767 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectionStrategy, EventEmitter, booleanAttribute, Input, Output, input, effect, forwardRef, signal, computed, TemplateRef, NgModule } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { HttpResponse, HttpErrorResponse, HttpClient, HttpHeaders } from '@angular/common/http';
+import { createActionGroup, emptyProps, props, Store, createReducer, on, createFeature, createFeatureSelector, createSelector, provideState } from '@ngrx/store';
+import { catchError, map, take, of, first, filter, switchMap, tap } from 'rxjs';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogContent, MatDialogActions, MatDialogTitle, MatDialog } from '@angular/material/dialog';
+import { NgTemplateOutlet, Location, CommonModule } from '@angular/common';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/forms';
+import { FormControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i9 from '@angular/router';
+import { RouterModule, ActivatedRoute, Router } from '@angular/router';
+import * as i11 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i10 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i3$1 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i7 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i6 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Actions, ofType, createEffect, provideEffects } from '@ngrx/effects';
+import { concatLatestFrom } from '@ngrx/operators';
+import { map as map$1, mergeMap, filter as filter$1, concatMap, catchError as catchError$1, tap as tap$1 } from 'rxjs/operators';
+import { ROUTER_NAVIGATION } from '@ngrx/router-store';
+
+class SnackService {
+    snackBar = inject(MatSnackBar);
+    info(message, action = 'Dismiss', duration = 3000) {
+        this.snackBar.open(message, action, { duration });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SnackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SnackService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SnackService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+const SharedActions = createActionGroup({
+    source: 'Shared',
+    events: {
+        'Back': emptyProps(),
+        'Init': emptyProps(),
+        'Init Success': props(),
+        'Noop': emptyProps(),
+        'Start Request': emptyProps(),
+        'End Request': emptyProps(),
+        'Transient Error': props(),
+        'Bad Error': props(),
+        'Navigate': props(),
+        'Access Denied': emptyProps(),
+        'Login': props(),
+    }
+});
+
+const loadingInterceptor = (req, next) => {
+    let store = inject(Store);
+    store.dispatch(SharedActions.startRequest());
+    try {
+        return next(req)
+            .pipe(catchError((err) => {
+            store.dispatch(SharedActions.endRequest());
+            throw err;
+        }))
+            .pipe(map(e => {
+            if (e instanceof HttpResponse || e instanceof HttpErrorResponse) {
+                store.dispatch(SharedActions.endRequest());
+            }
+            return e;
+        }));
+    }
+    catch (err) {
+        console.log('error', err);
+        store.dispatch(SharedActions.endRequest());
+        throw err;
+    }
+};
+
+class ConfirmationDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    constructor() {
+        this.data.buttons ??= [{
+                text: 'Yes',
+                value: true,
+                default: true,
+                color: 'primary'
+            }, {
+                text: 'No',
+                value: false,
+                default: false,
+            }];
+    }
+    clickButton(button) {
+        this.dialogRef.close(button.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ConfirmationDialogComponent, isStandalone: true, selector: "x-confirmation-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\r\n<mat-dialog-content cdkTrapFocus class=\"mat-typography\">\r\n    @if(data.message){\r\n    <p>{{data.message}}</p>\r\n    } @else if (data.messageRef) {\r\n        <ng-container *ngTemplateOutlet=\"data.messageRef\"></ng-container>\r\n    }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    @for(button of data.buttons; track button){\r\n        @if(button.default){\r\n        <button mat-button (click)=\"clickButton(button)\" cdkFocusInitial>{{button.text}}</button>\r\n        } @else {\r\n            <button mat-button (click)=\"clickButton(button)\">{{button.text}}</button>\r\n        }\r\n    }\r\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-confirmation-dialog', imports: [NgTemplateOutlet, MatButtonModule, MatDialogContent, MatDialogActions, MatDialogTitle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h2 mat-dialog-title>{{data.title}}</h2>\r\n<mat-dialog-content cdkTrapFocus class=\"mat-typography\">\r\n    @if(data.message){\r\n    <p>{{data.message}}</p>\r\n    } @else if (data.messageRef) {\r\n        <ng-container *ngTemplateOutlet=\"data.messageRef\"></ng-container>\r\n    }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    @for(button of data.buttons; track button){\r\n        @if(button.default){\r\n        <button mat-button (click)=\"clickButton(button)\" cdkFocusInitial>{{button.text}}</button>\r\n        } @else {\r\n            <button mat-button (click)=\"clickButton(button)\">{{button.text}}</button>\r\n        }\r\n    }\r\n</mat-dialog-actions>" }]
+        }], ctorParameters: () => [] });
+
+class ConfirmationService {
+    dialog = inject(MatDialog);
+    confirm(message, title = 'Confirmation') {
+        let ref = this.dialog.open(ConfirmationDialogComponent, {
+            data: {
+                title,
+                message
+            }
+        });
+        return ref.afterClosed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DetailActionsComponent {
+    dontRoute = false;
+    cancel = new EventEmitter();
+    location = inject(Location);
+    constructor() {
+        this.cancel.pipe(take(1)).subscribe(() => this.dontRoute || this.location.back());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DetailActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.4", type: DetailActionsComponent, isStandalone: true, selector: "x-detail-actions", inputs: { dontRoute: ["no-routing", "dontRoute", booleanAttribute] }, outputs: { cancel: "cancel" }, ngImport: i0, template: "<mat-toolbar class=\"flex flex-row gap-2 p-2\">\r\n    <button mat-stroked-button type=\"submit\"><mat-icon>save</mat-icon> Save</button>\r\n    <button mat-button type=\"button\" (click)=\"cancel.emit()\"><mat-icon>cancel</mat-icon> Cancel</button>\r\n    <div class=\"flex-grow\"></div>\r\n    <ng-content select=\"[right]\"></ng-content>\r\n</mat-toolbar>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DetailActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-detail-actions', imports: [MatToolbarModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar class=\"flex flex-row gap-2 p-2\">\r\n    <button mat-stroked-button type=\"submit\"><mat-icon>save</mat-icon> Save</button>\r\n    <button mat-button type=\"button\" (click)=\"cancel.emit()\"><mat-icon>cancel</mat-icon> Cancel</button>\r\n    <div class=\"flex-grow\"></div>\r\n    <ng-content select=\"[right]\"></ng-content>\r\n</mat-toolbar>" }]
+        }], ctorParameters: () => [], propDecorators: { dontRoute: [{
+                type: Input,
+                args: [{ transform: booleanAttribute, alias: 'no-routing' }]
+            }], cancel: [{
+                type: Output
+            }] } });
+
+class EmailComponent {
+    checkUserExistsFn;
+    login = new EventEmitter();
+    label = 'Email';
+    exists = new EventEmitter();
+    $touched = input(false, { transform: booleanAttribute, alias: 'touched' });
+    $existing = input(false, { transform: booleanAttribute, alias: 'existing' });
+    control = new FormControl('', [Validators.required, Validators.email]);
+    onChange = (_) => { };
+    onTouch = (_) => { };
+    onValidationChange = () => { };
+    writeValue(obj) {
+        this.control.setValue(obj);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        isDisabled
+            ? this.control.disable()
+            : this.control.enable();
+    }
+    validate(_) {
+        return this.control.errors;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidationChange = fn;
+    }
+    constructor() {
+        let $valid = toSignal(this.control.statusChanges);
+        effect(() => {
+            this.onValidationChange();
+        });
+        let $value = toSignal(this.control.valueChanges);
+        effect(() => {
+            this.onChange($value());
+        });
+        this.control.setAsyncValidators(() => {
+            let existing = this.$existing();
+            let value = this.control.value;
+            if (!value || typeof existing === 'undefined') {
+                return of(null);
+            }
+            return this.checkUserExistsFn(value).pipe(map(exists => {
+                this.exists.emit(exists);
+                return exists === existing ? null : existing ? { missing: true } : { exists: true };
+            }), first());
+        });
+        effect(() => {
+            let touched = this.$touched();
+            if (touched) {
+                this.control.markAsTouched();
+            }
+            else {
+                this.control.markAsUntouched();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: EmailComponent, isStandalone: true, selector: "x-email", inputs: { checkUserExistsFn: { classPropertyName: "checkUserExistsFn", publicName: "checkUserExistsFn", isSignal: false, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, $touched: { classPropertyName: "$touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, $existing: { classPropertyName: "$existing", publicName: "existing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", exists: "exists" }, host: { listeners: { "blur": "onTouch($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: EmailComponent
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => EmailComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<mat-form-field >\r\n    <mat-label>{{label}}</mat-label>\r\n    <input matInput type=\"email\" [formControl]=\"control\" required>\r\n    <mat-hint><ng-content></ng-content></mat-hint>\r\n    @if (control.hasError('required')){\r\n    <mat-error>Email is required</mat-error>\r\n    } @else if (control.hasError('email')){\r\n    <mat-error>Email is invalid</mat-error>\r\n    } @else if (control.hasError('exists')){\r\n    <mat-error>Email already exists: <a (click)=\"login.emit()\">sign in</a>.</mat-error>\r\n    } @else if (control.hasError('missing')){\r\n    <mat-error>Email is missing</mat-error>\r\n    }\r\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EmailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-email', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(blur)': 'onTouch($event)'
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: EmailComponent
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => EmailComponent),
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field >\r\n    <mat-label>{{label}}</mat-label>\r\n    <input matInput type=\"email\" [formControl]=\"control\" required>\r\n    <mat-hint><ng-content></ng-content></mat-hint>\r\n    @if (control.hasError('required')){\r\n    <mat-error>Email is required</mat-error>\r\n    } @else if (control.hasError('email')){\r\n    <mat-error>Email is invalid</mat-error>\r\n    } @else if (control.hasError('exists')){\r\n    <mat-error>Email already exists: <a (click)=\"login.emit()\">sign in</a>.</mat-error>\r\n    } @else if (control.hasError('missing')){\r\n    <mat-error>Email is missing</mat-error>\r\n    }\r\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { checkUserExistsFn: [{
+                type: Input,
+                args: [{ required: true }]
+            }], login: [{
+                type: Output
+            }], label: [{
+                type: Input
+            }], exists: [{
+                type: Output
+            }] } });
+
+const GridActions = createActionGroup({
+    source: 'Grid',
+    events: {
+        'Refresh': emptyProps(),
+        'Load': props(),
+        'Load Success': props(),
+        'Change Paging': props(),
+        'Change Sort': props(),
+        'Change Filter': props(),
+        'Update Request': props(),
+        'Go To': props(),
+        'Bulk Delete': props(),
+        'Bulk Delete Success': emptyProps(),
+    }
+});
+
+const gridFeatureKey = 'grid';
+const initialState$1 = {
+    grids: {}
+};
+const reducer$1 = createReducer(initialState$1, on(GridActions.loadSuccess, (state, { name, data, count }) => ({
+    ...state,
+    grids: { ...state.grids, [name]: { ...state.grids[name], data, count, loading: false } }
+})), on(GridActions.load, (state, { name }) => ({
+    ...state,
+    grids: { ...state.grids, [name]: { ...state.grids[name],
+            data: undefined,
+            count: undefined,
+            loading: true } }
+})));
+const gridFeature = createFeature({
+    name: gridFeatureKey,
+    reducer: reducer$1,
+});
+
+var FilterLogic;
+(function (FilterLogic) {
+    FilterLogic[FilterLogic["Or"] = 0] = "Or";
+    FilterLogic[FilterLogic["And"] = 1] = "And";
+})(FilterLogic || (FilterLogic = {}));
+var FilterOperator;
+(function (FilterOperator) {
+    FilterOperator[FilterOperator["Contains"] = 0] = "Contains";
+    FilterOperator[FilterOperator["Equals"] = 1] = "Equals";
+    FilterOperator[FilterOperator["Greater"] = 2] = "Greater";
+    FilterOperator[FilterOperator["Less"] = 3] = "Less";
+    FilterOperator[FilterOperator["In"] = 4] = "In";
+})(FilterOperator || (FilterOperator = {}));
+var SortDir;
+(function (SortDir) {
+    SortDir[SortDir["Asc"] = 0] = "Asc";
+    SortDir[SortDir["Desc"] = 1] = "Desc";
+})(SortDir || (SortDir = {}));
+
+const selectRouter = createFeatureSelector('router');
+const selectRouterState = createSelector(selectRouter, state => state?.state);
+const selectRouteParams = createSelector(selectRouterState, state => state?.params);
+const selectRouteParam = (name) => createSelector(selectRouteParams, params => (params && name) ? params[name] : undefined);
+const selectUrl = createSelector(selectRouterState, state => decodeUriInternal(state?.url));
+const selectSiteSlugParam = createSelector(selectRouteParam('site-slug'), selectUrl, (s, u) => s ?? (!!u ? null : undefined));
+const selectQueryParams = createSelector(selectRouterState, state => state?.queryParams);
+const selectQueryParam = (name) => createSelector(selectQueryParams, params => params ? params[name] : undefined);
+const selectDataParam = (name) => createSelector(selectRouterState, state => state?.data[name]);
+const selectUrlWithoutQuery = createSelector(selectRouterState, state => decodeUriInternal(state?.url?.split('?')[0]));
+const selectUrlSegments = (count) => createSelector(selectUrlWithoutQuery, url => {
+    let segs = url.split('/');
+    return segs.slice(0, Math.min(segs.length, count)).join('/');
+});
+const decodeUriInternal = (source) => {
+    return !!source ? decodeURI(source) : source;
+};
+
+const selectGridData = (name) => createSelector(gridFeature.selectGrids, (grids) => grids ? grids[name] : undefined);
+const selectPageIndex = createSelector(selectQueryParam('page'), (p) => (p ? +p : 1) - 1);
+const selectPageSize = createSelector(selectQueryParam('size'), (s) => s ? +s : 25);
+const selectGridFilters = (name) => createSelector(selectQueryParam(name), (params) => params ? JSON.parse(atob(params)) : undefined);
+const selectTotalCount = (name) => createSelector(selectGridData(name), data => data?.count ?? 0);
+const selectGridSetup = createSelector(selectRouterState, s => s?.data['grid'] ? s.data['grid'] : undefined);
+const selectSortBy = createSelector(selectGridSetup, selectQueryParam('sort-by'), (s, q) => q ? q : s?.sortBy);
+const selectSortDir = createSelector(selectGridSetup, selectQueryParam('sort-dir'), (s, q) => {
+    q = (q ?? s?.sortDir)?.toLowerCase();
+    return q == 'desc' ? SortDir.Desc : SortDir.Asc;
+});
+const selectSearchFields = createSelector(selectGridSetup, d => d?.searchFields);
+const selectIsGrid = createSelector(selectGridSetup, s => !!s);
+const selectGridName = createSelector(selectGridSetup, s => s?.controllerMethod);
+const selectDataUrl = createSelector(selectGridSetup, s => `/api/${s?.controllerMethod}`);
+const selectFilterText = createSelector(selectGridFilters('filter'), f => f?.fields?.at(0)?.values?.at(0) ?? '');
+const selectDataRequest = createSelector(selectPageIndex, selectPageSize, selectSortBy, selectSortDir, selectGridFilters('base-filter'), selectGridFilters('filter'), (pageIndex, pageSize, sortBy, sortDir, baseFilters, filters) => ({
+    paging: { page: pageIndex + 1, pageSize },
+    sortBy,
+    sortDir,
+    filters: combineFilters([baseFilters, filters])
+}));
+function combineFilters(filters) {
+    let filtered = filters.filter(f => !!f);
+    if (filtered.length == 0) {
+        return undefined;
+    }
+    if (filtered.length == 1) {
+        return filtered[0];
+    }
+    return { logic: FilterLogic.And, groups: filtered };
+}
+
+class GridComponent {
+    $deleteSuccess = toSignal(inject(Actions).pipe(ofType(GridActions.bulkDeleteSuccess)));
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    store = inject(Store);
+    selection = new SelectionModel(true, [], true, (a, b) => (a.id ?? a) === (b.id ?? b));
+    $config = signal(undefined);
+    set config(val) {
+        this.$config.set(val);
+    }
+    ;
+    $sort = this.store.selectSignal(selectSortBy);
+    $dir;
+    $bulk = input(false, { alias: 'bulk', transform: booleanAttribute });
+    $allSelected = signal(false);
+    $gridName = this.store.selectSignal(selectGridName);
+    $columns = computed(() => this.$config()?.columns);
+    $buttons = computed(() => this.$config()?.buttons);
+    $displayedColumns = computed(() => {
+        let res = this.$columns()?.map(c => c.name);
+        if (res && this.$hasActions()) {
+            res.push('actions');
+        }
+        if (res && this.$bulk()) {
+            res.unshift('select');
+        }
+        return res;
+    });
+    $gridData = toSignal(toObservable(this.$gridName).pipe(filter(name => !!name), switchMap(name => this.store.select(selectGridData(name)))));
+    $filter = this.store.selectSignal(selectFilterText);
+    $pageIndex = this.store.selectSignal(selectPageIndex);
+    $pageSize = this.store.selectSignal(selectPageSize);
+    $dataSource = computed(() => this.$gridData()?.data ?? []);
+    $searchColumns = this.store.selectSignal(selectSearchFields);
+    $hasSearch = computed(() => this.$searchColumns()?.length ?? 0);
+    $actions = computed(() => this.$config()?.actions);
+    $hasActions = computed(() => this.$actions()?.length ?? 0);
+    $selectedCount;
+    toggleAll() {
+        this.selection.clear();
+        this.$allSelected.set(!this.$allSelected());
+    }
+    toggleOne(e, row) {
+        if (this.$allSelected()) {
+            this.selection.clear();
+            this.$allSelected.set(false);
+            this.selection.select(row);
+        }
+        else
+            this.selection.toggle(row);
+        if (e.checked != this.selection.isSelected(row))
+            e.source.checked = this.selection.isSelected(row);
+    }
+    deleteSelected() {
+        this.store.dispatch(GridActions.bulkDelete({ ids: this.selection.selected.map(s => s.id) }));
+    }
+    pageChange(e) {
+        this.store.dispatch(GridActions.changePaging({ pageIndex: e.pageIndex, pageSize: e.pageSize }));
+    }
+    sortChange(e) {
+        this.store.dispatch(GridActions.changeSort({ sort: e.active, dir: e.direction }));
+    }
+    refresh() {
+        this.selection.clear();
+        this.store.dispatch(GridActions.refresh());
+    }
+    setFilter(filter) {
+        this.store.dispatch(GridActions.changeFilter({ filter }));
+    }
+    filterKeyUp(event) {
+        this.setFilter(event.target.value);
+    }
+    getDisplayRef(col) {
+        if (col.display instanceof TemplateRef)
+            return col.display;
+        return null;
+    }
+    getDisplayFunc(col) {
+        if (col.display instanceof Function)
+            return col.display;
+        return null;
+    }
+    display(col, row) {
+        let func = this.getDisplayFunc(col);
+        if (func)
+            return func(row);
+        return row[col.name];
+    }
+    onRowClick(row) {
+        if (!this.$config()?.defaultAction)
+            return;
+        let action = this.$actions()?.find(a => a.name === this.$config()?.defaultAction);
+        if (action?.routerLink) {
+            let link = action.routerLink(row);
+            if (!Array.isArray(link))
+                link = [link];
+            this.router.navigate(link, { relativeTo: this.route });
+        }
+        else if (action?.action) {
+            action.action(row);
+        }
+    }
+    onAction(e, row, action) {
+        e.stopPropagation();
+        if (action.action)
+            action.action(row);
+    }
+    getStyle(col) {
+        return { 'max-width': col.width ?? 'auto' };
+    }
+    $request = this.store.selectSignal(selectDataRequest);
+    constructor() {
+        let $dir = this.store.selectSignal(selectSortDir);
+        this.$dir = computed(() => $dir() == SortDir.Desc ? 'desc' : 'asc');
+        effect(() => {
+            this.$deleteSuccess();
+            this.selection.clear();
+            this.$allSelected.set(false);
+        });
+        let $selectionChanged = toSignal(this.selection.changed);
+        this.$selectedCount = computed(() => {
+            let selection = $selectionChanged()?.source;
+            let total = this.$gridData()?.count;
+            return this.$allSelected() && !selection?.hasValue() ? total : selection?.selected.length;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: GridComponent, isStandalone: true, selector: "x-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, $bulk: { classPropertyName: "$bulk", publicName: "bulk", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-toolbar class=\"flex flex-row gap-2 p-2\">\r\n    @if($hasSearch()){\r\n    <div class=\"h-full\">\r\n        <mat-form-field>\r\n            <mat-label>Search</mat-label>\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input matInput type=\"text\" [value]=\"$filter()\" (keyup)=\"filterKeyUp($event)\">\r\n            @if ($filter()) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"setFilter('')\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n            }\r\n        </mat-form-field>\r\n    </div>\r\n    }\r\n    <ng-content select=\"[toolbar]\"></ng-content>\r\n    @for(button of $buttons(); track button.name){\r\n    <button mat-button [routerLink]=\"button.routerLink?button.routerLink():undefined\" [matTooltip]=\"button.text\"\r\n        (click)=\"onAction($event,undefined,button)\"><mat-icon>{{button.icon}}</mat-icon> {{button.text}}</button>\r\n    }\r\n    @if ($config()?.new){\r\n    <a mat-button routerLink=\"../new\"><mat-icon>add</mat-icon> New</a>\r\n    }\r\n    @if($config()?.refresh)\r\n    {\r\n    <button mat-button (click)=\"refresh()\"><mat-icon>sync</mat-icon> Refresh</button>\r\n    }\r\n    @if($bulk()){\r\n    <button mat-button [disabled]=\"!$selectedCount()\" (click)=\"deleteSelected()\"><mat-icon>delete</mat-icon> Delete</button>\r\n    }\r\n    <span class=\"flex-grow\"></span>\r\n    @if ($selectedCount() || $allSelected()){\r\n    <span class=\"text-sm\"> {{$selectedCount()??0}} items selected</span>\r\n    }\r\n</mat-toolbar>\r\n<mat-table [dataSource]=\"$dataSource()\" matSort (matSortChange)=\"sortChange($event)\"\r\n    [matSortActive]=\"$sort()\" [matSortDirection]=\"$dir()\" matSortDisableClear>\r\n    @if ($bulk()){\r\n        <ng-container matColumnDef=\"select\">\r\n            <mat-header-cell *matHeaderCellDef class=\"select\" matTooltip=\"Select all\">\r\n                <mat-checkbox (change)=\"$event ? toggleAll() : null\" [checked]=\"!selection.hasValue() && $allSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !$allSelected()\">\r\n                </mat-checkbox>\r\n            </mat-header-cell>\r\n            <mat-cell *matCellDef=\"let row\" class=\"select\">\r\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"toggleOne($event, row)\"\r\n                    [checked]=\"selection.isSelected(row) || $allSelected() && !selection.hasValue()\">\r\n                </mat-checkbox>\r\n            </mat-cell>\r\n        </ng-container>\r\n    }\r\n    @for(column of $columns(); track column.name){\r\n    <ng-container [matColumnDef]=\"column.name\">\r\n        @if (column.sort){\r\n        <mat-header-cell [style]=\"getStyle(column)\" *matHeaderCellDef\r\n            mat-sort-header>{{column.header}}</mat-header-cell>\r\n        } @else {\r\n        <mat-header-cell [style]=\"getStyle(column)\" *matHeaderCellDef>{{column.header}}</mat-header-cell>\r\n        }\r\n        <mat-cell [style]=\"getStyle(column)\" *matCellDef=\"let row\">\r\n            @if(column.href || column.routerLink){\r\n            <a [routerLink]=\"column.routerLink?column.routerLink(row):undefined\"\r\n                [attr.href]=\"column.href?column.href(row):undefined\"\r\n                (click)=\"column.action?column.action(row):undefined\">\r\n                {{ display(column,row) }}\r\n            </a>\r\n            } @else if (getDisplayRef(column)) {\r\n            <ng-container *ngTemplateOutlet=\"getDisplayRef(column); context: { $implicit: row}\"></ng-container>\r\n            } @else {\r\n            {{ display(column,row)}}\r\n            }\r\n        </mat-cell>\r\n    </ng-container>\r\n    }\r\n    @if($hasActions()){\r\n    <ng-container matColumnDef=\"actions\">\r\n        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let row\">\r\n            @for(action of $actions(); track action.name){\r\n            <button type=\"button\" mat-icon-button [disabled]=\"action.disabled?action.disabled(row):undefined\"\r\n                [matTooltip]=\"action.text\" (click)=\"onAction($event, row, action)\"\r\n                [queryParams]=\"action.queryParams?action.queryParams(row):undefined\"\r\n                [routerLink]=\"action.routerLink?action.routerLink(row):undefined\">\r\n                <mat-icon>{{action.icon}}</mat-icon>\r\n            </button>\r\n            }\r\n        </mat-cell>\r\n    </ng-container>\r\n    }\r\n    <mat-header-row *matHeaderRowDef=\"$displayedColumns()\"></mat-header-row>\r\n    <mat-row [class.clickable]=\"!!$config()?.defaultAction\" *matRowDef=\"let row; columns: $displayedColumns()\"\r\n        (click)=\"onRowClick(row)\"></mat-row>\r\n</mat-table>\r\n<mat-paginator [pageIndex]=\"$pageIndex()\" [length]=\"$gridData()?.count\" [pageSize]=\"$pageSize()\"\r\n    (page)=\"pageChange($event)\" aria-label=\"Select page\"></mat-paginator>", styles: ["mat-row.clickable:hover{background:#f5f5f5;cursor:pointer}.select{max-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { 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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-grid', imports: [MatInputModule, MatTableModule, MatToolbarModule, MatButtonModule,
+                        MatCheckboxModule, MatTooltipModule, MatIconModule, RouterModule,
+                        MatSortModule, MatPaginatorModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar class=\"flex flex-row gap-2 p-2\">\r\n    @if($hasSearch()){\r\n    <div class=\"h-full\">\r\n        <mat-form-field>\r\n            <mat-label>Search</mat-label>\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input matInput type=\"text\" [value]=\"$filter()\" (keyup)=\"filterKeyUp($event)\">\r\n            @if ($filter()) {\r\n            <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"setFilter('')\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n            }\r\n        </mat-form-field>\r\n    </div>\r\n    }\r\n    <ng-content select=\"[toolbar]\"></ng-content>\r\n    @for(button of $buttons(); track button.name){\r\n    <button mat-button [routerLink]=\"button.routerLink?button.routerLink():undefined\" [matTooltip]=\"button.text\"\r\n        (click)=\"onAction($event,undefined,button)\"><mat-icon>{{button.icon}}</mat-icon> {{button.text}}</button>\r\n    }\r\n    @if ($config()?.new){\r\n    <a mat-button routerLink=\"../new\"><mat-icon>add</mat-icon> New</a>\r\n    }\r\n    @if($config()?.refresh)\r\n    {\r\n    <button mat-button (click)=\"refresh()\"><mat-icon>sync</mat-icon> Refresh</button>\r\n    }\r\n    @if($bulk()){\r\n    <button mat-button [disabled]=\"!$selectedCount()\" (click)=\"deleteSelected()\"><mat-icon>delete</mat-icon> Delete</button>\r\n    }\r\n    <span class=\"flex-grow\"></span>\r\n    @if ($selectedCount() || $allSelected()){\r\n    <span class=\"text-sm\"> {{$selectedCount()??0}} items selected</span>\r\n    }\r\n</mat-toolbar>\r\n<mat-table [dataSource]=\"$dataSource()\" matSort (matSortChange)=\"sortChange($event)\"\r\n    [matSortActive]=\"$sort()\" [matSortDirection]=\"$dir()\" matSortDisableClear>\r\n    @if ($bulk()){\r\n        <ng-container matColumnDef=\"select\">\r\n            <mat-header-cell *matHeaderCellDef class=\"select\" matTooltip=\"Select all\">\r\n                <mat-checkbox (change)=\"$event ? toggleAll() : null\" [checked]=\"!selection.hasValue() && $allSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !$allSelected()\">\r\n                </mat-checkbox>\r\n            </mat-header-cell>\r\n            <mat-cell *matCellDef=\"let row\" class=\"select\">\r\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"toggleOne($event, row)\"\r\n                    [checked]=\"selection.isSelected(row) || $allSelected() && !selection.hasValue()\">\r\n                </mat-checkbox>\r\n            </mat-cell>\r\n        </ng-container>\r\n    }\r\n    @for(column of $columns(); track column.name){\r\n    <ng-container [matColumnDef]=\"column.name\">\r\n        @if (column.sort){\r\n        <mat-header-cell [style]=\"getStyle(column)\" *matHeaderCellDef\r\n            mat-sort-header>{{column.header}}</mat-header-cell>\r\n        } @else {\r\n        <mat-header-cell [style]=\"getStyle(column)\" *matHeaderCellDef>{{column.header}}</mat-header-cell>\r\n        }\r\n        <mat-cell [style]=\"getStyle(column)\" *matCellDef=\"let row\">\r\n            @if(column.href || column.routerLink){\r\n            <a [routerLink]=\"column.routerLink?column.routerLink(row):undefined\"\r\n                [attr.href]=\"column.href?column.href(row):undefined\"\r\n                (click)=\"column.action?column.action(row):undefined\">\r\n                {{ display(column,row) }}\r\n            </a>\r\n            } @else if (getDisplayRef(column)) {\r\n            <ng-container *ngTemplateOutlet=\"getDisplayRef(column); context: { $implicit: row}\"></ng-container>\r\n            } @else {\r\n            {{ display(column,row)}}\r\n            }\r\n        </mat-cell>\r\n    </ng-container>\r\n    }\r\n    @if($hasActions()){\r\n    <ng-container matColumnDef=\"actions\">\r\n        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let row\">\r\n            @for(action of $actions(); track action.name){\r\n            <button type=\"button\" mat-icon-button [disabled]=\"action.disabled?action.disabled(row):undefined\"\r\n                [matTooltip]=\"action.text\" (click)=\"onAction($event, row, action)\"\r\n                [queryParams]=\"action.queryParams?action.queryParams(row):undefined\"\r\n                [routerLink]=\"action.routerLink?action.routerLink(row):undefined\">\r\n                <mat-icon>{{action.icon}}</mat-icon>\r\n            </button>\r\n            }\r\n        </mat-cell>\r\n    </ng-container>\r\n    }\r\n    <mat-header-row *matHeaderRowDef=\"$displayedColumns()\"></mat-header-row>\r\n    <mat-row [class.clickable]=\"!!$config()?.defaultAction\" *matRowDef=\"let row; columns: $displayedColumns()\"\r\n        (click)=\"onRowClick(row)\"></mat-row>\r\n</mat-table>\r\n<mat-paginator [pageIndex]=\"$pageIndex()\" [length]=\"$gridData()?.count\" [pageSize]=\"$pageSize()\"\r\n    (page)=\"pageChange($event)\" aria-label=\"Select page\"></mat-paginator>", styles: ["mat-row.clickable:hover{background:#f5f5f5;cursor:pointer}.select{max-width:80px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+const RouterActions = createActionGroup({
+    source: 'Router',
+    events: {
+        'Set Query Params': props()
+    }
+});
+
+class RouterEffects {
+    store = inject(Store);
+    actions$ = inject(Actions);
+    router = inject(Router);
+    $set = createEffect(() => this.actions$.pipe(ofType(RouterActions.setQueryParams), concatLatestFrom(() => this.store.select(selectQueryParams)), tap(([{ queryParams }, params]) => {
+        this.router.navigate([], { queryParams: Object.assign({ ...params }, queryParams) });
+    })), { dispatch: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RouterEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RouterEffects });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RouterEffects, decorators: [{
+            type: Injectable
+        }] });
+
+class StateRouterModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: StateRouterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: StateRouterModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: StateRouterModule, providers: [
+            provideEffects(RouterEffects)
+        ], imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: StateRouterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule
+                    ],
+                    providers: [
+                        provideEffects(RouterEffects)
+                    ]
+                }]
+        }] });
+
+class GridEffects {
+    snack = inject(SnackService);
+    client = inject(HttpClient);
+    store = inject(Store);
+    actions$ = inject(Actions);
+    confirmation = inject(ConfirmationService);
+    changePaging$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.changePaging), concatLatestFrom(() => this.store.select(selectDataRequest)), map$1(([{ pageIndex, pageSize }, req]) => GridActions.updateRequest({ request: { ...req, paging: { page: pageIndex + 1, pageSize } } })));
+    });
+    changeSort$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.changeSort), concatLatestFrom(() => this.store.select(selectDataRequest)), map$1(([{ sort, dir }, req]) => GridActions.updateRequest({ request: { ...req, sortBy: sort, sortDir: dir == "asc" ? SortDir.Asc : SortDir.Desc } })));
+    });
+    updateRequest$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.updateRequest), concatLatestFrom(_ => [
+            this.store.select(selectUrl),
+            this.store.select(selectUrlWithoutQuery),
+            this.store.select(selectQueryParam('base-filter'))
+        ]), mergeMap(([{ request }, oldUrl, urlWithoutQuery, filter]) => {
+            let url = `${urlWithoutQuery}?page=${request.paging?.page}&size=${request.paging?.pageSize}&sort-by=${request.sortBy ?? ''}&sort-dir=${request.sortDir == SortDir.Desc ? 'desc' : 'asc'}&filter=${request.filters ? btoa(JSON.stringify(request.filters)) : ''}&base-filter=${filter ?? ''}`;
+            return oldUrl == url
+                ? []
+                : [SharedActions.navigate({ url })];
+        }));
+    });
+    loadFromUrl$ = createEffect(() => {
+        return this.actions$.pipe(ofType(ROUTER_NAVIGATION), concatLatestFrom(() => [
+            this.store.select(selectIsGrid)
+        ]), filter$1(([_, isGrid]) => !!isGrid), map$1(() => GridActions.refresh()));
+    });
+    changeFilter$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.changeFilter), concatLatestFrom(() => [
+            this.store.select(selectDataRequest),
+            this.store.select(selectSearchFields)
+        ]), map$1(([{ filter }, req, fields]) => GridActions.updateRequest({
+            request: {
+                ...req, filters: filter
+                    ? { logic: FilterLogic.And, fields: [{ names: fields, operator: FilterOperator.Contains, values: [filter] }] }
+                    : undefined
+            }
+        })));
+    });
+    goTo$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.goTo), map$1(({ url, filter }) => SharedActions.navigate({ url: `${url}?base-filter=${filter ? btoa(JSON.stringify(filter)) : ''}` })));
+    });
+    loadData$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.load), concatLatestFrom(() => [
+            this.store.select(selectDataUrl),
+            this.store.select(selectDataRequest)
+        ]), concatMap(([{ type, name, request }, dataUrl, requestUrl]) => this.client.post(dataUrl, request ?? requestUrl).pipe(map$1(data => GridActions.loadSuccess({ name, ...data })), catchError$1(error => of(SharedActions.badError({ source: type, error }))))));
+    });
+    bulkDelete$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.bulkDelete), concatLatestFrom(() => [
+            this.store.select(selectGridName),
+            this.store.select(selectDataUrl),
+            this.store.select(selectDataRequest)
+        ]), concatLatestFrom(([, name]) => this.store.select(selectTotalCount(name))), mergeMap(([[{ type, ids }, name, url, request], totalCount]) => this.confirmation.confirm(`Are you sure you want to delete ${ids?.length ? ids.length : totalCount} items?`, 'Delete').pipe(filter$1(c => c), concatMap(_ => {
+            let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+            let body = {
+                ...request,
+                paging: undefined,
+                sortBy: undefined,
+                sortDir: undefined,
+                filters: ids?.length ? {
+                    logic: FilterLogic.And,
+                    fields: [{
+                            names: ['id'], operator: FilterOperator.In, values: ids.map(id => id.toString())
+                        }]
+                } : request.filters
+            };
+            return this.client.delete(url, { headers, body }).pipe(map$1(() => GridActions.bulkDeleteSuccess()), catchError$1(error => of(SharedActions.badError({ source: type, error }))));
+        }))));
+    });
+    refresh$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.refresh), concatLatestFrom(() => this.store.select(selectGridName)), map$1(([_, name]) => GridActions.load({ name: name })));
+    });
+    bulkDeleteSuccess$ = createEffect(() => {
+        return this.actions$.pipe(ofType(GridActions.bulkDeleteSuccess), tap$1(() => this.snack.info('Deleted!')), map$1(() => GridActions.refresh()));
+    });
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridEffects });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridEffects, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class GridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: GridModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridModule, providers: [
+            provideState(gridFeature),
+            provideEffects([GridEffects])
+        ], imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule
+                    ],
+                    providers: [
+                        provideState(gridFeature),
+                        provideEffects([GridEffects])
+                    ]
+                }]
+        }] });
+
+const CrudActions = createActionGroup({
+    source: 'Crud',
+    events: {
+        'Load All': props(),
+        'Load All Success': props(),
+        'Configure': props(),
+        'Delete': props(),
+        'Save': props(),
+        'Save Success': props(),
+        'Clear Saved': props(),
+        'Load': props(),
+        'Load Success': props()
+    }
+});
+
+const crudFeatureKey = 'crud';
+const initialState = {
+    urlPrefix: '/api',
+    map: {}
+};
+const reducer = createReducer(initialState, on(CrudActions.load, CrudActions.clearSaved, (state, { name }) => ({ ...state, map: { ...state.map, [name]: { ...state.map[name], value: undefined } } })), on(CrudActions.configure, (state, { name, param }) => ({ ...state, map: { ...state.map, [name]: { ...state.map[name], param } } })), on(CrudActions.loadSuccess, (state, { name, value }) => ({ ...state, map: { ...state.map, [name]: { ...state.map[name], value } } })), on(CrudActions.saveSuccess, (state, { name, value }) => ({ ...state, map: { ...state.map, [name]: { ...state.map[name], value } } })), on(CrudActions.loadAllSuccess, (state, { name, all }) => ({ ...state, map: { ...state.map, [name]: { ...state.map[name], all } } })));
+const crudFeature = createFeature({
+    name: crudFeatureKey,
+    reducer,
+});
+
+const selectParamName = (name) => createSelector(crudFeature.selectMap, map => map[name]?.param);
+const selectValue = (name) => createSelector(crudFeature.selectMap, map => map ? map[name]?.value : undefined);
+const selectAll = (name) => createSelector(crudFeature.selectMap, map => map ? map[name]?.all : undefined);
+
+class CrudEffects {
+    confirmation = inject(ConfirmationService);
+    snack = inject(SnackService);
+    store = inject(Store);
+    actions$ = inject(Actions);
+    client = inject(HttpClient);
+    location = inject(Location);
+    load$ = createEffect(() => {
+        return this.actions$.pipe(ofType(CrudActions.load), concatLatestFrom(({ name }) => this.store.select(selectParamName(name))), concatLatestFrom(([_, param]) => [
+            this.store.select(crudFeature.selectUrlPrefix),
+            this.store.select(selectRouteParam(param)),
+        ]), concatMap(([[{ type, name }], prefix, id]) => id ? this.client.get(`${prefix}/${name}/${id}`).pipe(map$1(value => CrudActions.loadSuccess({ name, value })), catchError$1(error => of(SharedActions.badError({ source: type, error }))))
+            : of(CrudActions.loadSuccess({ name, value: undefined }))));
+    });
+    loadAll$ = createEffect(() => {
+        return this.actions$.pipe(ofType(CrudActions.loadAll), concatLatestFrom(() => [
+            this.store.select(crudFeature.selectUrlPrefix)
+        ]), concatMap(([{ type, name }, prefix]) => this.client.get(`${prefix}/${name}/all`).pipe(map$1(all => CrudActions.loadAllSuccess({ name, all })), catchError$1(error => of(SharedActions.badError({ source: type, error }))))));
+    });
+    save$ = createEffect(() => {
+        return this.actions$.pipe(ofType(CrudActions.save), concatLatestFrom(() => [
+            this.store.select(crudFeature.selectUrlPrefix)
+        ]), mergeMap(([{ type, name, value, stay }, prefix]) => (value.id
+            ? this.client.put(`${prefix}/${name}/${value.id}`, value)
+            : this.client.post(`${prefix}/${name}`, value))
+            .pipe(map$1(value => CrudActions.saveSuccess({ name, value, stay })), catchError$1(error => of(SharedActions.badError({ source: type, error }))))));
+    });
+    saveSuccess$ = createEffect(() => {
+        return this.actions$.pipe(ofType(CrudActions.saveSuccess), map$1(({ stay }) => {
+            this.snack.info('Saved!');
+            if (!stay)
+                this.location.back();
+        }));
+    }, { dispatch: false });
+    delete$ = createEffect(() => {
+        return this.actions$.pipe(ofType(CrudActions.delete), concatLatestFrom(() => [
+            this.store.select(crudFeature.selectUrlPrefix)
+        ]), concatMap(([{ type, name, value }, prefix]) => {
+            let nameStr = value.name ?? `the ${name.toLowerCase()}`;
+            return this.confirmation.confirm(`Are you sure you want to delete ${nameStr}?`, 'Delete').pipe(filter$1(confirmed => confirmed), mergeMap(() => this.client.delete(`${prefix}/${name}/${value.id}`).pipe(map$1(() => GridActions.refresh()), tap$1(() => this.snack.info('Deleted!')), catchError$1(error => of(SharedActions.badError({ source: type, error }))))));
+        }));
+    });
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CrudEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CrudEffects });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CrudEffects, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class CrudModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CrudModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: CrudModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CrudModule, providers: [
+            provideState(crudFeature),
+            provideEffects(CrudEffects)
+        ], imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CrudModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule
+                    ],
+                    providers: [
+                        provideState(crudFeature),
+                        provideEffects(CrudEffects)
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of the library
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfirmationDialogComponent, ConfirmationService, CrudActions, CrudModule, DetailActionsComponent, EmailComponent, GridActions, GridComponent, GridModule, RouterActions, SnackService, StateRouterModule, crudFeature, gridFeature, loadingInterceptor, selectAll, selectDataParam, selectDataRequest, selectDataUrl, selectFilterText, selectGridData, selectGridFilters, selectGridName, selectGridSetup, selectIsGrid, selectPageIndex, selectPageSize, selectParamName, selectQueryParam, selectQueryParams, selectRouteParam, selectRouteParams, selectRouter, selectRouterState, selectSearchFields, selectSiteSlugParam, selectSortBy, selectSortDir, selectTotalCount, selectUrl, selectUrlSegments, selectUrlWithoutQuery, selectValue };
+//# sourceMappingURL=axioma-material.mjs.map