@porscheinformatik/clr-addons 15.5.7 → 15.5.8

package/fesm2020/clr-addons.mjs

@@ -695,14 +695,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDropdownOverflowDirective {
+    set clrMarginBottom(value) {
+        this.marginBottomPx = this.convertToPixels(value);
+    }
     constructor(elRef) {
         this.elRef = elRef;
         this.defaultItemMinHeightRem = 1.5;
-        this.marginBottomRem = 0.1;
         this.alreadyChecked = false;
-        this.heightFix = 27;
+        this.marginBottomPx = 2;
     }
-    ngAfterContentChecked() {
+    ngAfterViewChecked() {
         // first trigger manually because the subscription lower only triggers after first change
         if (!this.nestedDropdownChildren?.length) {
             this.applyDropdownOverflowStyles();
@@ -731,16 +733,9 @@ class ClrDropdownOverflowDirective {
             for (const item of this.getAllChildDropdownMenuItems()) {
                 item.style.minHeight = itemMinHeightPx + 'px';
             }
-            let height = 0;
-            if (y + this.heightFix < window.innerHeight - y) {
-                height = window.innerHeight - y - this.heightFix;
-            }
-            else {
-                height = window.innerHeight - y;
-            }
-            this.elRef.nativeElement.style.maxHeight =
-                this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, height - this.convertRemToPixels(this.marginBottomRem)) +
-                    'px';
+            const height = window.innerHeight - y;
+            const maxHeight = this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, height - this.marginBottomPx);
+            this.elRef.nativeElement.style.maxHeight = maxHeight + 'px';
             this.elRef.nativeElement.style.overflowY = 'auto';
             this.alreadyChecked = true;
         }
@@ -793,7 +788,7 @@ class ClrDropdownOverflowDirective {
     }
 }
 ClrDropdownOverflowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight" }, queries: [{ propertyName: "nestedDropdownChildren", predicate: ClrDropdown, descendants: true }], ngImport: i0 });
+ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight", clrMarginBottom: "clrMarginBottom" }, queries: [{ propertyName: "nestedDropdownChildren", predicate: ClrDropdown, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'clr-dropdown-menu' }]
@@ -801,6 +796,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                 type: Input
             }], clrDropdownMenuItemMinHeight: [{
                 type: Input
+            }], clrMarginBottom: [{
+                type: Input
             }], nestedDropdownChildren: [{
                 type: ContentChildren,
                 args: [ClrDropdown, { descendants: true }]
@@ -946,7 +943,7 @@ class ClrFlowBar {
     }
 }
 ClrFlowBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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      <cds-icon shape=\"angle\" direction=\"right\" *ngIf=\"!last\"></cds-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    <cds-icon shape=\"angle\" direction=\"down\"></cds-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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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      <cds-icon shape=\"angle\" direction=\"right\" *ngIf=\"!last\"></cds-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    <cds-icon shape=\"angle\" direction=\"down\"></cds-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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrFlowBar, decorators: [{
             type: Component,
             args: [{ selector: 'clr-flow-bar', host: {
@@ -1791,7 +1788,7 @@ ClrMultilingualSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
             type: Component,
             args: [{
@@ -4473,7 +4470,7 @@ class ClrHistory {
     }
 }
 ClrHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
-ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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    <cds-icon shape=\"history\" size=\"24\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }] });
+ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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    <cds-icon shape=\"history\" size=\"24\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", 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    <cds-icon shape=\"history\" size=\"24\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-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" }]
@@ -5278,7 +5275,7 @@ class LocationBarNodeComponent {
     }
 }
 LocationBarNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode"], outputs: ["selectionChanged"] }] });
+LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode"], outputs: ["selectionChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", 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\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" }]