@coreui/angular-pro 4.2.5 → 4.2.6

package/fesm2020/coreui-angular-pro.mjs

@@ -11895,12 +11895,13 @@ class SidebarNavGroupComponent {
         this.hostElement = hostElement;
         this.dropdownMode = 'closeInactive';
         this.navItems = [];
+        this.display = { display: 'block' };
         this.navigationEndObservable = router.events.pipe(filter((event) => event instanceof NavigationEnd));
     }
     get hostClasses() {
         return {
             'nav-group': true,
-            show: this.open,
+            show: this.open
         };
     }
     ngOnInit() {
@@ -11932,12 +11933,48 @@ class SidebarNavGroupComponent {
     ngOnDestroy() {
         this.navSubscription.unsubscribe();
     }
+    onAnimationStart($event) {
+        setTimeout(() => {
+            this.display = { display: 'block' };
+        });
+    }
+    onAnimationDone($event) {
+        if ($event.toState === 'closed') {
+            setTimeout(() => {
+                this.display = null;
+            });
+        }
+    }
 }
 SidebarNavGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SidebarNavGroupComponent, deps: [{ token: i3.Router }, { token: SidebarNavHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SidebarNavGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: SidebarNavGroupComponent, selector: "c-sidebar-nav-group", inputs: { item: "item", dropdownMode: "dropdownMode", show: "show" }, host: { properties: { "class": "this.hostClasses" } }, providers: [SidebarNavHelper], ngImport: i0, template: "<a class=\"nav-link nav-group-toggle\"\r\n   (click)=\"toggleGroup($event)\"\r\n   [cHtmlAttr]=\"item.attributes\">\r\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n  <ng-container>{{ item.name }}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\r\n</a>\r\n<c-sidebar-nav\r\n  [groupItems]=\"true\"\r\n  [navItems]=\"navItems\">\r\n</c-sidebar-nav>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: SidebarNavComponent, selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact"] }, { kind: "pipe", type: SidebarNavBadgePipe, name: "cSidebarNavBadge" }, { kind: "pipe", type: SidebarNavIconPipe, name: "cSidebarNavIcon" }] });
+SidebarNavGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: SidebarNavGroupComponent, selector: "c-sidebar-nav-group", inputs: { item: "item", dropdownMode: "dropdownMode", show: "show" }, host: { properties: { "class": "this.hostClasses" } }, providers: [SidebarNavHelper], ngImport: i0, template: "<a class=\"nav-link nav-group-toggle\"\r\n   href\r\n   (click)=\"toggleGroup($event)\"\r\n   [cHtmlAttr]=\"item.attributes\">\r\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n  <ng-container>{{ item.name }}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\r\n</a>\r\n<c-sidebar-nav\r\n  [groupItems]=\"true\"\r\n  [navItems]=\"navItems\"\r\n  [@openClose]=\"open ? 'open' : 'closed'\"\r\n  (@openClose.start)=\"onAnimationStart($event)\"\r\n  (@openClose.done)=\"onAnimationDone($event)\"\r\n  [ngStyle]=\"display\"\r\n>\r\n</c-sidebar-nav>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: SidebarNavComponent, selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact"] }, { kind: "pipe", type: SidebarNavBadgePipe, name: "cSidebarNavBadge" }, { kind: "pipe", type: SidebarNavIconPipe, name: "cSidebarNavIcon" }], animations: [
+        trigger('openClose', [
+            state('open', style({
+                height: '*'
+            })),
+            state('closed', style({
+                height: '0px'
+            })),
+            transition('open <=> closed', [
+                animate('.15s ease')
+            ])
+        ])
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SidebarNavGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-sidebar-nav-group', providers: [SidebarNavHelper], template: "<a class=\"nav-link nav-group-toggle\"\r\n   (click)=\"toggleGroup($event)\"\r\n   [cHtmlAttr]=\"item.attributes\">\r\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n  <ng-container>{{ item.name }}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\r\n</a>\r\n<c-sidebar-nav\r\n  [groupItems]=\"true\"\r\n  [navItems]=\"navItems\">\r\n</c-sidebar-nav>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"] }]
+            args: [{ selector: 'c-sidebar-nav-group', providers: [SidebarNavHelper], animations: [
+                        trigger('openClose', [
+                            state('open', style({
+                                height: '*'
+                            })),
+                            state('closed', style({
+                                height: '0px'
+                            })),
+                            transition('open <=> closed', [
+                                animate('.15s ease')
+                            ])
+                        ])
+                    ], template: "<a class=\"nav-link nav-group-toggle\"\r\n   href\r\n   (click)=\"toggleGroup($event)\"\r\n   [cHtmlAttr]=\"item.attributes\">\r\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n  <ng-container>{{ item.name }}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\r\n</a>\r\n<c-sidebar-nav\r\n  [groupItems]=\"true\"\r\n  [navItems]=\"navItems\"\r\n  [@openClose]=\"open ? 'open' : 'closed'\"\r\n  (@openClose.start)=\"onAnimationStart($event)\"\r\n  (@openClose.done)=\"onAnimationDone($event)\"\r\n  [ngStyle]=\"display\"\r\n>\r\n</c-sidebar-nav>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i3.Router }, { type: SidebarNavHelper }, { type: i0.ElementRef }]; }, propDecorators: { item: [{
                 type: Input
             }], dropdownMode: [{