/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, ElementRef, HostBinding, Input, TemplateRef, ViewChild } from '@angular/core';
import { IgxIconService } from './icon.service';
/**
 * **Ignite UI for Angular Icon** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon.html)
 *
 * The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
 * support custom colors and can be marked as active or disabled using the `isActive` property. This will change the appearence
 * of the icon.
 *
 * Example:
 * ```html
 * <igx-icon color="#00ff00" isActive="true">home</igx-icon>
 * ```
 * @type {?}
 */
var NEXT_ID = 0;
var IgxIconComponent = /** @class */ (function () {
    function IgxIconComponent(_el, iconService) {
        this._el = _el;
        this.iconService = iconService;
        /**
         *  This allows you to change the value of `class.igx-icon`. By default it's `igx-icon`.
         * ```typescript
         * \@ViewChild("MyIcon") public icon: IgxIconComponent;
         * constructor(private cdRef:ChangeDetectorRef) {}
         * ngAfterViewInit() {
         *    this.icon.cssClass = "";
         *    this.cdRef.detectChanges();
         * }
         * ```
         */
        this.cssClass = 'igx-icon';
        /**
         *  This allows you to disable the `aria-hidden` attribute. By default it's applied.
         * ```typescript
         * \@ViewChild("MyIcon") public icon: IgxIconComponent;
         * constructor(private cdRef:ChangeDetectorRef) {}
         * ngAfterViewInit() {
         *    this.icon.ariaHidden = false;
         *    this.cdRef.detectChanges();
         * }
         * ```
         */
        this.ariaHidden = true;
        /**
         *  An \@Input property that sets the value of the `id` attribute.
         * ```html
         * <igx-icon id="igx-icon-1" fontSet="material" color="blue" [isActive]="false">settings</igx-icon>
         * ```
         */
        this.id = "igx-icon-" + NEXT_ID++;
        /**
         *  An \@Input property that allows you to disable the `active` property. By default it's applied.
         * ```html
         * <igx-icon [isActive]="false" fontSet="material" color="blue">settings</igx-icon>
         * ```
         */
        this.active = true;
        this.el = _el;
        this.font = this.iconService.defaultFontSet;
        this.iconService.registerFontSetAlias('material', 'material-icons');
    }
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxIconComponent.prototype.ngOnInit = /**
     * @hidden
     * @return {?}
     */
    function () {
        this.updateIconClass();
    };
    Object.defineProperty(IgxIconComponent.prototype, "getFontSet", {
        /**
         *  An accessor that returns the value of the font property.
         *```typescript
         *@ViewChild("MyIcon")
         *public icon: IgxIconComponent;
         *ngAfterViewInit() {
         *    let iconFont = this.icon.getFontSet;
         * }
         * ```
         */
        get: /**
         *  An accessor that returns the value of the font property.
         * ```typescript
         * \@ViewChild("MyIcon")
         * public icon: IgxIconComponent;
         * ngAfterViewInit() {
         *    let iconFont = this.icon.getFontSet;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this.font;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxIconComponent.prototype, "getActive", {
        /**
         *  An accessor that returns the value of the active property.
         *```typescript
         *@ViewChild("MyIcon")
         *public icon: IgxIconComponent;
         *ngAfterViewInit() {
         *    let iconActive = this.icon.getActive;
         * }
         * ```
         */
        get: /**
         *  An accessor that returns the value of the active property.
         * ```typescript
         * \@ViewChild("MyIcon")
         * public icon: IgxIconComponent;
         * ngAfterViewInit() {
         *    let iconActive = this.icon.getActive;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this.active;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxIconComponent.prototype, "getInactive", {
        /**
         *  An accessor that returns inactive property.
         *```typescript
         *@ViewChild("MyIcon")
         *public icon: IgxIconComponent;
         *ngAfterViewInit() {
         *    let iconActive = this.icon.getInactive;
         * }
         * ```
         */
        get: /**
         *  An accessor that returns inactive property.
         * ```typescript
         * \@ViewChild("MyIcon")
         * public icon: IgxIconComponent;
         * ngAfterViewInit() {
         *    let iconActive = this.icon.getInactive;
         * }
         * ```
         * @return {?}
         */
        function () {
            return !this.active;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxIconComponent.prototype, "getIconColor", {
        /**
         *  An accessor that returns the opposite value of the `iconColor` property.
         *```typescript
         *@ViewChild("MyIcon")
         *public icon: IgxIconComponent;
         *ngAfterViewInit() {
         *    let iconColor = this.icon.getIconColor;
         * }
         * ```
         */
        get: /**
         *  An accessor that returns the opposite value of the `iconColor` property.
         * ```typescript
         * \@ViewChild("MyIcon")
         * public icon: IgxIconComponent;
         * ngAfterViewInit() {
         *    let iconColor = this.icon.getIconColor;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this.iconColor;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxIconComponent.prototype, "getIconName", {
        /**
         *  An accessor that returns the value of the iconName property.
         *```typescript
         *@ViewChild("MyIcon")
         *public icon: IgxIconComponent;
         *ngAfterViewInit() {
         *    let iconName = this.icon.getIconName;
         * }
         * ```
         */
        get: /**
         *  An accessor that returns the value of the iconName property.
         * ```typescript
         * \@ViewChild("MyIcon")
         * public icon: IgxIconComponent;
         * ngAfterViewInit() {
         *    let iconName = this.icon.getIconName;
         * }
         * ```
         * @return {?}
         */
        function () {
            return this.iconName;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxIconComponent.prototype, "getSvgKey", {
        /**
         *  An accessor that returns the key of the SVG image.
         *  The key consists of the fontSet and the iconName separated by underscore.
         *```typescript
         *@ViewChild("MyIcon")
         *public icon: IgxIconComponent;
         *ngAfterViewInit() {
         *    let svgKey = this.icon.getSvgKey;
         * }
         * ```
         */
        get: /**
         *  An accessor that returns the key of the SVG image.
         *  The key consists of the fontSet and the iconName separated by underscore.
         * ```typescript
         * \@ViewChild("MyIcon")
         * public icon: IgxIconComponent;
         * ngAfterViewInit() {
         *    let svgKey = this.icon.getSvgKey;
         * }
         * ```
         * @return {?}
         */
        function () {
            if (this.iconService.isSvgIconCached(this.iconName, this.font)) {
                return '#' + this.iconService.getSvgIconKey(this.iconName, this.font);
            }
            return null;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxIconComponent.prototype, "template", {
        /**
         *   An accessor that returns a TemplateRef to explicit, svg or no ligature.
         *```typescript
         *@ViewChild("MyIcon")
         *public icon: IgxIconComponent;
         *ngAfterViewInit() {
         *    let iconTemplate = this.icon.template;
         * }
         * ```
         */
        get: /**
         *   An accessor that returns a TemplateRef to explicit, svg or no ligature.
         * ```typescript
         * \@ViewChild("MyIcon")
         * public icon: IgxIconComponent;
         * ngAfterViewInit() {
         *    let iconTemplate = this.icon.template;
         * }
         * ```
         * @return {?}
         */
        function () {
            if (this.iconName) {
                if (this.iconService.isSvgIconCached(this.iconName, this.font)) {
                    return this.svgImage;
                }
                return this.noLigature;
            }
            return this.explicitLigature;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
     */
    /**
     * @hidden
     * @private
     * @return {?}
     */
    IgxIconComponent.prototype.updateIconClass = /**
     * @hidden
     * @private
     * @return {?}
     */
    function () {
        /** @type {?} */
        var className = this.iconService.fontSetClassName(this.font);
        this.el.nativeElement.classList.add(className);
        if (this.iconName && !this.iconService.isSvgIconCached(this.iconName, this.font)) {
            this.el.nativeElement.classList.add(this.iconName);
        }
    };
    IgxIconComponent.decorators = [
        { type: Component, args: [{
                    selector: 'igx-icon',
                    template: "<ng-template #noLigature></ng-template>\n\n<ng-template #explicitLigature>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #svgImage>\n    <svg>\n        <use [attr.href]=\"getSvgKey\"></use>\n    </svg>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n"
                }] }
    ];
    /** @nocollapse */
    IgxIconComponent.ctorParameters = function () { return [
        { type: ElementRef },
        { type: IgxIconService }
    ]; };
    IgxIconComponent.propDecorators = {
        noLigature: [{ type: ViewChild, args: ['noLigature', { read: TemplateRef },] }],
        explicitLigature: [{ type: ViewChild, args: ['explicitLigature', { read: TemplateRef },] }],
        svgImage: [{ type: ViewChild, args: ['svgImage', { read: TemplateRef },] }],
        cssClass: [{ type: HostBinding, args: ['class.igx-icon',] }],
        ariaHidden: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
        id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
        font: [{ type: Input, args: ['fontSet',] }],
        active: [{ type: Input, args: ['isActive',] }],
        iconColor: [{ type: Input, args: ['color',] }],
        iconName: [{ type: Input, args: ['name',] }],
        getInactive: [{ type: HostBinding, args: ['class.igx-icon--inactive',] }],
        getIconColor: [{ type: HostBinding, args: ['style.color',] }]
    };
    return IgxIconComponent;
}());
export { IgxIconComponent };
if (false) {
    /**
     * @type {?}
     * @private
     */
    IgxIconComponent.prototype.noLigature;
    /**
     * @type {?}
     * @private
     */
    IgxIconComponent.prototype.explicitLigature;
    /**
     * @type {?}
     * @private
     */
    IgxIconComponent.prototype.svgImage;
    /**
     *  This allows you to change the value of `class.igx-icon`. By default it's `igx-icon`.
     * ```typescript
     * \@ViewChild("MyIcon") public icon: IgxIconComponent;
     * constructor(private cdRef:ChangeDetectorRef) {}
     * ngAfterViewInit() {
     *    this.icon.cssClass = "";
     *    this.cdRef.detectChanges();
     * }
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.cssClass;
    /**
     *  This allows you to disable the `aria-hidden` attribute. By default it's applied.
     * ```typescript
     * \@ViewChild("MyIcon") public icon: IgxIconComponent;
     * constructor(private cdRef:ChangeDetectorRef) {}
     * ngAfterViewInit() {
     *    this.icon.ariaHidden = false;
     *    this.cdRef.detectChanges();
     * }
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.ariaHidden;
    /**
     *  An \@Input property that sets the value of the `id` attribute.
     * ```html
     * <igx-icon id="igx-icon-1" fontSet="material" color="blue" [isActive]="false">settings</igx-icon>
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.id;
    /**
     *  An \@Input property that sets the value of the `fontSet`. By default it's "material".
     * ```html
     * <igx-icon fontSet="material" color="blue" [isActive]="false">settings</igx-icon>
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.font;
    /**
     *  An \@Input property that allows you to disable the `active` property. By default it's applied.
     * ```html
     * <igx-icon [isActive]="false" fontSet="material" color="blue">settings</igx-icon>
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.active;
    /**
     *  An \@Input property that allows you to change the `iconColor` of the icon.
     * ```html
     * <igx-icon color="blue" [isActive]="true" fontSet="material">settings</igx-icon>
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.iconColor;
    /**
     *  An \@Input property that allows you to set the `iconName` of the icon.
     *  The `iconName` can be set using the `name` property.
     * ```html
     * <igx-icon color="blue" [isActive]="true" fontSet="material">question_answer</igx-icon>
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.iconName;
    /**
     * An ElementRef property of the `igx-icon` component.
     * @type {?}
     */
    IgxIconComponent.prototype.el;
    /**
     * @type {?}
     * @private
     */
    IgxIconComponent.prototype._el;
    /**
     * @type {?}
     * @private
     */
    IgxIconComponent.prototype.iconService;
}
//# sourceMappingURL=data:application/json;base64, 