@fundamental-ngx/core 0.59.1-rc.8 → 0.59.1

package/fesm2022/fundamental-ngx-core-nested-list.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Directive, Component, computed, HostListener, Optional, ViewEncapsulation, ChangeDetectionStrategy, EventEmitter, ContentChild, Output, inject, DestroyRef, Inject, Injectable, ViewChild, INJECTOR, ContentChildren, forwardRef, NgModule } from '@angular/core';
+import { inject, ElementRef, Input, Directive, Component, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, EventEmitter, HostListener, ContentChild, HostBinding, Output, DestroyRef, Inject, Injectable, ViewChild, INJECTOR, ContentChildren, forwardRef, Optional, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5 from 'rxjs';
 import { Subject, merge, Subscription, combineLatest, startWith } from 'rxjs';
-import * as i2 from '@fundamental-ngx/cdk/utils';
-import { destroyObservable, KeyUtil } from '@fundamental-ngx/cdk/utils';
+import { RtlService, destroyObservable, KeyUtil } from '@fundamental-ngx/cdk/utils';
 import { IconComponent } from '@fundamental-ngx/core/icon';
 import { takeUntil, filter } from 'rxjs/operators';
 import { RIGHT_ARROW, LEFT_ARROW, ENTER, SPACE } from '@angular/cdk/keycodes';
@@ -33,46 +32,39 @@ class NestedItemService {
 
 let uniqueId = 0;
 class NestedListHeaderDirective {
-    /** @hidden */
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor() {
         /** Id of the element. */
         this.id = `fd-nested-list-group-header-${++uniqueId}`;
         /** @hidden */
-        this.fdNestedListHeaderClass = true;
+        this._elementRef = inject(ElementRef);
     }
     /** Get the header title */
     get title() {
         return this._elementRef.nativeElement.textContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NestedListHeaderDirective, isStandalone: true, selector: "[fdNestedDirectivesHeader], [fd-nested-list-header]", inputs: { id: "id" }, host: { properties: { "attr.id": "this.id", "class.fd-nested-list__group-header": "this.fdNestedListHeaderClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NestedListHeaderDirective, isStandalone: true, selector: "[fdNestedDirectivesHeader], [fd-nested-list-header]", inputs: { id: "id" }, host: { properties: { "attr.id": "id" }, classAttribute: "fd-nested-list__group-header" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdNestedDirectivesHeader], [fd-nested-list-header]',
-                    standalone: true
+                    host: {
+                        class: 'fd-nested-list__group-header',
+                        '[attr.id]': 'id'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.id']
-            }], fdNestedListHeaderClass: [{
-                type: HostBinding,
-                args: ['class.fd-nested-list__group-header']
             }] } });
 class NestedListIconComponent extends IconComponent {
     constructor() {
         super(...arguments);
         /** Role attribute */
         this.role = 'presentation';
-        /** @hidden */
-        this.fdNestedListIconClass = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: NestedListIconComponent, isStandalone: true, selector: "[fdNestedDirectivesIcon], [fd-nested-list-icon]", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role", "class.fd-nested-list__icon": "this.fdNestedListIconClass" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: NestedListIconComponent, isStandalone: true, selector: "[fdNestedDirectivesIcon], [fd-nested-list-icon]", inputs: { role: "role" }, host: { properties: { "attr.role": "role" }, classAttribute: "fd-nested-list__icon" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListIconComponent, decorators: [{
             type: Component,
@@ -80,65 +72,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[fdNestedDirectivesIcon], [fd-nested-list-icon]',
                     template: `<ng-content></ng-content>`,
-                    standalone: true
+                    host: {
+                        class: 'fd-nested-list__icon',
+                        '[attr.role]': 'role'
+                    }
                 }]
         }], propDecorators: { role: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.role']
-            }], fdNestedListIconClass: [{
-                type: HostBinding,
-                args: ['class.fd-nested-list__icon']
             }] } });
 class NestedListTitleDirective {
-    /** @hidden */
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor() {
         /** @hidden */
-        this.fdNestedListTitleClass = true;
+        this._elementRef = inject(ElementRef);
     }
     /** Returns element's InnerText */
     getInnerText() {
-        return this.elementRef && this.elementRef.nativeElement.textContent;
+        return this._elementRef?.nativeElement.textContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListTitleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NestedListTitleDirective, isStandalone: true, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]", host: { properties: { "class.fd-nested-list__title": "this.fdNestedListTitleClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NestedListTitleDirective, isStandalone: true, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]", host: { classAttribute: "fd-nested-list__title" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdNestedDirectivesTitle], [fd-nested-list-title]',
-                    standalone: true
+                    host: {
+                        class: 'fd-nested-list__title'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fdNestedListTitleClass: [{
-                type: HostBinding,
-                args: ['class.fd-nested-list__title']
-            }] } });
+        }] });
 class NestedListExpandIconComponent {
-    /** @hidden */
-    constructor(_itemService, _changeDetRef, _rtlService) {
-        this._itemService = _itemService;
-        this._changeDetRef = _changeDetRef;
-        this._rtlService = _rtlService;
-        /** @hidden */
-        this.fdNestedListTitleClass = true;
-        /** @hidden */
-        this.fdButtonClass = true;
+    constructor() {
         /**
          * @hidden
          * Attribute controlled by the parent `NestedItemDirective`
          */
-        this.expanded = false;
+        this.expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
         /** @hidden */
-        this.ariaHidden = true;
+        this.expandIcon = computed(() => {
+            if (this.expanded()) {
+                return 'navigation-down-arrow';
+            }
+            return this._rtlService?.rtl() ? 'navigation-left-arrow' : 'navigation-right-arrow';
+        }, ...(ngDevMode ? [{ debugName: "expandIcon" }] : []));
+        /** @hidden */
+        this._itemService = inject(NestedItemService);
         /** @hidden */
-        this.sideArrowIcon$ = computed(() => this._rtlService?.rtlSignal() ? 'navigation-left-arrow' : 'navigation-right-arrow', ...(ngDevMode ? [{ debugName: "sideArrowIcon$" }] : []));
+        this._rtlService = inject(RtlService, { optional: true });
     }
     /** Mouse event handler */
     onClick(event) {
-        this.expanded = !this.expanded;
-        this._itemService.toggle.next(this.expanded);
+        this.expanded.update((v) => !v);
+        this._itemService.toggle.next(this.expanded());
         event.stopPropagation();
     }
     /** Handler for focus events */
@@ -147,13 +132,12 @@ class NestedListExpandIconComponent {
     }
     /** @hidden */
     changeExpandedState(expanded) {
-        this.expanded = expanded;
-        this._changeDetRef.detectChanges();
+        this.expanded.set(expanded);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListExpandIconComponent, deps: [{ token: NestedItemService }, { token: i0.ChangeDetectorRef }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: NestedListExpandIconComponent, isStandalone: true, selector: "[fdNestedListExpandIcon], [fd-nested-list-expand-icon]", host: { attributes: { "aria-haspopup": "true", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "focus": "onFocus()" }, properties: { "class.fd-nested-list__button": "this.fdNestedListTitleClass", "class.fd-button": "this.fdButtonClass", "class.is-expanded": "this.expanded", "attr.aria-expanded": "this.expanded", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListExpandIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: NestedListExpandIconComponent, isStandalone: true, selector: "[fdNestedListExpandIcon], [fd-nested-list-expand-icon]", host: { attributes: { "aria-haspopup": "true", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "focus": "onFocus()" }, properties: { "class.is-expanded": "expanded()", "attr.aria-expanded": "expanded()", "attr.aria-hidden": "true" }, classAttribute: "fd-nested-list__button fd-button" }, ngImport: i0, template: `
         <ng-content></ng-content>
-        <fd-icon [glyph]="expanded ? 'navigation-down-arrow' : sideArrowIcon$()"></fd-icon>
+        <fd-icon [glyph]="expandIcon()"></fd-icon>
     `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListExpandIconComponent, decorators: [{
@@ -163,40 +147,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     selector: '[fdNestedListExpandIcon], [fd-nested-list-expand-icon]',
                     template: `
         <ng-content></ng-content>
-        <fd-icon [glyph]="expanded ? 'navigation-down-arrow' : sideArrowIcon$()"></fd-icon>
+        <fd-icon [glyph]="expandIcon()"></fd-icon>
     `,
                     host: {
                         'aria-haspopup': 'true',
-                        tabindex: '-1'
+                        tabindex: '-1',
+                        class: 'fd-nested-list__button fd-button',
+                        '[class.is-expanded]': 'expanded()',
+                        '[attr.aria-expanded]': 'expanded()',
+                        '[attr.aria-hidden]': 'true',
+                        '(click)': 'onClick($event)',
+                        '(focus)': 'onFocus()'
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [IconComponent]
                 }]
-        }], ctorParameters: () => [{ type: NestedItemService }, { type: i0.ChangeDetectorRef }, { type: i2.RtlService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { fdNestedListTitleClass: [{
-                type: HostBinding,
-                args: ['class.fd-nested-list__button']
-            }], fdButtonClass: [{
-                type: HostBinding,
-                args: ['class.fd-button']
-            }], expanded: [{
-                type: HostBinding,
-                args: ['class.is-expanded']
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-expanded']
-            }], ariaHidden: [{
-                type: HostBinding,
-                args: ['attr.aria-hidden']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }] } });
+        }] });
 
 class NestedLinkDirective {
     /** @hidden */
@@ -779,20 +746,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 
 class NestedListPopoverComponent {
     /** @hidden */
-    constructor(_keyboardNestService, _itemService, _rtlService) {
-        this._keyboardNestService = _keyboardNestService;
-        this._itemService = _itemService;
-        this._rtlService = _rtlService;
+    constructor() {
         /** @hidden
          * For Internal Usage - Gets information about title, which should be displayed inside popover
          */
         this.title = '';
         /** @hidden */
-        this.popoverClass = true;
+        this.open = false;
         /** @hidden */
-        this.placement$ = computed(() => (this._rtlService?.rtlSignal() ? 'left-start' : 'right-start'), ...(ngDevMode ? [{ debugName: "placement$" }] : []));
+        this.placement = computed(() => (this._rtlService?.rtl() ? 'left-start' : 'right-start'), ...(ngDevMode ? [{ debugName: "placement" }] : []));
         /** @hidden */
-        this.open = false;
+        this._keyboardNestService = inject(NestedListKeyboardService);
+        /** @hidden */
+        this._itemService = inject(NestedItemService, { optional: true });
+        /** @hidden */
+        this._rtlService = inject(RtlService, { optional: true });
         this._listenOnKeyboardRefresh();
         if (this._itemService) {
             this._itemService.popover = this;
@@ -836,30 +804,25 @@ class NestedListPopoverComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListPopoverComponent, deps: [{ token: NestedListKeyboardService }, { token: NestedItemService, optional: true }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: NestedListPopoverComponent, isStandalone: true, selector: "fd-nested-list-popover", inputs: { title: "title" }, host: { properties: { "class.fd-nested-list__popover": "this.popoverClass" } }, queries: [{ propertyName: "linkDirective", first: true, predicate: NestedLinkDirective, descendants: true }, { propertyName: "contentDirective", first: true, predicate: NestedListContentDirective, descendants: true }], viewQueries: [{ propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }], ngImport: i0, template: "<fd-popover\n    [placement]=\"placement$()\"\n    [triggers]=\"['click']\"\n    [noArrow]=\"false\"\n    [isOpen]=\"open\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n>\n    <fd-popover-control>\n        <ng-content select=\"[fd-nested-list-link]\"></ng-content>\n        <ng-content select=\"[fd-nested-list-content]\"></ng-content>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-nested-list--text-only\">\n        <a fd-nested-list-link class=\"fd-nested-list__popover-header\">\n            <span fd-nested-list-title>{{ title }}</span>\n        </a>\n        <ng-content select=\"[fd-nested-list]\"></ng-content>\n        <ng-content select=\"fd-prepared-nested-list\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__title{display:inline-flex}.fd-side-nav--condensed .fd-nested-list__popover-header{box-shadow:0 0 .25rem #00000026,inset 0 -.0625rem #d9d9d9}.fd-side-nav--condensed .fd-popover-custom{display:block}[dir=rtl] .fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__link,.fd-side-nav--condensed[dir=rtl] .fd-popover-container-custom .fd-nested-list__link{padding-left:1rem}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: ["onClickCallback", "selected", "ariaDescribedby"], outputs: ["selectedChange"] }, { kind: "directive", type: NestedListTitleDirective, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: NestedListPopoverComponent, isStandalone: true, selector: "fd-nested-list-popover", inputs: { title: "title" }, host: { classAttribute: "fd-nested-list__popover" }, queries: [{ propertyName: "linkDirective", first: true, predicate: NestedLinkDirective, descendants: true }, { propertyName: "contentDirective", first: true, predicate: NestedListContentDirective, descendants: true }], viewQueries: [{ propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }], ngImport: i0, template: "<fd-popover\n    [placement]=\"placement()\"\n    [triggers]=\"['click']\"\n    [noArrow]=\"false\"\n    [isOpen]=\"open\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n>\n    <fd-popover-control>\n        <ng-content select=\"[fd-nested-list-link]\"></ng-content>\n        <ng-content select=\"[fd-nested-list-content]\"></ng-content>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-nested-list--text-only\">\n        <a fd-nested-list-link class=\"fd-nested-list__popover-header\">\n            <span fd-nested-list-title>{{ title }}</span>\n        </a>\n        <ng-content select=\"[fd-nested-list]\"></ng-content>\n        <ng-content select=\"fd-prepared-nested-list\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__title{display:inline-flex}.fd-side-nav--condensed .fd-nested-list__popover-header{box-shadow:0 0 .25rem #00000026,inset 0 -.0625rem #d9d9d9}.fd-side-nav--condensed .fd-popover-custom{display:block}[dir=rtl] .fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__link,.fd-side-nav--condensed[dir=rtl] .fd-popover-container-custom .fd-nested-list__link{padding-left:1rem}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: ["onClickCallback", "selected", "ariaDescribedby"], outputs: ["selectedChange"] }, { kind: "directive", type: NestedListTitleDirective, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NestedListPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-nested-list-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'fd-nested-list-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'fd-nested-list__popover'
+                    }, imports: [
                         PopoverComponent,
                         PopoverControlComponent,
                         PopoverBodyComponent,
                         NestedLinkDirective,
                         NestedListTitleDirective
-                    ], template: "<fd-popover\n    [placement]=\"placement$()\"\n    [triggers]=\"['click']\"\n    [noArrow]=\"false\"\n    [isOpen]=\"open\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n>\n    <fd-popover-control>\n        <ng-content select=\"[fd-nested-list-link]\"></ng-content>\n        <ng-content select=\"[fd-nested-list-content]\"></ng-content>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-nested-list--text-only\">\n        <a fd-nested-list-link class=\"fd-nested-list__popover-header\">\n            <span fd-nested-list-title>{{ title }}</span>\n        </a>\n        <ng-content select=\"[fd-nested-list]\"></ng-content>\n        <ng-content select=\"fd-prepared-nested-list\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__title{display:inline-flex}.fd-side-nav--condensed .fd-nested-list__popover-header{box-shadow:0 0 .25rem #00000026,inset 0 -.0625rem #d9d9d9}.fd-side-nav--condensed .fd-popover-custom{display:block}[dir=rtl] .fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__link,.fd-side-nav--condensed[dir=rtl] .fd-popover-container-custom .fd-nested-list__link{padding-left:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: NestedListKeyboardService }, { type: NestedItemService, decorators: [{
-                    type: Optional
-                }] }, { type: i2.RtlService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { title: [{
+                    ], template: "<fd-popover\n    [placement]=\"placement()\"\n    [triggers]=\"['click']\"\n    [noArrow]=\"false\"\n    [isOpen]=\"open\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n>\n    <fd-popover-control>\n        <ng-content select=\"[fd-nested-list-link]\"></ng-content>\n        <ng-content select=\"[fd-nested-list-content]\"></ng-content>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-nested-list--text-only\">\n        <a fd-nested-list-link class=\"fd-nested-list__popover-header\">\n            <span fd-nested-list-title>{{ title }}</span>\n        </a>\n        <ng-content select=\"[fd-nested-list]\"></ng-content>\n        <ng-content select=\"fd-prepared-nested-list\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__title{display:inline-flex}.fd-side-nav--condensed .fd-nested-list__popover-header{box-shadow:0 0 .25rem #00000026,inset 0 -.0625rem #d9d9d9}.fd-side-nav--condensed .fd-popover-custom{display:block}[dir=rtl] .fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__link,.fd-side-nav--condensed[dir=rtl] .fd-popover-container-custom .fd-nested-list__link{padding-left:1rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], popoverComponent: [{
                 type: ViewChild,
                 args: [PopoverComponent]
-            }], popoverClass: [{
-                type: HostBinding,
-                args: ['class.fd-nested-list__popover']
             }], linkDirective: [{
                 type: ContentChild,
                 args: [NestedLinkDirective]