import { Directive, Input } from '@angular/core';
import { alreadyHasAThemeSuffix, getNameAndNamespace, isIconDefinition, warn, withSuffix } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "./icon.service";
function checkMeta(prev, after) {
    return prev.type === after.type && prev.theme === after.theme && prev.twoToneColor === after.twoToneColor;
}
class IconDirective {
    constructor(_iconService, _elementRef, _renderer) {
        this._iconService = _iconService;
        this._elementRef = _elementRef;
        this._renderer = _renderer;
    }
    ngOnChanges(changes) {
        if (changes.type || changes.theme || changes.twoToneColor) {
            this._changeIcon();
        }
    }
    /**
     * Render a new icon in the current element. Remove the icon when `type` is falsy.
     */
    _changeIcon() {
        return new Promise(resolve => {
            if (!this.type) {
                this._clearSVGElement();
                resolve(null);
                return;
            }
            const beforeMeta = this._getSelfRenderMeta();
            this._iconService.getRenderedContent(this._parseIconType(this.type, this.theme), this.twoToneColor).subscribe(svg => {
                // avoid race condition
                // see https://github.com/ant-design/ant-design-icons/issues/315
                const afterMeta = this._getSelfRenderMeta();
                if (checkMeta(beforeMeta, afterMeta)) {
                    this._setSVGElement(svg);
                    resolve(svg);
                }
                else {
                    resolve(null);
                }
            });
        });
    }
    _getSelfRenderMeta() {
        return {
            type: this.type,
            theme: this.theme,
            twoToneColor: this.twoToneColor
        };
    }
    /**
     * Parse a icon to the standard form, an `IconDefinition` or a string like 'account-book-fill` (with a theme suffixed).
     * If namespace is specified, ignore theme because it meaningless for users' icons.
     *
     * @param type
     * @param theme
     */
    _parseIconType(type, theme) {
        if (isIconDefinition(type)) {
            return type;
        }
        else {
            const [name, namespace] = getNameAndNamespace(type);
            if (namespace) {
                return type;
            }
            if (alreadyHasAThemeSuffix(name)) {
                if (!!theme) {
                    warn(`'type' ${name} already gets a theme inside so 'theme' ${theme} would be ignored`);
                }
                return name;
            }
            else {
                return withSuffix(name, theme || this._iconService.defaultTheme);
            }
        }
    }
    _setSVGElement(svg) {
        this._clearSVGElement();
        this._renderer.appendChild(this._elementRef.nativeElement, svg);
    }
    _clearSVGElement() {
        const el = this._elementRef.nativeElement;
        const children = el.childNodes;
        const length = children.length;
        for (let i = length - 1; i >= 0; i--) {
            const child = children[i];
            if (child.tagName?.toLowerCase() === 'svg') {
                this._renderer.removeChild(el, child);
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: IconDirective, deps: [{ token: i1.IconService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: IconDirective, selector: "[antIcon]", inputs: { type: "type", theme: "theme", twoToneColor: "twoToneColor" }, usesOnChanges: true, ngImport: i0 }); }
}
export { IconDirective };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: IconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[antIcon]'
                }]
        }], ctorParameters: function () { return [{ type: i1.IconService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { type: [{
                type: Input
            }], theme: [{
                type: Input
            }], twoToneColor: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,[encoded data, 8484 characters]