@angular/material 8.1.4 → 8.2.3

package/esm5/icon.es5.js

@@ -7,13 +7,13 @@
  */
 import { DOCUMENT } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Inject, Injectable, Optional, SecurityContext, SkipSelf, NgModule, Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, ViewEncapsulation, InjectionToken, inject, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
+import { ErrorHandler, Inject, Injectable, Optional, SecurityContext, SkipSelf, NgModule, Attribute, ChangeDetectionStrategy, Component, ElementRef, inject, InjectionToken, Input, ViewEncapsulation, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { forkJoin, of, throwError } from 'rxjs';
 import { catchError, finalize, map, share, tap, take } from 'rxjs/operators';
 import { __extends } from 'tslib';
-import { mixinColor, MatCommonModule } from '@angular/material/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { mixinColor, MatCommonModule } from '@angular/material/core';
 
 /**
  * @fileoverview added by tsickle
@@ -69,7 +69,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) {
@@ -89,9 +90,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]".
          */
@@ -132,6 +134,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 = /**
@@ -140,10 +143,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.
@@ -156,6 +160,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 = /**
@@ -164,10 +169,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.
@@ -182,6 +188,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 = /**
@@ -191,10 +198,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.
@@ -209,6 +217,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 = /**
@@ -218,17 +227,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(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.
@@ -239,6 +249,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @template THIS
      * @this {THIS}
      * @param {?} url
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconSet = /**
@@ -246,10 +257,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.
@@ -260,6 +272,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @template THIS
      * @this {THIS}
      * @param {?} literal SVG source of the icon set.
+     * @param {?=} options
      * @return {THIS}
      */
     MatIconRegistry.prototype.addSvgIconSetLiteral = /**
@@ -267,10 +280,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.
@@ -283,6 +297,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 = /**
@@ -291,10 +306,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.
@@ -307,6 +323,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 = /**
@@ -315,9 +332,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(SecurityContext.HTML, literal);
         if (!sanitizedLiteral) {
@@ -325,7 +343,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
@@ -629,7 +647,15 @@ var MatIconRegistry = /** @class */ (function () {
                 var url = _this._sanitizer.sanitize(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 of(null);
             })));
         }));
@@ -677,7 +703,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;
                 }
@@ -710,7 +736,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
@@ -756,18 +782,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;
     };
     /**
@@ -782,6 +810,7 @@ var MatIconRegistry = /** @class */ (function () {
      * @private
      * @param {?} iconSet
      * @param {?} iconName
+     * @param {?=} options
      * @return {?}
      */
     MatIconRegistry.prototype._extractSvgIconFromSet = /**
@@ -791,9 +820,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 {?} */
@@ -809,13 +839,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
@@ -826,7 +856,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.
@@ -872,6 +902,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));
@@ -886,20 +925,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;
     };
     /**
@@ -1022,9 +1066,10 @@ var MatIconRegistry = /** @class */ (function () {
     MatIconRegistry.ctorParameters = function () { return [
         { type: HttpClient, decorators: [{ type: Optional }] },
         { type: DomSanitizer },
-        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }
+        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
+        { type: ErrorHandler, decorators: [{ type: Optional }] }
     ]; };
-    /** @nocollapse */ MatIconRegistry.ngInjectableDef = ɵɵdefineInjectable({ factory: function MatIconRegistry_Factory() { return new MatIconRegistry(ɵɵinject(HttpClient, 8), ɵɵinject(DomSanitizer), ɵɵinject(DOCUMENT, 8)); }, token: MatIconRegistry, providedIn: "root" });
+    /** @nocollapse */ MatIconRegistry.ngInjectableDef = ɵɵdefineInjectable({ factory: function MatIconRegistry_Factory() { return new MatIconRegistry(ɵɵinject(HttpClient, 8), ɵɵinject(DomSanitizer), ɵɵinject(DOCUMENT, 8), ɵɵinject(ErrorHandler, 8)); }, token: MatIconRegistry, providedIn: "root" });
     return MatIconRegistry;
 }());
 /**
@@ -1033,10 +1078,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
@@ -1049,6 +1095,7 @@ var ICON_REGISTRY_PROVIDER = {
         [new Optional(), new SkipSelf(), MatIconRegistry],
         [new Optional(), HttpClient],
         DomSanitizer,
+        [new Optional(), ErrorHandler],
         [new Optional(), (/** @type {?} */ (DOCUMENT))],
     ],
     useFactory: ICON_REGISTRY_PROVIDER_FACTORY,
@@ -1182,10 +1229,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.
@@ -1323,8 +1371,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(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(take(1))
+                    .subscribe((/**
                  * @param {?} svg
                  * @return {?}
                  */
@@ -1332,7 +1382,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();
@@ -1634,7 +1694,8 @@ var MatIcon = /** @class */ (function (_super) {
         { type: ElementRef },
         { type: MatIconRegistry },
         { type: String, decorators: [{ type: Attribute, args: ['aria-hidden',] }] },
-        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_ICON_LOCATION,] }] }
+        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_ICON_LOCATION,] }] },
+        { type: ErrorHandler, decorators: [{ type: Optional }] }
     ]; };
     MatIcon.propDecorators = {
         inline: [{ type: Input }],