@coreui/angular 2.11.3 → 2.12.0

package/bundles/coreui-angular.umd.js

@@ -2,7 +2,29 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('rxjs'), require('rxjs/operators')) :
     typeof define === 'function' && define.amd ? define('@coreui/angular', ['exports', '@angular/core', '@angular/common', '@angular/router', 'rxjs', 'rxjs/operators'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coreui = global.coreui || {}, global.coreui.angular = {}), global.ng.core, global.ng.common, global.ng.router, global.rxjs, global.rxjs.operators));
-}(this, (function (exports, i0, common, i1, rxjs, operators) { 'use strict';
+})(this, (function (exports, i0, i2, i1, rxjs, operators) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
     var sidebarCssClasses = [
         'sidebar-show',
@@ -23,7 +45,6 @@
         var MatchClasses = NewClassNames.map(function (Class) { return document.body.classList.contains(Class); });
         return MatchClasses.indexOf(true) !== -1;
     };
-    var ɵ0 = RemoveClasses;
     var ToggleClasses = function (Toggle, ClassNames) {
         var Level = ClassNames.indexOf(Toggle);
         var NewClassNames = ClassNames.slice(0, Level + 1);
@@ -57,13 +78,16 @@
         };
         return ClassToggler;
     }());
-    ClassToggler.decorators = [
-        { type: i0.Injectable }
-    ];
-    ClassToggler.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 }
-    ]; };
+    ClassToggler.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ClassToggler, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ClassToggler.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ClassToggler });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ClassToggler, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }];
+        } });
 
     /**
      * Allows the sidebar to be toggled via click.
@@ -71,6 +95,7 @@
     var SidebarToggleDirective = /** @class */ (function () {
         function SidebarToggleDirective(classToggler) {
             this.classToggler = classToggler;
+            this.breakpoint = false;
         }
         SidebarToggleDirective.prototype.ngOnInit = function () {
             this.bp = this.breakpoint;
@@ -82,19 +107,21 @@
         };
         return SidebarToggleDirective;
     }());
-    SidebarToggleDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appSidebarToggler]',
-                    providers: [ClassToggler]
-                },] }
-    ];
-    SidebarToggleDirective.ctorParameters = function () { return [
-        { type: ClassToggler }
-    ]; };
-    SidebarToggleDirective.propDecorators = {
-        breakpoint: [{ type: i0.Input, args: ['appSidebarToggler',] }],
-        toggleOpen: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
+    SidebarToggleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarToggleDirective, deps: [{ token: ClassToggler }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SidebarToggleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SidebarToggleDirective, selector: "[appSidebarToggler]", inputs: { breakpoint: ["appSidebarToggler", "breakpoint"] }, host: { listeners: { "click": "toggleOpen($event)" } }, providers: [ClassToggler], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarToggleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appSidebarToggler]',
+                        providers: [ClassToggler]
+                    }]
+            }], ctorParameters: function () { return [{ type: ClassToggler }]; }, propDecorators: { breakpoint: [{
+                    type: i0.Input,
+                    args: ['appSidebarToggler']
+                }], toggleOpen: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     var SidebarMinimizeDirective = /** @class */ (function () {
         function SidebarMinimizeDirective(document, renderer) {
             this.document = document;
@@ -109,18 +136,22 @@
         };
         return SidebarMinimizeDirective;
     }());
-    SidebarMinimizeDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appSidebarMinimizer]'
-                },] }
-    ];
-    SidebarMinimizeDirective.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 }
-    ]; };
-    SidebarMinimizeDirective.propDecorators = {
-        toggleOpen: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
+    SidebarMinimizeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarMinimizeDirective, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SidebarMinimizeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SidebarMinimizeDirective, selector: "[appSidebarMinimizer]", host: { listeners: { "click": "toggleOpen($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarMinimizeDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appSidebarMinimizer]'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }];
+        }, propDecorators: { toggleOpen: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     var MobileSidebarToggleDirective = /** @class */ (function () {
         function MobileSidebarToggleDirective(document, renderer) {
             this.document = document;
@@ -135,18 +166,22 @@
         };
         return MobileSidebarToggleDirective;
     }());
-    MobileSidebarToggleDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appMobileSidebarToggler]'
-                },] }
-    ];
-    MobileSidebarToggleDirective.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 }
-    ]; };
-    MobileSidebarToggleDirective.propDecorators = {
-        toggleOpen: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
+    MobileSidebarToggleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MobileSidebarToggleDirective, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    MobileSidebarToggleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MobileSidebarToggleDirective, selector: "[appMobileSidebarToggler]", host: { listeners: { "click": "toggleOpen($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MobileSidebarToggleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appMobileSidebarToggler]'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }];
+        }, propDecorators: { toggleOpen: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     /**
      * Allows the off-canvas sidebar to be closed via click.
      */
@@ -166,18 +201,22 @@
         };
         return SidebarOffCanvasCloseDirective;
     }());
-    SidebarOffCanvasCloseDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appSidebarClose]'
-                },] }
-    ];
-    SidebarOffCanvasCloseDirective.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 }
-    ]; };
-    SidebarOffCanvasCloseDirective.propDecorators = {
-        toggleOpen: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
+    SidebarOffCanvasCloseDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarOffCanvasCloseDirective, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SidebarOffCanvasCloseDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SidebarOffCanvasCloseDirective, selector: "[appSidebarClose]", host: { listeners: { "click": "toggleOpen($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarOffCanvasCloseDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appSidebarClose]'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }];
+        }, propDecorators: { toggleOpen: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     var BrandMinimizeDirective = /** @class */ (function () {
         function BrandMinimizeDirective(document, renderer) {
             this.document = document;
@@ -192,24 +231,29 @@
         };
         return BrandMinimizeDirective;
     }());
-    BrandMinimizeDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appBrandMinimizer]'
-                },] }
-    ];
-    BrandMinimizeDirective.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 }
-    ]; };
-    BrandMinimizeDirective.propDecorators = {
-        toggleOpen: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
+    BrandMinimizeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BrandMinimizeDirective, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    BrandMinimizeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BrandMinimizeDirective, selector: "[appBrandMinimizer]", host: { listeners: { "click": "toggleOpen($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BrandMinimizeDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appBrandMinimizer]'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }];
+        }, propDecorators: { toggleOpen: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     /**
      * Allows the aside to be toggled via click.
      */
     var AsideToggleDirective = /** @class */ (function () {
         function AsideToggleDirective(classToggler) {
             this.classToggler = classToggler;
+            this.breakpoint = false;
         }
         AsideToggleDirective.prototype.ngOnInit = function () {
             this.bp = this.breakpoint;
@@ -221,23 +265,26 @@
         };
         return AsideToggleDirective;
     }());
-    AsideToggleDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appAsideMenuToggler]',
-                    providers: [ClassToggler]
-                },] }
-    ];
-    AsideToggleDirective.ctorParameters = function () { return [
-        { type: ClassToggler }
-    ]; };
-    AsideToggleDirective.propDecorators = {
-        breakpoint: [{ type: i0.Input, args: ['appAsideMenuToggler',] }],
-        toggleOpen: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
+    AsideToggleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AsideToggleDirective, deps: [{ token: ClassToggler }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AsideToggleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AsideToggleDirective, selector: "[appAsideMenuToggler]", inputs: { breakpoint: ["appAsideMenuToggler", "breakpoint"] }, host: { listeners: { "click": "toggleOpen($event)" } }, providers: [ClassToggler], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AsideToggleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appAsideMenuToggler]',
+                        providers: [ClassToggler]
+                    }]
+            }], ctorParameters: function () { return [{ type: ClassToggler }]; }, propDecorators: { breakpoint: [{
+                    type: i0.Input,
+                    args: ['appAsideMenuToggler']
+                }], toggleOpen: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     var HtmlAttributesDirective = /** @class */ (function () {
         function HtmlAttributesDirective(renderer, el) {
             this.renderer = renderer;
             this.el = el;
+            this.appHtmlAttr = {};
         }
         HtmlAttributesDirective.prototype.ngOnInit = function () {
             var attribs = this.appHtmlAttr;
@@ -255,7 +302,9 @@
         };
         HtmlAttributesDirective.prototype.setStyle = function (styles) {
             for (var style in styles) {
-                this.renderer.setStyle(this.el.nativeElement, style, styles[style]);
+                if (style) {
+                    this.renderer.setStyle(this.el.nativeElement, style, styles[style]);
+                }
             }
         };
         HtmlAttributesDirective.prototype.addClass = function (classes) {
@@ -272,55 +321,74 @@
         };
         return HtmlAttributesDirective;
     }());
-    HtmlAttributesDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appHtmlAttr]'
-                },] }
-    ];
-    HtmlAttributesDirective.ctorParameters = function () { return [
-        { type: i0.Renderer2 },
-        { type: i0.ElementRef }
-    ]; };
-    HtmlAttributesDirective.propDecorators = {
-        appHtmlAttr: [{ type: i0.Input }]
-    };
+    HtmlAttributesDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HtmlAttributesDirective, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    HtmlAttributesDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HtmlAttributesDirective, selector: "[appHtmlAttr]", inputs: { appHtmlAttr: "appHtmlAttr" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HtmlAttributesDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appHtmlAttr]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }]; }, propDecorators: { appHtmlAttr: [{
+                    type: i0.Input
+                }] } });
 
     var LayoutModule = /** @class */ (function () {
         function LayoutModule() {
         }
         return LayoutModule;
     }());
-    LayoutModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [
-                        AsideToggleDirective,
-                        BrandMinimizeDirective,
-                        MobileSidebarToggleDirective,
-                        SidebarToggleDirective,
-                        SidebarMinimizeDirective,
-                        SidebarOffCanvasCloseDirective,
-                        HtmlAttributesDirective
-                    ],
-                    declarations: [
-                        AsideToggleDirective,
-                        BrandMinimizeDirective,
-                        MobileSidebarToggleDirective,
-                        SidebarToggleDirective,
-                        SidebarMinimizeDirective,
-                        SidebarOffCanvasCloseDirective,
-                        HtmlAttributesDirective
-                    ],
-                    providers: [
-                        ClassToggler
-                    ]
-                },] }
-    ];
+    LayoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    LayoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutModule, declarations: [AsideToggleDirective,
+            BrandMinimizeDirective,
+            MobileSidebarToggleDirective,
+            SidebarToggleDirective,
+            SidebarMinimizeDirective,
+            SidebarOffCanvasCloseDirective,
+            HtmlAttributesDirective], imports: [i2.CommonModule], exports: [AsideToggleDirective,
+            BrandMinimizeDirective,
+            MobileSidebarToggleDirective,
+            SidebarToggleDirective,
+            SidebarMinimizeDirective,
+            SidebarOffCanvasCloseDirective,
+            HtmlAttributesDirective] });
+    LayoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutModule, providers: [
+            ClassToggler
+        ], imports: [[
+                i2.CommonModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i2.CommonModule
+                        ],
+                        exports: [
+                            AsideToggleDirective,
+                            BrandMinimizeDirective,
+                            MobileSidebarToggleDirective,
+                            SidebarToggleDirective,
+                            SidebarMinimizeDirective,
+                            SidebarOffCanvasCloseDirective,
+                            HtmlAttributesDirective
+                        ],
+                        declarations: [
+                            AsideToggleDirective,
+                            BrandMinimizeDirective,
+                            MobileSidebarToggleDirective,
+                            SidebarToggleDirective,
+                            SidebarMinimizeDirective,
+                            SidebarOffCanvasCloseDirective,
+                            HtmlAttributesDirective
+                        ],
+                        providers: [
+                            ClassToggler
+                        ]
+                    }]
+            }] });
 
     function Replace(el) {
         var nativeElement = el.nativeElement;
+        // @ts-ignore
         var parentElement = nativeElement.parentElement;
         // move all children out of the element
         while (nativeElement.firstChild) {
@@ -366,43 +434,57 @@
         };
         return AppAsideComponent;
     }());
-    AppAsideComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-aside, cui-aside',
-                    template: "<ng-content></ng-content>"
-                },] }
-    ];
-    AppAsideComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 }
-    ]; };
-    AppAsideComponent.propDecorators = {
-        display: [{ type: i0.Input }],
-        fixed: [{ type: i0.Input }],
-        offCanvas: [{ type: i0.Input }],
-        asideMenuClass: [{ type: i0.HostBinding, args: ['class.aside-menu',] }]
-    };
+    AppAsideComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppAsideComponent, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppAsideComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppAsideComponent, selector: "app-aside, cui-aside", inputs: { display: "display", fixed: "fixed", offCanvas: "offCanvas" }, host: { properties: { "class.aside-menu": "this.asideMenuClass" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppAsideComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-aside, cui-aside',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }];
+        }, propDecorators: { display: [{
+                    type: i0.Input
+                }], fixed: [{
+                    type: i0.Input
+                }], offCanvas: [{
+                    type: i0.Input
+                }], asideMenuClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.aside-menu']
+                }] } });
 
     var AppAsideModule = /** @class */ (function () {
         function AppAsideModule() {
         }
         return AppAsideModule;
     }());
-    AppAsideModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        LayoutModule
-                    ],
-                    exports: [
-                        AppAsideComponent,
-                        LayoutModule
-                    ],
-                    declarations: [
-                        AppAsideComponent
-                    ]
-                },] }
-    ];
+    AppAsideModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppAsideModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AppAsideModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppAsideModule, declarations: [AppAsideComponent], imports: [i2.CommonModule,
+            LayoutModule], exports: [AppAsideComponent] });
+    AppAsideModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppAsideModule, imports: [[
+                i2.CommonModule,
+                LayoutModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppAsideModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i2.CommonModule,
+                            LayoutModule
+                        ],
+                        exports: [
+                            AppAsideComponent
+                        ],
+                        declarations: [
+                            AppAsideComponent
+                        ]
+                    }]
+            }] });
 
     var AppBreadcrumbService = /** @class */ (function () {
         function AppBreadcrumbService(router, route) {
@@ -437,16 +519,14 @@
         }
         return AppBreadcrumbService;
     }());
-    AppBreadcrumbService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AppBreadcrumbService_Factory() { return new AppBreadcrumbService(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i1.ActivatedRoute)); }, token: AppBreadcrumbService, providedIn: "root" });
-    AppBreadcrumbService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    AppBreadcrumbService.ctorParameters = function () { return [
-        { type: i1.Router },
-        { type: i1.ActivatedRoute }
-    ]; };
+    AppBreadcrumbService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbService, deps: [{ token: i1__namespace.Router }, { token: i1__namespace.ActivatedRoute }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AppBreadcrumbService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.Router }, { type: i1__namespace.ActivatedRoute }]; } });
 
     var AppBreadcrumbComponent = /** @class */ (function () {
         function AppBreadcrumbComponent(document, renderer, service, el) {
@@ -472,21 +552,22 @@
         };
         return AppBreadcrumbComponent;
     }());
-    AppBreadcrumbComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-breadcrumb',
-                    template: "\n    <ng-template ngFor let-breadcrumb [ngForOf]=\"breadcrumbs | async\" let-last = last>\n      <li class=\"breadcrumb-item\"\n          *ngIf=\"breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)\"\n          [ngClass]=\"{active: last}\">\n        <a *ngIf=\"!last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</a>\n        <span *ngIf=\"last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</span>\n      </li>\n    </ng-template>\n  "
-                },] }
-    ];
-    AppBreadcrumbComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 },
-        { type: AppBreadcrumbService },
-        { type: i0.ElementRef }
-    ]; };
-    AppBreadcrumbComponent.propDecorators = {
-        fixed: [{ type: i0.Input }]
-    };
+    AppBreadcrumbComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbComponent, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }, { token: AppBreadcrumbService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppBreadcrumbComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppBreadcrumbComponent, selector: "app-breadcrumb", inputs: { fixed: "fixed" }, ngImport: i0__namespace, template: "\n    <ng-template ngFor let-breadcrumb [ngForOf]=\"breadcrumbs | async\" let-last = last>\n      <li class=\"breadcrumb-item\"\n          *ngIf=\"breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)\"\n          [ngClass]=\"{active: last}\">\n        <a *ngIf=\"!last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</a>\n        <span *ngIf=\"last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</span>\n      </li>\n    </ng-template>\n  ", isInline: true, directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "async": i2__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-breadcrumb',
+                        template: "\n    <ng-template ngFor let-breadcrumb [ngForOf]=\"breadcrumbs | async\" let-last = last>\n      <li class=\"breadcrumb-item\"\n          *ngIf=\"breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)\"\n          [ngClass]=\"{active: last}\">\n        <a *ngIf=\"!last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</a>\n        <span *ngIf=\"last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</span>\n      </li>\n    </ng-template>\n  "
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }, { type: AppBreadcrumbService }, { type: i0__namespace.ElementRef }];
+        }, propDecorators: { fixed: [{
+                    type: i0.Input
+                }] } });
 
     var CuiBreadcrumbComponent = /** @class */ (function () {
         function CuiBreadcrumbComponent(document, renderer, service) {
@@ -510,21 +591,23 @@
         };
         return CuiBreadcrumbComponent;
     }());
-    CuiBreadcrumbComponent.decorators = [
-        { type: i0.Component, args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'cui-breadcrumb',
-                    template: "<ol class=\"breadcrumb\">\r\n  <ng-template ngFor let-breadcrumb [ngForOf]=\"breadcrumbs | async\" let-last = last>\r\n    <li class=\"breadcrumb-item\"\r\n        *ngIf=\"breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)\"\r\n        [ngClass]=\"{active: last}\">\r\n      <a *ngIf=\"!last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</a>\r\n      <span *ngIf=\"last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</span>\r\n    </li>\r\n  </ng-template>\r\n  <ng-content></ng-content>\r\n</ol>\r\n"
-                },] }
-    ];
-    CuiBreadcrumbComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 },
-        { type: AppBreadcrumbService }
-    ]; };
-    CuiBreadcrumbComponent.propDecorators = {
-        fixed: [{ type: i0.Input }]
-    };
+    CuiBreadcrumbComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CuiBreadcrumbComponent, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }, { token: AppBreadcrumbService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CuiBreadcrumbComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CuiBreadcrumbComponent, selector: "cui-breadcrumb", inputs: { fixed: "fixed" }, ngImport: i0__namespace, template: "<ol class=\"breadcrumb\">\r\n  <ng-template ngFor let-breadcrumb [ngForOf]=\"breadcrumbs | async\" let-last = last>\r\n    <li class=\"breadcrumb-item\"\r\n        *ngIf=\"breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)\"\r\n        [ngClass]=\"{active: last}\">\r\n      <a *ngIf=\"!last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</a>\r\n      <span *ngIf=\"last\" [routerLink]=\"breadcrumb.url\">{{breadcrumb.label.title}}</span>\r\n    </li>\r\n  </ng-template>\r\n  <ng-content></ng-content>\r\n</ol>\r\n", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "async": i2__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CuiBreadcrumbComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line:component-selector
+                        selector: 'cui-breadcrumb',
+                        templateUrl: './cui-breadcrumb.component.html'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }, { type: AppBreadcrumbService }];
+        }, propDecorators: { fixed: [{
+                    type: i0.Input
+                }] } });
 
     // @dynamic
     var AppBreadcrumbModule = /** @class */ (function () {
@@ -540,13 +623,17 @@
         };
         return AppBreadcrumbModule;
     }());
-    AppBreadcrumbModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.RouterModule],
-                    exports: [AppBreadcrumbComponent, CuiBreadcrumbComponent],
-                    declarations: [AppBreadcrumbComponent, CuiBreadcrumbComponent]
-                },] }
-    ];
+    AppBreadcrumbModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AppBreadcrumbModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbModule, declarations: [AppBreadcrumbComponent, CuiBreadcrumbComponent], imports: [i2.CommonModule, i1.RouterModule], exports: [AppBreadcrumbComponent, CuiBreadcrumbComponent] });
+    AppBreadcrumbModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbModule, imports: [[i2.CommonModule, i1.RouterModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppBreadcrumbModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [i2.CommonModule, i1.RouterModule],
+                        exports: [AppBreadcrumbComponent, CuiBreadcrumbComponent],
+                        declarations: [AppBreadcrumbComponent, CuiBreadcrumbComponent]
+                    }]
+            }] });
 
     var AppFooterComponent = /** @class */ (function () {
         function AppFooterComponent(document, renderer) {
@@ -569,40 +656,54 @@
         };
         return AppFooterComponent;
     }());
-    AppFooterComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-footer, cui-footer',
-                    template: "<ng-content></ng-content>"
-                },] }
-    ];
-    AppFooterComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 }
-    ]; };
-    AppFooterComponent.propDecorators = {
-        fixed: [{ type: i0.Input }],
-        appFooterClass: [{ type: i0.HostBinding, args: ['class.app-footer',] }]
-    };
+    AppFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppFooterComponent, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppFooterComponent, selector: "app-footer, cui-footer", inputs: { fixed: "fixed" }, host: { properties: { "class.app-footer": "this.appFooterClass" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppFooterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-footer, cui-footer',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }];
+        }, propDecorators: { fixed: [{
+                    type: i0.Input
+                }], appFooterClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.app-footer']
+                }] } });
 
     var AppFooterModule = /** @class */ (function () {
         function AppFooterModule() {
         }
         return AppFooterModule;
     }());
-    AppFooterModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule],
-                    exports: [AppFooterComponent],
-                    declarations: [AppFooterComponent]
-                },] }
-    ];
+    AppFooterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppFooterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AppFooterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppFooterModule, declarations: [AppFooterComponent], imports: [i2.CommonModule], exports: [AppFooterComponent] });
+    AppFooterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppFooterModule, imports: [[i2.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppFooterModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [i2.CommonModule],
+                        exports: [AppFooterComponent],
+                        declarations: [AppFooterComponent]
+                    }]
+            }] });
 
     var AppHeaderComponent = /** @class */ (function () {
         function AppHeaderComponent(document, renderer) {
             this.document = document;
             this.renderer = renderer;
             this.navbarBrandText = { icon: '🅲', text: '🅲 CoreUI' };
+            this.navbarBrandHref = ''; // deprecated, use navbarBrandRouterLink instead
             this.navbarBrandRouterLink = '';
+            this.sidebarToggler = 'lg';
+            this.mobileSidebarToggler = true;
+            this.asideMenuToggler = 'lg';
+            this.mobileAsideMenuToggler = true;
             this.fixedClass = 'header-fixed';
             this.appHeaderClass = true;
             this.navbarClass = true;
@@ -616,10 +717,10 @@
             this.isFixed(this.fixed);
             this.navbarBrandImg = Boolean(this.navbarBrand || this.navbarBrandFull || this.navbarBrandMinimized);
             this.navbarBrandRouterLink = this.navbarBrandRouterLink[0] ? this.navbarBrandRouterLink : this.navbarBrandHref;
-            this.sidebarTogglerClass = this.setToggerBreakpointClass(this.sidebarToggler);
-            this.sidebarTogglerMobileClass = this.setToggerMobileBreakpointClass(this.sidebarToggler);
-            this.asideTogglerClass = this.setToggerBreakpointClass(this.asideMenuToggler);
-            this.asideTogglerMobileClass = this.setToggerMobileBreakpointClass(this.asideMenuToggler);
+            this.sidebarTogglerClass = this.setTogglerBreakpointClass(this.sidebarToggler);
+            this.sidebarTogglerMobileClass = this.setTogglerMobileBreakpointClass(this.sidebarToggler);
+            this.asideTogglerClass = this.setTogglerBreakpointClass(this.asideMenuToggler);
+            this.asideTogglerMobileClass = this.setTogglerMobileBreakpointClass(this.asideMenuToggler);
         };
         AppHeaderComponent.prototype.ngOnDestroy = function () {
             this.renderer.removeClass(this.document.body, this.fixedClass);
@@ -630,7 +731,7 @@
                 this.renderer.addClass(this.document.body, this.fixedClass);
             }
         };
-        AppHeaderComponent.prototype.setToggerBreakpointClass = function (breakpoint) {
+        AppHeaderComponent.prototype.setTogglerBreakpointClass = function (breakpoint) {
             if (breakpoint === void 0) { breakpoint = 'md'; }
             var togglerClass = 'd-none d-md-block';
             if (this.breakpoints.includes(breakpoint)) {
@@ -639,7 +740,7 @@
             }
             return togglerClass;
         };
-        AppHeaderComponent.prototype.setToggerMobileBreakpointClass = function (breakpoint) {
+        AppHeaderComponent.prototype.setTogglerMobileBreakpointClass = function (breakpoint) {
             if (breakpoint === void 0) { breakpoint = 'lg'; }
             var togglerClass = 'd-lg-none';
             if (this.breakpoints.includes(breakpoint)) {
@@ -649,53 +750,79 @@
         };
         return AppHeaderComponent;
     }());
-    AppHeaderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-header, cui-header',
-                    template: "<ng-template [ngIf]=\"mobileSidebarToggler != false\">\r\n  <button class=\"navbar-toggler {{sidebarTogglerMobileClass}}\" type=\"button\" appSidebarToggler>\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n</ng-template>\r\n<a class=\"navbar-brand\" [routerLink]=\"navbarBrandRouterLink\">\r\n  <ng-template [ngIf]=\"navbarBrandImg\">\r\n    <img *ngIf=\"navbarBrand\"\r\n         [appHtmlAttr]=\"navbarBrand\"\r\n         [ngClass]=\"'navbar-brand'\">\r\n    <img *ngIf=\"navbarBrandFull\"\r\n         [appHtmlAttr]=\"navbarBrandFull\"\r\n         [ngClass]=\"'navbar-brand-full'\">\r\n    <img *ngIf=\"navbarBrandMinimized\"\r\n         [appHtmlAttr]=\"navbarBrandMinimized\"\r\n         [ngClass]=\"'navbar-brand-minimized'\">\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"!navbarBrandImg\">\r\n    <div class=\"navbar-brand-full\" [innerHTML]=\"navbarBrandText.text\"></div>\r\n    <div class=\"navbar-brand-minimized\" [innerHTML]=\"navbarBrandText.icon\"></div>\r\n  </ng-template>\r\n</a>\r\n<ng-template [ngIf]=\"sidebarToggler != false\">\r\n  <button class=\"navbar-toggler {{sidebarTogglerClass}}\" type=\"button\" [appSidebarToggler]=\"sidebarToggler\">\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n</ng-template>\r\n<ng-content></ng-content>\r\n<ng-template [ngIf]=\"asideMenuToggler != false\">\r\n  <button class=\"navbar-toggler {{asideTogglerClass}}\" type=\"button\" [appAsideMenuToggler]=\"asideMenuToggler\">\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n</ng-template>\r\n<ng-template [ngIf]=\"mobileAsideMenuToggler != false\">\r\n  <button class=\"navbar-toggler {{asideTogglerMobileClass}}\" type=\"button\" appAsideMenuToggler>\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n</ng-template>\r\n"
-                },] }
-    ];
-    AppHeaderComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 }
-    ]; };
-    AppHeaderComponent.propDecorators = {
-        fixed: [{ type: i0.Input }],
-        navbarBrand: [{ type: i0.Input }],
-        navbarBrandFull: [{ type: i0.Input }],
-        navbarBrandMinimized: [{ type: i0.Input }],
-        navbarBrandText: [{ type: i0.Input }],
-        navbarBrandHref: [{ type: i0.Input }],
-        navbarBrandRouterLink: [{ type: i0.Input }],
-        sidebarToggler: [{ type: i0.Input }],
-        mobileSidebarToggler: [{ type: i0.Input }],
-        asideMenuToggler: [{ type: i0.Input }],
-        mobileAsideMenuToggler: [{ type: i0.Input }],
-        appHeaderClass: [{ type: i0.HostBinding, args: ['class.app-header',] }],
-        navbarClass: [{ type: i0.HostBinding, args: ['class.navbar',] }]
-    };
+    AppHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppHeaderComponent, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppHeaderComponent, selector: "app-header, cui-header", inputs: { fixed: "fixed", navbarBrand: "navbarBrand", navbarBrandFull: "navbarBrandFull", navbarBrandMinimized: "navbarBrandMinimized", navbarBrandText: "navbarBrandText", navbarBrandHref: "navbarBrandHref", navbarBrandRouterLink: "navbarBrandRouterLink", sidebarToggler: "sidebarToggler", mobileSidebarToggler: "mobileSidebarToggler", asideMenuToggler: "asideMenuToggler", mobileAsideMenuToggler: "mobileAsideMenuToggler" }, host: { properties: { "class.app-header": "this.appHeaderClass", "class.navbar": "this.navbarClass" } }, ngImport: i0__namespace, template: "<ng-template [ngIf]=\"mobileSidebarToggler != false\">\r\n  <button class=\"navbar-toggler {{sidebarTogglerMobileClass}}\" type=\"button\" appSidebarToggler>\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n</ng-template>\r\n<a class=\"navbar-brand\" [routerLink]=\"navbarBrandRouterLink\">\r\n  <ng-template [ngIf]=\"navbarBrandImg\">\r\n    <img *ngIf=\"navbarBrand\"\r\n         [appHtmlAttr]=\"navbarBrand\"\r\n         [ngClass]=\"'navbar-brand'\">\r\n    <img *ngIf=\"navbarBrandFull\"\r\n         [appHtmlAttr]=\"navbarBrandFull\"\r\n         [ngClass]=\"'navbar-brand-full'\">\r\n    <img *ngIf=\"navbarBrandMinimized\"\r\n         [appHtmlAttr]=\"navbarBrandMinimized\"\r\n         [ngClass]=\"'navbar-brand-minimized'\">\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"!navbarBrandImg\">\r\n    <div class=\"navbar-brand-full\" [innerHTML]=\"navbarBrandText.text\"></div>\r\n    <div class=\"navbar-brand-minimized\" [innerHTML]=\"navbarBrandText.icon\"></div>\r\n  </ng-template>\r\n</a>\r\n<ng-template [ngIf]=\"sidebarToggler != false\">\r\n  <button class=\"navbar-toggler {{sidebarTogglerClass}}\" type=\"button\" [appSidebarToggler]=\"sidebarToggler\">\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n</ng-template>\r\n<ng-content></ng-content>\r\n<ng-template [ngIf]=\"asideMenuToggler != false\">\r\n  <button class=\"navbar-toggler {{asideTogglerClass}}\" type=\"button\" [appAsideMenuToggler]=\"asideMenuToggler\">\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n</ng-template>\r\n<ng-template [ngIf]=\"mobileAsideMenuToggler != false\">\r\n  <button class=\"navbar-toggler {{asideTogglerMobileClass}}\" type=\"button\" appAsideMenuToggler>\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n</ng-template>\r\n", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SidebarToggleDirective, selector: "[appSidebarToggler]", inputs: ["appSidebarToggler"] }, { type: i1__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: HtmlAttributesDirective, selector: "[appHtmlAttr]", inputs: ["appHtmlAttr"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: AsideToggleDirective, selector: "[appAsideMenuToggler]", inputs: ["appAsideMenuToggler"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-header, cui-header',
+                        templateUrl: './app-header.component.html'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }];
+        }, propDecorators: { fixed: [{
+                    type: i0.Input
+                }], navbarBrand: [{
+                    type: i0.Input
+                }], navbarBrandFull: [{
+                    type: i0.Input
+                }], navbarBrandMinimized: [{
+                    type: i0.Input
+                }], navbarBrandText: [{
+                    type: i0.Input
+                }], navbarBrandHref: [{
+                    type: i0.Input
+                }], navbarBrandRouterLink: [{
+                    type: i0.Input
+                }], sidebarToggler: [{
+                    type: i0.Input
+                }], mobileSidebarToggler: [{
+                    type: i0.Input
+                }], asideMenuToggler: [{
+                    type: i0.Input
+                }], mobileAsideMenuToggler: [{
+                    type: i0.Input
+                }], appHeaderClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.app-header']
+                }], navbarClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.navbar']
+                }] } });
 
     var AppHeaderModule = /** @class */ (function () {
         function AppHeaderModule() {
         }
         return AppHeaderModule;
     }());
-    AppHeaderModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        i1.RouterModule,
-                        LayoutModule
-                    ],
-                    exports: [
-                        AppHeaderComponent,
-                        LayoutModule
-                    ],
-                    declarations: [
-                        AppHeaderComponent
-                    ]
-                },] }
-    ];
+    AppHeaderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppHeaderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AppHeaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppHeaderModule, declarations: [AppHeaderComponent], imports: [i2.CommonModule,
+            i1.RouterModule,
+            LayoutModule], exports: [AppHeaderComponent] });
+    AppHeaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppHeaderModule, imports: [[
+                i2.CommonModule,
+                i1.RouterModule,
+                LayoutModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppHeaderModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i2.CommonModule,
+                            i1.RouterModule,
+                            LayoutModule
+                        ],
+                        exports: [
+                            AppHeaderComponent,
+                        ],
+                        declarations: [
+                            AppHeaderComponent
+                        ]
+                    }]
+            }] });
 
     var AppSidebarService = /** @class */ (function () {
         function AppSidebarService() {
@@ -707,13 +834,14 @@
         };
         return AppSidebarService;
     }());
-    AppSidebarService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AppSidebarService_Factory() { return new AppSidebarService(); }, token: AppSidebarService, providedIn: "root" });
-    AppSidebarService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    AppSidebarService.ctorParameters = function () { return []; };
+    AppSidebarService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AppSidebarService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root'
+                    }]
+            }], ctorParameters: function () { return []; } });
 
     var AppSidebarComponent = /** @class */ (function () {
         function AppSidebarComponent(document, renderer, sidebarService) {
@@ -804,265 +932,35 @@
         };
         return AppSidebarComponent;
     }());
-    AppSidebarComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar, cui-sidebar',
-                    template: "<ng-content></ng-content>"
-                },] }
-    ];
-    AppSidebarComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 },
-        { type: AppSidebarService }
-    ]; };
-    AppSidebarComponent.propDecorators = {
-        compact: [{ type: i0.Input }],
-        display: [{ type: i0.Input }],
-        fixed: [{ type: i0.Input }],
-        offCanvas: [{ type: i0.Input }],
-        minimized: [{ type: i0.Input }],
-        minimizedChange: [{ type: i0.Output }],
-        sidebarClass: [{ type: i0.HostBinding, args: ['class.sidebar',] }]
-    };
-
-    var AppSidebarNavComponent = /** @class */ (function () {
-        function AppSidebarNavComponent(router) {
-            this.router = router;
-            this.navItems = [];
-            this.sidebarNavClass = true;
-            this.role = 'nav';
-            this.navItemsArray = [];
-        }
-        AppSidebarNavComponent.prototype.ngOnChanges = function (changes) {
-            this.navItemsArray = Array.isArray(this.navItems) ? this.navItems.slice() : [];
-        };
-        return AppSidebarNavComponent;
-    }());
-    AppSidebarNavComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-nav, cui-sidebar-nav',
-                    template: "<app-sidebar-nav-items\n  class=\"nav\"\n  [items]=\"navItemsArray\">\n</app-sidebar-nav-items>\n"
-                },] }
-    ];
-    AppSidebarNavComponent.ctorParameters = function () { return [
-        { type: i1.Router }
-    ]; };
-    AppSidebarNavComponent.propDecorators = {
-        navItems: [{ type: i0.Input }],
-        sidebarNavClass: [{ type: i0.HostBinding, args: ['class.sidebar-nav',] }],
-        role: [{ type: i0.HostBinding, args: ['attr.role',] }, { type: i0.Input }]
-    };
-
-    var AppSidebarMinimizerComponent = /** @class */ (function () {
-        function AppSidebarMinimizerComponent(sidebarService) {
-            this.sidebarService = sidebarService;
-            this.role = 'button';
-            this.sidebarMinimizerClass = true;
-        }
-        AppSidebarMinimizerComponent.prototype.toggleOpen = function ($event) {
-            $event.preventDefault();
-            this.sidebarService.toggle({ minimize: 'toggle' });
-        };
-        return AppSidebarMinimizerComponent;
-    }());
-    AppSidebarMinimizerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-minimizer, cui-sidebar-minimizer',
-                    template: ""
-                },] }
-    ];
-    AppSidebarMinimizerComponent.ctorParameters = function () { return [
-        { type: AppSidebarService }
-    ]; };
-    AppSidebarMinimizerComponent.propDecorators = {
-        role: [{ type: i0.HostBinding, args: ['attr.role',] }, { type: i0.Input }],
-        sidebarMinimizerClass: [{ type: i0.HostBinding, args: ['class.sidebar-minimizer',] }],
-        toggleOpen: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
-
-    var SidebarNavService = /** @class */ (function () {
-        function SidebarNavService() {
-        }
-        return SidebarNavService;
-    }());
-    SidebarNavService.decorators = [
-        { type: i0.Injectable }
-    ];
-    var SidebarNavHelper = /** @class */ (function () {
-        function SidebarNavHelper() {
-            this.hasBadge = function (item) { return Boolean(item.badge); };
-            this.hasIcon = function (item) { return Boolean(item.icon); };
-        }
-        SidebarNavHelper.prototype.itemType = function (item) {
-            if (item.divider) {
-                return 'divider';
-            }
-            else if (item.title) {
-                return 'title';
-            }
-            else if (item.children) {
-                return 'dropdown';
-            }
-            else if (item.label) {
-                return 'label';
-            }
-            else if (!Object.keys(item).length) {
-                return 'empty';
-            }
-            else {
-                return 'link';
-            }
-        };
-        SidebarNavHelper.prototype.isActive = function (router, item) {
-            return router.isActive(item.url, false);
-        };
-        SidebarNavHelper.prototype.getIconClass = function (item) {
-            var classes = {
-                'nav-icon': true
-            };
-            if (this.hasIcon(item)) {
-                var icon = item.icon;
-                classes[icon] = this.hasIcon(item);
-            }
-            return classes;
-        };
-        return SidebarNavHelper;
-    }());
-    SidebarNavHelper.decorators = [
-        { type: i0.Injectable }
-    ];
-
-    var AppSidebarFooterComponent = /** @class */ (function () {
-        function AppSidebarFooterComponent() {
-            this.sidebarFooterClass = true;
-        }
-        return AppSidebarFooterComponent;
-    }());
-    AppSidebarFooterComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-footer, cui-sidebar-footer',
-                    template: "<ng-content></ng-content>"
-                },] }
-    ];
-    AppSidebarFooterComponent.ctorParameters = function () { return []; };
-    AppSidebarFooterComponent.propDecorators = {
-        sidebarFooterClass: [{ type: i0.HostBinding, args: ['class.sidebar-footer',] }]
-    };
-
-    var AppSidebarFormComponent = /** @class */ (function () {
-        function AppSidebarFormComponent() {
-            this.sidebarFormClass = true;
-        }
-        return AppSidebarFormComponent;
-    }());
-    AppSidebarFormComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-form, cui-sidebar-form',
-                    template: "<ng-content></ng-content>"
-                },] }
-    ];
-    AppSidebarFormComponent.ctorParameters = function () { return []; };
-    AppSidebarFormComponent.propDecorators = {
-        sidebarFormClass: [{ type: i0.HostBinding, args: ['class.sidebar-form',] }]
-    };
-
-    var AppSidebarHeaderComponent = /** @class */ (function () {
-        function AppSidebarHeaderComponent() {
-            this.sidebarHeaderClass = true;
-        }
-        return AppSidebarHeaderComponent;
-    }());
-    AppSidebarHeaderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-header, cui-sidebar-header',
-                    template: "<ng-content></ng-content>"
-                },] }
-    ];
-    AppSidebarHeaderComponent.ctorParameters = function () { return []; };
-    AppSidebarHeaderComponent.propDecorators = {
-        sidebarHeaderClass: [{ type: i0.HostBinding, args: ['class.sidebar-header',] }]
-    };
-
-    var NavDropdownDirective = /** @class */ (function () {
-        function NavDropdownDirective(el) {
-            this.el = el;
-        }
-        NavDropdownDirective.prototype.toggle = function () {
-            this.el.nativeElement.classList.toggle('open');
-        };
-        return NavDropdownDirective;
-    }());
-    NavDropdownDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appNavDropdown]'
-                },] }
-    ];
-    NavDropdownDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    /**
-     * Allows the dropdown to be toggled via click.
-     */
-    var NavDropdownToggleDirective = /** @class */ (function () {
-        function NavDropdownToggleDirective(dropdown) {
-            this.dropdown = dropdown;
-        }
-        NavDropdownToggleDirective.prototype.toggleOpen = function ($event) {
-            $event.preventDefault();
-            this.dropdown.toggle();
-        };
-        return NavDropdownToggleDirective;
-    }());
-    NavDropdownToggleDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[appNavDropdownToggle]'
-                },] }
-    ];
-    NavDropdownToggleDirective.ctorParameters = function () { return [
-        { type: NavDropdownDirective }
-    ]; };
-    NavDropdownToggleDirective.propDecorators = {
-        toggleOpen: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
-
-    var AppSidebarNavDividerComponent = /** @class */ (function () {
-        function AppSidebarNavDividerComponent() {
-        }
-        AppSidebarNavDividerComponent.prototype.ngOnInit = function () { };
-        return AppSidebarNavDividerComponent;
-    }());
-    AppSidebarNavDividerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-nav-divider, cui-sidebar-nav-divider',
-                    template: ""
-                },] }
-    ];
-    AppSidebarNavDividerComponent.ctorParameters = function () { return []; };
-    AppSidebarNavDividerComponent.propDecorators = {
-        item: [{ type: i0.Input }]
-    };
-
-    var AppSidebarNavDropdownComponent = /** @class */ (function () {
-        function AppSidebarNavDropdownComponent(helper) {
-            this.helper = helper;
-        }
-        return AppSidebarNavDropdownComponent;
-    }());
-    AppSidebarNavDropdownComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-nav-dropdown, cui-sidebar-nav-dropdown',
-                    template: "\n    <a class=\"nav-link nav-dropdown-toggle\"\n       appNavDropdownToggle\n       [appHtmlAttr]=\"item.attributes\">\n      <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"item | appSidebarNavIcon\"></i>\n      <ng-container>{{item.name}}</ng-container>\n      <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | appSidebarNavBadge\">{{ item.badge.text }}</span>\n    </a>\n    <app-sidebar-nav-items\n      class=\"nav-dropdown-items\"\n      [items]=\"item.children\">\n    </app-sidebar-nav-items>\n  ",
-                    providers: [SidebarNavHelper],
-                    styles: ['.nav-dropdown-toggle { cursor: pointer; }',
-                        '.nav-dropdown-items { display: block; }']
-                },] }
-    ];
-    AppSidebarNavDropdownComponent.ctorParameters = function () { return [
-        { type: SidebarNavHelper }
-    ]; };
-    AppSidebarNavDropdownComponent.propDecorators = {
-        item: [{ type: i0.Input }]
-    };
+    AppSidebarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarComponent, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }, { token: AppSidebarService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarComponent, selector: "app-sidebar, cui-sidebar", inputs: { compact: "compact", display: "display", fixed: "fixed", offCanvas: "offCanvas", minimized: "minimized" }, outputs: { minimizedChange: "minimizedChange" }, host: { properties: { "class.sidebar": "this.sidebarClass" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar, cui-sidebar',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }, { type: AppSidebarService }];
+        }, propDecorators: { compact: [{
+                    type: i0.Input
+                }], display: [{
+                    type: i0.Input
+                }], fixed: [{
+                    type: i0.Input
+                }], offCanvas: [{
+                    type: i0.Input
+                }], minimized: [{
+                    type: i0.Input
+                }], minimizedChange: [{
+                    type: i0.Output
+                }], sidebarClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.sidebar']
+                }] } });
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -1382,133 +1280,84 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var AppSidebarNavItemsComponent = /** @class */ (function () {
-        function AppSidebarNavItemsComponent(document, renderer, router, helper) {
-            this.document = document;
-            this.renderer = renderer;
-            this.router = router;
-            this.helper = helper;
-        }
-        Object.defineProperty(AppSidebarNavItemsComponent.prototype, "items", {
-            get: function () {
-                return this._items;
-            },
-            set: function (items) {
-                this._items = __spread(items);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AppSidebarNavItemsComponent.prototype.hideMobile = function () {
-            if (this.document.body.classList.contains('sidebar-show')) {
-                this.renderer.removeClass(this.document.body, 'sidebar-show');
-            }
-        };
-        return AppSidebarNavItemsComponent;
-    }());
-    AppSidebarNavItemsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-nav-items, cui-sidebar-nav-items',
-                    template: "\n    <ng-container *ngFor=\"let item of items\">\n      <ng-container [ngSwitch]=\"helper.itemType(item)\">\n        <app-sidebar-nav-dropdown\n          *ngSwitchCase=\"'dropdown'\"\n          [item]=\"item\"\n          [class.open]=\"helper.isActive(router, item)\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          appNavDropdown\n          routerLinkActive=\"open\">\n        </app-sidebar-nav-dropdown>\n        <app-sidebar-nav-divider\n          *ngSwitchCase=\"'divider'\"\n          [item]=\"item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          [appHtmlAttr]=\"item.attributes\">\n        </app-sidebar-nav-divider>\n        <app-sidebar-nav-title\n          *ngSwitchCase=\"'title'\"\n          [item]=\"item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          [appHtmlAttr]=\"item.attributes\">\n        </app-sidebar-nav-title>\n        <app-sidebar-nav-label\n          *ngSwitchCase=\"'label'\"\n          [item]=\"item\"\n          class=\"nav-item\"\n          [ngClass]=\"item | appSidebarNavItemClass\">\n        </app-sidebar-nav-label>\n        <ng-container\n          *ngSwitchCase=\"'empty'\">\n        </ng-container>\n        <app-sidebar-nav-link\n          *ngSwitchDefault\n          [item]=\"item\"\n          class=\"nav-item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          (linkClick)=\"hideMobile()\"\n        >\n        </app-sidebar-nav-link>\n      </ng-container>\n    </ng-container>\n  "
-                },] }
-    ];
-    AppSidebarNavItemsComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.Renderer2 },
-        { type: i1.Router },
-        { type: SidebarNavHelper }
-    ]; };
-    AppSidebarNavItemsComponent.propDecorators = {
-        items: [{ type: i0.Input }]
-    };
-
-    var AppSidebarNavLinkContentComponent = /** @class */ (function () {
-        function AppSidebarNavLinkContentComponent(helper) {
-            this.helper = helper;
+    var SidebarNavService = /** @class */ (function () {
+        function SidebarNavService() {
         }
-        AppSidebarNavLinkContentComponent.prototype.ngOnInit = function () { };
-        AppSidebarNavLinkContentComponent.prototype.ngOnDestroy = function () { };
-        return AppSidebarNavLinkContentComponent;
+        return SidebarNavService;
     }());
-    AppSidebarNavLinkContentComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-nav-link-content, cui-sidebar-nav-link-content',
-                    template: "\n    <ng-container *ngIf=\"true\">\n      <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"item | appSidebarNavIcon\"></i>\n      <ng-container>{{item.name}}</ng-container>\n      <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | appSidebarNavBadge\">{{ item.badge.text }}</span>\n    </ng-container>\n  ",
-                    providers: [SidebarNavHelper]
-                },] }
-    ];
-    AppSidebarNavLinkContentComponent.ctorParameters = function () { return [
-        { type: SidebarNavHelper }
-    ]; };
-    AppSidebarNavLinkContentComponent.propDecorators = {
-        item: [{ type: i0.Input }]
-    };
-    var AppSidebarNavLinkComponent = /** @class */ (function () {
-        function AppSidebarNavLinkComponent(router) {
-            this.router = router;
-            this.linkClick = new i0.EventEmitter();
-            this.navigationEndObservable = router.events.pipe(operators.filter(function (event) {
-                return event instanceof i1.NavigationEnd;
-            }));
+    SidebarNavService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarNavService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SidebarNavService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarNavService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarNavService, decorators: [{
+                type: i0.Injectable
+            }] });
+    var SidebarNavHelper = /** @class */ (function () {
+        function SidebarNavHelper() {
+            this.hasBadge = function (item) { return Boolean(item.badge); };
+            this.hasIcon = function (item) { return Boolean(item.icon); };
         }
-        Object.defineProperty(AppSidebarNavLinkComponent.prototype, "item", {
-            get: function () {
-                return this._Item;
-            },
-            set: function (item) {
-                this._Item = JSON.parse(JSON.stringify(item));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AppSidebarNavLinkComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.url = typeof this.item.url === 'string' ? this.item.url : this.router.serializeUrl(this.router.createUrlTree(this.item.url));
-            this.linkType = this.getLinkType();
-            this.href = this.isDisabled() ? '' : (this.item.href || this.url);
-            this.linkActive = this.router.url.split(/[?#(;]/)[0] === this.href.split(/[?#(;]/)[0];
-            this.navSubscription = this.navigationEndObservable.subscribe(function (event) {
-                var itemUrlArray = _this.href.split(/[?#(;]/)[0].split('/');
-                var urlArray = event.urlAfterRedirects.split(/[?#(;]/)[0].split('/');
-                _this.linkActive = itemUrlArray.every(function (value, index) { return value === urlArray[index]; });
-            });
-        };
-        AppSidebarNavLinkComponent.prototype.ngOnDestroy = function () {
-            this.navSubscription.unsubscribe();
-        };
-        AppSidebarNavLinkComponent.prototype.getLinkType = function () {
-            return this.isDisabled() ? 'disabled' : this.isExternalLink() ? 'external' : 'link';
-        };
-        AppSidebarNavLinkComponent.prototype.isDisabled = function () {
-            return (this.item.attributes && this.item.attributes.disabled) ? true : null;
+        SidebarNavHelper.prototype.itemType = function (item) {
+            if (item.divider) {
+                return 'divider';
+            }
+            else if (item.title) {
+                return 'title';
+            }
+            else if (item.children) {
+                return 'dropdown';
+            }
+            else if (item.label) {
+                return 'label';
+            }
+            else if (!Object.keys(item).length) {
+                return 'empty';
+            }
+            return 'link';
         };
-        AppSidebarNavLinkComponent.prototype.isExternalLink = function () {
-            return !!this.item.href || this.url.substring(0, 4) === 'http';
+        SidebarNavHelper.prototype.isActive = function (router, item) {
+            return router.isActive(item.url, false);
         };
-        AppSidebarNavLinkComponent.prototype.linkClicked = function () {
-            this.linkClick.emit();
+        SidebarNavHelper.prototype.getIconClass = function (item) {
+            var classes = {
+                'nav-icon': true
+            };
+            if (this.hasIcon(item)) {
+                var icon = item.icon;
+                // @ts-ignore
+                classes[icon] = this.hasIcon(item);
+            }
+            return classes;
         };
-        return AppSidebarNavLinkComponent;
+        return SidebarNavHelper;
     }());
-    AppSidebarNavLinkComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-nav-link, cui-sidebar-nav-link',
-                    template: "<ng-container [ngSwitch]=\"linkType\">\r\n  <a *ngSwitchCase=\"'disabled'\"\r\n     [ngClass]=\"item | appSidebarNavLink\"\r\n     [appHtmlAttr]=\"item.attributes\"\r\n  >\r\n    <app-sidebar-nav-link-content [item]=\"item\"></app-sidebar-nav-link-content>\r\n  </a>\r\n  <a *ngSwitchCase=\"'external'\"\r\n     [ngClass]=\"item | appSidebarNavLink\"\r\n     [href]=\"href\"\r\n     [appHtmlAttr]=\"item.attributes\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n    <app-sidebar-nav-link-content [item]=\"item\"></app-sidebar-nav-link-content>\r\n  </a>\r\n  <a *ngSwitchDefault\r\n     [ngClass]=\"item | appSidebarNavLink\"\r\n     [appHtmlAttr]=\"item.attributes\"\r\n     [target]=\"item.attributes?.target\"\r\n     [queryParams]=\"item.linkProps?.queryParams\"\r\n     [fragment]=\"item.linkProps?.fragment\"\r\n     [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\r\n     [preserveFragment]=\"item.linkProps?.preserveFragment\"\r\n     [skipLocationChange]=\"item.linkProps?.skipLocationChange\"\r\n     [replaceUrl]=\"item.linkProps?.replaceUrl\"\r\n     [state]=\"item.linkProps?.state\"\r\n     [routerLink]=\"item.url\"\r\n     [routerLinkActive]=\"item.linkProps?.routerLinkActive || 'active'\"\r\n     [routerLinkActiveOptions]=\"item.linkProps?.routerLinkActiveOptions?.exact ? item.linkProps?.routerLinkActiveOptions : {exact: false}\"\r\n     [class.active]=\"linkActive && !item.linkProps?.routerLinkActiveOptions\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n    <app-sidebar-nav-link-content [item]=\"item\"></app-sidebar-nav-link-content>\r\n  </a>\r\n</ng-container>\r\n",
-                    providers: [SidebarNavHelper]
-                },] }
-    ];
-    AppSidebarNavLinkComponent.ctorParameters = function () { return [
-        { type: i1.Router }
-    ]; };
-    AppSidebarNavLinkComponent.propDecorators = {
-        item: [{ type: i0.Input }],
-        linkClick: [{ type: i0.Output }]
-    };
+    SidebarNavHelper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarNavHelper, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SidebarNavHelper.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarNavHelper });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SidebarNavHelper, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var AppSidebarNavDividerComponent = /** @class */ (function () {
+        function AppSidebarNavDividerComponent() {
+        }
+        AppSidebarNavDividerComponent.prototype.ngOnInit = function () { };
+        return AppSidebarNavDividerComponent;
+    }());
+    AppSidebarNavDividerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavDividerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarNavDividerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarNavDividerComponent, selector: "app-sidebar-nav-divider, cui-sidebar-nav-divider", inputs: { item: "item" }, ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavDividerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-nav-divider, cui-sidebar-nav-divider',
+                        template: ""
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
 
     var AppSidebarNavTitleComponent = /** @class */ (function () {
         function AppSidebarNavTitleComponent(el, renderer) {
             this.el = el;
             this.renderer = renderer;
+            this.item = {};
         }
         AppSidebarNavTitleComponent.prototype.ngOnInit = function () {
             var nativeElement = this.el.nativeElement;
@@ -1559,23 +1408,45 @@
         };
         return AppSidebarNavTitleComponent;
     }());
-    AppSidebarNavTitleComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-nav-title, cui-sidebar-nav-title',
-                    template: ''
-                },] }
-    ];
-    AppSidebarNavTitleComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 }
-    ]; };
-    AppSidebarNavTitleComponent.propDecorators = {
-        item: [{ type: i0.Input }]
-    };
+    AppSidebarNavTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavTitleComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarNavTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarNavTitleComponent, selector: "app-sidebar-nav-title, cui-sidebar-nav-title", inputs: { item: "item" }, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavTitleComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-nav-title, cui-sidebar-nav-title',
+                        template: '',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
+
+    var AppSidebarNavBadgePipe = /** @class */ (function () {
+        function AppSidebarNavBadgePipe() {
+        }
+        AppSidebarNavBadgePipe.prototype.transform = function (item, args) {
+            var classes = {
+                badge: true
+            };
+            var variant = "badge-" + item.badge.variant;
+            classes[variant] = !!item.badge.variant;
+            classes[item.badge.class] = !!item.badge.class;
+            return classes;
+        };
+        return AppSidebarNavBadgePipe;
+    }());
+    AppSidebarNavBadgePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavBadgePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    AppSidebarNavBadgePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavBadgePipe, name: "appSidebarNavBadge" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavBadgePipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'appSidebarNavBadge'
+                    }]
+            }] });
 
     var AppSidebarNavLabelComponent = /** @class */ (function () {
         function AppSidebarNavLabelComponent(helper) {
             this.helper = helper;
+            this.item = {};
             this.classes = {
                 'nav-label': true,
                 active: true
@@ -1587,30 +1458,33 @@
         };
         AppSidebarNavLabelComponent.prototype.getItemClass = function () {
             var itemClass = this.item.class;
+            // @ts-ignore
             this.classes[itemClass] = !!itemClass;
             return this.classes;
         };
         AppSidebarNavLabelComponent.prototype.getLabelIconClass = function () {
-            var variant = "text-" + this.item.label.variant;
-            this.iconClasses[variant] = !!this.item.label.variant;
-            var labelClass = this.item.label.class;
+            var _a, _b, _c;
+            var variant = "text-" + ((_a = this.item.label) === null || _a === void 0 ? void 0 : _a.variant);
+            // @ts-ignore
+            this.iconClasses[variant] = !!((_b = this.item.label) === null || _b === void 0 ? void 0 : _b.variant);
+            var labelClass = (_c = this.item.label) === null || _c === void 0 ? void 0 : _c.class;
+            // @ts-ignore
             this.iconClasses[labelClass] = !!labelClass;
             return this.iconClasses;
         };
         return AppSidebarNavLabelComponent;
     }());
-    AppSidebarNavLabelComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-sidebar-nav-label, cui-sidebar-nav-label',
-                    template: "<a [ngClass]=\"getItemClass()\"\r\n   href=\"{{item.url}}\"\r\n   [appHtmlAttr]=\"item.attributes\">\r\n  <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"getLabelIconClass()\"></i>\r\n  <ng-container>{{item.name}}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | appSidebarNavBadge\">{{ item.badge.text }}</span>\r\n</a>\r\n"
-                },] }
-    ];
-    AppSidebarNavLabelComponent.ctorParameters = function () { return [
-        { type: SidebarNavHelper }
-    ]; };
-    AppSidebarNavLabelComponent.propDecorators = {
-        item: [{ type: i0.Input }]
-    };
+    AppSidebarNavLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLabelComponent, deps: [{ token: SidebarNavHelper }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarNavLabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarNavLabelComponent, selector: "app-sidebar-nav-label, cui-sidebar-nav-label", inputs: { item: "item" }, ngImport: i0__namespace, template: "<a [ngClass]=\"getItemClass()\"\r\n   href=\"{{item.url}}\"\r\n   [appHtmlAttr]=\"item.attributes\">\r\n  <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"getLabelIconClass()\"></i>\r\n  <ng-container>{{item.name}}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | appSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n</a>\r\n", directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: HtmlAttributesDirective, selector: "[appHtmlAttr]", inputs: ["appHtmlAttr"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "appSidebarNavBadge": AppSidebarNavBadgePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLabelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-nav-label, cui-sidebar-nav-label',
+                        templateUrl: './app-sidebar-nav-label.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: SidebarNavHelper }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
 
     var AppSidebarNavIconPipe = /** @class */ (function () {
         function AppSidebarNavIconPipe() {
@@ -1625,31 +1499,14 @@
         };
         return AppSidebarNavIconPipe;
     }());
-    AppSidebarNavIconPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'appSidebarNavIcon'
-                },] }
-    ];
-
-    var AppSidebarNavBadgePipe = /** @class */ (function () {
-        function AppSidebarNavBadgePipe() {
-        }
-        AppSidebarNavBadgePipe.prototype.transform = function (item, args) {
-            var classes = {
-                badge: true
-            };
-            var variant = "badge-" + item.badge.variant;
-            classes[variant] = !!item.badge.variant;
-            classes[item.badge.class] = !!item.badge.class;
-            return classes;
-        };
-        return AppSidebarNavBadgePipe;
-    }());
-    AppSidebarNavBadgePipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'appSidebarNavBadge'
-                },] }
-    ];
+    AppSidebarNavIconPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavIconPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    AppSidebarNavIconPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavIconPipe, name: "appSidebarNavIcon" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavIconPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'appSidebarNavIcon'
+                    }]
+            }] });
 
     var AppSidebarNavLinkPipe = /** @class */ (function () {
         function AppSidebarNavLinkPipe() {
@@ -1664,11 +1521,140 @@
         };
         return AppSidebarNavLinkPipe;
     }());
-    AppSidebarNavLinkPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'appSidebarNavLink'
-                },] }
-    ];
+    AppSidebarNavLinkPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLinkPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    AppSidebarNavLinkPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLinkPipe, name: "appSidebarNavLink" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLinkPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'appSidebarNavLink'
+                    }]
+            }] });
+
+    var AppSidebarNavLinkContentComponent = /** @class */ (function () {
+        function AppSidebarNavLinkContentComponent(helper) {
+            this.helper = helper;
+            this.item = {};
+        }
+        AppSidebarNavLinkContentComponent.prototype.ngOnInit = function () { };
+        AppSidebarNavLinkContentComponent.prototype.ngOnDestroy = function () { };
+        return AppSidebarNavLinkContentComponent;
+    }());
+    AppSidebarNavLinkContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLinkContentComponent, deps: [{ token: SidebarNavHelper }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarNavLinkContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarNavLinkContentComponent, selector: "app-sidebar-nav-link-content, cui-sidebar-nav-link-content", inputs: { item: "item" }, providers: [SidebarNavHelper], ngImport: i0__namespace, template: "\n    <ng-container *ngIf=\"true\">\n      <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"item | appSidebarNavIcon\"></i>\n      <ng-container>{{item?.name}}</ng-container>\n      <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | appSidebarNavBadge\">{{ item?.badge?.text }}</span>\n    </ng-container>\n  ", isInline: true, directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "appSidebarNavIcon": AppSidebarNavIconPipe, "appSidebarNavBadge": AppSidebarNavBadgePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLinkContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-nav-link-content, cui-sidebar-nav-link-content',
+                        template: "\n    <ng-container *ngIf=\"true\">\n      <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"item | appSidebarNavIcon\"></i>\n      <ng-container>{{item?.name}}</ng-container>\n      <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | appSidebarNavBadge\">{{ item?.badge?.text }}</span>\n    </ng-container>\n  ",
+                        providers: [SidebarNavHelper]
+                    }]
+            }], ctorParameters: function () { return [{ type: SidebarNavHelper }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
+    var AppSidebarNavLinkComponent = /** @class */ (function () {
+        function AppSidebarNavLinkComponent(router) {
+            this.router = router;
+            this.linkClick = new i0.EventEmitter();
+            this.navigationEndObservable = router.events.pipe(operators.filter(function (event) {
+                return event instanceof i1.NavigationEnd;
+            }));
+        }
+        Object.defineProperty(AppSidebarNavLinkComponent.prototype, "item", {
+            get: function () {
+                return this._Item;
+            },
+            set: function (item) {
+                this._Item = JSON.parse(JSON.stringify(item));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AppSidebarNavLinkComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            // @ts-ignore
+            this.url = typeof this.item.url === 'string' ? this.item.url : this.router.serializeUrl(this.router.createUrlTree(this.item.url));
+            this.linkType = this.getLinkType();
+            this.href = this.isDisabled() ? '' : (this.item.href || this.url);
+            this.linkActive = this.router.url.split(/[?#(;]/)[0] === this.href.split(/[?#(;]/)[0];
+            this.navSubscription = this.navigationEndObservable.subscribe(function (event) {
+                var itemUrlArray = _this.href.split(/[?#(;]/)[0].split('/');
+                var urlArray = event.urlAfterRedirects.split(/[?#(;]/)[0].split('/');
+                _this.linkActive = itemUrlArray.every(function (value, index) { return value === urlArray[index]; });
+            });
+        };
+        AppSidebarNavLinkComponent.prototype.ngOnDestroy = function () {
+            this.navSubscription.unsubscribe();
+        };
+        AppSidebarNavLinkComponent.prototype.getLinkType = function () {
+            return this.isDisabled() ? 'disabled' : this.isExternalLink() ? 'external' : 'link';
+        };
+        AppSidebarNavLinkComponent.prototype.isDisabled = function () {
+            return (this.item.attributes && this.item.attributes.disabled) ? true : null;
+        };
+        AppSidebarNavLinkComponent.prototype.isExternalLink = function () {
+            return !!this.item.href || this.url.substring(0, 4) === 'http';
+        };
+        AppSidebarNavLinkComponent.prototype.linkClicked = function () {
+            this.linkClick.emit();
+        };
+        return AppSidebarNavLinkComponent;
+    }());
+    AppSidebarNavLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLinkComponent, deps: [{ token: i1__namespace.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarNavLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarNavLinkComponent, selector: "app-sidebar-nav-link, cui-sidebar-nav-link", inputs: { item: "item" }, outputs: { linkClick: "linkClick" }, providers: [SidebarNavHelper], ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"linkType\">\r\n  <a *ngSwitchCase=\"'disabled'\"\r\n     [ngClass]=\"item | appSidebarNavLink\"\r\n     [appHtmlAttr]=\"item.attributes\"\r\n  >\r\n    <app-sidebar-nav-link-content [item]=\"item\"></app-sidebar-nav-link-content>\r\n  </a>\r\n  <a *ngSwitchCase=\"'external'\"\r\n     [ngClass]=\"item | appSidebarNavLink\"\r\n     [href]=\"href\"\r\n     [appHtmlAttr]=\"item.attributes\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n    <app-sidebar-nav-link-content [item]=\"item\"></app-sidebar-nav-link-content>\r\n  </a>\r\n  <a *ngSwitchDefault\r\n     [ngClass]=\"item | appSidebarNavLink\"\r\n     [appHtmlAttr]=\"item.attributes\"\r\n     [target]=\"item.attributes?.target\"\r\n     [queryParams]=\"item.linkProps?.queryParams\"\r\n     [fragment]=\"item.linkProps?.fragment\"\r\n     [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\r\n     [preserveFragment]=\"!!item.linkProps?.preserveFragment\"\r\n     [skipLocationChange]=\"!!item.linkProps?.skipLocationChange\"\r\n     [replaceUrl]=\"!!item.linkProps?.replaceUrl\"\r\n     [state]=\"item.linkProps?.state\"\r\n     [routerLink]=\"item.url\"\r\n     [routerLinkActive]=\"item.linkProps?.routerLinkActive || 'active'\"\r\n     [routerLinkActiveOptions]=\"item.linkProps?.routerLinkActiveOptions ?? {exact: false}\"\r\n     [class.active]=\"linkActive && !item.linkProps?.routerLinkActiveOptions\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n    <app-sidebar-nav-link-content [item]=\"item\"></app-sidebar-nav-link-content>\r\n  </a>\r\n</ng-container>\r\n", components: [{ type: AppSidebarNavLinkContentComponent, selector: "app-sidebar-nav-link-content, cui-sidebar-nav-link-content", inputs: ["item"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: HtmlAttributesDirective, selector: "[appHtmlAttr]", inputs: ["appHtmlAttr"] }, { type: i2__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }], pipes: { "appSidebarNavLink": AppSidebarNavLinkPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavLinkComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-nav-link, cui-sidebar-nav-link',
+                        templateUrl: './app-sidebar-nav-link.component.html',
+                        providers: [SidebarNavHelper]
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.Router }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }], linkClick: [{
+                    type: i0.Output
+                }] } });
+
+    var NavDropdownDirective = /** @class */ (function () {
+        function NavDropdownDirective(el) {
+            this.el = el;
+        }
+        NavDropdownDirective.prototype.toggle = function () {
+            this.el.nativeElement.classList.toggle('open');
+        };
+        return NavDropdownDirective;
+    }());
+    NavDropdownDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NavDropdownDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    NavDropdownDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NavDropdownDirective, selector: "[appNavDropdown]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NavDropdownDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appNavDropdown]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
+    /**
+     * Allows the dropdown to be toggled via click.
+     */
+    var NavDropdownToggleDirective = /** @class */ (function () {
+        function NavDropdownToggleDirective(dropdown) {
+            this.dropdown = dropdown;
+        }
+        NavDropdownToggleDirective.prototype.toggleOpen = function ($event) {
+            $event.preventDefault();
+            this.dropdown.toggle();
+        };
+        return NavDropdownToggleDirective;
+    }());
+    NavDropdownToggleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NavDropdownToggleDirective, deps: [{ token: NavDropdownDirective }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    NavDropdownToggleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NavDropdownToggleDirective, selector: "[appNavDropdownToggle]", host: { listeners: { "click": "toggleOpen($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NavDropdownToggleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[appNavDropdownToggle]'
+                    }]
+            }], ctorParameters: function () { return [{ type: NavDropdownDirective }]; }, propDecorators: { toggleOpen: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
 
     var AppSidebarNavItemClassPipe = /** @class */ (function () {
         function AppSidebarNavItemClassPipe(helper) {
@@ -1694,73 +1680,306 @@
         };
         return AppSidebarNavItemClassPipe;
     }());
-    AppSidebarNavItemClassPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'appSidebarNavItemClass'
-                },] }
-    ];
-    AppSidebarNavItemClassPipe.ctorParameters = function () { return [
-        { type: SidebarNavHelper }
-    ]; };
+    AppSidebarNavItemClassPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavItemClassPipe, deps: [{ token: SidebarNavHelper }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    AppSidebarNavItemClassPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavItemClassPipe, name: "appSidebarNavItemClass" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavItemClassPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'appSidebarNavItemClass'
+                    }]
+            }], ctorParameters: function () { return [{ type: SidebarNavHelper }]; } });
+
+    var AppSidebarNavItemsComponent = /** @class */ (function () {
+        function AppSidebarNavItemsComponent(document, renderer, router, helper) {
+            this.document = document;
+            this.renderer = renderer;
+            this.router = router;
+            this.helper = helper;
+            this._items = [];
+        }
+        Object.defineProperty(AppSidebarNavItemsComponent.prototype, "items", {
+            get: function () {
+                return this._items;
+            },
+            set: function (items) {
+                this._items = __spreadArray([], __read(items));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AppSidebarNavItemsComponent.prototype.hideMobile = function () {
+            if (this.document.body.classList.contains('sidebar-show')) {
+                this.renderer.removeClass(this.document.body, 'sidebar-show');
+            }
+        };
+        return AppSidebarNavItemsComponent;
+    }());
+    AppSidebarNavItemsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavItemsComponent, deps: [{ token: i2.DOCUMENT }, { token: i0__namespace.Renderer2 }, { token: i1__namespace.Router }, { token: SidebarNavHelper }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarNavItemsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarNavItemsComponent, selector: "app-sidebar-nav-items, cui-sidebar-nav-items", inputs: { items: "items" }, ngImport: i0__namespace, template: "\n    <ng-container *ngFor=\"let item of items\">\n      <ng-container [ngSwitch]=\"helper.itemType(item)\">\n        <app-sidebar-nav-dropdown\n          *ngSwitchCase=\"'dropdown'\"\n          [item]=\"item\"\n          [class.open]=\"helper.isActive(router, item)\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          appNavDropdown\n          routerLinkActive=\"open\">\n        </app-sidebar-nav-dropdown>\n        <app-sidebar-nav-divider\n          *ngSwitchCase=\"'divider'\"\n          [item]=\"item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          [appHtmlAttr]=\"item.attributes\">\n        </app-sidebar-nav-divider>\n        <app-sidebar-nav-title\n          *ngSwitchCase=\"'title'\"\n          [item]=\"item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          [appHtmlAttr]=\"item.attributes\">\n        </app-sidebar-nav-title>\n        <app-sidebar-nav-label\n          *ngSwitchCase=\"'label'\"\n          [item]=\"item\"\n          class=\"nav-item\"\n          [ngClass]=\"item | appSidebarNavItemClass\">\n        </app-sidebar-nav-label>\n        <ng-container\n          *ngSwitchCase=\"'empty'\">\n        </ng-container>\n        <app-sidebar-nav-link\n          *ngSwitchDefault\n          [item]=\"item\"\n          class=\"nav-item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          (linkClick)=\"hideMobile()\"\n        >\n        </app-sidebar-nav-link>\n      </ng-container>\n    </ng-container>\n  ", isInline: true, components: [{ type: i0__namespace.forwardRef(function () { return AppSidebarNavDropdownComponent; }), selector: "app-sidebar-nav-dropdown, cui-sidebar-nav-dropdown", inputs: ["item"] }, { type: i0__namespace.forwardRef(function () { return AppSidebarNavDividerComponent; }), selector: "app-sidebar-nav-divider, cui-sidebar-nav-divider", inputs: ["item"] }, { type: i0__namespace.forwardRef(function () { return AppSidebarNavTitleComponent; }), selector: "app-sidebar-nav-title, cui-sidebar-nav-title", inputs: ["item"] }, { type: i0__namespace.forwardRef(function () { return AppSidebarNavLabelComponent; }), selector: "app-sidebar-nav-label, cui-sidebar-nav-label", inputs: ["item"] }, { type: i0__namespace.forwardRef(function () { return AppSidebarNavLinkComponent; }), selector: "app-sidebar-nav-link, cui-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }], directives: [{ type: i0__namespace.forwardRef(function () { return i2__namespace.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0__namespace.forwardRef(function () { return i2__namespace.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i0__namespace.forwardRef(function () { return i2__namespace.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i0__namespace.forwardRef(function () { return NavDropdownDirective; }), selector: "[appNavDropdown]" }, { type: i0__namespace.forwardRef(function () { return i1__namespace.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i0__namespace.forwardRef(function () { return i2__namespace.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0__namespace.forwardRef(function () { return HtmlAttributesDirective; }), selector: "[appHtmlAttr]", inputs: ["appHtmlAttr"] }, { type: i0__namespace.forwardRef(function () { return i2__namespace.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }], pipes: { "appSidebarNavItemClass": i0__namespace.forwardRef(function () { return AppSidebarNavItemClassPipe; }) } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavItemsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-nav-items, cui-sidebar-nav-items',
+                        template: "\n    <ng-container *ngFor=\"let item of items\">\n      <ng-container [ngSwitch]=\"helper.itemType(item)\">\n        <app-sidebar-nav-dropdown\n          *ngSwitchCase=\"'dropdown'\"\n          [item]=\"item\"\n          [class.open]=\"helper.isActive(router, item)\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          appNavDropdown\n          routerLinkActive=\"open\">\n        </app-sidebar-nav-dropdown>\n        <app-sidebar-nav-divider\n          *ngSwitchCase=\"'divider'\"\n          [item]=\"item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          [appHtmlAttr]=\"item.attributes\">\n        </app-sidebar-nav-divider>\n        <app-sidebar-nav-title\n          *ngSwitchCase=\"'title'\"\n          [item]=\"item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          [appHtmlAttr]=\"item.attributes\">\n        </app-sidebar-nav-title>\n        <app-sidebar-nav-label\n          *ngSwitchCase=\"'label'\"\n          [item]=\"item\"\n          class=\"nav-item\"\n          [ngClass]=\"item | appSidebarNavItemClass\">\n        </app-sidebar-nav-label>\n        <ng-container\n          *ngSwitchCase=\"'empty'\">\n        </ng-container>\n        <app-sidebar-nav-link\n          *ngSwitchDefault\n          [item]=\"item\"\n          class=\"nav-item\"\n          [ngClass]=\"item | appSidebarNavItemClass\"\n          (linkClick)=\"hideMobile()\"\n        >\n        </app-sidebar-nav-link>\n      </ng-container>\n    </ng-container>\n  "
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
+                        }] }, { type: i0__namespace.Renderer2 }, { type: i1__namespace.Router }, { type: SidebarNavHelper }];
+        }, propDecorators: { items: [{
+                    type: i0.Input
+                }] } });
+    var AppSidebarNavDropdownComponent = /** @class */ (function () {
+        function AppSidebarNavDropdownComponent(helper) {
+            this.helper = helper;
+            this.item = {};
+        }
+        return AppSidebarNavDropdownComponent;
+    }());
+    AppSidebarNavDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavDropdownComponent, deps: [{ token: SidebarNavHelper }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarNavDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarNavDropdownComponent, selector: "app-sidebar-nav-dropdown, cui-sidebar-nav-dropdown", inputs: { item: "item" }, providers: [SidebarNavHelper], ngImport: i0__namespace, template: "\n    <a class=\"nav-link nav-dropdown-toggle\"\n       appNavDropdownToggle\n       [appHtmlAttr]=\"item.attributes\">\n      <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"item | appSidebarNavIcon\"></i>\n      <ng-container>{{item.name}}</ng-container>\n      <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | appSidebarNavBadge\">{{ item.badge?.text }}</span>\n    </a>\n    <app-sidebar-nav-items\n      class=\"nav-dropdown-items\"\n      [items]=\"item.children ?? []\">\n    </app-sidebar-nav-items>\n  ", isInline: true, styles: [".nav-dropdown-toggle { cursor: pointer; }", ".nav-dropdown-items { display: block; }"], components: [{ type: AppSidebarNavItemsComponent, selector: "app-sidebar-nav-items, cui-sidebar-nav-items", inputs: ["items"] }], directives: [{ type: NavDropdownToggleDirective, selector: "[appNavDropdownToggle]" }, { type: HtmlAttributesDirective, selector: "[appHtmlAttr]", inputs: ["appHtmlAttr"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "appSidebarNavIcon": AppSidebarNavIconPipe, "appSidebarNavBadge": AppSidebarNavBadgePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-nav-dropdown, cui-sidebar-nav-dropdown',
+                        template: "\n    <a class=\"nav-link nav-dropdown-toggle\"\n       appNavDropdownToggle\n       [appHtmlAttr]=\"item.attributes\">\n      <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"item | appSidebarNavIcon\"></i>\n      <ng-container>{{item.name}}</ng-container>\n      <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | appSidebarNavBadge\">{{ item.badge?.text }}</span>\n    </a>\n    <app-sidebar-nav-items\n      class=\"nav-dropdown-items\"\n      [items]=\"item.children ?? []\">\n    </app-sidebar-nav-items>\n  ",
+                        styles: [
+                            '.nav-dropdown-toggle { cursor: pointer; }',
+                            '.nav-dropdown-items { display: block; }'
+                        ],
+                        providers: [SidebarNavHelper]
+                    }]
+            }], ctorParameters: function () { return [{ type: SidebarNavHelper }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
+
+    var AppSidebarNavComponent = /** @class */ (function () {
+        function AppSidebarNavComponent(router) {
+            this.router = router;
+            this.navItems = [];
+            this.sidebarNavClass = true;
+            this.role = 'nav';
+            this.navItemsArray = [];
+        }
+        AppSidebarNavComponent.prototype.ngOnChanges = function (changes) {
+            this.navItemsArray = Array.isArray(this.navItems) ? this.navItems.slice() : [];
+        };
+        return AppSidebarNavComponent;
+    }());
+    AppSidebarNavComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavComponent, deps: [{ token: i1__namespace.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarNavComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarNavComponent, selector: "app-sidebar-nav, cui-sidebar-nav", inputs: { navItems: "navItems", role: "role" }, host: { properties: { "class.sidebar-nav": "this.sidebarNavClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0__namespace, template: "<app-sidebar-nav-items\n  class=\"nav\"\n  [items]=\"navItemsArray\">\n</app-sidebar-nav-items>\n", components: [{ type: AppSidebarNavItemsComponent, selector: "app-sidebar-nav-items, cui-sidebar-nav-items", inputs: ["items"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarNavComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-nav, cui-sidebar-nav',
+                        templateUrl: './app-sidebar-nav.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.Router }]; }, propDecorators: { navItems: [{
+                    type: i0.Input
+                }], sidebarNavClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.sidebar-nav']
+                }], role: [{
+                    type: i0.HostBinding,
+                    args: ['attr.role']
+                }, {
+                    type: i0.Input
+                }] } });
+
+    var AppSidebarMinimizerComponent = /** @class */ (function () {
+        function AppSidebarMinimizerComponent(sidebarService) {
+            this.sidebarService = sidebarService;
+            this.role = 'button';
+            this.sidebarMinimizerClass = true;
+        }
+        AppSidebarMinimizerComponent.prototype.toggleOpen = function ($event) {
+            $event.preventDefault();
+            this.sidebarService.toggle({ minimize: 'toggle' });
+        };
+        return AppSidebarMinimizerComponent;
+    }());
+    AppSidebarMinimizerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarMinimizerComponent, deps: [{ token: AppSidebarService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarMinimizerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarMinimizerComponent, selector: "app-sidebar-minimizer, cui-sidebar-minimizer", inputs: { role: "role" }, host: { listeners: { "click": "toggleOpen($event)" }, properties: { "attr.role": "this.role", "class.sidebar-minimizer": "this.sidebarMinimizerClass" } }, ngImport: i0__namespace, template: "", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarMinimizerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-minimizer, cui-sidebar-minimizer',
+                        template: ""
+                    }]
+            }], ctorParameters: function () { return [{ type: AppSidebarService }]; }, propDecorators: { role: [{
+                    type: i0.HostBinding,
+                    args: ['attr.role']
+                }, {
+                    type: i0.Input
+                }], sidebarMinimizerClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.sidebar-minimizer']
+                }], toggleOpen: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
+
+    var AppSidebarFooterComponent = /** @class */ (function () {
+        function AppSidebarFooterComponent() {
+            this.sidebarFooterClass = true;
+        }
+        return AppSidebarFooterComponent;
+    }());
+    AppSidebarFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarFooterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarFooterComponent, selector: "app-sidebar-footer, cui-sidebar-footer", host: { properties: { "class.sidebar-footer": "this.sidebarFooterClass" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarFooterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-footer, cui-sidebar-footer',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { sidebarFooterClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.sidebar-footer']
+                }] } });
+
+    var AppSidebarFormComponent = /** @class */ (function () {
+        function AppSidebarFormComponent() {
+            this.sidebarFormClass = true;
+        }
+        return AppSidebarFormComponent;
+    }());
+    AppSidebarFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarFormComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarFormComponent, selector: "app-sidebar-form, cui-sidebar-form", host: { properties: { "class.sidebar-form": "this.sidebarFormClass" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarFormComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-form, cui-sidebar-form',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { sidebarFormClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.sidebar-form']
+                }] } });
+
+    var AppSidebarHeaderComponent = /** @class */ (function () {
+        function AppSidebarHeaderComponent() {
+            this.sidebarHeaderClass = true;
+        }
+        return AppSidebarHeaderComponent;
+    }());
+    AppSidebarHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppSidebarHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppSidebarHeaderComponent, selector: "app-sidebar-header, cui-sidebar-header", host: { properties: { "class.sidebar-header": "this.sidebarHeaderClass" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-sidebar-header, cui-sidebar-header',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { sidebarHeaderClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.sidebar-header']
+                }] } });
 
     var AppSidebarModule = /** @class */ (function () {
         function AppSidebarModule() {
         }
         return AppSidebarModule;
     }());
-    AppSidebarModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        i1.RouterModule,
-                        LayoutModule
-                    ],
-                    exports: [
-                        AppSidebarFooterComponent,
-                        AppSidebarFormComponent,
-                        AppSidebarHeaderComponent,
-                        AppSidebarMinimizerComponent,
-                        AppSidebarComponent,
-                        AppSidebarNavItemsComponent,
-                        AppSidebarNavComponent,
-                        AppSidebarNavDividerComponent,
-                        AppSidebarNavDropdownComponent,
-                        AppSidebarNavLabelComponent,
-                        AppSidebarNavLinkComponent,
-                        AppSidebarNavLinkContentComponent,
-                        AppSidebarNavTitleComponent,
-                        NavDropdownDirective,
-                        NavDropdownToggleDirective,
-                        LayoutModule
-                    ],
-                    declarations: [
-                        AppSidebarFooterComponent,
-                        AppSidebarFormComponent,
-                        AppSidebarHeaderComponent,
-                        AppSidebarMinimizerComponent,
-                        AppSidebarMinimizerComponent,
-                        AppSidebarComponent,
-                        AppSidebarNavItemsComponent,
-                        AppSidebarNavComponent,
-                        AppSidebarNavDividerComponent,
-                        AppSidebarNavDropdownComponent,
-                        AppSidebarNavLinkComponent,
-                        AppSidebarNavLinkContentComponent,
-                        AppSidebarNavTitleComponent,
-                        NavDropdownDirective,
-                        NavDropdownToggleDirective,
-                        AppSidebarNavLabelComponent,
-                        AppSidebarNavIconPipe,
-                        AppSidebarNavBadgePipe,
-                        AppSidebarNavLinkPipe,
-                        AppSidebarNavItemClassPipe
-                    ],
-                    providers: [
-                        SidebarNavHelper,
-                        AppSidebarService
-                    ]
-                },] }
-    ];
+    AppSidebarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AppSidebarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarModule, declarations: [AppSidebarFooterComponent,
+            AppSidebarFormComponent,
+            AppSidebarHeaderComponent,
+            AppSidebarMinimizerComponent,
+            AppSidebarMinimizerComponent,
+            AppSidebarComponent,
+            AppSidebarNavItemsComponent,
+            AppSidebarNavComponent,
+            AppSidebarNavDividerComponent,
+            AppSidebarNavDropdownComponent,
+            AppSidebarNavLinkComponent,
+            AppSidebarNavLinkContentComponent,
+            AppSidebarNavTitleComponent,
+            NavDropdownDirective,
+            NavDropdownToggleDirective,
+            AppSidebarNavLabelComponent,
+            AppSidebarNavIconPipe,
+            AppSidebarNavBadgePipe,
+            AppSidebarNavLinkPipe,
+            AppSidebarNavItemClassPipe], imports: [i2.CommonModule,
+            i1.RouterModule,
+            LayoutModule], exports: [AppSidebarFooterComponent,
+            AppSidebarFormComponent,
+            AppSidebarHeaderComponent,
+            AppSidebarMinimizerComponent,
+            AppSidebarComponent,
+            // AppSidebarNavItemsComponent,
+            AppSidebarNavComponent] });
+    AppSidebarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarModule, providers: [
+            SidebarNavHelper,
+            AppSidebarService
+        ], imports: [[
+                i2.CommonModule,
+                i1.RouterModule,
+                LayoutModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppSidebarModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i2.CommonModule,
+                            i1.RouterModule,
+                            LayoutModule
+                        ],
+                        exports: [
+                            AppSidebarFooterComponent,
+                            AppSidebarFormComponent,
+                            AppSidebarHeaderComponent,
+                            AppSidebarMinimizerComponent,
+                            AppSidebarComponent,
+                            // AppSidebarNavItemsComponent,
+                            AppSidebarNavComponent,
+                            // AppSidebarNavDividerComponent,
+                            // AppSidebarNavDropdownComponent,
+                            // AppSidebarNavLabelComponent,
+                            // AppSidebarNavLinkComponent,
+                            // AppSidebarNavLinkContentComponent,
+                            // AppSidebarNavTitleComponent,
+                            // NavDropdownDirective,
+                            // NavDropdownToggleDirective,
+                        ],
+                        declarations: [
+                            AppSidebarFooterComponent,
+                            AppSidebarFormComponent,
+                            AppSidebarHeaderComponent,
+                            AppSidebarMinimizerComponent,
+                            AppSidebarMinimizerComponent,
+                            AppSidebarComponent,
+                            AppSidebarNavItemsComponent,
+                            AppSidebarNavComponent,
+                            AppSidebarNavDividerComponent,
+                            AppSidebarNavDropdownComponent,
+                            AppSidebarNavLinkComponent,
+                            AppSidebarNavLinkContentComponent,
+                            AppSidebarNavTitleComponent,
+                            NavDropdownDirective,
+                            NavDropdownToggleDirective,
+                            AppSidebarNavLabelComponent,
+                            AppSidebarNavIconPipe,
+                            AppSidebarNavBadgePipe,
+                            AppSidebarNavLinkPipe,
+                            AppSidebarNavItemClassPipe
+                        ],
+                        providers: [
+                            SidebarNavHelper,
+                            AppSidebarService
+                        ]
+                    }]
+            }] });
+
+    // export { NavDropdownDirective, NavDropdownToggleDirective } from './app-sidebar-nav.directive';
+    // export { AppSidebarNavDividerComponent } from './app-sidebar-nav/app-sidebar-nav-divider.component';
+    // export { AppSidebarNavDropdownComponent } from './app-sidebar-nav/app-sidebar-nav-dropdown.component';
+    // export { AppSidebarNavItemsComponent } from './app-sidebar-nav/app-sidebar-nav-items.component';
+    // export { AppSidebarNavLinkComponent, AppSidebarNavLinkContentComponent } from './app-sidebar-nav/app-sidebar-nav-link.component';
+    // export { AppSidebarNavTitleComponent } from './app-sidebar-nav/app-sidebar-nav-title.component';
+    // export { AppSidebarNavLabelComponent } from './app-sidebar-nav/app-sidebar-nav-label.component';
 
     /*
      * Public API Surface of @coreui/angular
@@ -1781,40 +2000,16 @@
     exports.AppHeaderComponent = AppHeaderComponent;
     exports.AppHeaderModule = AppHeaderModule;
     exports.AppSidebarComponent = AppSidebarComponent;
+    exports.AppSidebarFooterComponent = AppSidebarFooterComponent;
+    exports.AppSidebarFormComponent = AppSidebarFormComponent;
+    exports.AppSidebarHeaderComponent = AppSidebarHeaderComponent;
     exports.AppSidebarMinimizerComponent = AppSidebarMinimizerComponent;
     exports.AppSidebarModule = AppSidebarModule;
     exports.AppSidebarNavComponent = AppSidebarNavComponent;
     exports.CuiBreadcrumbComponent = CuiBreadcrumbComponent;
     exports.SidebarNavHelper = SidebarNavHelper;
-    exports.ɵa = LayoutModule;
-    exports.ɵb = SidebarToggleDirective;
-    exports.ɵba = AppSidebarNavItemClassPipe;
-    exports.ɵc = SidebarMinimizeDirective;
-    exports.ɵd = MobileSidebarToggleDirective;
-    exports.ɵe = SidebarOffCanvasCloseDirective;
-    exports.ɵf = BrandMinimizeDirective;
-    exports.ɵg = AsideToggleDirective;
-    exports.ɵh = HtmlAttributesDirective;
-    exports.ɵi = ClassToggler;
-    exports.ɵj = AppBreadcrumbService;
-    exports.ɵk = AppSidebarService;
-    exports.ɵl = AppSidebarFooterComponent;
-    exports.ɵm = AppSidebarFormComponent;
-    exports.ɵn = AppSidebarHeaderComponent;
-    exports.ɵo = AppSidebarNavItemsComponent;
-    exports.ɵp = AppSidebarNavDividerComponent;
-    exports.ɵq = AppSidebarNavDropdownComponent;
-    exports.ɵr = AppSidebarNavLabelComponent;
-    exports.ɵs = AppSidebarNavLinkContentComponent;
-    exports.ɵt = AppSidebarNavLinkComponent;
-    exports.ɵu = AppSidebarNavTitleComponent;
-    exports.ɵv = NavDropdownDirective;
-    exports.ɵw = NavDropdownToggleDirective;
-    exports.ɵx = AppSidebarNavIconPipe;
-    exports.ɵy = AppSidebarNavBadgePipe;
-    exports.ɵz = AppSidebarNavLinkPipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=coreui-angular.umd.js.map