ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
683 lines (676 loc) • 21.4 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 { __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 {?} */
const NZ_ICONS = new InjectionToken('nz_icons');
/** @type {?} */
const NZ_ICON_DEFAULT_TWOTONE_COLOR = new InjectionToken('nz_icon_default_twotone_color');
/** @type {?} */
const DEFAULT_TWOTONE_COLOR = '#1890ff';
/** @type {?} */
const 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.
*/
class NzIconService extends IconService {
/**
* @param {?} rendererFactory
* @param {?} sanitizer
* @param {?} nzConfigService
* @param {?} handler
* @param {?} _document
* @param {?=} icons
* @param {?=} legacyDefaultTwotoneColor
*/
constructor(rendererFactory, sanitizer, nzConfigService, handler,
// tslint:disable-next-line:no-any
_document, icons, legacyDefaultTwotoneColor) {
super(rendererFactory, handler, _document, sanitizer);
this.nzConfigService = nzConfigService;
this.legacyDefaultTwotoneColor = legacyDefaultTwotoneColor;
this.configUpdated$ = new Subject();
this.iconfontCache = new Set();
this.onConfigChange();
this.addIcon(...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();
}
/**
* @param {?} type
* @return {?}
*/
warnAPI(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 {?}
*/
normalizeSvgElement(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 {?}
*/
fetchFromIconfont(opt) {
const { scriptUrl } = opt;
if (this._document && !this.iconfontCache.has(scriptUrl)) {
/** @type {?} */
const 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 {?}
*/
createIconfontIcon(type) {
return this._createSVGElementFromString(`<svg><use xlink:href="${type}"></svg>`);
}
/**
* @private
* @return {?}
*/
onConfigChange() {
this.nzConfigService.getConfigChangeEventForComponent(trimComponentName(this.constructor.name)).subscribe((/**
* @return {?}
*/
() => {
this.configDefaultTwotoneColor();
this.configDefaultTheme();
this.configUpdated$.next();
}));
}
/**
* @private
* @return {?}
*/
configDefaultTheme() {
/** @type {?} */
const iconConfig = this.getConfig();
this.defaultTheme = iconConfig.nzTheme || 'outline';
}
/**
* @private
* @return {?}
*/
configDefaultTwotoneColor() {
/** @type {?} */
const iconConfig = this.getConfig();
/** @type {?} */
const defaultTwotoneColor = iconConfig.nzTwotoneColor || this.legacyDefaultTwotoneColor;
/** @type {?} */
let primaryColor = DEFAULT_TWOTONE_COLOR;
if (defaultTwotoneColor) {
if (defaultTwotoneColor.startsWith('#')) {
primaryColor = defaultTwotoneColor;
}
else {
warn('Twotone color must be a hex color!');
}
}
this.twoToneColor = { primaryColor };
}
/**
* @private
* @return {?}
*/
getConfig() {
return ((/** @type {?} */ (this.nzConfigService.getConfigForComponent(trimComponentName(this.constructor.name))))) || {};
}
}
NzIconService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NzIconService.ctorParameters = () => [
{ 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" });
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 {?} */
const iconTypeRE = /^anticon\-\w/;
/** @type {?} */
const getIconTypeClass = (/**
* @param {?} className
* @return {?}
*/
(className) => {
if (!className) {
return undefined;
}
else {
/** @type {?} */
const classArr = className.split(/\s/);
/** @type {?} */
const index = classArr.findIndex((/**
* @param {?} cls
* @return {?}
*/
cls => cls !== 'anticon' && cls !== 'anticon-spin' && !!cls.match(iconTypeRE)));
return index === -1 ? undefined : { name: classArr[index], index };
}
});
const ɵ0 = getIconTypeClass;
/** @type {?} */
const normalizeType = (/**
* @param {?} rawType
* @return {?}
*/
(rawType) => {
/** @type {?} */
const 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;
});
const ɵ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`.
*/
class NzIconDirective extends IconDirective {
/**
* @param {?} iconService
* @param {?} elementRef
* @param {?} renderer
* @param {?} platform
*/
constructor(iconService, elementRef, renderer, platform) {
super(iconService, elementRef, renderer);
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();
}
/**
* @param {?} value
* @return {?}
*/
set nzSpin(value) {
this.spin = value;
}
/**
* @param {?} value
* @return {?}
*/
set nzType(value) {
this.type = value;
}
/**
* @param {?} value
* @return {?}
*/
set nzTheme(value) {
this.theme = value;
}
/**
* @param {?} value
* @return {?}
*/
set nzTwotoneColor(value) {
this.twoToneColor = value;
}
/**
* @param {?} value
* @return {?}
*/
set nzIconfont(value) {
this.iconfont = value;
}
/**
* @param {?} value
* @return {?}
*/
set type(value) {
if (value && value.startsWith('anticon')) {
/** @type {?} */
const rawClass = getIconTypeClass(value);
/** @type {?} */
const type = rawClass ? normalizeType(rawClass.name).type : '';
if (type && this.type !== type) {
this._type = type;
}
}
else {
this._type = value;
}
}
/**
* @return {?}
*/
get type() {
return this._type;
}
/**
* Replacement of `changeIcon` for more modifications.
* @private
* @param {?=} oldAPI
* @return {?}
*/
changeIcon2(oldAPI = false) {
if (!oldAPI) {
this.setClassName();
}
this._changeIcon().then((/**
* @param {?} svg
* @return {?}
*/
svg => {
this.setSVGData(svg);
if (!oldAPI && svg) {
this.handleSpin(svg);
this.handleRotate(svg);
}
}));
}
/**
* @private
* @param {?} className
* @return {?}
*/
classChangeHandler(className) {
/** @type {?} */
const ret = getIconTypeClass(className);
if (ret) {
const { type, crossError, verticalError } = normalizeType(ret.name);
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 {?}
*/
handleSpin(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 {?}
*/
handleRotate(svg) {
if (this.nzRotate) {
this.renderer.setAttribute(svg, 'style', `transform: rotate(${this.nzRotate}deg)`);
}
else {
this.renderer.removeAttribute(svg, 'style');
}
}
/**
* @private
* @return {?}
*/
setClassName() {
if (typeof this.type === 'string') {
/** @type {?} */
const iconClassNameArr = this.el.className.split(/\s/);
/** @type {?} */
const 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 {?}
*/
setSVGData(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 {?}
*/
ngOnChanges(changes) {
const { type, nzType, nzTwotoneColor, twoToneColor, spin, nzSpin, theme, nzTheme, nzRotate } = changes;
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 {?}
*/
ngOnInit() {
// 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 {?}
*/
(mutations) => {
mutations
.filter((/**
* @param {?} mutation
* @return {?}
*/
(mutation) => mutation.attributeName === 'class'))
.forEach((/**
* @param {?} mutation
* @return {?}
*/
(mutation) => 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 {?}
*/
() => {
if (this.type) {
this.changeIcon2();
}
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.classNameObserver) {
this.classNameObserver.disconnect();
}
this.destroy$.next();
this.destroy$.complete();
}
/**
* If custom content is provided, try to normalize SVG elements.
* @return {?}
*/
ngAfterContentChecked() {
/** @type {?} */
const children = this.el.children;
/** @type {?} */
let length = children.length;
if (!this.type && children.length) {
while (length--) {
/** @type {?} */
const 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 = () => [
{ 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);
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
*/
class NzIconModule {
}
NzIconModule.decorators = [
{ type: NgModule, args: [{
exports: [NzIconDirective],
declarations: [NzIconDirective],
imports: [PlatformModule]
},] }
];
/**
* @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