@angular/material 8.1.4 → 8.2.3

package/bundles/material-icon.umd.js

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/common/http'), require('@angular/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@angular/material/core'), require('@angular/cdk/coercion')) :
-	typeof define === 'function' && define.amd ? define('@angular/material/icon', ['exports', '@angular/common', '@angular/common/http', '@angular/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@angular/material/core', '@angular/cdk/coercion'], factory) :
-	(factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.icon = {}),global.ng.common,global.ng.common.http,global.ng.core,global.ng.platformBrowser,global.rxjs,global.rxjs.operators,global.ng.material.core,global.ng.cdk.coercion));
-}(this, (function (exports,common,http,core,platformBrowser,rxjs,operators,core$1,coercion) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/common/http'), require('@angular/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/coercion'), require('@angular/material/core')) :
+	typeof define === 'function' && define.amd ? define('@angular/material/icon', ['exports', '@angular/common', '@angular/common/http', '@angular/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@angular/cdk/coercion', '@angular/material/core'], factory) :
+	(factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.icon = {}),global.ng.common,global.ng.common.http,global.ng.core,global.ng.platformBrowser,global.rxjs,global.rxjs.operators,global.ng.cdk.coercion,global.ng.material.core));
+}(this, (function (exports,common,http,core,platformBrowser,rxjs,operators,coercion,core$1) { 'use strict';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -94,7 +94,8 @@ var /**
  * \@docs-private
  */
 SvgIconConfig = /** @class */ (function () {
-    function SvgIconConfig(data) {
+    function SvgIconConfig(data, options) {
+        this.options = options;
         // Note that we can't use `instanceof SVGElement` here,
         // because it'll break during server-side rendering.
         if (!!((/** @type {?} */ (data))).nodeName) {
@@ -114,9 +115,10 @@ SvgIconConfig = /** @class */ (function () {
  * - Loads icons from URLs and extracts individual icons from icon sets.
  */
 var MatIconRegistry = /** @class */ (function () {
-    function MatIconRegistry(_httpClient, _sanitizer, document) {
+    function MatIconRegistry(_httpClient, _sanitizer, document, _errorHandler) {
         this._httpClient = _httpClient;
         this._sanitizer = _sanitizer;
+        this._errorHandler = _errorHandler;
         /**
          * URLs and cached SVG elements for individual icons. Keys are of the format "[namespace]:[icon]".
          */
@@ -157,6 +159,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @this {THIS}
      * @param {?} iconName Name under which the icon should be registered.
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIcon = /**
@@ -165,10 +168,11 @@ var MatIconRegistry = /** @class */ (function () {
      * @this {THIS}
      * @param {?} iconName Name under which the icon should be registered.
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
-    function (iconName, url) {
-        return (/** @type {?} */ (this)).addSvgIconInNamespace('', iconName, url);
+    function (iconName, url, options) {
+        return (/** @type {?} */ (this)).addSvgIconInNamespace('', iconName, url, options);
     };
     /**
      * Registers an icon using an HTML string in the default namespace.
@@ -181,6 +185,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @this {THIS}
      * @param {?} iconName Name under which the icon should be registered.
      * @param {?} literal SVG source of the icon.
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconLiteral = /**
@@ -189,10 +194,11 @@ var MatIconRegistry = /** @class */ (function () {
      * @this {THIS}
      * @param {?} iconName Name under which the icon should be registered.
      * @param {?} literal SVG source of the icon.
+     * @param {?=} options
      * @return {THIS}
      */
-    function (iconName, literal) {
-        return (/** @type {?} */ (this)).addSvgIconLiteralInNamespace('', iconName, literal);
+    function (iconName, literal, options) {
+        return (/** @type {?} */ (this)).addSvgIconLiteralInNamespace('', iconName, literal, options);
     };
     /**
      * Registers an icon by URL in the specified namespace.
@@ -207,6 +213,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @param {?} namespace Namespace in which the icon should be registered.
      * @param {?} iconName Name under which the icon should be registered.
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconInNamespace = /**
@@ -216,10 +223,11 @@ var MatIconRegistry = /** @class */ (function () {
      * @param {?} namespace Namespace in which the icon should be registered.
      * @param {?} iconName Name under which the icon should be registered.
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
-    function (namespace, iconName, url) {
-        return (/** @type {?} */ (this))._addSvgIconConfig(namespace, iconName, new SvgIconConfig(url));
+    function (namespace, iconName, url, options) {
+        return (/** @type {?} */ (this))._addSvgIconConfig(namespace, iconName, new SvgIconConfig(url, options));
     };
     /**
      * Registers an icon using an HTML string in the specified namespace.
@@ -234,6 +242,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @param {?} namespace Namespace in which the icon should be registered.
      * @param {?} iconName Name under which the icon should be registered.
      * @param {?} literal SVG source of the icon.
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconLiteralInNamespace = /**
@@ -243,17 +252,18 @@ var MatIconRegistry = /** @class */ (function () {
      * @param {?} namespace Namespace in which the icon should be registered.
      * @param {?} iconName Name under which the icon should be registered.
      * @param {?} literal SVG source of the icon.
+     * @param {?=} options
      * @return {THIS}
      */
-    function (namespace, iconName, literal) {
+    function (namespace, iconName, literal, options) {
         /** @type {?} */
         var sanitizedLiteral = (/** @type {?} */ (this))._sanitizer.sanitize(core.SecurityContext.HTML, literal);
         if (!sanitizedLiteral) {
             throw getMatIconFailedToSanitizeLiteralError(literal);
         }
         /** @type {?} */
-        var svgElement = (/** @type {?} */ (this))._createSvgElementForSingleIcon(sanitizedLiteral);
-        return (/** @type {?} */ (this))._addSvgIconConfig(namespace, iconName, new SvgIconConfig(svgElement));
+        var svgElement = (/** @type {?} */ (this))._createSvgElementForSingleIcon(sanitizedLiteral, options);
+        return (/** @type {?} */ (this))._addSvgIconConfig(namespace, iconName, new SvgIconConfig(svgElement, options));
     };
     /**
      * Registers an icon set by URL in the default namespace.
@@ -264,6 +274,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @template THIS
      * @this {THIS}
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconSet = /**
@@ -271,10 +282,11 @@ var MatIconRegistry = /** @class */ (function () {
      * @template THIS
      * @this {THIS}
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
-    function (url) {
-        return (/** @type {?} */ (this)).addSvgIconSetInNamespace('', url);
+    function (url, options) {
+        return (/** @type {?} */ (this)).addSvgIconSetInNamespace('', url, options);
     };
     /**
      * Registers an icon set using an HTML string in the default namespace.
@@ -285,6 +297,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @template THIS
      * @this {THIS}
      * @param {?} literal SVG source of the icon set.
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconSetLiteral = /**
@@ -292,10 +305,11 @@ var MatIconRegistry = /** @class */ (function () {
      * @template THIS
      * @this {THIS}
      * @param {?} literal SVG source of the icon set.
+     * @param {?=} options
      * @return {THIS}
      */
-    function (literal) {
-        return (/** @type {?} */ (this)).addSvgIconSetLiteralInNamespace('', literal);
+    function (literal, options) {
+        return (/** @type {?} */ (this)).addSvgIconSetLiteralInNamespace('', literal, options);
     };
     /**
      * Registers an icon set by URL in the specified namespace.
@@ -308,6 +322,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @this {THIS}
      * @param {?} namespace Namespace in which to register the icon set.
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconSetInNamespace = /**
@@ -316,10 +331,11 @@ var MatIconRegistry = /** @class */ (function () {
      * @this {THIS}
      * @param {?} namespace Namespace in which to register the icon set.
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
-    function (namespace, url) {
-        return (/** @type {?} */ (this))._addSvgIconSetConfig(namespace, new SvgIconConfig(url));
+    function (namespace, url, options) {
+        return (/** @type {?} */ (this))._addSvgIconSetConfig(namespace, new SvgIconConfig(url, options));
     };
     /**
      * Registers an icon set using an HTML string in the specified namespace.
@@ -332,6 +348,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @this {THIS}
      * @param {?} namespace Namespace in which to register the icon set.
      * @param {?} literal SVG source of the icon set.
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconSetLiteralInNamespace = /**
@@ -340,9 +357,10 @@ var MatIconRegistry = /** @class */ (function () {
      * @this {THIS}
      * @param {?} namespace Namespace in which to register the icon set.
      * @param {?} literal SVG source of the icon set.
+     * @param {?=} options
      * @return {THIS}
      */
-    function (namespace, literal) {
+    function (namespace, literal, options) {
         /** @type {?} */
         var sanitizedLiteral = (/** @type {?} */ (this))._sanitizer.sanitize(core.SecurityContext.HTML, literal);
         if (!sanitizedLiteral) {
@@ -350,7 +368,7 @@ var MatIconRegistry = /** @class */ (function () {
         }
         /** @type {?} */
         var svgElement = (/** @type {?} */ (this))._svgElementFromString(sanitizedLiteral);
-        return (/** @type {?} */ (this))._addSvgIconSetConfig(namespace, new SvgIconConfig(svgElement));
+        return (/** @type {?} */ (this))._addSvgIconSetConfig(namespace, new SvgIconConfig(svgElement, options));
     };
     /**
      * Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon
@@ -654,7 +672,15 @@ var MatIconRegistry = /** @class */ (function () {
                 var url = _this._sanitizer.sanitize(core.SecurityContext.RESOURCE_URL, iconSetConfig.url);
                 // Swallow errors fetching individual URLs so the
                 // combined Observable won't necessarily fail.
-                console.error("Loading icon set URL: " + url + " failed: " + err.message);
+                /** @type {?} */
+                var errorMessage = "Loading icon set URL: " + url + " failed: " + err.message;
+                // @breaking-change 9.0.0 _errorHandler parameter to be made required
+                if (_this._errorHandler) {
+                    _this._errorHandler.handleError(new Error(errorMessage));
+                }
+                else {
+                    console.error(errorMessage);
+                }
                 return rxjs.of(null);
             })));
         }));
@@ -702,7 +728,7 @@ var MatIconRegistry = /** @class */ (function () {
             var config = iconSetConfigs[i];
             if (config.svgElement) {
                 /** @type {?} */
-                var foundIcon = this._extractSvgIconFromSet(config.svgElement, iconName);
+                var foundIcon = this._extractSvgIconFromSet(config.svgElement, iconName, config.options);
                 if (foundIcon) {
                     return foundIcon;
                 }
@@ -735,7 +761,7 @@ var MatIconRegistry = /** @class */ (function () {
          * @param {?} svgText
          * @return {?}
          */
-        function (svgText) { return _this._createSvgElementForSingleIcon(svgText); })));
+        function (svgText) { return _this._createSvgElementForSingleIcon(svgText, config.options); })));
     };
     /**
      * Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element
@@ -781,18 +807,20 @@ var MatIconRegistry = /** @class */ (function () {
      * Creates a DOM element from the given SVG string, and adds default attributes.
      * @private
      * @param {?} responseText
+     * @param {?=} options
      * @return {?}
      */
     MatIconRegistry.prototype._createSvgElementForSingleIcon = /**
      * Creates a DOM element from the given SVG string, and adds default attributes.
      * @private
      * @param {?} responseText
+     * @param {?=} options
      * @return {?}
      */
-    function (responseText) {
+    function (responseText, options) {
         /** @type {?} */
         var svg = this._svgElementFromString(responseText);
-        this._setSvgAttributes(svg);
+        this._setSvgAttributes(svg, options);
         return svg;
     };
     /**
@@ -807,6 +835,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @private
      * @param {?} iconSet
      * @param {?} iconName
+     * @param {?=} options
      * @return {?}
      */
     MatIconRegistry.prototype._extractSvgIconFromSet = /**
@@ -816,9 +845,10 @@ var MatIconRegistry = /** @class */ (function () {
      * @private
      * @param {?} iconSet
      * @param {?} iconName
+     * @param {?=} options
      * @return {?}
      */
-    function (iconSet, iconName) {
+    function (iconSet, iconName, options) {
         // Use the `id="iconName"` syntax in order to escape special
         // characters in the ID (versus using the #iconName syntax).
         /** @type {?} */
@@ -834,13 +864,13 @@ var MatIconRegistry = /** @class */ (function () {
         // If the icon node is itself an <svg> node, clone and return it directly. If not, set it as
         // the content of a new <svg> node.
         if (iconElement.nodeName.toLowerCase() === 'svg') {
-            return this._setSvgAttributes((/** @type {?} */ (iconElement)));
+            return this._setSvgAttributes((/** @type {?} */ (iconElement)), options);
         }
         // If the node is a <symbol>, it won't be rendered so we have to convert it into <svg>. Note
         // that the same could be achieved by referring to it via <use href="#id">, however the <use>
         // tag is problematic on Firefox, because it needs to include the current page path.
         if (iconElement.nodeName.toLowerCase() === 'symbol') {
-            return this._setSvgAttributes(this._toSvgElement(iconElement));
+            return this._setSvgAttributes(this._toSvgElement(iconElement), options);
         }
         // createElement('SVG') doesn't work as expected; the DOM ends up with
         // the correct nodes, but the SVG content doesn't render. Instead we
@@ -851,7 +881,7 @@ var MatIconRegistry = /** @class */ (function () {
         var svg = this._svgElementFromString('<svg></svg>');
         // Clone the node so we don't remove it from the parent icon set element.
         svg.appendChild(iconElement);
-        return this._setSvgAttributes(svg);
+        return this._setSvgAttributes(svg, options);
     };
     /**
      * Creates a DOM element from the given SVG string.
@@ -897,6 +927,15 @@ var MatIconRegistry = /** @class */ (function () {
     function (element) {
         /** @type {?} */
         var svg = this._svgElementFromString('<svg></svg>');
+        /** @type {?} */
+        var attributes = element.attributes;
+        // Copy over all the attributes from the `symbol` to the new SVG, except the id.
+        for (var i = 0; i < attributes.length; i++) {
+            var _a = attributes[i], name_1 = _a.name, value = _a.value;
+            if (name_1 !== 'id') {
+                svg.setAttribute(name_1, value);
+            }
+        }
         for (var i = 0; i < element.childNodes.length; i++) {
             if (element.childNodes[i].nodeType === this._document.ELEMENT_NODE) {
                 svg.appendChild(element.childNodes[i].cloneNode(true));
@@ -911,20 +950,25 @@ var MatIconRegistry = /** @class */ (function () {
      * Sets the default attributes for an SVG element to be used as an icon.
      * @private
      * @param {?} svg
+     * @param {?=} options
      * @return {?}
      */
     MatIconRegistry.prototype._setSvgAttributes = /**
      * Sets the default attributes for an SVG element to be used as an icon.
      * @private
      * @param {?} svg
+     * @param {?=} options
      * @return {?}
      */
-    function (svg) {
+    function (svg, options) {
         svg.setAttribute('fit', '');
         svg.setAttribute('height', '100%');
         svg.setAttribute('width', '100%');
         svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
         svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.
+        if (options && options.viewBox) {
+            svg.setAttribute('viewBox', options.viewBox);
+        }
         return svg;
     };
     /**
@@ -1047,9 +1091,10 @@ var MatIconRegistry = /** @class */ (function () {
     MatIconRegistry.ctorParameters = function () { return [
         { type: http.HttpClient, decorators: [{ type: core.Optional }] },
         { type: platformBrowser.DomSanitizer },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] }
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] },
+        { type: core.ErrorHandler, decorators: [{ type: core.Optional }] }
     ]; };
-    /** @nocollapse */ MatIconRegistry.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatIconRegistry_Factory() { return new MatIconRegistry(core.ɵɵinject(http.HttpClient, 8), core.ɵɵinject(platformBrowser.DomSanitizer), core.ɵɵinject(common.DOCUMENT, 8)); }, token: MatIconRegistry, providedIn: "root" });
+    /** @nocollapse */ MatIconRegistry.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatIconRegistry_Factory() { return new MatIconRegistry(core.ɵɵinject(http.HttpClient, 8), core.ɵɵinject(platformBrowser.DomSanitizer), core.ɵɵinject(common.DOCUMENT, 8), core.ɵɵinject(core.ErrorHandler, 8)); }, token: MatIconRegistry, providedIn: "root" });
     return MatIconRegistry;
 }());
 /**
@@ -1058,10 +1103,11 @@ var MatIconRegistry = /** @class */ (function () {
  * @param {?} httpClient
  * @param {?} sanitizer
  * @param {?=} document
+ * @param {?=} errorHandler
  * @return {?}
  */
-function ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry, httpClient, sanitizer, document) {
-    return parentRegistry || new MatIconRegistry(httpClient, sanitizer, document);
+function ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry, httpClient, sanitizer, document, errorHandler) {
+    return parentRegistry || new MatIconRegistry(httpClient, sanitizer, document, errorHandler);
 }
 /**
  * \@docs-private
@@ -1074,6 +1120,7 @@ var ICON_REGISTRY_PROVIDER = {
         [new core.Optional(), new core.SkipSelf(), MatIconRegistry],
         [new core.Optional(), http.HttpClient],
         platformBrowser.DomSanitizer,
+        [new core.Optional(), core.ErrorHandler],
         [new core.Optional(), (/** @type {?} */ (common.DOCUMENT))],
     ],
     useFactory: ICON_REGISTRY_PROVIDER_FACTORY,
@@ -1207,10 +1254,11 @@ var funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
  */
 var MatIcon = /** @class */ (function (_super) {
     __extends(MatIcon, _super);
-    function MatIcon(elementRef, _iconRegistry, ariaHidden, _location) {
+    function MatIcon(elementRef, _iconRegistry, ariaHidden, _location, _errorHandler) {
         var _this = _super.call(this, elementRef) || this;
         _this._iconRegistry = _iconRegistry;
         _this._location = _location;
+        _this._errorHandler = _errorHandler;
         _this._inline = false;
         // If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
         // the right thing to do for the majority of icon use-cases.
@@ -1348,8 +1396,10 @@ var MatIcon = /** @class */ (function (_super) {
         var svgIconChanges = changes['svgIcon'];
         if (svgIconChanges) {
             if (this.svgIcon) {
-                var _a = this._splitIconName(this.svgIcon), namespace = _a[0], iconName = _a[1];
-                this._iconRegistry.getNamedSvgIcon(iconName, namespace).pipe(operators.take(1)).subscribe((/**
+                var _a = this._splitIconName(this.svgIcon), namespace_1 = _a[0], iconName_1 = _a[1];
+                this._iconRegistry.getNamedSvgIcon(iconName_1, namespace_1)
+                    .pipe(operators.take(1))
+                    .subscribe((/**
                  * @param {?} svg
                  * @return {?}
                  */
@@ -1357,7 +1407,17 @@ var MatIcon = /** @class */ (function (_super) {
                  * @param {?} err
                  * @return {?}
                  */
-                function (err) { return console.log("Error retrieving icon: " + err.message); }));
+                function (err) {
+                    /** @type {?} */
+                    var errorMessage = "Error retrieving icon " + namespace_1 + ":" + iconName_1 + "! " + err.message;
+                    // @breaking-change 9.0.0 _errorHandler parameter to be made required.
+                    if (_this._errorHandler) {
+                        _this._errorHandler.handleError(new Error(errorMessage));
+                    }
+                    else {
+                        console.error(errorMessage);
+                    }
+                }));
             }
             else if (svgIconChanges.previousValue) {
                 this._clearSvgElement();
@@ -1659,7 +1719,8 @@ var MatIcon = /** @class */ (function (_super) {
         { type: core.ElementRef },
         { type: MatIconRegistry },
         { type: String, decorators: [{ type: core.Attribute, args: ['aria-hidden',] }] },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_ICON_LOCATION,] }] }
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_ICON_LOCATION,] }] },
+        { type: core.ErrorHandler, decorators: [{ type: core.Optional }] }
     ]; };
     MatIcon.propDecorators = {
         inline: [{ type: core.Input }],