diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9d358924..39636466 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,32 @@
### [@coreui/angular](https://coreui.io/) changelog
+##### `v2.5.2`
+- refactor(AppHeader): add reactive toggler class based on breakpoint
+usage: set toggler breakpoint
+```html
+
+
+```
+###### dependencies update
+- update `@angular/animations` to `^8.0.2`
+- update `@angular/common` to `^8.0.2`
+- update `@angular/compiler` to `^8.0.2`
+- update `@angular/core` to `^8.0.2`
+- update `@angular/forms` to `^8.0.2`
+- update `@angular/platform-browser` to `^8.0.2`
+- update `@angular/platform-browser-dynamic` to `^8.0.2`
+- update `@angular/router` to `^8.0.2`
+- update `@angular-devkit/build-angular` to `^0.800.3`
+- update `@angular-devkit/build-ng-packagr` to `^0.800.3`
+- update `@angular/cli` to `^8.0.3`
+- update `@angular/compiler-cli` to `^8.0.2`
+- update `@angular/language-service` to `^8.0.2`
+- update `@types/node` to `^11.13.14`
+- update `ts-node` to `^8.3.0`
+- update `tslib` to `^1.10.0`
+
##### `v2.5.1`
- fix(appHtmlAttr): cannot remove html attribute,
ex: `attributes: {hidden: null}` removes attribute `hidden`
diff --git a/dist/@coreui/angular/bundles/coreui-angular.umd.js b/dist/@coreui/angular/bundles/coreui-angular.umd.js
index ad590551..e5b07678 100644
--- a/dist/@coreui/angular/bundles/coreui-angular.umd.js
+++ b/dist/@coreui/angular/bundles/coreui-angular.umd.js
@@ -957,10 +957,14 @@
this.renderer = renderer;
this.hostElement = hostElement;
this.navbarBrandText = { icon: '🅲', text: '🅲 CoreUI' };
- this.navbarBrandHref = ''; // deprecated, use navbarBrandRouterLink instead
// deprecated, use navbarBrandRouterLink instead
this.navbarBrandRouterLink = '';
this.fixedClass = 'header-fixed';
+ this.breakpoints = ['xl', 'lg', 'md', 'sm', 'xs'];
+ this.sidebarTogglerClass = 'd-none d-md-block';
+ this.sidebarTogglerMobileClass = 'd-lg-none';
+ this.asideTogglerClass = 'd-none d-md-block';
+ this.asideTogglerMobileClass = 'd-lg-none';
renderer.addClass(hostElement.nativeElement, 'app-header');
renderer.addClass(hostElement.nativeElement, 'navbar');
}
@@ -974,6 +978,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((/** @type {?} */ (this.sidebarToggler)));
+ this.sidebarTogglerMobileClass = this.setToggerMobileBreakpointClass((/** @type {?} */ (this.sidebarToggler)));
+ this.asideTogglerClass = this.setToggerBreakpointClass((/** @type {?} */ (this.asideMenuToggler)));
+ this.asideTogglerMobileClass = this.setToggerMobileBreakpointClass((/** @type {?} */ (this.asideMenuToggler)));
};
/**
* @return {?}
@@ -998,10 +1006,46 @@
this.renderer.addClass(this.document.body, this.fixedClass);
}
};
+ /**
+ * @param {?=} breakpoint
+ * @return {?}
+ */
+ AppHeaderComponent.prototype.setToggerBreakpointClass = /**
+ * @param {?=} breakpoint
+ * @return {?}
+ */
+ function (breakpoint) {
+ if (breakpoint === void 0) { breakpoint = 'md'; }
+ /** @type {?} */
+ var togglerClass = 'd-none d-md-block';
+ if (this.breakpoints.includes(breakpoint)) {
+ /** @type {?} */
+ var breakpointIndex = this.breakpoints.indexOf(breakpoint);
+ togglerClass = "d-none d-" + breakpoint + "-block";
+ }
+ return togglerClass;
+ };
+ /**
+ * @param {?=} breakpoint
+ * @return {?}
+ */
+ AppHeaderComponent.prototype.setToggerMobileBreakpointClass = /**
+ * @param {?=} breakpoint
+ * @return {?}
+ */
+ function (breakpoint) {
+ if (breakpoint === void 0) { breakpoint = 'lg'; }
+ /** @type {?} */
+ var togglerClass = 'd-lg-none';
+ if (this.breakpoints.includes(breakpoint)) {
+ togglerClass = "d-" + breakpoint + "-none";
+ }
+ return togglerClass;
+ };
AppHeaderComponent.decorators = [
{ type: core.Component, args: [{
selector: 'app-header, cui-header',
- template: "\r\n \r\n\r\n\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n\r\n\r\n\r\n \r\n\r\n\r\n \r\n\r\n"
+ template: "\n \n\n\n \n
\n
\n
\n \n \n \n \n \n\n\n \n\n\n\n \n\n\n \n\n"
}] }
];
/** @nocollapse */
diff --git a/dist/@coreui/angular/bundles/coreui-angular.umd.js.map b/dist/@coreui/angular/bundles/coreui-angular.umd.js.map
index aa155e17..bfcd4de7 100644
--- a/dist/@coreui/angular/bundles/coreui-angular.umd.js.map
+++ b/dist/@coreui/angular/bundles/coreui-angular.umd.js.map
@@ -1 +1 @@
-{"version":3,"file":"coreui-angular.umd.js","sources":["ng://@coreui/angular/lib/shared/classes.ts","ng://@coreui/angular/lib/shared/toggle-classes.ts","ng://@coreui/angular/lib/shared/layout/layout.directive.ts","ng://@coreui/angular/lib/shared/layout/layout.module.ts","ng://@coreui/angular/lib/shared/replace.ts","ng://@coreui/angular/lib/aside/app-aside.component.ts","ng://@coreui/angular/lib/aside/app-aside.module.ts","ng://@coreui/angular/lib/breadcrumb/app-breadcrumb.service.ts","ng://@coreui/angular/lib/breadcrumb/app-breadcrumb.component.ts","ng://@coreui/angular/lib/breadcrumb/cui-breadcrumb.component.ts","ng://@coreui/angular/lib/breadcrumb/app-breadcrumb.module.ts","ng://@coreui/angular/lib/footer/app-footer.component.ts","ng://@coreui/angular/lib/footer/app-footer.module.ts","ng://@coreui/angular/lib/header/app-header.component.ts","ng://@coreui/angular/lib/header/app-header.module.ts","ng://@coreui/angular/lib/sidebar/app-sidebar.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-footer.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-form.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-header.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-minimizer.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav.directive.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav/app-sidebar-nav-divider.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav.service.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav/app-sidebar-nav-dropdown.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav/app-sidebar-nav-items.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav/app-sidebar-nav-link.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav/app-sidebar-nav-title.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar-nav/app-sidebar-nav-label.component.ts","ng://@coreui/angular/lib/sidebar/app-sidebar.module.ts"],"sourcesContent":["export const sidebarCssClasses: Array = [\r\n 'sidebar-show',\r\n 'sidebar-sm-show',\r\n 'sidebar-md-show',\r\n 'sidebar-lg-show',\r\n 'sidebar-xl-show'\r\n];\r\n\r\nexport const asideMenuCssClasses: Array = [\r\n 'aside-menu-show',\r\n 'aside-menu-sm-show',\r\n 'aside-menu-md-show',\r\n 'aside-menu-lg-show',\r\n 'aside-menu-xl-show'\r\n];\r\n","import {Inject, Injectable, Renderer2} from '@angular/core';\r\nimport {DOCUMENT} from '@angular/common';\r\n\r\nconst RemoveClasses = (NewClassNames) => {\r\n const MatchClasses = NewClassNames.map((Class) => document.body.classList.contains(Class));\r\n return MatchClasses.indexOf(true) !== -1;\r\n};\r\n\r\nexport const ToggleClasses = (Toggle, ClassNames) => {\r\n const Level = ClassNames.indexOf(Toggle);\r\n const NewClassNames = ClassNames.slice(0, Level + 1);\r\n\r\n if (RemoveClasses(NewClassNames)) {\r\n NewClassNames.map((Class) => document.body.classList.remove(Class));\r\n } else {\r\n document.body.classList.add(Toggle);\r\n }\r\n};\r\n\r\n@Injectable()\r\nexport class ClassToggler {\r\n\r\n constructor(\r\n @Inject(DOCUMENT) private document: any,\r\n private renderer: Renderer2,\r\n ) {}\r\n\r\n removeClasses(NewClassNames) {\r\n const MatchClasses = NewClassNames.map((Class) => this.document.body.classList.contains(Class));\r\n return MatchClasses.indexOf(true) !== -1;\r\n }\r\n\r\n toggleClasses(Toggle, ClassNames) {\r\n const Level = ClassNames.indexOf(Toggle);\r\n const NewClassNames = ClassNames.slice(0, Level + 1);\r\n\r\n if (this.removeClasses(NewClassNames)) {\r\n NewClassNames.map((Class) => this.renderer.removeClass(this.document.body, Class));\r\n } else {\r\n this.renderer.addClass(this.document.body, Toggle);\r\n }\r\n }\r\n}\r\n","import {Directive, ElementRef, HostListener, Inject, Input, OnInit, Renderer2} from '@angular/core';\nimport {DOCUMENT} from '@angular/common';\n\nimport { asideMenuCssClasses, sidebarCssClasses } from '../classes';\nimport { ClassToggler } from '../toggle-classes';\n\n/**\n* Allows the sidebar to be toggled via click.\n*/\n@Directive({\n selector: '[appSidebarToggler]',\n providers: [ClassToggler]\n})\nexport class SidebarToggleDirective implements OnInit {\n @Input('appSidebarToggler') breakpoint: string;\n public bp;\n constructor(private classToggler: ClassToggler) {}\n ngOnInit(): void {\n this.bp = this.breakpoint;\n }\n @HostListener('click', ['$event'])\n toggleOpen($event: any) {\n $event.preventDefault();\n const cssClass = this.bp ? `sidebar-${this.bp}-show` : sidebarCssClasses[0];\n this.classToggler.toggleClasses(cssClass, sidebarCssClasses);\n }\n}\n\n@Directive({\n selector: '[appSidebarMinimizer]'\n})\nexport class SidebarMinimizeDirective {\n constructor(\n @Inject(DOCUMENT) private document: any,\n private renderer: Renderer2,\n ) { }\n\n @HostListener('click', ['$event'])\n toggleOpen($event: any) {\n $event.preventDefault();\n const body = this.document.body;\n body.classList.contains('sidebar-minimized') ?\n this.renderer.removeClass(body, 'sidebar-minimized') :\n this.renderer.addClass(body, 'sidebar-minimized');\n }\n}\n\n@Directive({\n selector: '[appMobileSidebarToggler]'\n})\nexport class MobileSidebarToggleDirective {\n constructor(\n @Inject(DOCUMENT) private document: any,\n private renderer: Renderer2,\n ) { }\n\n @HostListener('click', ['$event'])\n toggleOpen($event: any) {\n $event.preventDefault();\n const body = this.document.body;\n body.classList.contains('sidebar-show') ?\n this.renderer.removeClass(body, 'sidebar-show') :\n this.renderer.addClass(body, 'sidebar-show');\n }\n}\n\n/**\n* Allows the off-canvas sidebar to be closed via click.\n*/\n@Directive({\n selector: '[appSidebarClose]'\n})\nexport class SidebarOffCanvasCloseDirective {\n constructor(\n @Inject(DOCUMENT) private document: any,\n private renderer: Renderer2,\n ) { }\n\n @HostListener('click', ['$event'])\n toggleOpen($event: any) {\n $event.preventDefault();\n\n const body = this.document.body;\n if (body.classList.contains('sidebar-off-canvas')) {\n body.classList.contains('sidebar-show') ?\n this.renderer.removeClass(body, 'sidebar-show') :\n this.renderer.addClass(body, 'sidebar-show');\n }\n }\n}\n\n@Directive({\n selector: '[appBrandMinimizer]'\n})\nexport class BrandMinimizeDirective {\n constructor(\n @Inject(DOCUMENT) private document: any,\n private renderer: Renderer2,\n ) { }\n\n @HostListener('click', ['$event'])\n toggleOpen($event: any) {\n $event.preventDefault();\n const body = this.document.body;\n body.classList.contains('brand-minimized') ?\n this.renderer.removeClass(body, 'brand-minimized') :\n this.renderer.addClass(body, 'brand-minimized');\n }\n}\n\n\n/**\n* Allows the aside to be toggled via click.\n*/\n@Directive({\n selector: '[appAsideMenuToggler]',\n providers: [ClassToggler]\n})\nexport class AsideToggleDirective implements OnInit {\n @Input('appAsideMenuToggler') breakpoint: string;\n public bp;\n constructor(private classToggler: ClassToggler) {}\n ngOnInit(): void {\n this.bp = this.breakpoint;\n }\n @HostListener('click', ['$event'])\n toggleOpen($event: any) {\n $event.preventDefault();\n const cssClass = this.bp ? `aside-menu-${this.bp}-show` : asideMenuCssClasses[0];\n this.classToggler.toggleClasses(cssClass, asideMenuCssClasses);\n }\n}\n\n@Directive({\n selector: '[appHtmlAttr]'\n})\nexport class HtmlAttributesDirective implements OnInit {\n @Input() appHtmlAttr: {[key: string]: string };\n\n constructor(\n private renderer: Renderer2,\n private el: ElementRef\n ) {}\n\n ngOnInit() {\n const attribs = this.appHtmlAttr;\n for (const attr in attribs) {\n if (attr === 'style' && typeof(attribs[attr]) === 'object' ) {\n this.setStyle(attribs[attr]);\n } else if (attr === 'class') {\n this.addClass(attribs[attr]);\n } else {\n this.setAttrib(attr, attribs[attr]);\n }\n }\n }\n\n private setStyle(styles) {\n for (const style in styles) {\n this.renderer.setStyle(this.el.nativeElement, style, styles[style] );\n }\n }\n\n private addClass(classes) {\n const classArray = (Array.isArray(classes) ? classes : classes.split(' '));\n classArray.filter((element) => element.length > 0).forEach(element => {\n this.renderer.addClass(this.el.nativeElement, element );\n });\n }\n\n private setAttrib(key, value) {\n value !== null ?\n this.renderer.setAttribute(this.el.nativeElement, key, value ) :\n this.renderer.removeAttribute(this.el.nativeElement, key);\n }\n}\n","import { CommonModule } from '@angular/common';\r\nimport { NgModule} from '@angular/core';\r\nimport {\r\n AsideToggleDirective,\r\n BrandMinimizeDirective,\r\n MobileSidebarToggleDirective,\r\n SidebarToggleDirective,\r\n SidebarMinimizeDirective,\r\n SidebarOffCanvasCloseDirective,\r\n HtmlAttributesDirective\r\n} from './layout.directive';\r\nimport { ClassToggler } from '../toggle-classes';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule\r\n ],\r\n exports: [\r\n AsideToggleDirective,\r\n BrandMinimizeDirective,\r\n MobileSidebarToggleDirective,\r\n SidebarToggleDirective,\r\n SidebarMinimizeDirective,\r\n SidebarOffCanvasCloseDirective,\r\n HtmlAttributesDirective\r\n ],\r\n declarations: [\r\n AsideToggleDirective,\r\n BrandMinimizeDirective,\r\n MobileSidebarToggleDirective,\r\n SidebarToggleDirective,\r\n SidebarMinimizeDirective,\r\n SidebarOffCanvasCloseDirective,\r\n HtmlAttributesDirective\r\n ],\r\n providers: [\r\n ClassToggler\r\n ]\r\n})\r\nexport class LayoutModule { }\r\n","export function Replace(el: any): any {\r\n const nativeElement: HTMLElement = el.nativeElement;\r\n const parentElement: HTMLElement = nativeElement.parentElement;\r\n // move all children out of the element\r\n while (nativeElement.firstChild) {\r\n parentElement.insertBefore(nativeElement.firstChild, nativeElement);\r\n }\r\n // remove the empty element(the host)\r\n parentElement.removeChild(nativeElement);\r\n}\r\n","import {Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2} from '@angular/core';\r\nimport {DOCUMENT} from '@angular/common';\r\n\r\nimport { asideMenuCssClasses } from '../shared';\r\n\r\n@Component({\r\n selector: 'app-aside, cui-aside',\r\n template: ``\r\n})\r\nexport class AppAsideComponent implements OnInit, OnDestroy {\r\n @Input() display: any;\r\n @Input() fixed: boolean;\r\n @Input() offCanvas: boolean;\r\n\r\n private readonly fixedClass = 'aside-menu-fixed';\r\n\r\n constructor(\r\n @Inject(DOCUMENT) private document: any,\r\n private renderer: Renderer2,\r\n private hostElement: ElementRef\r\n ) {\r\n renderer.addClass(hostElement.nativeElement, 'aside-menu');\r\n }\r\n\r\n ngOnInit(): void {\r\n this.isFixed(this.fixed);\r\n this.isOffCanvas(this.offCanvas);\r\n this.displayBreakpoint(this.display);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.renderer.removeClass(this.document.body, this.fixedClass);\r\n }\r\n\r\n isFixed(fixed: boolean = this.fixed): void {\r\n if (fixed) {\r\n this.renderer.addClass(this.document.body, this.fixedClass);\r\n }\r\n }\r\n\r\n isOffCanvas(offCanvas: boolean = this.offCanvas): void {\r\n if (offCanvas) {\r\n this.renderer.addClass(this.document.body, 'aside-menu-off-canvas');\r\n }\r\n }\r\n\r\n displayBreakpoint(display: any = this.display): void {\r\n if (display !== false ) {\r\n const cssClass = this.display ? `aside-menu-${this.display}-show` : asideMenuCssClasses[0];\r\n this.renderer.addClass(this.document.body, cssClass);\r\n }\r\n }\r\n}\r\n","import { CommonModule} from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { LayoutModule } from './../shared/layout/layout.module';\r\n\r\nimport { AppAsideComponent } from './app-aside.component';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n LayoutModule\r\n ],\r\n exports: [\r\n AppAsideComponent,\r\n LayoutModule\r\n ],\r\n declarations: [\r\n AppAsideComponent\r\n ]\r\n})\r\nexport class AppAsideModule {}\r\n","import { Injectable } from '@angular/core';\r\nimport { Router, ActivatedRoute, NavigationEnd } from '@angular/router';\r\nimport { BehaviorSubject, Observable } from 'rxjs';\r\nimport { filter } from 'rxjs/operators';\r\n\r\n@Injectable()\r\nexport class AppBreadcrumbService {\r\n\r\n breadcrumbs: Observable>;\r\n\r\n private _breadcrumbs: BehaviorSubject>;\r\n\r\n constructor(private router: Router, private route: ActivatedRoute) {\r\n\r\n this._breadcrumbs = new BehaviorSubject