ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
788 lines (781 loc) • 25.2 kB
JavaScript
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { InjectionToken, Injectable, RendererFactory2, Optional, Inject, ɵɵdefineInjectable, ɵɵinject, Directive, ElementRef, Renderer2, Input, NgModule } from '@angular/core';
import { __extends, __spread, __decorate, __metadata } from 'tslib';
import { IconService, IconDirective } from '@ant-design/icons-angular';
import { warnDeprecation, trimComponentName, warn, NzConfigService, InputBoolean } from 'ng-zorro-antd/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DOCUMENT } from '@angular/common';
import { HttpBackend } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
import { BarsOutline, CalendarOutline, CaretUpFill, CaretUpOutline, CaretDownFill, CaretDownOutline, CheckCircleFill, CheckCircleOutline, CheckOutline, ClockCircleOutline, CloseCircleOutline, CloseCircleFill, CloseOutline, CopyOutline, DoubleLeftOutline, DoubleRightOutline, DownOutline, EditOutline, EllipsisOutline, ExclamationCircleFill, ExclamationCircleOutline, EyeOutline, FileFill, FileOutline, FilterFill, InfoCircleFill, InfoCircleOutline, LeftOutline, LoadingOutline, PaperClipOutline, QuestionCircleOutline, RightOutline, StarFill, SearchOutline, UploadOutline, UpOutline } from '@ant-design/icons-angular/icons';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function NzIconfontOption() { }
if (false) {
/** @type {?} */
NzIconfontOption.prototype.scriptUrl;
}
/** @type {?} */
var NZ_ICONS = new InjectionToken('nz_icons');
/** @type {?} */
var NZ_ICON_DEFAULT_TWOTONE_COLOR = new InjectionToken('nz_icon_default_twotone_color');
/** @type {?} */
var DEFAULT_TWOTONE_COLOR = '#1890ff';
/** @type {?} */
var NZ_ICONS_USED_BY_ZORRO = [
BarsOutline,
CalendarOutline,
CaretUpFill,
CaretUpOutline,
CaretDownFill,
CaretDownOutline,
CheckCircleFill,
CheckCircleOutline,
CheckOutline,
ClockCircleOutline,
CloseCircleOutline,
CloseCircleFill,
CloseOutline,
CopyOutline,
DoubleLeftOutline,
DoubleRightOutline,
DownOutline,
EditOutline,
EllipsisOutline,
ExclamationCircleFill,
ExclamationCircleOutline,
EyeOutline,
FileFill,
FileOutline,
FilterFill,
InfoCircleFill,
InfoCircleOutline,
LeftOutline,
LoadingOutline,
PaperClipOutline,
QuestionCircleOutline,
RightOutline,
StarFill,
SearchOutline,
StarFill,
UploadOutline,
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, nzConfigService, handler,
// tslint:disable-next-line:no-any
_document, icons, legacyDefaultTwotoneColor) {
var _this = _super.call(this, rendererFactory, handler, _document, sanitizer) || this;
_this.nzConfigService = nzConfigService;
_this.legacyDefaultTwotoneColor = legacyDefaultTwotoneColor;
_this.configUpdated$ = new Subject();
_this.iconfontCache = new Set();
_this.onConfigChange();
_this.addIcon.apply(_this, __spread(NZ_ICONS_USED_BY_ZORRO, (icons || [])));
if (legacyDefaultTwotoneColor) {
warnDeprecation("'NZ_ICON_DEFAULT_TWOTONE_COLOR' is deprecated and will be removed in 9.0.0. Please use 'NZ_CONFIG' instead!");
}
_this.configDefaultTwotoneColor();
_this.configDefaultTheme();
return _this;
}
/**
* @param {?} type
* @return {?}
*/
NzIconService.prototype.warnAPI = /**
* @param {?} type
* @return {?}
*/
function (type) {
if (type === 'old') {
warnDeprecation("'<i class=\"anticon\"></i>' would be deprecated in 9.0.0. Please use '<i nz-icon nzType=\"\"></i>' API. Please refer https://ng.ant.design/components/icon/en.");
}
if (type === 'cross') {
warnDeprecation("'cross' icon is replaced by 'close' icon. This auto correction would be removed in 9.0.0.");
}
if (type === 'vertical') {
warnDeprecation("'verticle' is misspelled. Please use 'vertical'. This misspell would be fixed in 9.0.0.");
}
};
/**
* @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>");
};
/**
* @private
* @return {?}
*/
NzIconService.prototype.onConfigChange = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this.nzConfigService.getConfigChangeEventForComponent(trimComponentName(this.constructor.name)).subscribe((/**
* @return {?}
*/
function () {
_this.configDefaultTwotoneColor();
_this.configDefaultTheme();
_this.configUpdated$.next();
}));
};
/**
* @private
* @return {?}
*/
NzIconService.prototype.configDefaultTheme = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var iconConfig = this.getConfig();
this.defaultTheme = iconConfig.nzTheme || 'outline';
};
/**
* @private
* @return {?}
*/
NzIconService.prototype.configDefaultTwotoneColor = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var iconConfig = this.getConfig();
/** @type {?} */
var defaultTwotoneColor = iconConfig.nzTwotoneColor || this.legacyDefaultTwotoneColor;
/** @type {?} */
var primaryColor = DEFAULT_TWOTONE_COLOR;
if (defaultTwotoneColor) {
if (defaultTwotoneColor.startsWith('#')) {
primaryColor = defaultTwotoneColor;
}
else {
warn('Twotone color must be a hex color!');
}
}
this.twoToneColor = { primaryColor: primaryColor };
};
/**
* @private
* @return {?}
*/
NzIconService.prototype.getConfig = /**
* @private
* @return {?}
*/
function () {
return ((/** @type {?} */ (this.nzConfigService.getConfigForComponent(trimComponentName(this.constructor.name))))) || {};
};
NzIconService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NzIconService.ctorParameters = function () { return [
{ type: RendererFactory2 },
{ type: DomSanitizer },
{ type: NzConfigService },
{ type: HttpBackend, decorators: [{ type: Optional }] },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
{ type: Array, decorators: [{ type: Optional }, { type: Inject, args: [NZ_ICONS,] }] },
{ type: String, decorators: [{ type: Optional }, { type: Inject, args: [NZ_ICON_DEFAULT_TWOTONE_COLOR,] }] }
]; };
/** @nocollapse */ NzIconService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NzIconService_Factory() { return new NzIconService(ɵɵinject(RendererFactory2), ɵɵinject(DomSanitizer), ɵɵinject(NzConfigService), ɵɵinject(HttpBackend, 8), ɵɵinject(DOCUMENT, 8), ɵɵinject(NZ_ICONS, 8), ɵɵinject(NZ_ICON_DEFAULT_TWOTONE_COLOR, 8)); }, token: NzIconService, providedIn: "root" });
return NzIconService;
}(IconService));
if (false) {
/** @type {?} */
NzIconService.prototype.configUpdated$;
/**
* @type {?}
* @private
*/
NzIconService.prototype.iconfontCache;
/**
* @type {?}
* @protected
*/
NzIconService.prototype.nzConfigService;
/**
* @deprecated
* \@inner
* @type {?}
* @private
*/
NzIconService.prototype.legacyDefaultTwotoneColor;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,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 };
}
});
var ɵ0 = getIconTypeClass;
/** @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;
});
var ɵ1 = normalizeType;
/**
* 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) {
var _this = _super.call(this, iconService, elementRef, renderer) || this;
_this.iconService = iconService;
_this.elementRef = elementRef;
_this.renderer = renderer;
_this.platform = platform;
_this.nzRotate = 0;
/**
* @deprecated 8.0.0 avoid exposing low layer API.
*/
_this.spin = false;
_this.el = _this.elementRef.nativeElement;
_this.destroy$ = new Subject();
return _this;
}
Object.defineProperty(NzIconDirective.prototype, "nzSpin", {
set: /**
* @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) {
warnDeprecation("APIs for Icon without 'nz' prefix are deprecated and will be removed in 9.0.0! Please check icons with this type: '" + type.currentValue + "'.");
}
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));
}
if (type && !nzType) {
warnDeprecation("APIs for Icon without 'nz' prefix are deprecated and will be removed in 9.0.0! Please check icons with this type: '" + this.type + "'.");
}
};
/**
* @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());
}
this.iconService.configUpdated$
.asObservable()
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
function () {
if (_this.type) {
_this.changeIcon2();
}
}));
};
/**
* @return {?}
*/
NzIconDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.classNameObserver) {
this.classNameObserver.disconnect();
}
this.destroy$.next();
this.destroy$.complete();
};
/**
* 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: Directive, args: [{
selector: 'i.anticon, [nz-icon]',
exportAs: 'nzIcon'
},] }
];
/** @nocollapse */
NzIconDirective.ctorParameters = function () { return [
{ type: NzIconService },
{ type: ElementRef },
{ type: Renderer2 },
{ type: Platform }
]; };
NzIconDirective.propDecorators = {
nzSpin: [{ type: Input }],
nzRotate: [{ type: Input }],
nzType: [{ type: Input }],
nzTheme: [{ type: Input }],
nzTwotoneColor: [{ type: Input }],
nzIconfont: [{ type: Input }],
spin: [{ type: Input }],
iconfont: [{ type: Input }],
type: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NzIconDirective.prototype, "nzSpin", null);
return NzIconDirective;
}(IconDirective));
if (false) {
/** @type {?} */
NzIconDirective.prototype.nzRotate;
/**
* @deprecated 8.0.0 avoid exposing low layer API.
* @type {?}
*/
NzIconDirective.prototype.spin;
/**
* @deprecated 8.0.0 avoid exposing low layer API.
* @type {?}
*/
NzIconDirective.prototype.iconfont;
/**
* @type {?}
* @private
*/
NzIconDirective.prototype.classNameObserver;
/**
* @type {?}
* @private
*/
NzIconDirective.prototype.el;
/**
* @type {?}
* @private
*/
NzIconDirective.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzIconDirective.prototype._type;
/** @type {?} */
NzIconDirective.prototype.iconService;
/** @type {?} */
NzIconDirective.prototype.elementRef;
/** @type {?} */
NzIconDirective.prototype.renderer;
/**
* @type {?}
* @private
*/
NzIconDirective.prototype.platform;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzIconModule = /** @class */ (function () {
function NzIconModule() {
}
NzIconModule.decorators = [
{ type: NgModule, args: [{
exports: [NzIconDirective],
declarations: [NzIconDirective],
imports: [PlatformModule]
},] }
];
return NzIconModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { DEFAULT_TWOTONE_COLOR, NZ_ICONS, NZ_ICONS_USED_BY_ZORRO, NZ_ICON_DEFAULT_TWOTONE_COLOR, NzIconDirective, NzIconModule, NzIconService };
//# sourceMappingURL=ng-zorro-antd-icon.js.map