@porscheinformatik/clr-addons 12.3.0 → 12.4.1

package/fesm2015/clr-addons.mjs

@@ -635,6 +635,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+/*
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrDropdownOverflowDirective {
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.defaultItemMinHeightRem = 1.5;
+        this.marginBottomRem = 0.1;
+    }
+    ngAfterViewInit() {
+        this.calculateDropdownMenu();
+    }
+    calculateDropdownMenu() {
+        // 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')) {
+            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';
+    }
+    getMenuMaxHeight(menuMaxHeightProvided, menuMaxHeightPx) {
+        if (menuMaxHeightProvided) {
+            const maxHeightPx = this.convertToPixels(menuMaxHeightProvided);
+            return maxHeightPx > menuMaxHeightPx ? menuMaxHeightPx : maxHeightPx;
+        }
+        return menuMaxHeightPx;
+    }
+    getItemMinHeight(itemMinHeightProvided) {
+        if (itemMinHeightProvided) {
+            return this.convertToPixels(itemMinHeightProvided);
+        }
+        return this.convertRemToPixels(this.defaultItemMinHeightRem);
+    }
+    convertToPixels(value) {
+        if (typeof value === 'string') {
+            if (value.endsWith('px')) {
+                return parseFloat(value.replace('px', ''));
+            }
+            else if (value.endsWith('rem')) {
+                return this.convertRemToPixels(parseFloat(value.replace('rem', '')));
+            }
+            else if (value.endsWith('vh')) {
+                return this.convertVhToPixels(parseFloat(value.replace('vh', '')));
+            }
+            return parseFloat(value);
+        }
+        return value;
+    }
+    convertRemToPixels(rem) {
+        return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    }
+    convertVhToPixels(vh) {
+        const pxPerVhUnit = window.innerHeight / 100;
+        return vh * pxPerVhUnit;
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'clr-dropdown-menu' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clrDropdownMenuMaxHeight: [{
+                type: Input
+            }], clrDropdownMenuItemMinHeight: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -774,7 +847,7 @@ class ClrFlowBar {
     }
 }
 ClrFlowBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrFlowBar, selector: "clr-flow-bar", inputs: { _steps: ["clrSteps", "_steps"], _activeStep: ["clrActiveStep", "_activeStep"] }, outputs: { _activeStepChange: "clrActiveStepChange" }, host: { properties: { "class.flow-bar": "true" } }, ngImport: i0, template: "<div class=\"flow-bar-wrapper\">\n  <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n    <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n      <button\n        class=\"btn btn-link flow-bar-btn\"\n        [disabled]=\"!step.enabled\"\n        [class.active]=\"step === _activeStep\"\n        (click)=\"changeActiveStep(step)\"\n      >\n        {{index + 1}}. {{(step.title | async)}}\n      </button>\n      <clr-icon shape=\"caret right\" *ngIf=\"!last\"></clr-icon>\n    </div>\n  </ng-container>\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n  <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n    {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n    <clr-icon shape=\"caret down\"></clr-icon>\n  </button>\n  <clr-dropdown-menu>\n    <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n      <button clrDropdownItem type=\"button\" class=\"btn\" [disabled]=\"!step.enabled\" (click)=\"changeActiveStep(step)\">\n        {{index + 1}}. {{step.title | async}}\n      </button>\n    </ng-container>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "async": i2.AsyncPipe } });
+ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrFlowBar, selector: "clr-flow-bar", inputs: { _steps: ["clrSteps", "_steps"], _activeStep: ["clrActiveStep", "_activeStep"] }, outputs: { _activeStepChange: "clrActiveStepChange" }, host: { properties: { "class.flow-bar": "true" } }, ngImport: i0, template: "<div class=\"flow-bar-wrapper\">\n  <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n    <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n      <button\n        class=\"btn btn-link flow-bar-btn\"\n        [disabled]=\"!step.enabled\"\n        [class.active]=\"step === _activeStep\"\n        (click)=\"changeActiveStep(step)\"\n      >\n        {{index + 1}}. {{(step.title | async)}}\n      </button>\n      <clr-icon shape=\"caret right\" *ngIf=\"!last\"></clr-icon>\n    </div>\n  </ng-container>\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n  <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n    {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n    <clr-icon shape=\"caret down\"></clr-icon>\n  </button>\n  <clr-dropdown-menu>\n    <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n      <button clrDropdownItem type=\"button\" class=\"btn\" [disabled]=\"!step.enabled\" (click)=\"changeActiveStep(step)\">\n        {{index + 1}}. {{step.title | async}}\n      </button>\n    </ng-container>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "async": i2.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBar, decorators: [{
             type: Component,
             args: [{ selector: 'clr-flow-bar', host: {
@@ -792,19 +865,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrDropdownOverflowModule {
+}
+ClrDropdownOverflowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDropdownOverflowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, declarations: [ClrDropdownOverflowDirective], exports: [ClrDropdownOverflowDirective] });
+ClrDropdownOverflowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClrDropdownOverflowDirective],
+                    exports: [ClrDropdownOverflowDirective],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/*
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrFlowBarModule {
 }
 ClrFlowBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrFlowBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrFlowBar] });
-ClrFlowBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+ClrFlowBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule], exports: [ClrFlowBar] });
+ClrFlowBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule, FormsModule],
+                    imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
                     declarations: [ClrFlowBar],
                     exports: [ClrFlowBar],
                 }]
@@ -1403,7 +1500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -1412,18 +1509,80 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
         super(injector);
         this.multi = true;
         this.controlClasses = 'clr-col-md-10';
+        this.missingPrefix = '';
+    }
+    set fallbackLanguage(fallbackLang) {
+        this.fallbackLang = fallbackLang;
+        this.updateShownTexts();
+    }
+    set missingPre(missingPrefix) {
+        this.missingPrefix = missingPrefix;
+        this.updateShownTexts();
+    }
+    set langs(languages) {
+        this.languages = languages;
+        this.updateShownTexts();
     }
     writeValue(value) {
         if (value) {
             this.texts = new Map(value);
         }
+        this.updateShownTexts();
     }
     setText(key, value) {
         this.texts.set(key, value);
         this.onChange(new Map(this.texts));
+        this.updateShownTexts(key);
+    }
+    updateShownTexts(currentlyEditingLang) {
+        if (this.texts) {
+            if (this.languages) {
+                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), currentlyEditingLang);
+            }
+        }
+    }
+    applyMissingPrefix(texts, currentlyEditingLang) {
+        if (!this.missingPrefix) {
+            return texts;
+        }
+        let fallbackText = this.determineFallbackText();
+        if (!fallbackText) {
+            return texts;
+        }
+        fallbackText = this.missingPrefix + fallbackText;
+        for (const lang of texts.keys()) {
+            if (!texts.get(lang) && lang !== currentlyEditingLang) {
+                texts.set(lang, fallbackText);
+            }
+        }
+        return texts;
+    }
+    determineFallbackText() {
+        const fallbackText = this.fallbackLang && this.texts.get(this.fallbackLang);
+        if (fallbackText) {
+            return fallbackText;
+        }
+        const languages = [...(this.languages || [])].sort();
+        const nonEmptyTextFromShownTexts = languages.map(lang => this.texts.get(lang)).find(text => text);
+        if (nonEmptyTextFromShownTexts) {
+            return nonEmptyTextFromShownTexts;
+        }
+        const nonEmptyTextFromHiddenTexts = [...this.texts.keys()]
+            .sort()
+            .filter(lang => !languages.includes(lang))
+            .map(lang => this.texts.get(lang))
+            .find(text => text);
+        if (nonEmptyTextFromHiddenTexts) {
+            return nonEmptyTextFromHiddenTexts;
+        }
+        return undefined;
     }
     showLanguageSelector() {
-        return (this.texts && this.texts.size > 1) || this.showSingleLanguageSelector;
+        var _a;
+        return ((_a = this.shownTexts) === null || _a === void 0 ? void 0 : _a.size) > 1 || this.showSingleLanguageSelector;
     }
     changeLanguage(lang) {
         // need as the click for closing the menu is registered on a single item
@@ -1435,7 +1594,7 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
     }
 }
 ClrMultilingualAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualAbstract, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-ClrMultilingualAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrMultilingualAbstract, inputs: { controlClasses: ["clrControlClasses", "controlClasses"], selectedLang: ["clrSelectedLang", "selectedLang"], readonly: "readonly", maxlength: "maxlength", showSingleLanguageSelector: ["clrShowSingleLanguageSelector", "showSingleLanguageSelector"] }, host: { properties: { "class.clr-multilingual": "this.multi" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
+ClrMultilingualAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrMultilingualAbstract, inputs: { controlClasses: ["clrControlClasses", "controlClasses"], selectedLang: ["clrSelectedLang", "selectedLang"], readonly: "readonly", maxlength: "maxlength", showSingleLanguageSelector: ["clrShowSingleLanguageSelector", "showSingleLanguageSelector"], fallbackLanguage: ["clrFallbackLang", "fallbackLanguage"], missingPre: ["clrMissingPrefix", "missingPre"], langs: ["clrLanguages", "langs"] }, host: { properties: { "class.clr-multilingual": "this.multi" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { multi: [{
@@ -1457,6 +1616,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }], inputElement: [{
                 type: ViewChild,
                 args: ['input']
+            }], fallbackLanguage: [{
+                type: Input,
+                args: ['clrFallbackLang']
+            }], missingPre: [{
+                type: Input,
+                args: ['clrMissingPrefix']
+            }], langs: [{
+                type: Input,
+                args: ['clrLanguages']
             }] } });
 
 class ClrMultilingualSelector {
@@ -1492,7 +1660,7 @@ ClrMultilingualSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
-  `, isInline: true, components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "keyvalue": i2.KeyValuePipe } });
+  `, isInline: true, components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "keyvalue": i2.KeyValuePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
             type: Component,
             args: [{
@@ -1554,7 +1722,7 @@ ClrMultilingualInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             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]=\"texts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-input-wrapper\">\n      <input\n        class=\"clr-input\"\n        type=\"text\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!texts && !!selectedLang ? texts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        autocomplete=\"off\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      />\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-input-wrapper\">\n      <input\n        class=\"clr-input\"\n        type=\"text\"\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        autocomplete=\"off\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      />\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: ClrMultilingualInput, decorators: [{
             type: Component,
             args: [{ selector: 'clr-multilingual-input', providers: [
@@ -1564,7 +1732,7 @@ 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]=\"texts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-input-wrapper\">\n      <input\n        class=\"clr-input\"\n        type=\"text\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!texts && !!selectedLang ? texts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        autocomplete=\"off\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      />\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" }]
+                    ], 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-input-wrapper\">\n      <input\n        class=\"clr-input\"\n        type=\"text\"\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        autocomplete=\"off\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      />\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 }]; } });
 
 /*
@@ -1585,7 +1753,7 @@ ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             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]=\"texts\"\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]=\"!!texts && !!selectedLang ? texts.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        #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: [
@@ -1595,11 +1763,11 @@ 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]=\"texts\"\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]=\"!!texts && !!selectedLang ? texts.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" }]
+                    ], 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 }]; } });
 
 /*
- * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -1610,16 +1778,16 @@ ClrMultilingualModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         ClrMultilingualTextarea,
         ClrRequiredOneMultilang,
         ClrRequiredAllMultilang,
-        ClrMultilingualSelector], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrMultilingualInput,
+        ClrMultilingualSelector], imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule], exports: [ClrMultilingualInput,
         ClrMultilingualTextarea,
         ClrRequiredOneMultilang,
         ClrRequiredAllMultilang,
         ClrMultilingualSelector] });
-ClrMultilingualModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+ClrMultilingualModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule, FormsModule],
+                    imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
                     declarations: [
                         ClrMultilingualInput,
                         ClrMultilingualTextarea,
@@ -3927,7 +4095,7 @@ class ClrHistory {
     }
 }
 ClrHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
-ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrHistory, selector: "clr-history", inputs: { username: ["clrUsername", "username"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, ngImport: i0, template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n    <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n    <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{history.title}}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrHistory, selector: "clr-history", inputs: { username: ["clrUsername", "username"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, ngImport: i0, template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n    <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n    <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{history.title}}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistory, decorators: [{
             type: Component,
             args: [{ selector: 'clr-history', template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n    <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n    <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{history.title}}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n" }]
@@ -4002,19 +4170,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrHistoryModule {
 }
 ClrHistoryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrHistory, ClrHistoryPinned] });
-ClrHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, imports: [[CommonModule, ClarityModule, RouterModule]] });
+ClrHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule], exports: [ClrHistory, ClrHistoryPinned] });
+ClrHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, imports: [[CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule, RouterModule],
+                    imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule],
                     declarations: [ClrHistory, ClrHistoryPinned],
                     exports: [ClrHistory, ClrHistoryPinned],
                 }]
@@ -4277,7 +4445,7 @@ 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: 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 [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"] }] });
 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" }]
@@ -4336,13 +4504,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
 class ClrLocationBarModule {
 }
 ClrLocationBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrLocationBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent], imports: [CommonModule, ClrIconModule, ClrDropdownModule], exports: [LocationBarComponent] });
-ClrLocationBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, imports: [[CommonModule, ClrIconModule, ClrDropdownModule]] });
+ClrLocationBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent], imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule], exports: [LocationBarComponent] });
+ClrLocationBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, imports: [[CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LocationBarComponent, LocationBarNodeComponent],
-                    imports: [CommonModule, ClrIconModule, ClrDropdownModule],
+                    imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule],
                     exports: [LocationBarComponent],
                 }]
         }] });
@@ -4399,103 +4567,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
-/*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClrDropdownOverflowDirective {
-    constructor(elRef) {
-        this.elRef = elRef;
-        this.defaultItemMinHeightRem = 1.5;
-        this.marginBottomRem = 0.1;
-    }
-    ngAfterViewInit() {
-        this.calculateDropdownMenu();
-    }
-    calculateDropdownMenu() {
-        // 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')) {
-            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';
-    }
-    getMenuMaxHeight(menuMaxHeightProvided, menuMaxHeightPx) {
-        if (menuMaxHeightProvided) {
-            const maxHeightPx = this.convertToPixels(menuMaxHeightProvided);
-            return maxHeightPx > menuMaxHeightPx ? menuMaxHeightPx : maxHeightPx;
-        }
-        return menuMaxHeightPx;
-    }
-    getItemMinHeight(itemMinHeightProvided) {
-        if (itemMinHeightProvided) {
-            return this.convertToPixels(itemMinHeightProvided);
-        }
-        return this.convertRemToPixels(this.defaultItemMinHeightRem);
-    }
-    convertToPixels(value) {
-        if (typeof value === 'string') {
-            if (value.endsWith('px')) {
-                return parseFloat(value.replace('px', ''));
-            }
-            else if (value.endsWith('rem')) {
-                return this.convertRemToPixels(parseFloat(value.replace('rem', '')));
-            }
-            else if (value.endsWith('vh')) {
-                return this.convertVhToPixels(parseFloat(value.replace('vh', '')));
-            }
-            return parseFloat(value);
-        }
-        return value;
-    }
-    convertRemToPixels(rem) {
-        return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
-    }
-    convertVhToPixels(vh) {
-        const pxPerVhUnit = window.innerHeight / 100;
-        return vh * pxPerVhUnit;
-    }
-}
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'clr-dropdown-menu' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clrDropdownMenuMaxHeight: [{
-                type: Input
-            }], clrDropdownMenuItemMinHeight: [{
-                type: Input
-            }] } });
-
-/*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClrDropdownOverflowModule {
-}
-ClrDropdownOverflowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrDropdownOverflowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, declarations: [ClrDropdownOverflowDirective], exports: [ClrDropdownOverflowDirective] });
-ClrDropdownOverflowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ClrDropdownOverflowDirective],
-                    exports: [ClrDropdownOverflowDirective],
-                }]
-        }] });
-
-/*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
 /*
  * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.