@porscheinformatik/clr-addons 12.5.0 → 12.6.0

package/fesm2020/clr-addons.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, ViewChild, TemplateRef, ContentChildren, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, ContentChild, HostListener, InjectionToken, Inject, Optional } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, ContentChild, HostListener, InjectionToken, Inject, Optional } from '@angular/core';
 import * as i2 from '@angular/common';
 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 i1 from '@clr/angular';
-import { ClarityModule, ClrFormsModule, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule } 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 { takeUntil, observeOn, take } from 'rxjs/operators';
 import * as i3 from '@angular/router';
@@ -645,22 +645,49 @@ class ClrDropdownOverflowDirective {
         this.elRef = elRef;
         this.defaultItemMinHeightRem = 1.5;
         this.marginBottomRem = 0.1;
+        this.destroy$ = new Subject();
     }
-    ngAfterViewInit() {
-        this.calculateDropdownMenu();
+    ngAfterContentInit() {
+        // first trigger manually because the subscription lower only triggers after first change
+        if (!this.nestedDropdownChildren?.length) {
+            this.applyDropdownOverflowStyles();
+        }
+        this.nestedDropdownChildren.changes.pipe(takeUntil(this.destroy$)).subscribe((children) => {
+            // if there are any nested dropdowns, our overflow fix prevents those from showing and needs to be removed
+            if (!children?.length) {
+                this.applyDropdownOverflowStyles();
+            }
+            else if (children?.length) {
+                this.removeDropdownOverflowStyles();
+            }
+        });
     }
-    calculateDropdownMenu() {
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    applyDropdownOverflowStyles() {
         // the vertical position of our element in the current window
         const y = this.elRef.nativeElement.getBoundingClientRect().y;
         const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
         // see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
-        for (const item of this.elRef.nativeElement.getElementsByClassName('dropdown-item')) {
+        for (const item of this.getAllChildDropdownMenuItems()) {
             item.style.minHeight = itemMinHeightPx + 'px';
         }
         this.elRef.nativeElement.style.maxHeight =
             this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, window.innerHeight - y - this.convertRemToPixels(this.marginBottomRem)) + 'px';
         this.elRef.nativeElement.style.overflowY = 'auto';
     }
+    removeDropdownOverflowStyles() {
+        for (const item of this.getAllChildDropdownMenuItems()) {
+            item.style.minHeight = null;
+        }
+        this.elRef.nativeElement.style.maxHeight = null;
+        this.elRef.nativeElement.style.overflowY = null;
+    }
+    getAllChildDropdownMenuItems() {
+        return this.elRef.nativeElement.getElementsByClassName('dropdown-item');
+    }
     getMenuMaxHeight(menuMaxHeightProvided, menuMaxHeightPx) {
         if (menuMaxHeightProvided) {
             const maxHeightPx = this.convertToPixels(menuMaxHeightProvided);
@@ -698,7 +725,7 @@ class ClrDropdownOverflowDirective {
     }
 }
 ClrDropdownOverflowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight" }, ngImport: i0 });
+ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight" }, queries: [{ propertyName: "nestedDropdownChildren", predicate: ClrDropdown, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'clr-dropdown-menu' }]
@@ -706,6 +733,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }], clrDropdownMenuItemMinHeight: [{
                 type: Input
+            }], nestedDropdownChildren: [{
+                type: ContentChildren,
+                args: [ClrDropdown, { descendants: true }]
             }] } });
 
 /*
@@ -1745,14 +1775,14 @@ class ClrMultilingualTextarea extends ClrMultilingualAbstract {
     }
 }
 ClrMultilingualTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualTextarea, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrMultilingualTextarea, selector: "clr-multilingual-textarea", providers: [
+ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrMultilingualTextarea, selector: "clr-multilingual-textarea", inputs: { rows: "rows" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ClrMultilingualTextarea),
             multi: true,
         },
         ControlIdService,
-    ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"shownTexts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-textarea-wrapper\">\n      <textarea\n        class=\"clr-textarea\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      ></textarea>\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n", components: [{ type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"shownTexts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-textarea-wrapper\">\n      <textarea\n        class=\"clr-textarea\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        [maxlength]=\"maxlength || null\"\n        [rows]=\"rows || 1\"\n        #input\n      ></textarea>\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n", components: [{ type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'clr-multilingual-textarea', providers: [
@@ -1762,8 +1792,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             multi: true,
                         },
                         ControlIdService,
-                    ], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"shownTexts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-textarea-wrapper\">\n      <textarea\n        class=\"clr-textarea\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      ></textarea>\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+                    ], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"shownTexts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-textarea-wrapper\">\n      <textarea\n        class=\"clr-textarea\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        [maxlength]=\"maxlength || null\"\n        [rows]=\"rows || 1\"\n        #input\n      ></textarea>\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { rows: [{
+                type: Input
+            }] } });
 
 /*
  * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
@@ -4576,9 +4608,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }] } });
 
 class StatePersistenceKeyDirective {
+    ngAfterContentInit() {
+        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 = {};
+                }
+                state.pageSize = pageSize;
+                localStorage.setItem(this.clrStatePersistenceKey, JSON.stringify(state));
+            });
+            /* init page size of datagrid if already persisted in local storage */
+            const state = JSON.parse(localStorage.getItem(this.clrStatePersistenceKey));
+            if (state && state.pageSize) {
+                /* postpone set size to other cycle as it is already set in this change detection cycle */
+                setTimeout(() => (this.pagination.page.size = state.pageSize));
+            }
+        }
+    }
 }
 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 });
+StatePersistenceKeyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: StatePersistenceKeyDirective, selector: "[clrStatePersistenceKey]", inputs: { clrStatePersistenceKey: "clrStatePersistenceKey" }, queries: [{ propertyName: "pagination", first: true, predicate: ClrDatagridPagination, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
             type: Directive,
             args: [{
@@ -4586,6 +4637,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }], propDecorators: { clrStatePersistenceKey: [{
                 type: Input
+            }], pagination: [{
+                type: ContentChild,
+                args: [ClrDatagridPagination]
             }] } });
 
 class ColumnHiddenStatePersistenceDirective {
@@ -4611,10 +4665,9 @@ class ColumnHiddenStatePersistenceDirective {
         if (persistedGridStateJson !== null) {
             const persistedGridState = JSON.parse(persistedGridStateJson);
             /* read column state if existing */
-            const persistedColumnState = persistedGridState[this.columnDirective.clrDgField];
-            if (persistedColumnState) {
+            if (persistedGridState.columns && persistedGridState.columns[this.columnDirective.clrDgField]) {
                 /* read column hidden state if existing */
-                const persistedColumnHiddenState = persistedColumnState.hidden;
+                const persistedColumnHiddenState = persistedGridState.columns[this.columnDirective.clrDgField].hidden;
                 if (persistedColumnHiddenState) {
                     this.hideableColumnDirective.clrDgHidden = persistedColumnHiddenState === true;
                 }
@@ -4630,10 +4683,13 @@ class ColumnHiddenStatePersistenceDirective {
                 persistedGridState = JSON.parse(persistedGridStateJson);
             }
             /* read column state if existing */
-            let persistedColumnState = persistedGridState[this.columnDirective.clrDgField];
+            if (!persistedGridState.columns) {
+                persistedGridState.columns = {};
+            }
+            let persistedColumnState = persistedGridState.columns[this.columnDirective.clrDgField];
             if (!persistedColumnState) {
                 persistedColumnState = {};
-                persistedGridState[this.columnDirective.clrDgField] = persistedColumnState;
+                persistedGridState.columns[this.columnDirective.clrDgField] = persistedColumnState;
             }
             /* set column hidden state and persist in local storage */
             persistedColumnState.hidden = hidden;