ionic-framework
Version:
The ionic-framework package comes with both Javascript and Sass frontend dependencies, located in the root of the package, and a Node API, located in `tooling/`.
177 lines • 6.6 kB
JavaScript
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);
};
var core_1 = require('angular2/core');
var config_1 = require('../../config/config');
/**
* @name Icon
* @description
* Icons can be used on their own, or inside of a number of Ionic components.
* For a full list of available icons, check out the
* [Ionicons resource docs](../../../../resources/ionicons).
*
* One feature of Ionicons is that when icon names are set, the actual icon
* which is rendered can change slightly depending on the mode the app is
* running from. For example, by setting the icon name of `alarm`, on iOS the
* icon will automatically apply `ios-alarm`, and on Material Design it will
* automatically apply `md-alarm`. This allow the developer to write the
* markup once, and let Ionic automatically apply the appropriate icon.
*
* @usage
* ```html
* <!-- automatically uses the correct "star" icon depending on the mode -->
* <ion-icon name="star"></ion-icon>
*
* <!-- explicity set the icon for each mode -->
* <ion-icon ios="ios-home" md="md-home"></ion-icon>
*
* <!-- always use the same icon, no matter what the mode -->
* <ion-icon name="ios-clock"></ion-icon>
* <ion-icon name="twitter-logo"></ion-icon>
* ```
*
* @property {string} [name] - Use the appropriate icon for the mode.
* @property {string} [ios] - Explicitly set the icon to use on iOS.
* @property {string} [md] - Explicitly set the icon to use on Android.
* @property {boolean} [isActive] - Whether or not the icon has an "active"
* appearance. On iOS an active icon is filled in or full appearance, and an
* inactive icon on iOS will use an outlined version of the icon same icon.
* Material Design icons do not change appearance depending if they're active
* or not. The `isActive` property is largely used by the tabbar.
* @see {@link /docs/v2/components#icons Icon Component Docs}
*
*/
var Icon = (function () {
function Icon(config, _elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this.mode = config.get('iconMode');
this._name = '';
this._ios = '';
this._md = '';
this._css = '';
if (_elementRef.nativeElement.tagName === 'ICON') {
// deprecated warning
console.warn('<icon> has been renamed to <ion-icon>');
console.warn('<ion-icon> requires the "name" attribute w/ a value');
console.warn('<icon home></icon> should now be <ion-icon name="home"></ion-icon>');
}
}
Object.defineProperty(Icon.prototype, "name", {
get: function () {
return this._name;
},
/**
* @private
*/
set: function (val) {
if (!(/^md-|^ios-|-logo$/.test(val))) {
// this does not have one of the defaults
// so lets auto add in the mode prefix for them
val = this.mode + '-' + val;
}
this._name = val;
this.update();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Icon.prototype, "ios", {
get: function () {
return this._ios;
},
/**
* @private
*/
set: function (val) {
this._ios = val;
this.update();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Icon.prototype, "md", {
get: function () {
return this._md;
},
/**
* @private
*/
set: function (val) {
this._md = val;
this.update();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Icon.prototype, "isActive", {
get: function () {
return (this._isActive === undefined || this._isActive === true || this._isActive === 'true');
},
/**
* @private
*/
set: function (val) {
this._isActive = val;
this.update();
},
enumerable: true,
configurable: true
});
/**
* @private
*/
Icon.prototype.update = function () {
var css = 'ion-';
if (this._ios && this.mode === 'ios') {
css += this._ios;
}
else if (this._md && this.mode === 'md') {
css += this._md;
}
else {
css += this._name;
}
if (this.mode == 'ios' && !this.isActive) {
css += '-outline';
}
if (this._css !== css) {
if (this._css) {
this._renderer.setElementClass(this._elementRef, this._css, false);
}
this._css = css;
this._renderer.setElementClass(this._elementRef, css, true);
this._renderer.setElementAttribute(this._elementRef, 'aria-label', css.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
}
};
/**
* @private
*/
Icon.prototype.addClass = function (className) {
this._renderer.setElementClass(this._elementRef, className, true);
};
Icon = __decorate([
core_1.Directive({
selector: 'ion-icon,icon',
inputs: [
'name',
'ios',
'md',
'isActive'
],
host: {
'role': 'img'
}
}),
__metadata('design:paramtypes', [(typeof (_a = typeof config_1.Config !== 'undefined' && config_1.Config) === 'function' && _a) || Object, (typeof (_b = typeof core_1.ElementRef !== 'undefined' && core_1.ElementRef) === 'function' && _b) || Object, (typeof (_c = typeof core_1.Renderer !== 'undefined' && core_1.Renderer) === 'function' && _c) || Object])
], Icon);
return Icon;
var _a, _b, _c;
})();
exports.Icon = Icon;