@porscheinformatik/clr-addons 12.4.0 → 12.5.0

package/fesm2015/clr-addons.mjs

@@ -1532,25 +1532,29 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
     setText(key, value) {
         this.texts.set(key, value);
         this.onChange(new Map(this.texts));
-        this.updateShownTexts();
+        this.updateShownTexts(key);
     }
-    updateShownTexts() {
+    updateShownTexts(currentlyEditingLang) {
         if (this.texts) {
             if (this.languages) {
-                this.shownTexts = this.applyMissingPrefix(new Map(this.languages.map(lang => [lang, this.texts.get(lang) || ''])));
+                this.shownTexts = this.applyMissingPrefix(new Map(this.languages.map(lang => [lang, this.texts.get(lang) || ''])), currentlyEditingLang);
             }
             else {
-                this.shownTexts = this.applyMissingPrefix(new Map(this.texts));
+                this.shownTexts = this.applyMissingPrefix(new Map(this.texts), currentlyEditingLang);
             }
         }
     }
-    applyMissingPrefix(texts) {
+    applyMissingPrefix(texts, currentlyEditingLang) {
         if (!this.missingPrefix) {
             return texts;
         }
-        const fallbackText = this.missingPrefix + this.determineFallbackText();
+        let fallbackText = this.determineFallbackText();
+        if (!fallbackText) {
+            return texts;
+        }
+        fallbackText = this.missingPrefix + fallbackText;
         for (const lang of texts.keys()) {
-            if (!texts.get(lang)) {
+            if (!texts.get(lang) && lang !== currentlyEditingLang) {
                 texts.set(lang, fallbackText);
             }
         }
@@ -1574,7 +1578,7 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
         if (nonEmptyTextFromHiddenTexts) {
             return nonEmptyTextFromHiddenTexts;
         }
-        return '';
+        return undefined;
     }
     showLanguageSelector() {
         var _a;
@@ -4441,10 +4445,10 @@ class LocationBarNodeComponent {
     }
 }
 LocationBarNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode" }, outputs: { selectionChanged: "selectionChanged" }, host: { properties: { "class.location-bar-node": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"parentNode\">\n  <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n  <ng-container\n    *ngIf=\"\n      (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n      else singleSelected\n    \"\n  >\n    <clr-dropdown>\n      <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n        <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n          <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n            node.label\n          }}</span>\n          <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n        </ng-container>\n        <ng-template #unselected>\n          <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;...\n        </ng-template>\n      </button>\n      <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n        <button\n          *ngFor=\"let item of selectableChilds\"\n          type=\"button\"\n          clrDropdownItem\n          class=\"text-truncate\"\n          [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n          (click)=\"selectNode(item)\"\n          title=\"{{ item.label }}\"\n        >\n          {{ item.label }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-container>\n\n  <ng-template #singleSelected>\n    <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n      <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n        <button\n          class=\"btn btn-link btn-sm\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      </ng-container>\n      <ng-template #unselectable>\n        <span\n          class=\"unselectable-node\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <clr-location-bar-node\n    *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n    [parentNode]=\"parentNode.getSelectedChild()\"\n    (selectionChanged)=\"onSelectionChanged($event)\"\n  >\n    <span>/</span>\n  </clr-location-bar-node>\n</ng-container>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode"], outputs: ["selectionChanged"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.CdsIconCustomTag, selector: "cds-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }] });
+LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode" }, outputs: { selectionChanged: "selectionChanged" }, host: { properties: { "class.location-bar-node": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"parentNode\">\n  <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n  <ng-container\n    *ngIf=\"\n      (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n      else singleSelected\n    \"\n  >\n    <clr-dropdown>\n      <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n        <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n          <span\n            class=\"text-truncate\"\n            [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n            title=\"{{ node.label }}\"\n          >\n            {{ node.label }}\n          </span>\n          <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n        </ng-container>\n        <ng-template #unselected>\n          <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;...\n        </ng-template>\n      </button>\n      <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n        <button\n          *ngFor=\"let item of selectableChilds\"\n          type=\"button\"\n          clrDropdownItem\n          class=\"text-truncate\"\n          [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n          (click)=\"selectNode(item)\"\n          title=\"{{ item.label }}\"\n        >\n          {{ item.label }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-container>\n\n  <ng-template #singleSelected>\n    <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n      <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n        <button\n          class=\"btn btn-link btn-sm\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      </ng-container>\n      <ng-template #unselectable>\n        <span\n          class=\"unselectable-node text-truncate\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <clr-location-bar-node\n    *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n    [parentNode]=\"parentNode.getSelectedChild()\"\n    (selectionChanged)=\"onSelectionChanged($event)\"\n  >\n    <span>/</span>\n  </clr-location-bar-node>\n</ng-container>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode"], outputs: ["selectionChanged"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.CdsIconCustomTag, selector: "cds-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-location-bar-node', host: { '[class.location-bar-node]': 'true' }, template: "<ng-container *ngIf=\"parentNode\">\n  <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n  <ng-container\n    *ngIf=\"\n      (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n      else singleSelected\n    \"\n  >\n    <clr-dropdown>\n      <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n        <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n          <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n            node.label\n          }}</span>\n          <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n        </ng-container>\n        <ng-template #unselected>\n          <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;...\n        </ng-template>\n      </button>\n      <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n        <button\n          *ngFor=\"let item of selectableChilds\"\n          type=\"button\"\n          clrDropdownItem\n          class=\"text-truncate\"\n          [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n          (click)=\"selectNode(item)\"\n          title=\"{{ item.label }}\"\n        >\n          {{ item.label }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-container>\n\n  <ng-template #singleSelected>\n    <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n      <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n        <button\n          class=\"btn btn-link btn-sm\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      </ng-container>\n      <ng-template #unselectable>\n        <span\n          class=\"unselectable-node\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <clr-location-bar-node\n    *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n    [parentNode]=\"parentNode.getSelectedChild()\"\n    (selectionChanged)=\"onSelectionChanged($event)\"\n  >\n    <span>/</span>\n  </clr-location-bar-node>\n</ng-container>\n" }]
+            args: [{ selector: 'clr-location-bar-node', host: { '[class.location-bar-node]': 'true' }, template: "<ng-container *ngIf=\"parentNode\">\n  <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n  <ng-container\n    *ngIf=\"\n      (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n      else singleSelected\n    \"\n  >\n    <clr-dropdown>\n      <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n        <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n          <span\n            class=\"text-truncate\"\n            [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n            title=\"{{ node.label }}\"\n          >\n            {{ node.label }}\n          </span>\n          <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n        </ng-container>\n        <ng-template #unselected>\n          <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;...\n        </ng-template>\n      </button>\n      <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n        <button\n          *ngFor=\"let item of selectableChilds\"\n          type=\"button\"\n          clrDropdownItem\n          class=\"text-truncate\"\n          [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n          (click)=\"selectNode(item)\"\n          title=\"{{ item.label }}\"\n        >\n          {{ item.label }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-container>\n\n  <ng-template #singleSelected>\n    <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n      <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n        <button\n          class=\"btn btn-link btn-sm\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      </ng-container>\n      <ng-template #unselectable>\n        <span\n          class=\"unselectable-node text-truncate\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <clr-location-bar-node\n    *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n    [parentNode]=\"parentNode.getSelectedChild()\"\n    (selectionChanged)=\"onSelectionChanged($event)\"\n  >\n    <span>/</span>\n  </clr-location-bar-node>\n</ng-container>\n" }]
         }], ctorParameters: function () {
         return [{ type: LocationBarContentProvider, decorators: [{
                         type: Inject,
@@ -4563,6 +4567,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+class DatagridFieldDirective {
+}
+DatagridFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DatagridFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DatagridFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: DatagridFieldDirective, selector: "[clrDgField]", inputs: { clrDgField: "clrDgField" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DatagridFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrDgField]',
+                }]
+        }], propDecorators: { clrDgField: [{
+                type: Input
+            }] } });
+
+class StatePersistenceKeyDirective {
+}
+StatePersistenceKeyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StatePersistenceKeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+StatePersistenceKeyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: StatePersistenceKeyDirective, selector: "[clrStatePersistenceKey]", inputs: { clrStatePersistenceKey: "clrStatePersistenceKey" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrStatePersistenceKey]',
+                }]
+        }], propDecorators: { clrStatePersistenceKey: [{
+                type: Input
+            }] } });
+
+class ColumnHiddenStatePersistenceDirective {
+    constructor(columnDirective, statePersistenceKey, datagrid, hideableColumnDirective) {
+        this.columnDirective = columnDirective;
+        this.statePersistenceKey = statePersistenceKey;
+        this.datagrid = datagrid;
+        this.hideableColumnDirective = hideableColumnDirective;
+    }
+    ngOnInit() {
+        var _a, _b;
+        if (((_a = this.statePersistenceKey) === null || _a === void 0 ? void 0 : _a.clrStatePersistenceKey) && ((_b = this.columnDirective) === null || _b === void 0 ? void 0 : _b.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.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 */
+            const persistedColumnState = persistedGridState[this.columnDirective.clrDgField];
+            if (persistedColumnState) {
+                /* read column hidden state if existing */
+                const persistedColumnHiddenState = persistedColumnState.hidden;
+                if (persistedColumnHiddenState) {
+                    this.hideableColumnDirective.clrDgHidden = persistedColumnHiddenState === true;
+                }
+            }
+        }
+    }
+    setHiddenState(hidden) {
+        var _a, _b;
+        if (!((_b = (_a = this.datagrid) === null || _a === void 0 ? void 0 : _a.detailService) === null || _b === void 0 ? void 0 : _b.isOpen)) {
+            /* read grid state if existing */
+            const persistedGridStateJson = localStorage.getItem(this.statePersistenceKey.clrStatePersistenceKey);
+            let persistedGridState = {};
+            if (persistedGridStateJson !== null) {
+                persistedGridState = JSON.parse(persistedGridStateJson);
+            }
+            /* read column state if existing */
+            let persistedColumnState = persistedGridState[this.columnDirective.clrDgField];
+            if (!persistedColumnState) {
+                persistedColumnState = {};
+                persistedGridState[this.columnDirective.clrDgField] = persistedColumnState;
+            }
+            /* set column hidden state and persist in local storage */
+            persistedColumnState.hidden = hidden;
+            localStorage.setItem(this.statePersistenceKey.clrStatePersistenceKey, JSON.stringify(persistedGridState));
+        }
+    }
+}
+ColumnHiddenStatePersistenceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, deps: [{ token: DatagridFieldDirective, optional: true }, { token: StatePersistenceKeyDirective, optional: true }, { token: i1.ClrDatagrid }, { token: i1.ClrDatagridHideableColumn }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnHiddenStatePersistenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ColumnHiddenStatePersistenceDirective, selector: "[clrDgHideableColumn]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrDgHideableColumn]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DatagridFieldDirective, decorators: [{
+                        type: Optional
+                    }] }, { type: StatePersistenceKeyDirective, decorators: [{
+                        type: Optional
+                    }] }, { type: i1.ClrDatagrid }, { type: i1.ClrDatagridHideableColumn }];
+    } });
+
+class ClrDatagridStatePersistenceModule {
+}
+ClrDatagridStatePersistenceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDatagridStatePersistenceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDatagridStatePersistenceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDatagridStatePersistenceModule, declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective], exports: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective] });
+ClrDatagridStatePersistenceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDatagridStatePersistenceModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDatagridStatePersistenceModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective],
+                    exports: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective],
+                }]
+        }] });
+
 /*
  * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -4597,7 +4710,8 @@ ClrAddonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ClrBrandAvatarModule,
         ClrLocationBarModule,
         ClrFormModule,
-        ClrDropdownOverflowModule] });
+        ClrDropdownOverflowModule,
+        ClrDatagridStatePersistenceModule] });
 ClrAddonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
         ClrPagerModule,
         ClrDotPagerModule,
@@ -4624,7 +4738,8 @@ ClrAddonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         ClrBrandAvatarModule,
         ClrLocationBarModule,
         ClrFormModule,
-        ClrDropdownOverflowModule] });
+        ClrDropdownOverflowModule,
+        ClrDatagridStatePersistenceModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -4656,6 +4771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                         ClrLocationBarModule,
                         ClrFormModule,
                         ClrDropdownOverflowModule,
+                        ClrDatagridStatePersistenceModule,
                     ],
                 }]
         }] });
@@ -5251,5 +5367,5 @@ const ClrAddonsIconShapes = {
  * Generated bundle index. Do not edit.
  */
 
-export { ACShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BlocksGroupForwardShape, BrochureShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CaliforniaSpecialistShape, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDateTimeContainer, ClrDateTimeModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DWABrandShape, DieselShape, DollarBillForwardShape, DollarBillShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HybridShape, ItemsForwardShape, ItemsRecieveShape, LoadingVolumeShape, LocateShape, LocationBarComponent, LocationBarContentProvider, LocationBarNode, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintMaterialForwardShape, PaintMaterialShape, PaintShopShape, PartNonStockForwardShape, PartsForwardShape, PartsNonStockShape, PartsShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RoadsideAssistanceShape, RouteShape, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StockLocatorCommercialShape, StockLocatorPrivateShape, TaskAndAppointment, TaxiDealerShape, TextForward, TopcardShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, TreetableCellRenderer, TreetableHeaderRenderer, TreetableMainRenderer, TreetableRowRenderer, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VirtualRealityShape, WheelToWheelShape, WindscreenWashShape, WrenchForward, clrIconSVG, escapeHtml, escapeRegex };
+export { ACShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BlocksGroupForwardShape, BrochureShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CaliforniaSpecialistShape, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridStatePersistenceModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DWABrandShape, DatagridFieldDirective, DieselShape, DollarBillForwardShape, DollarBillShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HybridShape, ItemsForwardShape, ItemsRecieveShape, LoadingVolumeShape, LocateShape, LocationBarComponent, LocationBarContentProvider, LocationBarNode, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintMaterialForwardShape, PaintMaterialShape, PaintShopShape, PartNonStockForwardShape, PartsForwardShape, PartsNonStockShape, PartsShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RoadsideAssistanceShape, RouteShape, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StatePersistenceKeyDirective, StockLocatorCommercialShape, StockLocatorPrivateShape, TaskAndAppointment, TaxiDealerShape, TextForward, TopcardShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, TreetableCellRenderer, TreetableHeaderRenderer, TreetableMainRenderer, TreetableRowRenderer, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VirtualRealityShape, WheelToWheelShape, WindscreenWashShape, WrenchForward, clrIconSVG, escapeHtml, escapeRegex };
 //# sourceMappingURL=clr-addons.mjs.map