/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
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);
};
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, Renderer2, } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ElIconLibraries } from './icon-libraries';
/**
 * Icon component. Allows to render both `svg` and `font` icons.
 * Starting from Endlessjs 4.0 uses [Eva Icons](https://endlessjs.github.io/eva-icons/) pack by default.
 *
 * Basic icon example:
 * @stacked-example(Showcase, icon/icon-showcase.component)
 *
 * Icon configuration:
 *
 * ```html
 * <el-icon icon="star"></el-icon>
 * ```
 * ### Installation
 *
 * By default Endlessjs comes without any pre-installed icon pack.
 * Starting with Endlessjs 4.0.0 we ship separate package called `@endlessjs/eva-icons`
 * which integrates SVG [Eva Icons](https://endlessjs.github.io/eva-icons/) pack to Endlessjs. To add it to your
 * project run:
 * ```sh
 * npm i @endlessjs/eva-icons
 * ```
 * This command will install Eva Icons pack. Then register `ElEvaIconsModule` into your app module:
 * ```ts
 * import { ElEvaIconsModule } from '@endlessjs/eva-icons';
 *
 * @NgModule({
 *   imports: [
 *     // ...
 *     ElEvaIconsModule,
 *   ],
 * })
 * export class AppModule { }
 * ```
 * Last thing, import `ElIconModule` to your feature module where you need to show an icon:
 * ```ts
 * import { ElIconModule } from '@endlessjs/theme';
 *
 * @NgModule({
 *   imports: [
 *     // ...
 *     ElIconModule,
 *   ],
 * })
 * export class PageModule { }
 * ```
 * ### Usage
 *
 * Icon can be colored using `status` input:
 * ```html
 * <el-icon icon="star" status="warning"></el-icon>
 * ```
 *
 * Colored icons:
 * @stacked-example(Colored Icons, icon/icon-colors.component)
 *
 * In case you need to specify an icon from a specific icon pack, this could be done using `pack` input property:
 * ```html
 * <el-icon icon="star" pack="font-awesome"></el-icon>
 * ```
 * Additional icon settings (if available by the icon pack) could be passed using `options` input:
 *
 * ```html
 * <el-icon icon="star" [options]="{ animation: { type: 'zoom' } }"></el-icon>
 * ```
 *
 * @styles
 *
 * icon-font-size:
 * icon-line-height:
 * icon-width:
 * icon-height:
 * icon-primary-color:
 * icon-info-color:
 * icon-success-color:
 * icon-warning-color:
 * icon-danger-color:
 */
let ElIconComponent = class ElIconComponent {
    constructor(sanitizer, iconLibrary, el, renderer) {
        this.sanitizer = sanitizer;
        this.iconLibrary = iconLibrary;
        this.el = el;
        this.renderer = renderer;
        this.prevClasses = [];
    }
    get primary() {
        return this.status === 'primary';
    }
    get info() {
        return this.status === 'info';
    }
    get success() {
        return this.status === 'success';
    }
    get warning() {
        return this.status === 'warning';
    }
    get danger() {
        return this.status === 'danger';
    }
    /**
     * Sets all icon configurable properties via config object.
     * If passed value is a string set icon name.
     * @docs-private
     */
    get config() {
        return this._config;
    }
    set config(value) {
        if (!value) {
            return;
        }
        this._config = value;
        if (typeof value === 'string') {
            this.icon = value;
        }
        else {
            this.icon = value.icon;
            this.pack = value.pack;
            this.status = value.status;
            this.options = value.options;
        }
    }
    ngOnInit() {
        this.iconDef = this.renderIcon(this.icon, this.pack, this.options);
    }
    ngOnChanges() {
        if (this.iconDef) {
            this.iconDef = this.renderIcon(this.icon, this.pack, this.options);
        }
    }
    renderIcon(name, pack, options) {
        const iconDefinition = this.iconLibrary.getIcon(name, pack);
        const content = iconDefinition.icon.getContent(options);
        if (content) {
            this.html = this.sanitizer.bypassSecurityTrustHtml(content);
        }
        this.assignClasses(iconDefinition.icon.getClasses(options));
        return iconDefinition;
    }
    assignClasses(classes) {
        this.prevClasses.forEach((className) => {
            this.renderer.removeClass(this.el.nativeElement, className);
        });
        classes.forEach((className) => {
            this.renderer.addClass(this.el.nativeElement, className);
        });
        this.prevClasses = classes;
    }
};
__decorate([
    HostBinding('innerHtml'),
    __metadata("design:type", Object)
], ElIconComponent.prototype, "html", void 0);
__decorate([
    HostBinding('class.status-primary'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElIconComponent.prototype, "primary", null);
__decorate([
    HostBinding('class.status-info'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElIconComponent.prototype, "info", null);
__decorate([
    HostBinding('class.status-success'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElIconComponent.prototype, "success", null);
__decorate([
    HostBinding('class.status-warning'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElIconComponent.prototype, "warning", null);
__decorate([
    HostBinding('class.status-danger'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElIconComponent.prototype, "danger", null);
__decorate([
    Input(),
    __metadata("design:type", String)
], ElIconComponent.prototype, "icon", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], ElIconComponent.prototype, "pack", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object)
], ElIconComponent.prototype, "options", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], ElIconComponent.prototype, "status", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ElIconComponent.prototype, "config", null);
ElIconComponent = __decorate([
    Component({
        selector: 'el-icon',
        template: '',
        changeDetection: ChangeDetectionStrategy.OnPush,
        styles: [":host{display:inline-block}\n"]
    }),
    __metadata("design:paramtypes", [DomSanitizer,
        ElIconLibraries,
        ElementRef,
        Renderer2])
], ElIconComponent);
export { ElIconComponent };
//# sourceMappingURL=icon.component.js.map