UNPKG

@angular/material

Version:
734 lines (728 loc) 29.2 kB
/** * @license * Copyright Google Inc. 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 */ import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Injectable, Input, NgModule, Optional, Renderer2, SecurityContext, SkipSelf, ViewEncapsulation } from '@angular/core'; import { MdCommonModule, RxChain, catchOperator, doOperator, finallyOperator, first, map, mixinColor, share } from '@angular/material/core'; import { Http } from '@angular/http'; import { DomSanitizer } from '@angular/platform-browser'; import { Observable } from 'rxjs/Observable'; import { forkJoin } from 'rxjs/observable/forkJoin'; import { of } from 'rxjs/observable/of'; import { _throw } from 'rxjs/observable/throw'; /** * Returns an exception to be thrown in the case when attempting to * load an icon with a name that cannot be found. * \@docs-private * @param {?} iconName * @return {?} */ function getMdIconNameNotFoundError(iconName) { return Error(`Unable to find icon with the name "${iconName}"`); } /** * Returns an exception to be thrown when the consumer attempts to use * `<md-icon>` without including \@angular/http. * \@docs-private * @return {?} */ function getMdIconNoHttpProviderError() { return Error('Could not find Http provider for use with Angular Material icons. ' + 'Please include the HttpModule from @angular/http in your app imports.'); } /** * Returns an exception to be thrown when a URL couldn't be sanitized. * \@docs-private * @param {?} url URL that was attempted to be sanitized. * @return {?} */ function getMdIconFailedToSanitizeError(url) { return Error(`The URL provided to MdIconRegistry was not trusted as a resource URL ` + `via Angular's DomSanitizer. Attempted URL was "${url}".`); } /** * Configuration for an icon, including the URL and possibly the cached SVG element. * \@docs-private */ class SvgIconConfig { /** * @param {?} url */ constructor(url) { this.url = url; this.svgElement = null; } } /** * Service to register and display icons used by the <md-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 MdIconRegistry { /** * @param {?} _http * @param {?} _sanitizer */ constructor(_http, _sanitizer) { this._http = _http; this._sanitizer = _sanitizer; /** * 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(); /** * The CSS class to apply when an <md-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'; } /** * Registers an icon by URL in the default namespace. * @param {?} iconName Name under which the icon should be registered. * @param {?} url * @return {?} */ addSvgIcon(iconName, url) { return this.addSvgIconInNamespace('', iconName, url); } /** * 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 * @return {?} */ addSvgIconInNamespace(namespace, iconName, url) { const /** @type {?} */ key = iconKey(namespace, iconName); this._svgIconConfigs.set(key, new SvgIconConfig(url)); return this; } /** * Registers an icon set by URL in the default namespace. * @param {?} url * @return {?} */ addSvgIconSet(url) { return this.addSvgIconSetInNamespace('', url); } /** * Registers an icon set by URL in the specified namespace. * @param {?} namespace Namespace in which to register the icon set. * @param {?} url * @return {?} */ addSvgIconSetInNamespace(namespace, url) { const /** @type {?} */ config = new SvgIconConfig(url); const /** @type {?} */ configNamespace = this._iconSetConfigs.get(namespace); if (configNamespace) { configNamespace.push(config); } else { this._iconSetConfigs.set(namespace, [config]); } return this; } /** * Defines an alias for a CSS class name to be used for icon fonts. Creating an mdIcon * component with the alias as the fontSet input will cause the class name to be applied * to the <md-icon> element. * * @param {?} alias Alias for the font. * @param {?=} className Class name override to be used instead of the alias. * @return {?} */ 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. * @param {?} alias * @return {?} */ classNameForFontAlias(alias) { return this._fontCssClassesByAlias.get(alias) || alias; } /** * Sets the CSS class name to be used for icon fonts when an <md-icon> component does not * have a fontSet input value, and is not loading an icon by name or URL. * * @param {?} className * @return {?} */ setDefaultFontSetClass(className) { this._defaultFontSetClass = className; return this; } /** * Returns the CSS class name to be used for icon fonts when an <md-icon> component does not * have a fontSet input value, and is not loading an icon by name or URL. * @return {?} */ 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. * @return {?} */ getSvgIconFromUrl(safeUrl) { let /** @type {?} */ url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl); if (!url) { throw getMdIconFailedToSanitizeError(safeUrl); } let /** @type {?} */ cachedIcon = this._cachedIconsByUrl.get(url); if (cachedIcon) { return of(cloneSvg(cachedIcon)); } return RxChain.from(this._loadSvgIconFromConfig(new SvgIconConfig(url))) .call(doOperator, svg => this._cachedIconsByUrl.set(/** @type {?} */ ((url)), svg)) .call(map, svg => cloneSvg(svg)) .result(); } /** * 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. * @return {?} */ getNamedSvgIcon(name, namespace = '') { // Return (copy of) cached icon if possible. const /** @type {?} */ key = iconKey(namespace, name); const /** @type {?} */ config = this._svgIconConfigs.get(key); if (config) { return this._getSvgFromConfig(config); } // See if we have any icon sets registered for the namespace. const /** @type {?} */ iconSetConfigs = this._iconSetConfigs.get(namespace); if (iconSetConfigs) { return this._getSvgFromIconSetConfigs(name, iconSetConfigs); } return _throw(getMdIconNameNotFoundError(key)); } /** * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not. * @param {?} config * @return {?} */ _getSvgFromConfig(config) { if (config.svgElement) { // We already have the SVG element for this icon, return a copy. return of(cloneSvg(config.svgElement)); } else { // Fetch the icon from the config's URL, cache it, and return a copy. return RxChain.from(this._loadSvgIconFromConfig(config)) .call(doOperator, svg => config.svgElement = svg) .call(map, svg => cloneSvg(svg)) .result(); } } /** * 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. * @param {?} name * @param {?} iconSetConfigs * @return {?} */ _getSvgFromIconSetConfigs(name, iconSetConfigs) { // For all the icon set SVG elements we've fetched, see if any contain an icon with the // requested name. const /** @type {?} */ 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 /** @type {?} */ iconSetFetchRequests = iconSetConfigs .filter(iconSetConfig => !iconSetConfig.svgElement) .map(iconSetConfig => { return RxChain.from(this._loadSvgIconSetFromConfig(iconSetConfig)) .call(catchOperator, (err) => { let /** @type {?} */ url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, iconSetConfig.url); // Swallow errors fetching individual URLs so the combined Observable won't // necessarily fail. console.log(`Loading icon set URL: ${url} failed: ${err}`); return of(null); }) .call(doOperator, svg => { // Cache the SVG element. if (svg) { iconSetConfig.svgElement = svg; } }) .result(); }); // 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 map.call(forkJoin.call(Observable, iconSetFetchRequests), () => { const /** @type {?} */ foundIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs); if (!foundIcon) { throw getMdIconNameNotFoundError(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. * @param {?} iconName * @param {?} iconSetConfigs * @return {?} */ _extractIconWithNameFromAnySet(iconName, iconSetConfigs) { // Iterate backwards, so icon sets added later have precedence. for (let /** @type {?} */ i = iconSetConfigs.length - 1; i >= 0; i--) { const /** @type {?} */ config = iconSetConfigs[i]; if (config.svgElement) { const /** @type {?} */ foundIcon = this._extractSvgIconFromSet(config.svgElement, iconName); if (foundIcon) { return foundIcon; } } } return null; } /** * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element * from it. * @param {?} config * @return {?} */ _loadSvgIconFromConfig(config) { return map.call(this._fetchUrl(config.url), svgText => this._createSvgElementForSingleIcon(svgText)); } /** * Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element * from it. * @param {?} config * @return {?} */ _loadSvgIconSetFromConfig(config) { // TODO: Document that icons should only be loaded from trusted sources. return map.call(this._fetchUrl(config.url), svgText => this._svgElementFromString(svgText)); } /** * Creates a DOM element from the given SVG string, and adds default attributes. * @param {?} responseText * @return {?} */ _createSvgElementForSingleIcon(responseText) { const /** @type {?} */ svg = this._svgElementFromString(responseText); this._setSvgAttributes(svg); return svg; } /** * 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. * @param {?} iconSet * @param {?} iconName * @return {?} */ _extractSvgIconFromSet(iconSet, iconName) { const /** @type {?} */ iconNode = iconSet.querySelector('#' + iconName); if (!iconNode) { return null; } // 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 (iconNode.tagName.toLowerCase() === 'svg') { return this._setSvgAttributes(/** @type {?} */ (iconNode.cloneNode(true))); } // 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 (iconNode.nodeName.toLowerCase() === 'symbol') { return this._setSvgAttributes(this._toSvgElement(iconNode)); } // 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 /** @type {?} */ svg = this._svgElementFromString('<svg></svg>'); // Clone the node so we don't remove it from the parent icon set element. svg.appendChild(iconNode.cloneNode(true)); return this._setSvgAttributes(svg); } /** * Creates a DOM element from the given SVG string. * @param {?} str * @return {?} */ _svgElementFromString(str) { // TODO: Is there a better way than innerHTML? Renderer doesn't appear to have a method for // creating an element from an HTML string. const /** @type {?} */ div = document.createElement('DIV'); div.innerHTML = str; const /** @type {?} */ svg = (div.querySelector('svg')); if (!svg) { throw Error('<svg> tag not found'); } return svg; } /** * Converts an element into an SVG node by cloning all of its children. * @param {?} element * @return {?} */ _toSvgElement(element) { let /** @type {?} */ svg = this._svgElementFromString('<svg></svg>'); for (let /** @type {?} */ i = 0; i < element.childNodes.length; i++) { if (element.childNodes[i].nodeType === Node.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. * @param {?} svg * @return {?} */ _setSvgAttributes(svg) { if (!svg.getAttribute('xmlns')) { svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); } 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. return svg; } /** * Returns an Observable which produces the string contents of the given URL. Results may be * cached, so future calls with the same URL may not cause another HTTP request. * @param {?} safeUrl * @return {?} */ _fetchUrl(safeUrl) { if (!this._http) { throw getMdIconNoHttpProviderError(); } const /** @type {?} */ url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl); if (!url) { throw getMdIconFailedToSanitizeError(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 /** @type {?} */ inProgressFetch = this._inProgressUrlFetches.get(url); if (inProgressFetch) { return inProgressFetch; } // TODO(jelbourn): for some reason, the `finally` operator "loses" the generic type on the // Observable. Figure out why and fix it. const /** @type {?} */ req = RxChain.from(this._http.get(url)) .call(map, response => response.text()) .call(finallyOperator, () => this._inProgressUrlFetches.delete(url)) .call(share) .result(); this._inProgressUrlFetches.set(url, req); return req; } } MdIconRegistry.decorators = [ { type: Injectable }, ]; /** * @nocollapse */ MdIconRegistry.ctorParameters = () => [ { type: Http, decorators: [{ type: Optional },] }, { type: DomSanitizer, }, ]; /** * \@docs-private * @param {?} parentRegistry * @param {?} http * @param {?} sanitizer * @return {?} */ function ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry, http, sanitizer) { return parentRegistry || new MdIconRegistry(http, sanitizer); } /** * \@docs-private */ const ICON_REGISTRY_PROVIDER = { // If there is already an MdIconRegistry available, use that. Otherwise, provide a new one. provide: MdIconRegistry, deps: [[new Optional(), new SkipSelf(), MdIconRegistry], [new Optional(), Http], DomSanitizer], useFactory: ICON_REGISTRY_PROVIDER_FACTORY }; /** * Clones an SVGElement while preserving type information. * @param {?} svg * @return {?} */ function cloneSvg(svg) { return (svg.cloneNode(true)); } /** * Returns the cache key to use for an icon namespace and name. * @param {?} namespace * @param {?} name * @return {?} */ function iconKey(namespace, name) { return namespace + ':' + name; } /** * \@docs-private */ class MdIconBase { /** * @param {?} _renderer * @param {?} _elementRef */ constructor(_renderer, _elementRef) { this._renderer = _renderer; this._elementRef = _elementRef; } } const _MdIconMixinBase = mixinColor(MdIconBase); /** * 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 * MdIconRegistry. 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: * <md-icon svgIcon="left-arrow"></md-icon> * <md-icon svgIcon="animals:cat"></md-icon> * * - Use a font ligature as an icon by putting the ligature text in the content of the <md-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 MdIconRegistry.registerFontClassAlias. * Examples: * <md-icon>home</md-icon> * <md-icon fontSet="myfont">sun</md-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: * <md-icon fontSet="fa" fontIcon="alarm"></md-icon> */ class MdIcon extends _MdIconMixinBase { /** * @param {?} renderer * @param {?} elementRef * @param {?} _mdIconRegistry * @param {?} ariaHidden */ constructor(renderer, elementRef, _mdIconRegistry, ariaHidden) { super(renderer, elementRef); this._mdIconRegistry = _mdIconRegistry; // 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) { renderer.setAttribute(elementRef.nativeElement, 'aria-hidden', 'true'); } } /** * 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) * @param {?} iconName * @return {?} */ _splitIconName(iconName) { if (!iconName) { return ['', '']; } const /** @type {?} */ 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}"`); } } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations. if (changes.svgIcon) { if (this.svgIcon) { const [namespace, iconName] = this._splitIconName(this.svgIcon); first.call(this._mdIconRegistry.getNamedSvgIcon(iconName, namespace)).subscribe(svg => this._setSvgElement(svg), (err) => console.log(`Error retrieving icon: ${err.message}`)); } else { this._clearSvgElement(); } } if (this._usingFontIcon()) { this._updateFontIconClasses(); } } /** * @return {?} */ ngOnInit() { // Update font classes because ngOnChanges won't be called if none of the inputs are present, // e.g. <md-icon>arrow</md-icon>. In this case we need to add a CSS class for the default font. if (this._usingFontIcon()) { this._updateFontIconClasses(); } } /** * @return {?} */ _usingFontIcon() { return !this.svgIcon; } /** * @param {?} svg * @return {?} */ _setSvgElement(svg) { this._clearSvgElement(); this._renderer.appendChild(this._elementRef.nativeElement, svg); } /** * @return {?} */ _clearSvgElement() { const /** @type {?} */ layoutElement = this._elementRef.nativeElement; const /** @type {?} */ childCount = layoutElement.childNodes.length; // Remove existing child nodes and add the new SVG element. Note that we can't // use innerHTML, because IE will throw if the element has a data binding. for (let /** @type {?} */ i = 0; i < childCount; i++) { this._renderer.removeChild(layoutElement, layoutElement.childNodes[i]); } } /** * @return {?} */ _updateFontIconClasses() { if (!this._usingFontIcon()) { return; } const /** @type {?} */ elem = this._elementRef.nativeElement; const /** @type {?} */ fontSetClass = this.fontSet ? this._mdIconRegistry.classNameForFontAlias(this.fontSet) : this._mdIconRegistry.getDefaultFontSetClass(); if (fontSetClass != this._previousFontSetClass) { if (this._previousFontSetClass) { this._renderer.removeClass(elem, this._previousFontSetClass); } if (fontSetClass) { this._renderer.addClass(elem, fontSetClass); } this._previousFontSetClass = fontSetClass; } if (this.fontIcon != this._previousFontIconClass) { if (this._previousFontIconClass) { this._renderer.removeClass(elem, this._previousFontIconClass); } if (this.fontIcon) { this._renderer.addClass(elem, this.fontIcon); } this._previousFontIconClass = this.fontIcon; } } } MdIcon.decorators = [ { type: Component, args: [{template: '<ng-content></ng-content>', selector: 'md-icon, mat-icon', styles: [".mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}"], inputs: ['color'], host: { 'role': 'img', 'class': 'mat-icon', }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, },] }, ]; /** * @nocollapse */ MdIcon.ctorParameters = () => [ { type: Renderer2, }, { type: ElementRef, }, { type: MdIconRegistry, }, { type: undefined, decorators: [{ type: Attribute, args: ['aria-hidden',] },] }, ]; MdIcon.propDecorators = { 'svgIcon': [{ type: Input },], 'fontSet': [{ type: Input },], 'fontIcon': [{ type: Input },], }; class MdIconModule { } MdIconModule.decorators = [ { type: NgModule, args: [{ imports: [MdCommonModule], exports: [MdIcon, MdCommonModule], declarations: [MdIcon], providers: [ICON_REGISTRY_PROVIDER], },] }, ]; /** * @nocollapse */ MdIconModule.ctorParameters = () => []; /** * Generated bundle index. Do not edit. */ export { MdIconModule, MdIconBase, _MdIconMixinBase, MdIcon, getMdIconNameNotFoundError, getMdIconNoHttpProviderError, getMdIconFailedToSanitizeError, MdIconRegistry, ICON_REGISTRY_PROVIDER_FACTORY, ICON_REGISTRY_PROVIDER, MdIcon as MatIcon, MdIconBase as MatIconBase, MdIconModule as MatIconModule, MdIconRegistry as MatIconRegistry }; //# sourceMappingURL=icon.js.map