@porscheinformatik/clr-addons 13.2.1 → 13.3.1

package/fesm2020/clr-addons.mjs

@@ -5,8 +5,8 @@ import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@clr/angular';
-import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule, ClrDatagridPagination } from '@clr/angular';
-import { Subject, BehaviorSubject, timer, asyncScheduler, interval, of, ReplaySubject, takeUntil as takeUntil$1 } from 'rxjs';
+import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule, ClrDatagridPagination, ClrDatagridFilter } from '@clr/angular';
+import { Subject, BehaviorSubject, timer, asyncScheduler, interval, of, ReplaySubject, takeUntil as takeUntil$1, delay } from 'rxjs';
 import { takeUntil, observeOn, take } from 'rxjs/operators';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -4622,39 +4622,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }] } });
 
+const DATE_TYPE = 'date';
 class StatePersistenceKeyDirective {
+    constructor(datagrid) {
+        this.datagrid = datagrid;
+        this.useLocalStoreOnly = false;
+        this.destroy$ = new Subject();
+    }
     ngAfterContentInit() {
+        if (this.options.serverDriven) {
+            this.init();
+        }
+        else {
+            setTimeout(() => {
+                this.init();
+            });
+        }
+    }
+    init() {
+        const volatileDataState = this.getVolatileDataState();
+        const localStorageState = this.getLocalStorageState();
+        this.initFilter(volatileDataState);
+        this.initDatagridPersister();
         if (this.pagination && this.pagination.page) {
-            /* persist page size changes in local storage */
-            this.pagination.page.sizeChange.subscribe(pageSize => {
-                let state = JSON.parse(localStorage.getItem(this.clrStatePersistenceKey));
-                if (!state) {
-                    state = {};
+            this.initPageSizePersister(localStorageState);
+            this.initCurrentPage(volatileDataState);
+        }
+    }
+    initPageSizePersister(savedState) {
+        /* persist page size changes in local storage */
+        this.pagination.page.sizeChange.pipe(takeUntil(this.destroy$)).subscribe(pageSize => {
+            const state = this.getLocalStorageState();
+            state.pageSize = pageSize;
+            localStorage.setItem(this.options.key, JSON.stringify(state));
+        });
+        /* init page size of datagrid if already persisted in local storage */
+        if (savedState.pageSize) {
+            this.pagination.page.size = savedState.pageSize;
+        }
+    }
+    initCurrentPage(savedState) {
+        /* init current page of datagrid if already persisted */
+        if (savedState?.currentPage) {
+            this.pagination.page.current = savedState.currentPage;
+        }
+    }
+    initFilter(savedState) {
+        if (savedState.columns) {
+            Object.keys(savedState.columns).forEach(prop => {
+                const filter = this.getFilter(prop);
+                if (filter) {
+                    const savedFilterValue = savedState.columns[prop].filterValue || {};
+                    Object.keys(savedFilterValue)
+                        .filter(valueKey => valueKey !== 'property')
+                        .forEach(valueKey => (filter[valueKey] = this.parseFilterValue(savedFilterValue[valueKey])));
                 }
-                state.pageSize = pageSize;
-                localStorage.setItem(this.clrStatePersistenceKey, JSON.stringify(state));
             });
-            /* init page size of datagrid if already persisted in local storage */
-            const loadedState = JSON.parse(localStorage.getItem(this.clrStatePersistenceKey));
-            if (loadedState?.pageSize) {
-                /* postpone set size to other cycle as it is already set in this change detection cycle */
-                setTimeout(() => (this.pagination.page.size = loadedState.pageSize));
-            }
         }
     }
+    initDatagridPersister() {
+        // delay is needed, as onDestroy the filters emit empty values.
+        // So delay it to the end of the current cycle, so the directive is also destroyed before it gets the next values
+        this.datagrid.refresh.pipe(delay(0), takeUntil(this.destroy$)).subscribe(dgState => {
+            const state = this.getVolatileDataState();
+            state.currentPage = dgState.page?.current;
+            state.columns = state.columns || {};
+            Object.keys(state.columns).forEach(prop => (state.columns[prop].filterValue = undefined));
+            dgState.filters?.forEach(filter => {
+                const property = this.getFilterPropertyName(filter);
+                if (property) {
+                    state.columns[property] = state.columns[property] || {};
+                    state.columns[property].filterValue = this.enrichFilterValue(filter);
+                }
+            });
+            (this.useLocalStoreOnly ? localStorage : sessionStorage).setItem(this.options.key, JSON.stringify(state));
+        });
+    }
+    /**
+     * Gets the state of volatile data. This can be influenced by clrUseLocalStoreOnly.
+     */
+    getVolatileDataState() {
+        return JSON.parse((this.useLocalStoreOnly ? localStorage : sessionStorage).getItem(this.options.key)) || {};
+    }
+    getLocalStorageState() {
+        return JSON.parse(localStorage.getItem(this.options.key)) || {};
+    }
+    /**
+     * As a date is serialized as string, but not deserialized as date
+     * we need to add some meta information to do that manually later
+     */
+    enrichFilterValue(filter) {
+        const result = {};
+        Object.keys(filter).forEach(key => (result[key] =
+            filter[key] instanceof Date
+                ? {
+                    type: DATE_TYPE,
+                    value: filter[key],
+                }
+                : filter[key]));
+        return result;
+    }
+    /**
+     * Parse filter values with meta information like date, which needs manual deserialization to a date object
+     */
+    parseFilterValue(value) {
+        return value?.type === DATE_TYPE
+            ? new Date(value.value)
+            : value;
+    }
+    getFilter(prop) {
+        // get default filter or custom filter
+        return (this.datagrid.columns.find(col => col.field === prop)?.filter ||
+            this.customFilters.find(filter => this.getFilterPropertyName(filter.filter) === prop)?.filter);
+    }
+    getFilterPropertyName(filter) {
+        // for NestedProperty we need to get the original property
+        const filterWithProp = filter;
+        return (filterWithProp.property?.prop || filterWithProp.property);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }
-StatePersistenceKeyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: StatePersistenceKeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-StatePersistenceKeyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: StatePersistenceKeyDirective, selector: "[clrStatePersistenceKey]", inputs: { clrStatePersistenceKey: "clrStatePersistenceKey" }, queries: [{ propertyName: "pagination", first: true, predicate: ClrDatagridPagination, descendants: true }], ngImport: i0 });
+StatePersistenceKeyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: StatePersistenceKeyDirective, deps: [{ token: i2.ClrDatagrid }], target: i0.ɵɵFactoryTarget.Directive });
+StatePersistenceKeyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: StatePersistenceKeyDirective, selector: "[clrStatePersistenceKey]", inputs: { options: ["clrStatePersistenceKey", "options"], useLocalStoreOnly: ["clrUseLocalStoreOnly", "useLocalStoreOnly"] }, queries: [{ propertyName: "pagination", first: true, predicate: ClrDatagridPagination, descendants: true }, { propertyName: "customFilters", predicate: ClrDatagridFilter, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrStatePersistenceKey]',
                 }]
-        }], propDecorators: { clrStatePersistenceKey: [{
-                type: Input
+        }], ctorParameters: function () { return [{ type: i2.ClrDatagrid }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['clrStatePersistenceKey']
+            }], useLocalStoreOnly: [{
+                type: Input,
+                args: ['clrUseLocalStoreOnly']
             }], pagination: [{
                 type: ContentChild,
                 args: [ClrDatagridPagination]
+            }], customFilters: [{
+                type: ContentChildren,
+                args: [ClrDatagridFilter, { descendants: true }]
             }] } });
 
 class ColumnHiddenStatePersistenceDirective {
@@ -4663,40 +4772,34 @@ class ColumnHiddenStatePersistenceDirective {
         this.statePersistenceKey = statePersistenceKey;
         this.datagrid = datagrid;
         this.hideableColumnDirective = hideableColumnDirective;
+        this.destroy$ = new Subject();
     }
     ngOnInit() {
-        if (this.statePersistenceKey?.clrStatePersistenceKey && this.columnDirective?.clrDgField) {
+        if (this.statePersistenceKey?.options.key && this.columnDirective?.clrDgField) {
             /* set hidden states from local storage (if existing) */
             this.initHiddenState();
             /* listen to state changes and persist in local storage */
-            this.hideableColumnDirective.hiddenChange.subscribe(hidden => {
+            this.hideableColumnDirective.hiddenChange.pipe(takeUntil(this.destroy$)).subscribe(hidden => {
                 this.setHiddenState(hidden);
             });
         }
     }
     initHiddenState() {
         /* read grid state if existing */
-        const persistedGridStateJson = localStorage.getItem(this.statePersistenceKey.clrStatePersistenceKey);
-        if (persistedGridStateJson !== null) {
-            const persistedGridState = JSON.parse(persistedGridStateJson);
-            /* read column state if existing */
-            if (persistedGridState.columns && persistedGridState.columns[this.columnDirective.clrDgField]) {
-                /* read column hidden state if existing */
-                const persistedColumnHiddenState = persistedGridState.columns[this.columnDirective.clrDgField].hidden;
-                if (persistedColumnHiddenState !== undefined) {
-                    this.hideableColumnDirective.clrDgHidden = persistedColumnHiddenState === true;
-                }
+        const persistedGridState = this.readStoredState();
+        /* read column state if existing */
+        if (persistedGridState?.columns?.[this.columnDirective.clrDgField]) {
+            /* read column hidden state if existing */
+            const persistedColumnHiddenState = persistedGridState.columns[this.columnDirective.clrDgField].hidden;
+            if (persistedColumnHiddenState !== undefined) {
+                this.hideableColumnDirective.clrDgHidden = persistedColumnHiddenState === true;
             }
         }
     }
     setHiddenState(hidden) {
         if (!this.datagrid?.detailService?.isOpen) {
             /* read grid state if existing */
-            const persistedGridStateJson = localStorage.getItem(this.statePersistenceKey.clrStatePersistenceKey);
-            let persistedGridState = {};
-            if (persistedGridStateJson !== null) {
-                persistedGridState = JSON.parse(persistedGridStateJson);
-            }
+            const persistedGridState = this.readStoredState();
             /* read column state if existing */
             if (!persistedGridState.columns) {
                 persistedGridState.columns = {};
@@ -4708,9 +4811,16 @@ class ColumnHiddenStatePersistenceDirective {
             }
             /* set column hidden state and persist in local storage */
             persistedColumnState.hidden = hidden;
-            localStorage.setItem(this.statePersistenceKey.clrStatePersistenceKey, JSON.stringify(persistedGridState));
+            localStorage.setItem(this.statePersistenceKey.options.key, JSON.stringify(persistedGridState));
         }
     }
+    readStoredState() {
+        return JSON.parse(localStorage.getItem(this.statePersistenceKey.options.key)) || {};
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }
 ColumnHiddenStatePersistenceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, deps: [{ token: DatagridFieldDirective, optional: true }, { token: StatePersistenceKeyDirective, optional: true }, { token: i2.ClrDatagrid }, { token: i2.ClrDatagridHideableColumn }], target: i0.ɵɵFactoryTarget.Directive });
 ColumnHiddenStatePersistenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: ColumnHiddenStatePersistenceDirective, selector: "[clrDgHideableColumn]", ngImport: i0 });
@@ -4756,6 +4866,7 @@ class ClrEnumFilterComponent {
     }
     set value(values) {
         this.filteredValues = values;
+        this.changes.emit(true);
     }
     set clrPossibleValues(values) {
         this.setPossibleValues(values);
@@ -4781,6 +4892,12 @@ class ClrEnumFilterComponent {
     accepts(item) {
         return this.filteredValues.includes(item[this.property]);
     }
+    get state() {
+        return {
+            property: this.property,
+            value: this.filteredValues,
+        };
+    }
     ngOnDestroy() {
         this.destroyed$.next();
         this.destroyed$.complete();
@@ -4872,6 +4989,9 @@ class ClrDateFilterComponent {
     set property(value) {
         this.nestedProp = new NestedProperty(value);
     }
+    get property() {
+        return this.nestedProp.prop;
+    }
     get maxPlaceholderValue() {
         return this.maxPlaceholder || this.commonStrings.keys.maxValue;
     }
@@ -4961,7 +5081,7 @@ class ClrDateFilterComponent {
     }
 }
 ClrDateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ClrDateFilterComponent, deps: [{ token: i2.ClrDatagridFilter }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ClrDateFilterComponent, selector: "clr-date-filter", inputs: { property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<clr-date-container>\n  <input\n    #input_from\n    type=\"date\"\n    name=\"from\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"from\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n  />\n</clr-date-container>\n<clr-date-container>\n  <input\n    type=\"date\"\n    name=\"to\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"to\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n  />\n</clr-date-container>\n", styles: [""], dependencies: [{ kind: "component", type: i2.ClrDateContainer, selector: "clr-date-container", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDateInput, selector: "[clrDate]", inputs: ["placeholder", "clrDate", "min", "max", "disabled"], outputs: ["clrDateChange"] }] });
+ClrDateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ClrDateFilterComponent, selector: "clr-date-filter", inputs: { property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<clr-date-container>\n  <input\n    #input_from\n    type=\"date\"\n    name=\"from\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"from\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n  />\n</clr-date-container>\n<clr-date-container>\n  <input\n    type=\"date\"\n    name=\"to\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"to\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n  />\n</clr-date-container>\n", styles: [""], dependencies: [{ kind: "component", type: i2.ClrDateContainer, selector: "clr-date-container", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDateInput, selector: "[clrDate]", inputs: ["placeholder", "clrDate", "min", "max", "disabled"], outputs: ["clrDateChange"] }, { kind: "directive", type: i2.ClrDateInputValidator, selector: "[clrDate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-date-filter', template: "<clr-date-container>\n  <input\n    #input_from\n    type=\"date\"\n    name=\"from\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"from\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n  />\n</clr-date-container>\n<clr-date-container>\n  <input\n    type=\"date\"\n    name=\"to\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"to\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n  />\n</clr-date-container>\n" }]