| {"version":3,"sources":["ng://@covalent/core/media/services/media.service.ts","ng://@covalent/core/media/directives/media-toggle.directive.ts","ng://@covalent/core/media/media.module.ts"],"names":["TdMediaService","prototype","deregisterQuery","query","this","_queryMap","get","toLowerCase","_querySources","unsubscribe","_queryObservables","_ngZone","run","matchMedia","matches","registerQuery","BehaviorSubject","asObservable","broadcast","_onResize","this_1","_this","_matchMediaTrigger","next","Injectable","NgZone","_resizing","Map","set","_globalSubscription","runOutsideAngular","fromEvent","window","subscribe","setTimeout","MEDIA_PROVIDER_FACTORY","parent","ngZone","MEDIA_PROVIDER","provide","deps","Optional","SkipSelf","useFactory","TdMediaToggleDirective","Object","defineProperty","Error","_query","attributes","_attributes","classes","_classes","styles","_styles","ngOnInit","_mediaChange","_mediaService","_subscription","ngOnDestroy","_matches","_changeAttributes","_changeClasses","_changeStyles","attr","_renderer","setAttribute","_elementRef","nativeElement","removeAttribute","forEach","className","addClass","removeClass","style","setStyle","removeStyle","Directive","args","selector","Renderer2","ElementRef","Input","TD_MEDIA","CovalentMediaModule","NgModule","imports","CommonModule","declarations","exports","providers"],"mappings":"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","sourcesContent":["import { Injectable, NgZone, SkipSelf, Optional, Provider } from '@angular/core';\nimport { Observable, BehaviorSubject, Subscription, fromEvent } from 'rxjs';\n\n@Injectable()\nexport class TdMediaService {\n\n private _resizing: boolean = false;\n private _globalSubscription: Subscription;\n private _queryMap: Map<string, string> = new Map<string, string>();\n private _querySources: { [key: string]: BehaviorSubject<boolean>} = {};\n private _queryObservables: {[key: string]: Observable<boolean>} = {};\n\n constructor(private _ngZone: NgZone) {\n this._queryMap.set('xs', '(max-width: 599px)');\n this._queryMap.set('gt-xs', '(min-width: 600px)');\n this._queryMap.set('sm', '(min-width: 600px) and (max-width: 959px)');\n this._queryMap.set('gt-sm', '(min-width: 960px)');\n this._queryMap.set('md', '(min-width: 960px) and (max-width: 1279px)');\n this._queryMap.set('gt-md', '(min-width: 1280px)');\n this._queryMap.set('lg', '(min-width: 1280px) and (max-width: 1919px)');\n this._queryMap.set('gt-lg', '(min-width: 1920px)');\n this._queryMap.set('xl', '(min-width: 1920px)');\n this._queryMap.set('landscape', '(orientation: landscape)');\n this._queryMap.set('portrait', '(orientation: portrait)');\n this._queryMap.set('print', 'print');\n\n this._resizing = false;\n // we make sure that the resize checking happend outside of Angular since it happens often\n this._globalSubscription = this._ngZone.runOutsideAngular(() => {\n return fromEvent(window, 'resize').subscribe(() => {\n // way to prevent the resize event from triggering the match media if there is already one event running already.\n if (!this._resizing) {\n this._resizing = true;\n setTimeout(() => {\n this._onResize();\n this._resizing = false;\n }, 100);\n }\n });\n });\n }\n\n /**\n * Deregisters a query so its stops being notified or used.\n */\n deregisterQuery(query: string): void {\n if (this._queryMap.get(query.toLowerCase())) {\n query = this._queryMap.get(query.toLowerCase());\n }\n this._querySources[query].unsubscribe();\n delete this._querySources[query];\n delete this._queryObservables[query];\n }\n\n /**\n * Used to evaluate whether a given media query is true or false given the current device's screen / window size.\n */\n public query(query: string): boolean {\n if (this._queryMap.get(query.toLowerCase())) {\n query = this._queryMap.get(query.toLowerCase());\n }\n return this._ngZone.run(() => {\n return matchMedia(query).matches;\n });\n }\n\n /**\n * Registers a media query and returns an [Observable] that will re-evaluate and\n * return if the given media query matches on window resize.\n * Note: don't forget to unsubscribe from [Observable] when finished watching.\n */\n public registerQuery(query: string): Observable<boolean> {\n if (this._queryMap.get(query.toLowerCase())) {\n query = this._queryMap.get(query.toLowerCase());\n }\n if (!this._querySources[query]) {\n this._querySources[query] = new BehaviorSubject<boolean>(matchMedia(query).matches);\n this._queryObservables[query] = this._querySources[query].asObservable();\n }\n return this._queryObservables[query];\n }\n\n /**\n * Trigger a match media event on all subscribed observables.\n */\n public broadcast(): void {\n this._onResize();\n }\n\n private _onResize(): void {\n for (let query in this._querySources) {\n this._ngZone.run(() => {\n this._matchMediaTrigger(query);\n });\n }\n }\n\n private _matchMediaTrigger(query: string): void {\n this._querySources[query].next(matchMedia(query).matches);\n }\n}\n\nexport function MEDIA_PROVIDER_FACTORY(\n parent: TdMediaService, ngZone: NgZone): TdMediaService {\n return parent || new TdMediaService(ngZone);\n}\n\nexport const MEDIA_PROVIDER: Provider = {\n // If there is already a service available, use that. Otherwise, provide a new one.\n provide: TdMediaService,\n deps: [[new Optional(), new SkipSelf(), TdMediaService], NgZone],\n useFactory: MEDIA_PROVIDER_FACTORY,\n};\n","import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';\nimport { Renderer2 } from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { TdMediaService } from '../services/media.service';\n\n@Directive({\n selector: '[tdMediaToggle]',\n})\nexport class TdMediaToggleDirective implements OnInit, OnDestroy {\n\n private _subscription: Subscription;\n\n private _query: string;\n private _matches: boolean = false;\n private _attributes: {[key: string]: string} = {};\n private _styles: {[key: string]: string} = {};\n private _classes: string[] = [];\n\n /**\n * tdMediaToggle: string\n * Media query used to evaluate screen/window size.\n * Toggles attributes, classes and styles if media query is matched.\n */\n @Input('tdMediaToggle')\n set query(query: string) {\n if (!query) {\n throw new Error('Query needed for [tdMediaToggle] directive.');\n }\n this._query = query;\n }\n\n /**\n * mediaAttributes: {[key: string]: string}\n * Attributes to be toggled when media query matches.\n */\n @Input('mediaAttributes')\n set attributes(attributes: any) {\n this._attributes = attributes;\n }\n\n /**\n * mediaClasses: string[]\n * CSS Classes to be toggled when media query matches.\n */\n @Input('mediaClasses')\n set classes(classes: string[]) {\n this._classes = classes;\n }\n\n /**\n * mediaStyles: {[key: string]: string}\n * CSS Styles to be toggled when media query matches.\n */\n @Input('mediaStyles')\n set styles(styles: any) {\n this._styles = styles;\n }\n\n constructor(private _renderer: Renderer2, private _elementRef: ElementRef, private _mediaService: TdMediaService) { }\n\n ngOnInit(): void {\n this._mediaChange(this._mediaService.query(this._query));\n this._subscription = this._mediaService.registerQuery(this._query).subscribe((matches: boolean) => {\n this._mediaChange(matches);\n });\n }\n\n ngOnDestroy(): void {\n if (this._subscription) {\n this._subscription.unsubscribe();\n }\n }\n\n private _mediaChange(matches: boolean): void {\n this._matches = matches;\n this._changeAttributes();\n this._changeClasses();\n this._changeStyles();\n }\n\n private _changeAttributes(): void {\n for (let attr in this._attributes) {\n if (this._matches) {\n this._renderer.setAttribute(this._elementRef.nativeElement, attr, this._attributes[attr]);\n } else {\n this._renderer.removeAttribute(this._elementRef.nativeElement, attr);\n }\n }\n }\n\n private _changeClasses(): void {\n this._classes.forEach((className: string) => {\n if (this._matches) {\n this._renderer.addClass(this._elementRef.nativeElement, className);\n } else {\n this._renderer.removeClass(this._elementRef.nativeElement, className);\n }\n });\n }\n\n private _changeStyles(): void {\n for (let style in this._styles) {\n if (this._matches) {\n this._renderer.setStyle(this._elementRef.nativeElement, style, this._styles[style]);\n } else {\n this._renderer.removeStyle(this._elementRef.nativeElement, style);\n }\n }\n }\n\n}\n","import { Type } from '@angular/core';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { MEDIA_PROVIDER } from './services/media.service';\nimport { TdMediaToggleDirective } from './directives/media-toggle.directive';\n\nconst TD_MEDIA: Type<any>[] = [\n TdMediaToggleDirective,\n];\n\n@NgModule({\n imports: [\n CommonModule,\n ],\n declarations: [\n TD_MEDIA,\n ],\n exports: [\n TD_MEDIA,\n ],\n providers: [\n MEDIA_PROVIDER,\n ],\n})\nexport class CovalentMediaModule {\n\n}\n"]} |