| import { SecurityContext, ɵɵdefineInjectable, ɵɵinject, ErrorHandler, Injectable, Optional, Inject, SkipSelf, InjectionToken, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Attribute, Input, NgModule } from '@angular/core'; |
| import { mixinColor, MatCommonModule } from '@angular/material/core'; |
| import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
| import { DOCUMENT } from '@angular/common'; |
| import { of, throwError, forkJoin, Subscription } from 'rxjs'; |
| import { tap, map, catchError, finalize, share, take } from 'rxjs/operators'; |
| import { HttpClient } from '@angular/common/http'; |
| import { DomSanitizer } from '@angular/platform-browser'; |
| |
| /** |
| * @license |
| * Copyright Google LLC All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| /** |
| * Returns an exception to be thrown in the case when attempting to |
| * load an icon with a name that cannot be found. |
| * @docs-private |
| */ |
| function getMatIconNameNotFoundError(iconName) { |
| return Error(`Unable to find icon with the name "${iconName}"`); |
| } |
| /** |
| * Returns an exception to be thrown when the consumer attempts to use |
| * `<mat-icon>` without including @angular/common/http. |
| * @docs-private |
| */ |
| function getMatIconNoHttpProviderError() { |
| return Error('Could not find HttpClient provider for use with Angular Material icons. ' + |
| 'Please include the HttpClientModule from @angular/common/http in your ' + |
| 'app imports.'); |
| } |
| /** |
| * Returns an exception to be thrown when a URL couldn't be sanitized. |
| * @param url URL that was attempted to be sanitized. |
| * @docs-private |
| */ |
| function getMatIconFailedToSanitizeUrlError(url) { |
| return Error(`The URL provided to MatIconRegistry was not trusted as a resource URL ` + |
| `via Angular's DomSanitizer. Attempted URL was "${url}".`); |
| } |
| /** |
| * Returns an exception to be thrown when a HTML string couldn't be sanitized. |
| * @param literal HTML that was attempted to be sanitized. |
| * @docs-private |
| */ |
| function getMatIconFailedToSanitizeLiteralError(literal) { |
| return Error(`The literal provided to MatIconRegistry was not trusted as safe HTML by ` + |
| `Angular's DomSanitizer. Attempted literal was "${literal}".`); |
| } |
| /** |
| * Configuration for an icon, including the URL and possibly the cached SVG element. |
| * @docs-private |
| */ |
| class SvgIconConfig { |
| constructor(url, svgText, options) { |
| this.url = url; |
| this.svgText = svgText; |
| this.options = options; |
| } |
| } |
| /** |
| * Service to register and display icons used by the `<mat-icon>` component. |
| * - Registers icon URLs by namespace and name. |
| * - Registers icon set URLs by namespace. |
| * - Registers aliases for CSS classes, for use with icon fonts. |
| * - Loads icons from URLs and extracts individual icons from icon sets. |
| */ |
| class MatIconRegistry { |
| constructor(_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]". |
| */ |
| this._svgIconConfigs = new Map(); |
| /** |
| * SvgIconConfig objects and cached SVG elements for icon sets, keyed by namespace. |
| * Multiple icon sets can be registered under the same namespace. |
| */ |
| this._iconSetConfigs = new Map(); |
| /** Cache for icons loaded by direct URLs. */ |
| this._cachedIconsByUrl = new Map(); |
| /** In-progress icon fetches. Used to coalesce multiple requests to the same URL. */ |
| this._inProgressUrlFetches = new Map(); |
| /** Map from font identifiers to their CSS class names. Used for icon fonts. */ |
| this._fontCssClassesByAlias = new Map(); |
| /** Registered icon resolver functions. */ |
| this._resolvers = []; |
| /** |
| * The CSS class to apply when an `<mat-icon>` component has no icon name, url, or font specified. |
| * The default 'material-icons' value assumes that the material icon font has been loaded as |
| * described at http://google.github.io/material-design-icons/#icon-font-for-the-web |
| */ |
| this._defaultFontSetClass = 'material-icons'; |
| this._document = document; |
| } |
| /** |
| * Registers an icon by URL in the default namespace. |
| * @param iconName Name under which the icon should be registered. |
| * @param url |
| */ |
| addSvgIcon(iconName, url, options) { |
| return this.addSvgIconInNamespace('', iconName, url, options); |
| } |
| /** |
| * Registers an icon using an HTML string in the default namespace. |
| * @param iconName Name under which the icon should be registered. |
| * @param literal SVG source of the icon. |
| */ |
| addSvgIconLiteral(iconName, literal, options) { |
| return this.addSvgIconLiteralInNamespace('', iconName, literal, options); |
| } |
| /** |
| * Registers an icon by URL in the specified namespace. |
| * @param namespace Namespace in which the icon should be registered. |
| * @param iconName Name under which the icon should be registered. |
| * @param url |
| */ |
| addSvgIconInNamespace(namespace, iconName, url, options) { |
| return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig(url, null, options)); |
| } |
| /** |
| * Registers an icon resolver function with the registry. The function will be invoked with the |
| * name and namespace of an icon when the registry tries to resolve the URL from which to fetch |
| * the icon. The resolver is expected to return a `SafeResourceUrl` that points to the icon, |
| * an object with the icon URL and icon options, or `null` if the icon is not supported. Resolvers |
| * will be invoked in the order in which they have been registered. |
| * @param resolver Resolver function to be registered. |
| */ |
| addSvgIconResolver(resolver) { |
| this._resolvers.push(resolver); |
| return this; |
| } |
| /** |
| * Registers an icon using an HTML string in the specified namespace. |
| * @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. |
| */ |
| addSvgIconLiteralInNamespace(namespace, iconName, literal, options) { |
| const cleanLiteral = this._sanitizer.sanitize(SecurityContext.HTML, literal); |
| // TODO: add an ngDevMode check |
| if (!cleanLiteral) { |
| throw getMatIconFailedToSanitizeLiteralError(literal); |
| } |
| return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig('', cleanLiteral, options)); |
| } |
| /** |
| * Registers an icon set by URL in the default namespace. |
| * @param url |
| */ |
| addSvgIconSet(url, options) { |
| return this.addSvgIconSetInNamespace('', url, options); |
| } |
| /** |
| * Registers an icon set using an HTML string in the default namespace. |
| * @param literal SVG source of the icon set. |
| */ |
| addSvgIconSetLiteral(literal, options) { |
| return this.addSvgIconSetLiteralInNamespace('', literal, options); |
| } |
| /** |
| * Registers an icon set by URL in the specified namespace. |
| * @param namespace Namespace in which to register the icon set. |
| * @param url |
| */ |
| addSvgIconSetInNamespace(namespace, url, options) { |
| return this._addSvgIconSetConfig(namespace, new SvgIconConfig(url, null, options)); |
| } |
| /** |
| * Registers an icon set using an HTML string in the specified namespace. |
| * @param namespace Namespace in which to register the icon set. |
| * @param literal SVG source of the icon set. |
| */ |
| addSvgIconSetLiteralInNamespace(namespace, literal, options) { |
| const cleanLiteral = this._sanitizer.sanitize(SecurityContext.HTML, literal); |
| if (!cleanLiteral) { |
| throw getMatIconFailedToSanitizeLiteralError(literal); |
| } |
| return this._addSvgIconSetConfig(namespace, new SvgIconConfig('', cleanLiteral, options)); |
| } |
| /** |
| * Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon |
| * component with the alias as the fontSet input will cause the class name to be applied |
| * to the `<mat-icon>` element. |
| * |
| * @param alias Alias for the font. |
| * @param className Class name override to be used instead of the alias. |
| */ |
| registerFontClassAlias(alias, className = alias) { |
| this._fontCssClassesByAlias.set(alias, className); |
| return this; |
| } |
| /** |
| * Returns the CSS class name associated with the alias by a previous call to |
| * registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified. |
| */ |
| classNameForFontAlias(alias) { |
| return this._fontCssClassesByAlias.get(alias) || alias; |
| } |
| /** |
| * Sets the CSS class name to be used for icon fonts when an `<mat-icon>` component does not |
| * have a fontSet input value, and is not loading an icon by name or URL. |
| * |
| * @param className |
| */ |
| setDefaultFontSetClass(className) { |
| this._defaultFontSetClass = className; |
| return this; |
| } |
| /** |
| * Returns the CSS class name to be used for icon fonts when an `<mat-icon>` component does not |
| * have a fontSet input value, and is not loading an icon by name or URL. |
| */ |
| getDefaultFontSetClass() { |
| return this._defaultFontSetClass; |
| } |
| /** |
| * Returns an Observable that produces the icon (as an `<svg>` DOM element) from the given URL. |
| * The response from the URL may be cached so this will not always cause an HTTP request, but |
| * the produced element will always be a new copy of the originally fetched icon. (That is, |
| * it will not contain any modifications made to elements previously returned). |
| * |
| * @param safeUrl URL from which to fetch the SVG icon. |
| */ |
| getSvgIconFromUrl(safeUrl) { |
| const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl); |
| if (!url) { |
| throw getMatIconFailedToSanitizeUrlError(safeUrl); |
| } |
| const cachedIcon = this._cachedIconsByUrl.get(url); |
| if (cachedIcon) { |
| return of(cloneSvg(cachedIcon)); |
| } |
| return this._loadSvgIconFromConfig(new SvgIconConfig(safeUrl, null)).pipe(tap(svg => this._cachedIconsByUrl.set(url, svg)), map(svg => cloneSvg(svg))); |
| } |
| /** |
| * Returns an Observable that produces the icon (as an `<svg>` DOM element) with the given name |
| * and namespace. The icon must have been previously registered with addIcon or addIconSet; |
| * if not, the Observable will throw an error. |
| * |
| * @param name Name of the icon to be retrieved. |
| * @param namespace Namespace in which to look for the icon. |
| */ |
| getNamedSvgIcon(name, namespace = '') { |
| const key = iconKey(namespace, name); |
| let config = this._svgIconConfigs.get(key); |
| // Return (copy of) cached icon if possible. |
| if (config) { |
| return this._getSvgFromConfig(config); |
| } |
| // Otherwise try to resolve the config from one of the resolver functions. |
| config = this._getIconConfigFromResolvers(namespace, name); |
| if (config) { |
| this._svgIconConfigs.set(key, config); |
| return this._getSvgFromConfig(config); |
| } |
| // See if we have any icon sets registered for the namespace. |
| const iconSetConfigs = this._iconSetConfigs.get(namespace); |
| if (iconSetConfigs) { |
| return this._getSvgFromIconSetConfigs(name, iconSetConfigs); |
| } |
| return throwError(getMatIconNameNotFoundError(key)); |
| } |
| ngOnDestroy() { |
| this._resolvers = []; |
| this._svgIconConfigs.clear(); |
| this._iconSetConfigs.clear(); |
| this._cachedIconsByUrl.clear(); |
| } |
| /** |
| * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not. |
| */ |
| _getSvgFromConfig(config) { |
| if (config.svgText) { |
| // We already have the SVG element for this icon, return a copy. |
| return of(cloneSvg(this._svgElementFromConfig(config))); |
| } |
| else { |
| // Fetch the icon from the config's URL, cache it, and return a copy. |
| return this._loadSvgIconFromConfig(config).pipe(map(svg => cloneSvg(svg))); |
| } |
| } |
| /** |
| * Attempts to find an icon with the specified name in any of the SVG icon sets. |
| * First searches the available cached icons for a nested element with a matching name, and |
| * if found copies the element to a new `<svg>` element. If not found, fetches all icon sets |
| * that have not been cached, and searches again after all fetches are completed. |
| * The returned Observable produces the SVG element if possible, and throws |
| * an error if no icon with the specified name can be found. |
| */ |
| _getSvgFromIconSetConfigs(name, iconSetConfigs) { |
| // For all the icon set SVG elements we've fetched, see if any contain an icon with the |
| // requested name. |
| const namedIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs); |
| if (namedIcon) { |
| // We could cache namedIcon in _svgIconConfigs, but since we have to make a copy every |
| // time anyway, there's probably not much advantage compared to just always extracting |
| // it from the icon set. |
| return of(namedIcon); |
| } |
| // Not found in any cached icon sets. If there are icon sets with URLs that we haven't |
| // fetched, fetch them now and look for iconName in the results. |
| const iconSetFetchRequests = iconSetConfigs |
| .filter(iconSetConfig => !iconSetConfig.svgText) |
| .map(iconSetConfig => { |
| return this._loadSvgIconSetFromConfig(iconSetConfig).pipe(catchError((err) => { |
| const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, iconSetConfig.url); |
| // Swallow errors fetching individual URLs so the |
| // combined Observable won't necessarily fail. |
| const errorMessage = `Loading icon set URL: ${url} failed: ${err.message}`; |
| this._errorHandler.handleError(new Error(errorMessage)); |
| return of(null); |
| })); |
| }); |
| // Fetch all the icon set URLs. When the requests complete, every IconSet should have a |
| // cached SVG element (unless the request failed), and we can check again for the icon. |
| return forkJoin(iconSetFetchRequests).pipe(map(() => { |
| const foundIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs); |
| // TODO: add an ngDevMode check |
| if (!foundIcon) { |
| throw getMatIconNameNotFoundError(name); |
| } |
| return foundIcon; |
| })); |
| } |
| /** |
| * Searches the cached SVG elements for the given icon sets for a nested icon element whose "id" |
| * tag matches the specified name. If found, copies the nested element to a new SVG element and |
| * returns it. Returns null if no matching element is found. |
| */ |
| _extractIconWithNameFromAnySet(iconName, iconSetConfigs) { |
| // Iterate backwards, so icon sets added later have precedence. |
| for (let i = iconSetConfigs.length - 1; i >= 0; i--) { |
| const config = iconSetConfigs[i]; |
| // Parsing the icon set's text into an SVG element can be expensive. We can avoid some of |
| // the parsing by doing a quick check using `indexOf` to see if there's any chance for the |
| // icon to be in the set. This won't be 100% accurate, but it should help us avoid at least |
| // some of the parsing. |
| if (config.svgText && config.svgText.indexOf(iconName) > -1) { |
| const svg = this._svgElementFromConfig(config); |
| const foundIcon = this._extractSvgIconFromSet(svg, iconName, config.options); |
| if (foundIcon) { |
| return foundIcon; |
| } |
| } |
| } |
| return null; |
| } |
| /** |
| * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element |
| * from it. |
| */ |
| _loadSvgIconFromConfig(config) { |
| return this._fetchIcon(config).pipe(tap(svgText => config.svgText = svgText), map(() => this._svgElementFromConfig(config))); |
| } |
| /** |
| * Loads the content of the icon set URL specified in the |
| * SvgIconConfig and attaches it to the config. |
| */ |
| _loadSvgIconSetFromConfig(config) { |
| if (config.svgText) { |
| return of(null); |
| } |
| return this._fetchIcon(config).pipe(tap(svgText => config.svgText = svgText)); |
| } |
| /** |
| * Searches the cached element of the given SvgIconConfig for a nested icon element whose "id" |
| * tag matches the specified name. If found, copies the nested element to a new SVG element and |
| * returns it. Returns null if no matching element is found. |
| */ |
| _extractSvgIconFromSet(iconSet, iconName, options) { |
| // Use the `id="iconName"` syntax in order to escape special |
| // characters in the ID (versus using the #iconName syntax). |
| const iconSource = iconSet.querySelector(`[id="${iconName}"]`); |
| if (!iconSource) { |
| return null; |
| } |
| // Clone the element and remove the ID to prevent multiple elements from being added |
| // to the page with the same ID. |
| const iconElement = iconSource.cloneNode(true); |
| iconElement.removeAttribute('id'); |
| // 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(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), 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 |
| // have to create an empty SVG node using innerHTML and append its content. |
| // Elements created using DOMParser.parseFromString have the same problem. |
| // http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display |
| const 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, options); |
| } |
| /** |
| * Creates a DOM element from the given SVG string. |
| */ |
| _svgElementFromString(str) { |
| const div = this._document.createElement('DIV'); |
| div.innerHTML = str; |
| const svg = div.querySelector('svg'); |
| // TODO: add an ngDevMode check |
| if (!svg) { |
| throw Error('<svg> tag not found'); |
| } |
| return svg; |
| } |
| /** |
| * Converts an element into an SVG node by cloning all of its children. |
| */ |
| _toSvgElement(element) { |
| const svg = this._svgElementFromString('<svg></svg>'); |
| const attributes = element.attributes; |
| // Copy over all the attributes from the `symbol` to the new SVG, except the id. |
| for (let i = 0; i < attributes.length; i++) { |
| const { name, value } = attributes[i]; |
| if (name !== 'id') { |
| svg.setAttribute(name, value); |
| } |
| } |
| for (let i = 0; i < element.childNodes.length; i++) { |
| if (element.childNodes[i].nodeType === this._document.ELEMENT_NODE) { |
| svg.appendChild(element.childNodes[i].cloneNode(true)); |
| } |
| } |
| return svg; |
| } |
| /** |
| * Sets the default attributes for an SVG element to be used as an icon. |
| */ |
| _setSvgAttributes(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; |
| } |
| /** |
| * Returns an Observable which produces the string contents of the given icon. Results may be |
| * cached, so future calls with the same URL may not cause another HTTP request. |
| */ |
| _fetchIcon(iconConfig) { |
| var _a; |
| const { url: safeUrl, options } = iconConfig; |
| const withCredentials = (_a = options === null || options === void 0 ? void 0 : options.withCredentials) !== null && _a !== void 0 ? _a : false; |
| if (!this._httpClient) { |
| throw getMatIconNoHttpProviderError(); |
| } |
| // TODO: add an ngDevMode check |
| if (safeUrl == null) { |
| throw Error(`Cannot fetch icon from URL "${safeUrl}".`); |
| } |
| const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl); |
| // TODO: add an ngDevMode check |
| if (!url) { |
| throw getMatIconFailedToSanitizeUrlError(safeUrl); |
| } |
| // Store in-progress fetches to avoid sending a duplicate request for a URL when there is |
| // already a request in progress for that URL. It's necessary to call share() on the |
| // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs. |
| const inProgressFetch = this._inProgressUrlFetches.get(url); |
| if (inProgressFetch) { |
| return inProgressFetch; |
| } |
| const req = this._httpClient.get(url, { responseType: 'text', withCredentials }).pipe(finalize(() => this._inProgressUrlFetches.delete(url)), share()); |
| this._inProgressUrlFetches.set(url, req); |
| return req; |
| } |
| /** |
| * Registers an icon config by name in the specified namespace. |
| * @param namespace Namespace in which to register the icon config. |
| * @param iconName Name under which to register the config. |
| * @param config Config to be registered. |
| */ |
| _addSvgIconConfig(namespace, iconName, config) { |
| this._svgIconConfigs.set(iconKey(namespace, iconName), config); |
| return this; |
| } |
| /** |
| * Registers an icon set config in the specified namespace. |
| * @param namespace Namespace in which to register the icon config. |
| * @param config Config to be registered. |
| */ |
| _addSvgIconSetConfig(namespace, config) { |
| const configNamespace = this._iconSetConfigs.get(namespace); |
| if (configNamespace) { |
| configNamespace.push(config); |
| } |
| else { |
| this._iconSetConfigs.set(namespace, [config]); |
| } |
| return this; |
| } |
| /** Parses a config's text into an SVG element. */ |
| _svgElementFromConfig(config) { |
| if (!config.svgElement) { |
| const svg = this._svgElementFromString(config.svgText); |
| this._setSvgAttributes(svg, config.options); |
| config.svgElement = svg; |
| } |
| return config.svgElement; |
| } |
| /** Tries to create an icon config through the registered resolver functions. */ |
| _getIconConfigFromResolvers(namespace, name) { |
| for (let i = 0; i < this._resolvers.length; i++) { |
| const result = this._resolvers[i](name, namespace); |
| if (result) { |
| return isSafeUrlWithOptions(result) ? |
| new SvgIconConfig(result.url, null, result.options) : |
| new SvgIconConfig(result, null); |
| } |
| } |
| return undefined; |
| } |
| } |
| MatIconRegistry.ɵprov = ɵɵdefineInjectable({ factory: function MatIconRegistry_Factory() { return new MatIconRegistry(ɵɵinject(HttpClient, 8), ɵɵinject(DomSanitizer), ɵɵinject(DOCUMENT, 8), ɵɵinject(ErrorHandler)); }, token: MatIconRegistry, providedIn: "root" }); |
| MatIconRegistry.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] } |
| ]; |
| MatIconRegistry.ctorParameters = () => [ |
| { type: HttpClient, decorators: [{ type: Optional }] }, |
| { type: DomSanitizer }, |
| { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }, |
| { type: ErrorHandler } |
| ]; |
| /** @docs-private */ |
| function ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry, httpClient, sanitizer, errorHandler, document) { |
| return parentRegistry || new MatIconRegistry(httpClient, sanitizer, document, errorHandler); |
| } |
| /** @docs-private */ |
| const ICON_REGISTRY_PROVIDER = { |
| // If there is already an MatIconRegistry available, use that. Otherwise, provide a new one. |
| provide: MatIconRegistry, |
| deps: [ |
| [new Optional(), new SkipSelf(), MatIconRegistry], |
| [new Optional(), HttpClient], |
| DomSanitizer, |
| ErrorHandler, |
| [new Optional(), DOCUMENT], |
| ], |
| useFactory: ICON_REGISTRY_PROVIDER_FACTORY, |
| }; |
| /** Clones an SVGElement while preserving type information. */ |
| function cloneSvg(svg) { |
| return svg.cloneNode(true); |
| } |
| /** Returns the cache key to use for an icon namespace and name. */ |
| function iconKey(namespace, name) { |
| return namespace + ':' + name; |
| } |
| function isSafeUrlWithOptions(value) { |
| return !!(value.url && value.options); |
| } |
| |
| /** |
| * @license |
| * Copyright Google LLC All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| // Boilerplate for applying mixins to MatIcon. |
| /** @docs-private */ |
| class MatIconBase { |
| constructor(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| } |
| const _MatIconMixinBase = mixinColor(MatIconBase); |
| /** |
| * Injection token used to provide the current location to `MatIcon`. |
| * Used to handle server-side rendering and to stub out during unit tests. |
| * @docs-private |
| */ |
| const MAT_ICON_LOCATION = new InjectionToken('mat-icon-location', { |
| providedIn: 'root', |
| factory: MAT_ICON_LOCATION_FACTORY |
| }); |
| /** @docs-private */ |
| function MAT_ICON_LOCATION_FACTORY() { |
| const _document = inject(DOCUMENT); |
| const _location = _document ? _document.location : null; |
| return { |
| // Note that this needs to be a function, rather than a property, because Angular |
| // will only resolve it once, but we want the current path on each call. |
| getPathname: () => _location ? (_location.pathname + _location.search) : '' |
| }; |
| } |
| /** SVG attributes that accept a FuncIRI (e.g. `url(<something>)`). */ |
| const funcIriAttributes = [ |
| 'clip-path', |
| 'color-profile', |
| 'src', |
| 'cursor', |
| 'fill', |
| 'filter', |
| 'marker', |
| 'marker-start', |
| 'marker-mid', |
| 'marker-end', |
| 'mask', |
| 'stroke' |
| ]; |
| const ɵ0 = attr => `[${attr}]`; |
| /** Selector that can be used to find all elements that are using a `FuncIRI`. */ |
| const funcIriAttributeSelector = funcIriAttributes.map(ɵ0).join(', '); |
| /** Regex that can be used to extract the id out of a FuncIRI. */ |
| const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/; |
| /** |
| * Component to display an icon. It can be used in the following ways: |
| * |
| * - Specify the svgIcon input to load an SVG icon from a URL previously registered with the |
| * addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of |
| * MatIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format |
| * "[namespace]:[name]", if not the value will be the name of an icon in the default namespace. |
| * Examples: |
| * `<mat-icon svgIcon="left-arrow"></mat-icon> |
| * <mat-icon svgIcon="animals:cat"></mat-icon>` |
| * |
| * - Use a font ligature as an icon by putting the ligature text in the content of the `<mat-icon>` |
| * component. By default the Material icons font is used as described at |
| * http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an |
| * alternate font by setting the fontSet input to either the CSS class to apply to use the |
| * desired font, or to an alias previously registered with MatIconRegistry.registerFontClassAlias. |
| * Examples: |
| * `<mat-icon>home</mat-icon> |
| * <mat-icon fontSet="myfont">sun</mat-icon>` |
| * |
| * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the |
| * font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a |
| * CSS class which causes the glyph to be displayed via a :before selector, as in |
| * https://fortawesome.github.io/Font-Awesome/examples/ |
| * Example: |
| * `<mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>` |
| */ |
| class MatIcon extends _MatIconMixinBase { |
| constructor(elementRef, _iconRegistry, ariaHidden, _location, _errorHandler) { |
| super(elementRef); |
| this._iconRegistry = _iconRegistry; |
| this._location = _location; |
| this._errorHandler = _errorHandler; |
| this._inline = false; |
| /** Subscription to the current in-progress SVG icon request. */ |
| this._currentIconFetch = Subscription.EMPTY; |
| // 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. |
| if (!ariaHidden) { |
| elementRef.nativeElement.setAttribute('aria-hidden', 'true'); |
| } |
| } |
| /** |
| * Whether the icon should be inlined, automatically sizing the icon to match the font size of |
| * the element the icon is contained in. |
| */ |
| get inline() { |
| return this._inline; |
| } |
| set inline(inline) { |
| this._inline = coerceBooleanProperty(inline); |
| } |
| /** Name of the icon in the SVG icon set. */ |
| get svgIcon() { return this._svgIcon; } |
| set svgIcon(value) { |
| if (value !== this._svgIcon) { |
| if (value) { |
| this._updateSvgIcon(value); |
| } |
| else if (this._svgIcon) { |
| this._clearSvgElement(); |
| } |
| this._svgIcon = value; |
| } |
| } |
| /** Font set that the icon is a part of. */ |
| get fontSet() { return this._fontSet; } |
| set fontSet(value) { |
| const newValue = this._cleanupFontValue(value); |
| if (newValue !== this._fontSet) { |
| this._fontSet = newValue; |
| this._updateFontIconClasses(); |
| } |
| } |
| /** Name of an icon within a font set. */ |
| get fontIcon() { return this._fontIcon; } |
| set fontIcon(value) { |
| const newValue = this._cleanupFontValue(value); |
| if (newValue !== this._fontIcon) { |
| this._fontIcon = newValue; |
| this._updateFontIconClasses(); |
| } |
| } |
| /** |
| * Splits an svgIcon binding value into its icon set and icon name components. |
| * Returns a 2-element array of [(icon set), (icon name)]. |
| * The separator for the two fields is ':'. If there is no separator, an empty |
| * string is returned for the icon set and the entire value is returned for |
| * the icon name. If the argument is falsy, returns an array of two empty strings. |
| * Throws an error if the name contains two or more ':' separators. |
| * Examples: |
| * `'social:cake' -> ['social', 'cake'] |
| * 'penguin' -> ['', 'penguin'] |
| * null -> ['', ''] |
| * 'a:b:c' -> (throws Error)` |
| */ |
| _splitIconName(iconName) { |
| if (!iconName) { |
| return ['', '']; |
| } |
| const parts = iconName.split(':'); |
| switch (parts.length) { |
| case 1: return ['', parts[0]]; // Use default namespace. |
| case 2: return parts; |
| default: throw Error(`Invalid icon name: "${iconName}"`); // TODO: add an ngDevMode check |
| } |
| } |
| ngOnInit() { |
| // Update font classes because ngOnChanges won't be called if none of the inputs are present, |
| // e.g. <mat-icon>arrow</mat-icon> In this case we need to add a CSS class for the default font. |
| this._updateFontIconClasses(); |
| } |
| ngAfterViewChecked() { |
| const cachedElements = this._elementsWithExternalReferences; |
| if (cachedElements && cachedElements.size) { |
| const newPath = this._location.getPathname(); |
| // We need to check whether the URL has changed on each change detection since |
| // the browser doesn't have an API that will let us react on link clicks and |
| // we can't depend on the Angular router. The references need to be updated, |
| // because while most browsers don't care whether the URL is correct after |
| // the first render, Safari will break if the user navigates to a different |
| // page and the SVG isn't re-rendered. |
| if (newPath !== this._previousPath) { |
| this._previousPath = newPath; |
| this._prependPathToReferences(newPath); |
| } |
| } |
| } |
| ngOnDestroy() { |
| this._currentIconFetch.unsubscribe(); |
| if (this._elementsWithExternalReferences) { |
| this._elementsWithExternalReferences.clear(); |
| } |
| } |
| _usingFontIcon() { |
| return !this.svgIcon; |
| } |
| _setSvgElement(svg) { |
| this._clearSvgElement(); |
| // Workaround for IE11 and Edge ignoring `style` tags inside dynamically-created SVGs. |
| // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10898469/ |
| // Do this before inserting the element into the DOM, in order to avoid a style recalculation. |
| const styleTags = svg.querySelectorAll('style'); |
| for (let i = 0; i < styleTags.length; i++) { |
| styleTags[i].textContent += ' '; |
| } |
| // Note: we do this fix here, rather than the icon registry, because the |
| // references have to point to the URL at the time that the icon was created. |
| const path = this._location.getPathname(); |
| this._previousPath = path; |
| this._cacheChildrenWithExternalReferences(svg); |
| this._prependPathToReferences(path); |
| this._elementRef.nativeElement.appendChild(svg); |
| } |
| _clearSvgElement() { |
| const layoutElement = this._elementRef.nativeElement; |
| let childCount = layoutElement.childNodes.length; |
| if (this._elementsWithExternalReferences) { |
| this._elementsWithExternalReferences.clear(); |
| } |
| // Remove existing non-element child nodes and SVGs, and add the new SVG element. Note that |
| // we can't use innerHTML, because IE will throw if the element has a data binding. |
| while (childCount--) { |
| const child = layoutElement.childNodes[childCount]; |
| // 1 corresponds to Node.ELEMENT_NODE. We remove all non-element nodes in order to get rid |
| // of any loose text nodes, as well as any SVG elements in order to remove any old icons. |
| if (child.nodeType !== 1 || child.nodeName.toLowerCase() === 'svg') { |
| layoutElement.removeChild(child); |
| } |
| } |
| } |
| _updateFontIconClasses() { |
| if (!this._usingFontIcon()) { |
| return; |
| } |
| const elem = this._elementRef.nativeElement; |
| const fontSetClass = this.fontSet ? |
| this._iconRegistry.classNameForFontAlias(this.fontSet) : |
| this._iconRegistry.getDefaultFontSetClass(); |
| if (fontSetClass != this._previousFontSetClass) { |
| if (this._previousFontSetClass) { |
| elem.classList.remove(this._previousFontSetClass); |
| } |
| if (fontSetClass) { |
| elem.classList.add(fontSetClass); |
| } |
| this._previousFontSetClass = fontSetClass; |
| } |
| if (this.fontIcon != this._previousFontIconClass) { |
| if (this._previousFontIconClass) { |
| elem.classList.remove(this._previousFontIconClass); |
| } |
| if (this.fontIcon) { |
| elem.classList.add(this.fontIcon); |
| } |
| this._previousFontIconClass = this.fontIcon; |
| } |
| } |
| /** |
| * Cleans up a value to be used as a fontIcon or fontSet. |
| * Since the value ends up being assigned as a CSS class, we |
| * have to trim the value and omit space-separated values. |
| */ |
| _cleanupFontValue(value) { |
| return typeof value === 'string' ? value.trim().split(' ')[0] : value; |
| } |
| /** |
| * Prepends the current path to all elements that have an attribute pointing to a `FuncIRI` |
| * reference. This is required because WebKit browsers require references to be prefixed with |
| * the current path, if the page has a `base` tag. |
| */ |
| _prependPathToReferences(path) { |
| const elements = this._elementsWithExternalReferences; |
| if (elements) { |
| elements.forEach((attrs, element) => { |
| attrs.forEach(attr => { |
| element.setAttribute(attr.name, `url('${path}#${attr.value}')`); |
| }); |
| }); |
| } |
| } |
| /** |
| * Caches the children of an SVG element that have `url()` |
| * references that we need to prefix with the current path. |
| */ |
| _cacheChildrenWithExternalReferences(element) { |
| const elementsWithFuncIri = element.querySelectorAll(funcIriAttributeSelector); |
| const elements = this._elementsWithExternalReferences = |
| this._elementsWithExternalReferences || new Map(); |
| for (let i = 0; i < elementsWithFuncIri.length; i++) { |
| funcIriAttributes.forEach(attr => { |
| const elementWithReference = elementsWithFuncIri[i]; |
| const value = elementWithReference.getAttribute(attr); |
| const match = value ? value.match(funcIriPattern) : null; |
| if (match) { |
| let attributes = elements.get(elementWithReference); |
| if (!attributes) { |
| attributes = []; |
| elements.set(elementWithReference, attributes); |
| } |
| attributes.push({ name: attr, value: match[1] }); |
| } |
| }); |
| } |
| } |
| /** Sets a new SVG icon with a particular name. */ |
| _updateSvgIcon(rawName) { |
| this._svgNamespace = null; |
| this._svgName = null; |
| this._currentIconFetch.unsubscribe(); |
| if (rawName) { |
| const [namespace, iconName] = this._splitIconName(rawName); |
| if (namespace) { |
| this._svgNamespace = namespace; |
| } |
| if (iconName) { |
| this._svgName = iconName; |
| } |
| this._currentIconFetch = this._iconRegistry.getNamedSvgIcon(iconName, namespace) |
| .pipe(take(1)) |
| .subscribe(svg => this._setSvgElement(svg), (err) => { |
| const errorMessage = `Error retrieving icon ${namespace}:${iconName}! ${err.message}`; |
| this._errorHandler.handleError(new Error(errorMessage)); |
| }); |
| } |
| } |
| } |
| MatIcon.decorators = [ |
| { type: Component, args: [{ |
| template: '<ng-content></ng-content>', |
| selector: 'mat-icon', |
| exportAs: 'matIcon', |
| inputs: ['color'], |
| host: { |
| 'role': 'img', |
| 'class': 'mat-icon notranslate', |
| '[attr.data-mat-icon-type]': '_usingFontIcon() ? "font" : "svg"', |
| '[attr.data-mat-icon-name]': '_svgName || fontIcon', |
| '[attr.data-mat-icon-namespace]': '_svgNamespace || fontSet', |
| '[class.mat-icon-inline]': 'inline', |
| '[class.mat-icon-no-color]': 'color !== "primary" && color !== "accent" && color !== "warn"', |
| }, |
| encapsulation: ViewEncapsulation.None, |
| changeDetection: ChangeDetectionStrategy.OnPush, |
| styles: [".mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1, 1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}\n"] |
| },] } |
| ]; |
| MatIcon.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: MatIconRegistry }, |
| { type: String, decorators: [{ type: Attribute, args: ['aria-hidden',] }] }, |
| { type: undefined, decorators: [{ type: Inject, args: [MAT_ICON_LOCATION,] }] }, |
| { type: ErrorHandler } |
| ]; |
| MatIcon.propDecorators = { |
| inline: [{ type: Input }], |
| svgIcon: [{ type: Input }], |
| fontSet: [{ type: Input }], |
| fontIcon: [{ type: Input }] |
| }; |
| |
| /** |
| * @license |
| * Copyright Google LLC All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| class MatIconModule { |
| } |
| MatIconModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [MatCommonModule], |
| exports: [MatIcon, MatCommonModule], |
| declarations: [MatIcon], |
| },] } |
| ]; |
| |
| /** |
| * @license |
| * Copyright Google LLC All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| |
| /** |
| * Generated bundle index. Do not edit. |
| */ |
| |
| export { ICON_REGISTRY_PROVIDER, ICON_REGISTRY_PROVIDER_FACTORY, MAT_ICON_LOCATION, MAT_ICON_LOCATION_FACTORY, MatIcon, MatIconModule, MatIconRegistry, getMatIconFailedToSanitizeLiteralError, getMatIconFailedToSanitizeUrlError, getMatIconNameNotFoundError, getMatIconNoHttpProviderError, ɵ0 }; |
| //# sourceMappingURL=icon.js.map |
