@porscheinformatik/clr-addons 12.4.0 → 12.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/clr-addons.module.d.ts +2 -1
  2. package/datagrid-state-persistence/column-hidden-state-persistence.directive.d.ts +17 -0
  3. package/datagrid-state-persistence/datagrid-field.directive.d.ts +6 -0
  4. package/datagrid-state-persistence/datagrid-state-persistence.module.d.ts +9 -0
  5. package/datagrid-state-persistence/index.d.ts +4 -0
  6. package/datagrid-state-persistence/state-persistence-key.directive.d.ts +6 -0
  7. package/esm2020/clr-addons.module.mjs +7 -3
  8. package/esm2020/datagrid-state-persistence/column-hidden-state-persistence.directive.mjs +74 -0
  9. package/esm2020/datagrid-state-persistence/datagrid-field.directive.mjs +15 -0
  10. package/esm2020/datagrid-state-persistence/datagrid-state-persistence.module.mjs +18 -0
  11. package/esm2020/datagrid-state-persistence/index.mjs +5 -0
  12. package/esm2020/datagrid-state-persistence/state-persistence-key.directive.mjs +15 -0
  13. package/esm2020/index.mjs +2 -1
  14. package/esm2020/location-bar/location-bar-node/location-bar-node.component.mjs +3 -3
  15. package/esm2020/multilingual/abstract-multilingual.mjs +13 -9
  16. package/fesm2015/clr-addons.mjs +129 -13
  17. package/fesm2015/clr-addons.mjs.map +1 -1
  18. package/fesm2020/clr-addons.mjs +125 -13
  19. package/fesm2020/clr-addons.mjs.map +1 -1
  20. package/index.d.ts +1 -0
  21. package/multilingual/abstract-multilingual.d.ts +2 -2
  22. package/package.json +1 -1
  23. package/src/location-bar/location-bar-node/location-bar-node.component.scss +3 -2
  24. package/styles/clr-addons-phs.css +3 -2
  25. package/styles/clr-addons-phs.css.map +1 -1
  26. package/styles/clr-addons-phs.min.css +1 -1
  27. package/styles/clr-addons-phs.min.css.map +1 -1
@@ -1532,25 +1532,29 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
1532
1532
  setText(key, value) {
1533
1533
  this.texts.set(key, value);
1534
1534
  this.onChange(new Map(this.texts));
1535
- this.updateShownTexts();
1535
+ this.updateShownTexts(key);
1536
1536
  }
1537
- updateShownTexts() {
1537
+ updateShownTexts(currentlyEditingLang) {
1538
1538
  if (this.texts) {
1539
1539
  if (this.languages) {
1540
- this.shownTexts = this.applyMissingPrefix(new Map(this.languages.map(lang => [lang, this.texts.get(lang) || ''])));
1540
+ this.shownTexts = this.applyMissingPrefix(new Map(this.languages.map(lang => [lang, this.texts.get(lang) || ''])), currentlyEditingLang);
1541
1541
  }
1542
1542
  else {
1543
- this.shownTexts = this.applyMissingPrefix(new Map(this.texts));
1543
+ this.shownTexts = this.applyMissingPrefix(new Map(this.texts), currentlyEditingLang);
1544
1544
  }
1545
1545
  }
1546
1546
  }
1547
- applyMissingPrefix(texts) {
1547
+ applyMissingPrefix(texts, currentlyEditingLang) {
1548
1548
  if (!this.missingPrefix) {
1549
1549
  return texts;
1550
1550
  }
1551
- const fallbackText = this.missingPrefix + this.determineFallbackText();
1551
+ let fallbackText = this.determineFallbackText();
1552
+ if (!fallbackText) {
1553
+ return texts;
1554
+ }
1555
+ fallbackText = this.missingPrefix + fallbackText;
1552
1556
  for (const lang of texts.keys()) {
1553
- if (!texts.get(lang)) {
1557
+ if (!texts.get(lang) && lang !== currentlyEditingLang) {
1554
1558
  texts.set(lang, fallbackText);
1555
1559
  }
1556
1560
  }
@@ -1574,7 +1578,7 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
1574
1578
  if (nonEmptyTextFromHiddenTexts) {
1575
1579
  return nonEmptyTextFromHiddenTexts;
1576
1580
  }
1577
- return '';
1581
+ return undefined;
1578
1582
  }
1579
1583
  showLanguageSelector() {
1580
1584
  return this.shownTexts?.size > 1 || this.showSingleLanguageSelector;
@@ -4440,10 +4444,10 @@ class LocationBarNodeComponent {
4440
4444
  }
4441
4445
  }
4442
4446
  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 });
4443
- 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"] }] });
4447
+ 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"] }] });
4444
4448
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
4445
4449
  type: Component,
4446
- 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" }]
4450
+ 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" }]
4447
4451
  }], ctorParameters: function () { return [{ type: LocationBarContentProvider, decorators: [{
4448
4452
  type: Inject,
4449
4453
  args: [CONTENT_PROVIDER]
@@ -4558,6 +4562,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
4558
4562
  }]
4559
4563
  }] });
4560
4564
 
4565
+ class DatagridFieldDirective {
4566
+ }
4567
+ DatagridFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DatagridFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
4568
+ DatagridFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: DatagridFieldDirective, selector: "[clrDgField]", inputs: { clrDgField: "clrDgField" }, ngImport: i0 });
4569
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DatagridFieldDirective, decorators: [{
4570
+ type: Directive,
4571
+ args: [{
4572
+ selector: '[clrDgField]',
4573
+ }]
4574
+ }], propDecorators: { clrDgField: [{
4575
+ type: Input
4576
+ }] } });
4577
+
4578
+ class StatePersistenceKeyDirective {
4579
+ }
4580
+ StatePersistenceKeyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StatePersistenceKeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
4581
+ StatePersistenceKeyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: StatePersistenceKeyDirective, selector: "[clrStatePersistenceKey]", inputs: { clrStatePersistenceKey: "clrStatePersistenceKey" }, ngImport: i0 });
4582
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
4583
+ type: Directive,
4584
+ args: [{
4585
+ selector: '[clrStatePersistenceKey]',
4586
+ }]
4587
+ }], propDecorators: { clrStatePersistenceKey: [{
4588
+ type: Input
4589
+ }] } });
4590
+
4591
+ class ColumnHiddenStatePersistenceDirective {
4592
+ constructor(columnDirective, statePersistenceKey, datagrid, hideableColumnDirective) {
4593
+ this.columnDirective = columnDirective;
4594
+ this.statePersistenceKey = statePersistenceKey;
4595
+ this.datagrid = datagrid;
4596
+ this.hideableColumnDirective = hideableColumnDirective;
4597
+ }
4598
+ ngOnInit() {
4599
+ if (this.statePersistenceKey?.clrStatePersistenceKey && this.columnDirective?.clrDgField) {
4600
+ /* set hidden states from local storage (if existing) */
4601
+ this.initHiddenState();
4602
+ /* listen to state changes and persist in local storage */
4603
+ this.hideableColumnDirective.hiddenChange.subscribe(hidden => {
4604
+ this.setHiddenState(hidden);
4605
+ });
4606
+ }
4607
+ }
4608
+ initHiddenState() {
4609
+ /* read grid state if existing */
4610
+ const persistedGridStateJson = localStorage.getItem(this.statePersistenceKey.clrStatePersistenceKey);
4611
+ if (persistedGridStateJson !== null) {
4612
+ const persistedGridState = JSON.parse(persistedGridStateJson);
4613
+ /* read column state if existing */
4614
+ const persistedColumnState = persistedGridState[this.columnDirective.clrDgField];
4615
+ if (persistedColumnState) {
4616
+ /* read column hidden state if existing */
4617
+ const persistedColumnHiddenState = persistedColumnState.hidden;
4618
+ if (persistedColumnHiddenState) {
4619
+ this.hideableColumnDirective.clrDgHidden = persistedColumnHiddenState === true;
4620
+ }
4621
+ }
4622
+ }
4623
+ }
4624
+ setHiddenState(hidden) {
4625
+ if (!this.datagrid?.detailService?.isOpen) {
4626
+ /* read grid state if existing */
4627
+ const persistedGridStateJson = localStorage.getItem(this.statePersistenceKey.clrStatePersistenceKey);
4628
+ let persistedGridState = {};
4629
+ if (persistedGridStateJson !== null) {
4630
+ persistedGridState = JSON.parse(persistedGridStateJson);
4631
+ }
4632
+ /* read column state if existing */
4633
+ let persistedColumnState = persistedGridState[this.columnDirective.clrDgField];
4634
+ if (!persistedColumnState) {
4635
+ persistedColumnState = {};
4636
+ persistedGridState[this.columnDirective.clrDgField] = persistedColumnState;
4637
+ }
4638
+ /* set column hidden state and persist in local storage */
4639
+ persistedColumnState.hidden = hidden;
4640
+ localStorage.setItem(this.statePersistenceKey.clrStatePersistenceKey, JSON.stringify(persistedGridState));
4641
+ }
4642
+ }
4643
+ }
4644
+ 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 });
4645
+ ColumnHiddenStatePersistenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ColumnHiddenStatePersistenceDirective, selector: "[clrDgHideableColumn]", ngImport: i0 });
4646
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, decorators: [{
4647
+ type: Directive,
4648
+ args: [{
4649
+ selector: '[clrDgHideableColumn]',
4650
+ }]
4651
+ }], ctorParameters: function () { return [{ type: DatagridFieldDirective, decorators: [{
4652
+ type: Optional
4653
+ }] }, { type: StatePersistenceKeyDirective, decorators: [{
4654
+ type: Optional
4655
+ }] }, { type: i1.ClrDatagrid }, { type: i1.ClrDatagridHideableColumn }]; } });
4656
+
4657
+ class ClrDatagridStatePersistenceModule {
4658
+ }
4659
+ ClrDatagridStatePersistenceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDatagridStatePersistenceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4660
+ ClrDatagridStatePersistenceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDatagridStatePersistenceModule, declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective], exports: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective] });
4661
+ ClrDatagridStatePersistenceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDatagridStatePersistenceModule });
4662
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDatagridStatePersistenceModule, decorators: [{
4663
+ type: NgModule,
4664
+ args: [{
4665
+ declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective],
4666
+ exports: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective],
4667
+ }]
4668
+ }] });
4669
+
4561
4670
  /*
4562
4671
  * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
4563
4672
  * This software is released under MIT license.
@@ -4592,7 +4701,8 @@ ClrAddonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
4592
4701
  ClrBrandAvatarModule,
4593
4702
  ClrLocationBarModule,
4594
4703
  ClrFormModule,
4595
- ClrDropdownOverflowModule] });
4704
+ ClrDropdownOverflowModule,
4705
+ ClrDatagridStatePersistenceModule] });
4596
4706
  ClrAddonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
4597
4707
  ClrPagerModule,
4598
4708
  ClrDotPagerModule,
@@ -4619,7 +4729,8 @@ ClrAddonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
4619
4729
  ClrBrandAvatarModule,
4620
4730
  ClrLocationBarModule,
4621
4731
  ClrFormModule,
4622
- ClrDropdownOverflowModule] });
4732
+ ClrDropdownOverflowModule,
4733
+ ClrDatagridStatePersistenceModule] });
4623
4734
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsModule, decorators: [{
4624
4735
  type: NgModule,
4625
4736
  args: [{
@@ -4651,6 +4762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
4651
4762
  ClrLocationBarModule,
4652
4763
  ClrFormModule,
4653
4764
  ClrDropdownOverflowModule,
4765
+ ClrDatagridStatePersistenceModule,
4654
4766
  ],
4655
4767
  }]
4656
4768
  }] });
@@ -5256,5 +5368,5 @@ const ClrAddonsIconShapes = {
5256
5368
  * Generated bundle index. Do not edit.
5257
5369
  */
5258
5370
 
5259
- 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 };
5371
+ 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 };
5260
5372
  //# sourceMappingURL=clr-addons.mjs.map