@sheyxneo/angular-material-theme-switcher/bundles/sheyxneo-angular-material-theme-switcher.umd.min.js

This library will help you to use multiple themes and easily switch between them in your project.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/material"),require("@angular/cdk/overlay"),require("rxjs")):"function"==typeof define&&define.amd?define("@sheyxneo/angular-material-theme-switcher",["exports","@angular/core","@angular/common","@angular/material","@angular/cdk/overlay","rxjs"],t):t(((e=e||self).sheyxneo=e.sheyxneo||{},e.sheyxneo["angular-material-theme-switcher"]={}),e.ng.core,e.ng.common,e.ng.material,e.ng.cdk.overlay,e.rxjs)}(this,(function(e,t,r,i,o,s){"use strict";var n=function(){function e(){this.themes=["deeppurple-amber","indigo-pink","pink-bluegrey","purple-green"],this.colorTheme$=new s.BehaviorSubject("indigo-pink"),this.isDark$=new s.BehaviorSubject(!1)}return e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[]},e}();var a=function(){function e(e){this.amThemeService=e,this.colorTheme="",this.themes=[],this.isUseLibraryThemes=!0}return e.prototype.ngOnInit=function(){var e=this;this.isUseLibraryThemes?(this.amThemeService.themes.forEach((function(t){return e.themes.push(t)})),""===this.colorTheme&&this.amThemeService.colorTheme$.subscribe((function(t){return e.colorTheme=t}))):""===this.colorTheme&&(this.colorTheme=this.themes[0]),-1===this.themes.indexOf(this.colorTheme)&&this.themes.push(this.colorTheme),""!==this.colorTheme&&this.amThemeService.colorTheme$.next(this.colorTheme)},e.prototype.setColorTheme=function(e){this.amThemeService.colorTheme$.next(e),this.colorTheme=e},e.decorators=[{type:t.Component,args:[{selector:"am-theme-color-switcher",template:'<button *ngIf="themes.length > 1" mat-icon-button [mat-menu-trigger-for]="themeSwitcher" matTooltip="Switch themes"\n    tabindex="-1">\n    <mat-icon class="auto-flip">format_color_fill</mat-icon>\n</button>\n\n<mat-menu #themeSwitcher="matMenu">\n    <mat-grid-list cols="2" class="switcher-container">\n        <mat-grid-tile *ngFor="let theme of themes">\n            <button mat-button class="switcher" (click)="$event.stopPropagation(); setColorTheme(theme)">\n                <div [attr.class]="\'switcher-primary \' + theme">\n                    <div [attr.class]="\'switcher-accent \' + theme"></div>\n                    <div [attr.class]="\'switcher-warn \' + theme"></div>\n                    <mat-icon *ngIf="colorTheme===theme" class="center switcher-check">brush</mat-icon>\n                </div>\n            </button>\n        </mat-grid-tile>\n    </mat-grid-list>\n</mat-menu>',styles:[".switcher-container{width:96px;height:96px;margin:0 8px;padding:0!important}.switcher{width:48px;min-width:48px!important;height:48px;padding:0!important;position:relative}.switcher-primary{width:38px;height:38px;margin:5px;border-radius:50%;position:absolute;top:0;left:0}.switcher-accent{width:20px;height:20px;border-radius:50%;position:absolute;top:10%;left:10%}.switcher-warn{width:15px;height:15px;border-radius:50%;position:absolute;top:0;left:0}.switcher-check{color:#fff;font-size:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}"]}]}],e.ctorParameters=function(){return[{type:n}]},e.propDecorators={colorTheme:[{type:t.Input}],themes:[{type:t.Input}],isUseLibraryThemes:[{type:t.Input}]},e}();var h=function(){function e(e){this.amThemeService=e,this.isDark=!1}return e.prototype.ngOnInit=function(){this.amThemeService.isDark$.next(this.isDark)},e.prototype.toggleIsDark=function(e){this.amThemeService.isDark$.next(e)},e.decorators=[{type:t.Component,args:[{selector:"am-theme-dark-switcher",template:'<mat-slide-toggle [checked]="isDark" (click)="$event.stopPropagation();" (change)="toggleIsDark($event.checked)"\n    matTooltip="Is Dark?"></mat-slide-toggle>',styles:[""]}]}],e.ctorParameters=function(){return[{type:n}]},e.propDecorators={isDark:[{type:t.Input}]},e}();var c=function(){function e(e,t){this.overlayContainer=e,this.amThemeService=t,this.colorTheme=""}return e.prototype.ngOnInit=function(){var e=this;""!==this.colorTheme?void 0!==this.isDark?this.setTheme(this.colorTheme,this.isDark):this.amThemeService.isDark$.subscribe((function(t){e.setTheme(e.colorTheme,t)})):this.amThemeService.colorTheme$.subscribe((function(t){void 0!==e.isDark?e.setTheme(t,e.isDark):e.amThemeService.isDark$.subscribe((function(r){e.setTheme(t,r)}))}))},e.prototype.setTheme=function(e,t){var r=e+(t?"-dark":"-light");this.themeActiveCssClass=r;var i=this.overlayContainer.getContainerElement().classList;i.contains(this.oldTheme)?i.replace(this.oldTheme,r):i.add(r),this.oldTheme=r},e.decorators=[{type:t.Directive,args:[{selector:"[amThemeContainer]"}]}],e.ctorParameters=function(){return[{type:o.OverlayContainer},{type:n}]},e.propDecorators={colorTheme:[{type:t.Input}],isDark:[{type:t.Input}],themeActiveCssClass:[{type:t.HostBinding,args:["class"]}]},e}();var m=function(){function e(e,t){this.overlayContainer=e,this.amThemeService=t}return e.prototype.ngOnInit=function(){var e=this;this.amThemeService.colorTheme$.subscribe((function(t){e.amThemeService.isDark$.subscribe((function(r){e.setTheme(t,r)}))}))},e.prototype.setTheme=function(e,t){var r=e+(t?"-dark":"-light");this.themeActiveCssClass=r;var i=this.overlayContainer.getContainerElement().classList;i.contains(this.oldTheme)?i.replace(this.oldTheme,r):i.add(r),this.oldTheme=r},e.decorators=[{type:t.Directive,args:[{selector:"[amThemeActive]"}]}],e.ctorParameters=function(){return[{type:o.OverlayContainer},{type:n}]},e.propDecorators={themeActiveCssClass:[{type:t.HostBinding,args:["class"]}]},e}();var l=function(){function e(e){this.overlayContainer=e,this.colorTheme="",this.isDark=!1}return e.prototype.ngOnInit=function(){this.setTheme(this.colorTheme,this.isDark)},e.prototype.setTheme=function(e,t){var r=e+(t?"-dark":"-light");this.themeActiveCssClass=r;var i=this.overlayContainer.getContainerElement().classList;i.contains(this.oldTheme)?i.replace(this.oldTheme,r):i.add(r),this.oldTheme=r},e.decorators=[{type:t.Directive,args:[{selector:"[amThemeCustom]"}]}],e.ctorParameters=function(){return[{type:o.OverlayContainer}]},e.propDecorators={colorTheme:[{type:t.Input}],isDark:[{type:t.Input}],themeActiveCssClass:[{type:t.HostBinding,args:["class"]}]},e}();var p=function(){function e(e,t){this.overlayContainer=e,this.amThemeService=t}return e.prototype.ngOnInit=function(){var e=this;this.amThemeService.colorTheme$.subscribe((function(t){e.setTheme(t)}))},e.prototype.setTheme=function(e){var t=e+"-dark";this.themeActiveCssClass=t;var r=this.overlayContainer.getContainerElement().classList;r.contains(this.oldTheme)?r.replace(this.oldTheme,t):r.add(t),this.oldTheme=t},e.decorators=[{type:t.Directive,args:[{selector:"[amThemeDark]"}]}],e.ctorParameters=function(){return[{type:o.OverlayContainer},{type:n}]},e.propDecorators={themeActiveCssClass:[{type:t.HostBinding,args:["class"]}]},e}();var u=function(){function e(e,t){this.overlayContainer=e,this.amThemeService=t}return e.prototype.ngOnInit=function(){var e=this;this.amThemeService.colorTheme$.subscribe((function(t){e.setTheme(t)}))},e.prototype.setTheme=function(e){var t=e+"-light";this.themeActiveCssClass=t;var r=this.overlayContainer.getContainerElement().classList;r.contains(this.oldTheme)?r.replace(this.oldTheme,t):r.add(t),this.oldTheme=t},e.decorators=[{type:t.Directive,args:[{selector:"[amThemeLight]"}]}],e.ctorParameters=function(){return[{type:o.OverlayContainer},{type:n}]},e.propDecorators={themeActiveCssClass:[{type:t.HostBinding,args:["class"]}]},e}();var d=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[a,h,c,m,l,p,u],providers:[n],imports:[r.CommonModule,o.OverlayModule,i.MatButtonModule,i.MatGridListModule,i.MatIconModule,i.MatMenuModule,i.MatSlideToggleModule,i.MatTooltipModule],exports:[a,h,c,m,l,p,u]}]}],e}();e.AmThemeService=n,e.AngularMaterialThemeSwitcherModule=d,e.ɵa=a,e.ɵb=h,e.ɵc=c,e.ɵd=m,e.ɵe=l,e.ɵf=p,e.ɵg=u,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=sheyxneo-angular-material-theme-switcher.umd.min.js.map