@material-git/all
Version:
Angular 2 Material
253 lines (251 loc) • 11.4 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { NgModule, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
import { HttpModule } from '@angular/http';
import { MdError } from '../core';
import { MdIconRegistry } from './icon-registry';
export { MdIconRegistry } from './icon-registry';
/** Exception thrown when an invalid icon name is passed to an md-icon component. */
export var MdIconInvalidNameError = (function (_super) {
__extends(MdIconInvalidNameError, _super);
function MdIconInvalidNameError(iconName) {
_super.call(this, "Invalid icon name: \"" + iconName + "\"");
}
return MdIconInvalidNameError;
}(MdError));
/**
* Component to display an icon. It can be used in the following ways:
* - Specify the svgSrc input to load an SVG icon from a URL. The SVG content is directly inlined
* as a child of the <md-icon> component, so that CSS styles can easily be applied to it.
* The URL is loaded via an XMLHttpRequest, so it must be on the same domain as the page or its
* server must be configured to allow cross-domain requests.
* Example:
* <md-icon svgSrc="assets/arrow.svg"></md-icon>
*
* - 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>
*/
export var MdIcon = (function () {
function MdIcon(_element, _renderer, _mdIconRegistry) {
this._element = _element;
this._renderer = _renderer;
this._mdIconRegistry = _mdIconRegistry;
this.hostAriaLabel = '';
}
/**
* 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 a MdIconInvalidNameError if the name contains two or more ':' separators.
* Examples:
* 'social:cake' -> ['social', 'cake']
* 'penguin' -> ['', 'penguin']
* null -> ['', '']
* 'a:b:c' -> (throws MdIconInvalidNameError)
*/
MdIcon.prototype._splitIconName = function (iconName) {
if (!iconName) {
return ['', ''];
}
var parts = iconName.split(':');
switch (parts.length) {
case 1:
// Use default namespace.
return ['', parts[0]];
case 2:
return parts;
default:
throw new MdIconInvalidNameError(iconName);
}
};
/** TODO: internal */
MdIcon.prototype.ngOnChanges = function (changes) {
var _this = this;
var changedInputs = Object.keys(changes);
// Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations.
if (changedInputs.indexOf('svgIcon') != -1 || changedInputs.indexOf('svgSrc') != -1) {
if (this.svgIcon) {
var _a = this._splitIconName(this.svgIcon), namespace = _a[0], iconName = _a[1];
this._mdIconRegistry.getNamedSvgIcon(iconName, namespace).subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err); });
}
else if (this.svgSrc) {
this._mdIconRegistry.getSvgIconFromUrl(this.svgSrc).subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err); });
}
}
if (this._usingFontIcon()) {
this._updateFontIconClasses();
}
this._updateAriaLabel();
};
/** TODO: internal */
MdIcon.prototype.ngOnInit = function () {
// 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();
}
};
/** TODO: internal */
MdIcon.prototype.ngAfterViewChecked = function () {
// Update aria label here because it may depend on the projected text content.
// (e.g. <md-icon>home</md-icon> should use 'home').
this._updateAriaLabel();
};
MdIcon.prototype._updateAriaLabel = function () {
var ariaLabel = this._getAriaLabel();
if (ariaLabel) {
this._renderer.setElementAttribute(this._element.nativeElement, 'aria-label', ariaLabel);
}
};
MdIcon.prototype._getAriaLabel = function () {
// If the parent provided an aria-label attribute value, use it as-is. Otherwise look for a
// reasonable value from the alt attribute, font icon name, SVG icon name, or (for ligatures)
// the text content of the directive.
var label = this.hostAriaLabel ||
this.alt ||
this.fontIcon ||
this._splitIconName(this.svgIcon)[1];
if (label) {
return label;
}
// The "content" of an SVG icon is not a useful label.
if (this._usingFontIcon()) {
var text = this._element.nativeElement.textContent;
if (text) {
return text;
}
}
// TODO: Warn here in dev mode.
return null;
};
MdIcon.prototype._usingFontIcon = function () {
return !(this.svgIcon || this.svgSrc);
};
MdIcon.prototype._setSvgElement = function (svg) {
var layoutElement = this._element.nativeElement;
// Remove existing child nodes and add the new SVG element.
// We would use renderer.detachView(Array.from(layoutElement.childNodes)) here,
// but it fails in IE11: https://github.com/angular/angular/issues/6327
layoutElement.innerHTML = '';
this._renderer.projectNodes(layoutElement, [svg]);
};
MdIcon.prototype._updateFontIconClasses = function () {
if (!this._usingFontIcon()) {
return;
}
var elem = this._element.nativeElement;
var fontSetClass = this.fontSet ?
this._mdIconRegistry.classNameForFontAlias(this.fontSet) :
this._mdIconRegistry.getDefaultFontSetClass();
if (fontSetClass != this._previousFontSetClass) {
if (this._previousFontSetClass) {
this._renderer.setElementClass(elem, this._previousFontSetClass, false);
}
if (fontSetClass) {
this._renderer.setElementClass(elem, fontSetClass, true);
}
this._previousFontSetClass = fontSetClass;
}
if (this.fontIcon != this._previousFontIconClass) {
if (this._previousFontIconClass) {
this._renderer.setElementClass(elem, this._previousFontIconClass, false);
}
if (this.fontIcon) {
this._renderer.setElementClass(elem, this.fontIcon, true);
}
this._previousFontIconClass = this.fontIcon;
}
};
__decorate([
Input(),
__metadata('design:type', String)
], MdIcon.prototype, "svgSrc", void 0);
__decorate([
Input(),
__metadata('design:type', String)
], MdIcon.prototype, "svgIcon", void 0);
__decorate([
Input(),
__metadata('design:type', String)
], MdIcon.prototype, "fontSet", void 0);
__decorate([
Input(),
__metadata('design:type', String)
], MdIcon.prototype, "fontIcon", void 0);
__decorate([
Input(),
__metadata('design:type', String)
], MdIcon.prototype, "alt", void 0);
__decorate([
Input('aria-label'),
__metadata('design:type', String)
], MdIcon.prototype, "hostAriaLabel", void 0);
MdIcon = __decorate([
Component({template: '<ng-content></ng-content>',
selector: 'md-icon',
styles: ["md-icon { background-repeat: no-repeat; display: inline-block; fill: currentColor; height: 24px; width: 24px; } /*# sourceMappingURL=icon.css.map */ "],
host: {
'role': 'img',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}),
__metadata('design:paramtypes', [ElementRef, Renderer, MdIconRegistry])
], MdIcon);
return MdIcon;
}());
export var MdIconModule = (function () {
function MdIconModule() {
}
MdIconModule.forRoot = function () {
return {
ngModule: MdIconModule,
providers: [MdIconRegistry],
};
};
MdIconModule = __decorate([
NgModule({
imports: [HttpModule],
exports: [MdIcon],
declarations: [MdIcon],
}),
__metadata('design:paramtypes', [])
], MdIconModule);
return MdIconModule;
}());
//# sourceMappingURL=icon.js.map