ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
702 lines (690 loc) • 27.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/platform'), require('ng-zorro-antd/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/core'), require('@angular/platform-browser'), require('@ant-design/icons-angular'), require('@ant-design/icons-angular/icons')) :
typeof define === 'function' && define.amd ? define('ng-zorro-antd/icon', ['exports', '@angular/cdk/platform', 'ng-zorro-antd/core', '@angular/common', '@angular/common/http', '@angular/core', '@angular/platform-browser', '@ant-design/icons-angular', '@ant-design/icons-angular/icons'], factory) :
(factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd'].icon = {}),global.ng.cdk.platform,global['ng-zorro-antd'].core,global.ng.common,global.ng.common.http,global.ng.core,global.ng.platformBrowser,global.iconsAngular,global.icons));
}(this, (function (exports,platform,core,i3,i2,i0,i1,iconsAngular,icons) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __decorate(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;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var NZ_ICONS = new i0.InjectionToken('nz_icons');
/** @type {?} */
var NZ_ICON_DEFAULT_TWOTONE_COLOR = new i0.InjectionToken('nz_icon_default_twotone_color');
/** @type {?} */
var DEFAULT_TWOTONE_COLOR = '#1890ff';
/** @type {?} */
var NZ_ICONS_USED_BY_ZORRO = [
icons.BarsOutline,
icons.CalendarOutline,
icons.CaretUpFill,
icons.CaretUpOutline,
icons.CaretDownFill,
icons.CaretDownOutline,
icons.CheckCircleFill,
icons.CheckCircleOutline,
icons.CheckOutline,
icons.ClockCircleOutline,
icons.CloseCircleOutline,
icons.CloseCircleFill,
icons.CloseOutline,
icons.DoubleLeftOutline,
icons.DoubleRightOutline,
icons.DownOutline,
icons.EllipsisOutline,
icons.ExclamationCircleFill,
icons.ExclamationCircleOutline,
icons.EyeOutline,
icons.FileFill,
icons.FileOutline,
icons.FilterFill,
icons.InfoCircleFill,
icons.InfoCircleOutline,
icons.LeftOutline,
icons.LoadingOutline,
icons.PaperClipOutline,
icons.QuestionCircleOutline,
icons.RightOutline,
icons.StarFill,
icons.SearchOutline,
icons.StarFill,
icons.UploadOutline,
icons.UpOutline
];
/**
* It should be a global singleton, otherwise registered icons could not be found.
*/
var NzIconService = /** @class */ (function (_super) {
__extends(NzIconService, _super);
function NzIconService(rendererFactory, sanitizer, handler, document, icons$$1, defaultColor) {
var _this = _super.call(this, rendererFactory, handler, document, sanitizer) || this;
_this.rendererFactory = rendererFactory;
_this.sanitizer = sanitizer;
_this.handler = handler;
_this.document = document;
_this.icons = icons$$1;
_this.defaultColor = defaultColor;
_this.iconfontCache = new Set();
_this.warnedAboutAPI = false;
_this.warnedAboutCross = false;
_this.warnedAboutVertical = false;
_this.addIcon.apply(_this, __spread(NZ_ICONS_USED_BY_ZORRO, (_this.icons || [])));
/** @type {?} */
var primaryColor = DEFAULT_TWOTONE_COLOR;
if (_this.defaultColor) {
if (_this.defaultColor.startsWith('#')) {
primaryColor = _this.defaultColor;
}
else {
console.warn('[NG-ZORRO]: twotone color must be a hex color!');
}
}
_this.twoToneColor = { primaryColor: primaryColor };
return _this;
}
/**
* @param {?} type
* @return {?}
*/
NzIconService.prototype.warnAPI = /**
* @param {?} type
* @return {?}
*/
function (type) {
if (type === 'old' && !this.warnedAboutAPI) {
console.warn("<i class=\"anticon\"></i> would be deprecated soon. Please use <i nz-icon type=\"\"></i> API.");
this.warnedAboutAPI = true;
}
if (type === 'cross' && !this.warnedAboutCross) {
console.warn("'cross' icon is replaced by 'close' icon.");
this.warnedAboutCross = true;
}
if (type === 'vertical' && !this.warnedAboutVertical) {
console.warn("'verticle' is misspelled, would be corrected in the next major version.");
this.warnedAboutVertical = true;
}
};
/**
* @param {?} svg
* @return {?}
*/
NzIconService.prototype.normalizeSvgElement = /**
* @param {?} svg
* @return {?}
*/
function (svg) {
if (!svg.getAttribute('viewBox')) {
this._renderer.setAttribute(svg, 'viewBox', '0 0 1024 1024');
}
if (!svg.getAttribute('width') || !svg.getAttribute('height')) {
this._renderer.setAttribute(svg, 'width', '1em');
this._renderer.setAttribute(svg, 'height', '1em');
}
if (!svg.getAttribute('fill')) {
this._renderer.setAttribute(svg, 'fill', 'currentColor');
}
};
/**
* @param {?} opt
* @return {?}
*/
NzIconService.prototype.fetchFromIconfont = /**
* @param {?} opt
* @return {?}
*/
function (opt) {
var scriptUrl = opt.scriptUrl;
if (this.document && !this.iconfontCache.has(scriptUrl)) {
/** @type {?} */
var script = this._renderer.createElement('script');
this._renderer.setAttribute(script, 'src', scriptUrl);
this._renderer.setAttribute(script, 'data-namespace', scriptUrl.replace(/^(https?|http):/g, ''));
this._renderer.appendChild(this.document.body, script);
this.iconfontCache.add(scriptUrl);
}
};
/**
* @param {?} type
* @return {?}
*/
NzIconService.prototype.createIconfontIcon = /**
* @param {?} type
* @return {?}
*/
function (type) {
return this._createSVGElementFromString("<svg><use xlink:href=\"" + type + "\"></svg>");
};
NzIconService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NzIconService.ctorParameters = function () {
return [
{ type: i0.RendererFactory2 },
{ type: i1.DomSanitizer },
{ type: i2.HttpBackend, decorators: [{ type: i0.Optional }] },
{ type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [i3.DOCUMENT,] }] },
{ type: Array, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [NZ_ICONS,] }] },
{ type: String, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [NZ_ICON_DEFAULT_TWOTONE_COLOR,] }] }
];
};
/** @nocollapse */ NzIconService.ngInjectableDef = i0.defineInjectable({ factory: function NzIconService_Factory() { return new NzIconService(i0.inject(i0.RendererFactory2), i0.inject(i1.DomSanitizer), i0.inject(i2.HttpBackend, 8), i0.inject(i3.DOCUMENT, 8), i0.inject(NZ_ICONS, 8), i0.inject(NZ_ICON_DEFAULT_TWOTONE_COLOR, 8)); }, token: NzIconService, providedIn: "root" });
return NzIconService;
}(iconsAngular.IconService));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var iconTypeRE = /^anticon\-\w/;
/** @type {?} */
var getIconTypeClass = ( /**
* @param {?} className
* @return {?}
*/function (className) {
if (!className) {
return undefined;
}
else {
/** @type {?} */
var classArr = className.split(/\s/);
/** @type {?} */
var index = classArr.findIndex(( /**
* @param {?} cls
* @return {?}
*/function (cls) { return cls !== 'anticon' && cls !== 'anticon-spin' && !!cls.match(iconTypeRE); }));
return index === -1 ? undefined : { name: classArr[index], index: index };
}
});
/** @type {?} */
var normalizeType = ( /**
* @param {?} rawType
* @return {?}
*/function (rawType) {
/** @type {?} */
var ret = { type: rawType, crossError: false, verticalError: false };
ret.type = rawType ? rawType.replace('anticon-', '') : '';
if (ret.type.includes('verticle')) {
ret.type = 'up';
ret.verticalError = true;
}
if (ret.type.startsWith('cross')) {
ret.type = 'close';
ret.crossError = true;
}
return ret;
});
/**
* This directive extends IconDirective to provide:
*
* - IconFont support
* - spinning
* - old API compatibility
*
* \@break-changes
*
* - old API compatibility, icon class names would not be supported.
* - properties that not started with `nz`.
*/
var NzIconDirective = /** @class */ (function (_super) {
__extends(NzIconDirective, _super);
function NzIconDirective(iconService, elementRef, renderer, platform$$1) {
var _this = _super.call(this, iconService, elementRef, renderer) || this;
_this.iconService = iconService;
_this.elementRef = elementRef;
_this.renderer = renderer;
_this.platform = platform$$1;
_this.nzRotate = 0;
/**
* @deprecated 8.0.0 avoid exposing low layer API.
*/
_this.spin = false;
_this.el = _this.elementRef.nativeElement;
return _this;
}
Object.defineProperty(NzIconDirective.prototype, "nzSpin", {
/** Properties with `nz` prefix. */
set: /**
* Properties with `nz` prefix.
* @param {?} value
* @return {?}
*/ function (value) {
this.spin = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzIconDirective.prototype, "nzType", {
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.type = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzIconDirective.prototype, "nzTheme", {
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.theme = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzIconDirective.prototype, "nzTwotoneColor", {
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.twoToneColor = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzIconDirective.prototype, "nzIconfont", {
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.iconfont = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzIconDirective.prototype, "type", {
get: /**
* @return {?}
*/ function () {
return this._type;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value && value.startsWith('anticon')) {
/** @type {?} */
var rawClass = getIconTypeClass(value);
/** @type {?} */
var type = rawClass ? normalizeType(rawClass.name).type : '';
if (type && this.type !== type) {
this._type = type;
}
}
else {
this._type = value;
}
},
enumerable: true,
configurable: true
});
/**
* Replacement of `changeIcon` for more modifications.
* @param oldAPI
*/
/**
* Replacement of `changeIcon` for more modifications.
* @private
* @param {?=} oldAPI
* @return {?}
*/
NzIconDirective.prototype.changeIcon2 = /**
* Replacement of `changeIcon` for more modifications.
* @private
* @param {?=} oldAPI
* @return {?}
*/
function (oldAPI) {
var _this = this;
if (oldAPI === void 0) {
oldAPI = false;
}
if (!oldAPI) {
this.setClassName();
}
this._changeIcon().then(( /**
* @param {?} svg
* @return {?}
*/function (svg) {
_this.setSVGData(svg);
if (!oldAPI && svg) {
_this.handleSpin(svg);
_this.handleRotate(svg);
}
}));
};
/**
* @private
* @param {?} className
* @return {?}
*/
NzIconDirective.prototype.classChangeHandler = /**
* @private
* @param {?} className
* @return {?}
*/
function (className) {
/** @type {?} */
var ret = getIconTypeClass(className);
if (ret) {
var _a = normalizeType(ret.name), type = _a.type, crossError = _a.crossError, verticalError = _a.verticalError;
if (crossError) {
this.iconService.warnAPI('cross');
}
if (verticalError) {
this.iconService.warnAPI('vertical');
}
if (this.type !== type) {
this._type = type;
this.changeIcon2(true);
}
}
};
/**
* @private
* @param {?} svg
* @return {?}
*/
NzIconDirective.prototype.handleSpin = /**
* @private
* @param {?} svg
* @return {?}
*/
function (svg) {
if ((this.spin || this.type === 'loading') && !this.elementRef.nativeElement.classList.contains('anticon-spin')) {
this.renderer.addClass(svg, 'anticon-spin');
}
else {
this.renderer.removeClass(svg, 'anticon-spin');
}
};
/**
* @private
* @param {?} svg
* @return {?}
*/
NzIconDirective.prototype.handleRotate = /**
* @private
* @param {?} svg
* @return {?}
*/
function (svg) {
if (this.nzRotate) {
this.renderer.setAttribute(svg, 'style', "transform: rotate(" + this.nzRotate + "deg)");
}
else {
this.renderer.removeAttribute(svg, 'style');
}
};
/**
* @private
* @return {?}
*/
NzIconDirective.prototype.setClassName = /**
* @private
* @return {?}
*/
function () {
if (typeof this.type === 'string') {
/** @type {?} */
var iconClassNameArr = this.el.className.split(/\s/);
/** @type {?} */
var ret = getIconTypeClass(this.el.className);
if (ret) {
iconClassNameArr.splice(ret.index, 1, "anticon-" + this.type);
this.renderer.setAttribute(this.el, 'class', iconClassNameArr.join(' '));
}
else {
this.renderer.addClass(this.el, "anticon-" + this.type);
}
}
};
/**
* @private
* @param {?} svg
* @return {?}
*/
NzIconDirective.prototype.setSVGData = /**
* @private
* @param {?} svg
* @return {?}
*/
function (svg) {
if (typeof this.type === 'string' && svg) {
this.renderer.setAttribute(svg, 'data-icon', this.type);
this.renderer.setAttribute(svg, 'aria-hidden', 'true');
}
};
/**
* @param {?} changes
* @return {?}
*/
NzIconDirective.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var type = changes.type, nzType = changes.nzType, nzTwotoneColor = changes.nzTwotoneColor, twoToneColor = changes.twoToneColor, spin = changes.spin, nzSpin = changes.nzSpin, theme = changes.theme, nzTheme = changes.nzTheme, nzRotate = changes.nzRotate;
if (type || nzType || nzTwotoneColor || twoToneColor || spin || nzSpin || theme || nzTheme) {
this.changeIcon2();
}
else if (nzRotate) {
this.handleRotate(this.el.firstChild);
}
else {
this._setSVGElement(this.iconService.createIconfontIcon("#" + this.iconfont));
}
};
/**
* @return {?}
*/
NzIconDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
// If `this.type` is not specified and `classList` contains `anticon`, it should be an icon using old API.
if (!this.type && this.el.classList.contains('anticon')) {
this.iconService.warnAPI('old');
// Get `type` from `className`. If not, initial rendering would be missed.
this.classChangeHandler(this.el.className);
if (this.platform.isBrowser) {
// Add `class` mutation observer.
this.classNameObserver = new MutationObserver(( /**
* @param {?} mutations
* @return {?}
*/function (mutations) {
mutations
.filter(( /**
* @param {?} mutation
* @return {?}
*/function (mutation) { return mutation.attributeName === 'class'; }))
.forEach(( /**
* @param {?} mutation
* @return {?}
*/function (mutation) { return _this.classChangeHandler((( /** @type {?} */(mutation.target))).className); }));
}));
this.classNameObserver.observe(this.el, { attributes: true });
}
}
// If `classList` does not contain `anticon`, add it before other class names.
if (!this.el.classList.contains('anticon')) {
this.renderer.setAttribute(this.el, 'class', ("anticon " + this.el.className).trim());
}
};
/**
* @return {?}
*/
NzIconDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.classNameObserver) {
this.classNameObserver.disconnect();
}
};
/**
* If custom content is provided, try to normalize SVG elements.
*/
/**
* If custom content is provided, try to normalize SVG elements.
* @return {?}
*/
NzIconDirective.prototype.ngAfterContentChecked = /**
* If custom content is provided, try to normalize SVG elements.
* @return {?}
*/
function () {
/** @type {?} */
var children = this.el.children;
/** @type {?} */
var length = children.length;
if (!this.type && children.length) {
while (length--) {
/** @type {?} */
var child = children[length];
if (child.tagName.toLowerCase() === 'svg') {
this.iconService.normalizeSvgElement(( /** @type {?} */(child)));
}
}
}
};
NzIconDirective.decorators = [
{ type: i0.Directive, args: [{
selector: 'i.anticon, [nz-icon]',
exportAs: 'nzIcon'
},] }
];
/** @nocollapse */
NzIconDirective.ctorParameters = function () {
return [
{ type: NzIconService },
{ type: i0.ElementRef },
{ type: i0.Renderer2 },
{ type: platform.Platform }
];
};
NzIconDirective.propDecorators = {
nzSpin: [{ type: i0.Input }],
nzRotate: [{ type: i0.Input }],
nzType: [{ type: i0.Input }],
nzTheme: [{ type: i0.Input }],
nzTwotoneColor: [{ type: i0.Input }],
nzIconfont: [{ type: i0.Input }],
spin: [{ type: i0.Input }],
iconfont: [{ type: i0.Input }],
type: [{ type: i0.Input }]
};
__decorate([
core.InputBoolean(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NzIconDirective.prototype, "nzSpin", null);
return NzIconDirective;
}(iconsAngular.IconDirective));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzIconModule = /** @class */ (function () {
function NzIconModule() {
}
NzIconModule.decorators = [
{ type: i0.NgModule, args: [{
exports: [NzIconDirective],
declarations: [NzIconDirective]
},] }
];
return NzIconModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.NzIconModule = NzIconModule;
exports.NzIconDirective = NzIconDirective;
exports.NZ_ICONS = NZ_ICONS;
exports.NZ_ICON_DEFAULT_TWOTONE_COLOR = NZ_ICON_DEFAULT_TWOTONE_COLOR;
exports.DEFAULT_TWOTONE_COLOR = DEFAULT_TWOTONE_COLOR;
exports.NZ_ICONS_USED_BY_ZORRO = NZ_ICONS_USED_BY_ZORRO;
exports.NzIconService = NzIconService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-zorro-antd-icon.umd.js.map