node_modules/@covalent/core/bundles/covalent-core-media.umd.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('rxjs'), require('@angular/core')) :
    typeof define === 'function' && define.amd ? define('@covalent/core/media', ['exports', '@angular/common', 'rxjs', '@angular/core'], factory) :
    (factory((global.covalent = global.covalent || {}, global.covalent.core = global.covalent.core || {}, global.covalent.core.media = {}),global.ng.common,global.rxjs,global.ng.core));
}(this, (function (exports,common,rxjs,core) { 'use strict';

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
     */
    var TdMediaService = /** @class */ (function () {
        function TdMediaService(_ngZone) {
            var _this = this;
            this._ngZone = _ngZone;
            this._resizing = false;
            this._queryMap = new Map();
            this._querySources = {};
            this._queryObservables = {};
            this._queryMap.set('xs', '(max-width: 599px)');
            this._queryMap.set('gt-xs', '(min-width: 600px)');
            this._queryMap.set('sm', '(min-width: 600px) and (max-width: 959px)');
            this._queryMap.set('gt-sm', '(min-width: 960px)');
            this._queryMap.set('md', '(min-width: 960px) and (max-width: 1279px)');
            this._queryMap.set('gt-md', '(min-width: 1280px)');
            this._queryMap.set('lg', '(min-width: 1280px) and (max-width: 1919px)');
            this._queryMap.set('gt-lg', '(min-width: 1920px)');
            this._queryMap.set('xl', '(min-width: 1920px)');
            this._queryMap.set('landscape', '(orientation: landscape)');
            this._queryMap.set('portrait', '(orientation: portrait)');
            this._queryMap.set('print', 'print');
            this._resizing = false;
            // we make sure that the resize checking happend outside of Angular since it happens often
            this._globalSubscription = this._ngZone.runOutsideAngular(function () {
                return rxjs.fromEvent(window, 'resize').subscribe(function () {
                    // way to prevent the resize event from triggering the match media if there is already one event running already.
                    if (!_this._resizing) {
                        _this._resizing = true;
                        setTimeout(function () {
                            _this._onResize();
                            _this._resizing = false;
                        }, 100);
                    }
                });
            });
        }
        /**
         * Deregisters a query so its stops being notified or used.
         */
        /**
         * Deregisters a query so its stops being notified or used.
         * @param {?} query
         * @return {?}
         */
        TdMediaService.prototype.deregisterQuery = /**
         * Deregisters a query so its stops being notified or used.
         * @param {?} query
         * @return {?}
         */
            function (query) {
                if (this._queryMap.get(query.toLowerCase())) {
                    query = this._queryMap.get(query.toLowerCase());
                }
                this._querySources[query].unsubscribe();
                delete this._querySources[query];
                delete this._queryObservables[query];
            };
        /**
         * Used to evaluate whether a given media query is true or false given the current device's screen / window size.
         */
        /**
         * Used to evaluate whether a given media query is true or false given the current device's screen / window size.
         * @param {?} query
         * @return {?}
         */
        TdMediaService.prototype.query = /**
         * Used to evaluate whether a given media query is true or false given the current device's screen / window size.
         * @param {?} query
         * @return {?}
         */
            function (query) {
                if (this._queryMap.get(query.toLowerCase())) {
                    query = this._queryMap.get(query.toLowerCase());
                }
                return this._ngZone.run(function () {
                    return matchMedia(query).matches;
                });
            };
        /**
         * Registers a media query and returns an [Observable] that will re-evaluate and
         * return if the given media query matches on window resize.
         * Note: don't forget to unsubscribe from [Observable] when finished watching.
         */
        /**
         * Registers a media query and returns an [Observable] that will re-evaluate and
         * return if the given media query matches on window resize.
         * Note: don't forget to unsubscribe from [Observable] when finished watching.
         * @param {?} query
         * @return {?}
         */
        TdMediaService.prototype.registerQuery = /**
         * Registers a media query and returns an [Observable] that will re-evaluate and
         * return if the given media query matches on window resize.
         * Note: don't forget to unsubscribe from [Observable] when finished watching.
         * @param {?} query
         * @return {?}
         */
            function (query) {
                if (this._queryMap.get(query.toLowerCase())) {
                    query = this._queryMap.get(query.toLowerCase());
                }
                if (!this._querySources[query]) {
                    this._querySources[query] = new rxjs.BehaviorSubject(matchMedia(query).matches);
                    this._queryObservables[query] = this._querySources[query].asObservable();
                }
                return this._queryObservables[query];
            };
        /**
         * Trigger a match media event on all subscribed observables.
         */
        /**
         * Trigger a match media event on all subscribed observables.
         * @return {?}
         */
        TdMediaService.prototype.broadcast = /**
         * Trigger a match media event on all subscribed observables.
         * @return {?}
         */
            function () {
                this._onResize();
            };
        /**
         * @return {?}
         */
        TdMediaService.prototype._onResize = /**
         * @return {?}
         */
            function () {
                var _this = this;
                var _loop_1 = function (query) {
                    this_1._ngZone.run(function () {
                        _this._matchMediaTrigger(query);
                    });
                };
                var this_1 = this;
                for (var query in this._querySources) {
                    _loop_1(query);
                }
            };
        /**
         * @param {?} query
         * @return {?}
         */
        TdMediaService.prototype._matchMediaTrigger = /**
         * @param {?} query
         * @return {?}
         */
            function (query) {
                this._querySources[query].next(matchMedia(query).matches);
            };
        TdMediaService.decorators = [
            { type: core.Injectable }
        ];
        /** @nocollapse */
        TdMediaService.ctorParameters = function () {
            return [
                { type: core.NgZone }
            ];
        };
        return TdMediaService;
    }());
    /**
     * @param {?} parent
     * @param {?} ngZone
     * @return {?}
     */
    function MEDIA_PROVIDER_FACTORY(parent, ngZone) {
        return parent || new TdMediaService(ngZone);
    }
    /** @type {?} */
    var MEDIA_PROVIDER = {
        // If there is already a service available, use that. Otherwise, provide a new one.
        provide: TdMediaService,
        deps: [[new core.Optional(), new core.SkipSelf(), TdMediaService], core.NgZone],
        useFactory: MEDIA_PROVIDER_FACTORY,
    };

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
     */
    var TdMediaToggleDirective = /** @class */ (function () {
        function TdMediaToggleDirective(_renderer, _elementRef, _mediaService) {
            this._renderer = _renderer;
            this._elementRef = _elementRef;
            this._mediaService = _mediaService;
            this._matches = false;
            this._attributes = {};
            this._styles = {};
            this._classes = [];
        }
        Object.defineProperty(TdMediaToggleDirective.prototype, "query", {
            /**
             * tdMediaToggle: string
             * Media query used to evaluate screen/window size.
             * Toggles attributes, classes and styles if media query is matched.
             */
            set: /**
             * tdMediaToggle: string
             * Media query used to evaluate screen/window size.
             * Toggles attributes, classes and styles if media query is matched.
             * @param {?} query
             * @return {?}
             */ function (query) {
                if (!query) {
                    throw new Error('Query needed for [tdMediaToggle] directive.');
                }
                this._query = query;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(TdMediaToggleDirective.prototype, "attributes", {
            /**
             * mediaAttributes: {[key: string]: string}
             * Attributes to be toggled when media query matches.
             */
            set: /**
             * mediaAttributes: {[key: string]: string}
             * Attributes to be toggled when media query matches.
             * @param {?} attributes
             * @return {?}
             */ function (attributes) {
                this._attributes = attributes;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(TdMediaToggleDirective.prototype, "classes", {
            /**
             * mediaClasses: string[]
             * CSS Classes to be toggled when media query matches.
             */
            set: /**
             * mediaClasses: string[]
             * CSS Classes to be toggled when media query matches.
             * @param {?} classes
             * @return {?}
             */ function (classes) {
                this._classes = classes;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(TdMediaToggleDirective.prototype, "styles", {
            /**
             * mediaStyles: {[key: string]: string}
             * CSS Styles to be toggled when media query matches.
             */
            set: /**
             * mediaStyles: {[key: string]: string}
             * CSS Styles to be toggled when media query matches.
             * @param {?} styles
             * @return {?}
             */ function (styles) {
                this._styles = styles;
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        TdMediaToggleDirective.prototype.ngOnInit = /**
         * @return {?}
         */
            function () {
                var _this = this;
                this._mediaChange(this._mediaService.query(this._query));
                this._subscription = this._mediaService.registerQuery(this._query).subscribe(function (matches) {
                    _this._mediaChange(matches);
                });
            };
        /**
         * @return {?}
         */
        TdMediaToggleDirective.prototype.ngOnDestroy = /**
         * @return {?}
         */
            function () {
                if (this._subscription) {
                    this._subscription.unsubscribe();
                }
            };
        /**
         * @param {?} matches
         * @return {?}
         */
        TdMediaToggleDirective.prototype._mediaChange = /**
         * @param {?} matches
         * @return {?}
         */
            function (matches) {
                this._matches = matches;
                this._changeAttributes();
                this._changeClasses();
                this._changeStyles();
            };
        /**
         * @return {?}
         */
        TdMediaToggleDirective.prototype._changeAttributes = /**
         * @return {?}
         */
            function () {
                for (var attr in this._attributes) {
                    if (this._matches) {
                        this._renderer.setAttribute(this._elementRef.nativeElement, attr, this._attributes[attr]);
                    }
                    else {
                        this._renderer.removeAttribute(this._elementRef.nativeElement, attr);
                    }
                }
            };
        /**
         * @return {?}
         */
        TdMediaToggleDirective.prototype._changeClasses = /**
         * @return {?}
         */
            function () {
                var _this = this;
                this._classes.forEach(function (className) {
                    if (_this._matches) {
                        _this._renderer.addClass(_this._elementRef.nativeElement, className);
                    }
                    else {
                        _this._renderer.removeClass(_this._elementRef.nativeElement, className);
                    }
                });
            };
        /**
         * @return {?}
         */
        TdMediaToggleDirective.prototype._changeStyles = /**
         * @return {?}
         */
            function () {
                for (var style in this._styles) {
                    if (this._matches) {
                        this._renderer.setStyle(this._elementRef.nativeElement, style, this._styles[style]);
                    }
                    else {
                        this._renderer.removeStyle(this._elementRef.nativeElement, style);
                    }
                }
            };
        TdMediaToggleDirective.decorators = [
            { type: core.Directive, args: [{
                        selector: '[tdMediaToggle]',
                    },] }
        ];
        /** @nocollapse */
        TdMediaToggleDirective.ctorParameters = function () {
            return [
                { type: core.Renderer2 },
                { type: core.ElementRef },
                { type: TdMediaService }
            ];
        };
        TdMediaToggleDirective.propDecorators = {
            query: [{ type: core.Input, args: ['tdMediaToggle',] }],
            attributes: [{ type: core.Input, args: ['mediaAttributes',] }],
            classes: [{ type: core.Input, args: ['mediaClasses',] }],
            styles: [{ type: core.Input, args: ['mediaStyles',] }]
        };
        return TdMediaToggleDirective;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
     */
    /** @type {?} */
    var TD_MEDIA = [
        TdMediaToggleDirective,
    ];
    var CovalentMediaModule = /** @class */ (function () {
        function CovalentMediaModule() {
        }
        CovalentMediaModule.decorators = [
            { type: core.NgModule, args: [{
                        imports: [
                            common.CommonModule,
                        ],
                        declarations: [
                            TD_MEDIA,
                        ],
                        exports: [
                            TD_MEDIA,
                        ],
                        providers: [
                            MEDIA_PROVIDER,
                        ],
                    },] }
        ];
        return CovalentMediaModule;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
     */

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
     */

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
     */

    exports.CovalentMediaModule = CovalentMediaModule;
    exports.TdMediaToggleDirective = TdMediaToggleDirective;
    exports.MEDIA_PROVIDER_FACTORY = MEDIA_PROVIDER_FACTORY;
    exports.TdMediaService = TdMediaService;
    exports.MEDIA_PROVIDER = MEDIA_PROVIDER;

    Object.defineProperty(exports, '__esModule', { value: true });

})));

//# sourceMappingURL=covalent-core-media.umd.js.map