/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} 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 name="home" color="#00ff00" isActive="true">
 * </igx-icon>
 * ```
 */
var /** @type {?} */ 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" name="settings" color="blue" [isActive]="false"></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" name="settings" color="blue"></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.checkInputProps();
        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", {
        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", {
        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, "template", {
        /**
         *   An accessor that returns a TemplateRef to explicit, implicit or no ligature.
         *```typescript
         *@ViewChild("MyIcon")
         *public icon: IgxIconComponent;
         *ngAfterViewInit() {
         *    let iconTemplate = this.icon.template;
         * }
         * ```
         */
        get: /**
         *   An accessor that returns a TemplateRef to explicit, implicit or no ligature.
         * ```typescript
         * \@ViewChild("MyIcon")
         * public icon: IgxIconComponent;
         * ngAfterViewInit() {
         *    let iconTemplate = this.icon.template;
         * }
         * ```
         * @return {?}
         */
        function () {
            if (this.glyphName) {
                return this.noLigature;
            }
            if (this.iconName) {
                return this.implicitLigature;
            }
            return this.explicitLigature;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @return {?}
     */
    IgxIconComponent.prototype.checkInputProps = /**
     * @return {?}
     */
    function () {
        if (this.iconName && this.glyphName) {
            throw new Error('You can provide either ligature `name` or glyph `iconName`, but not both at the same time.');
        }
    };
    /**
     * @return {?}
     */
    IgxIconComponent.prototype.updateIconClass = /**
     * @return {?}
     */
    function () {
        var /** @type {?} */ className = this.iconService.fontSetClassName(this.font);
        this.el.nativeElement.classList.add(className);
        if (this.glyphName) {
            this.el.nativeElement.classList.add(this.glyphName);
        }
    };
    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 #implicitLigature>\n    {{getIconName}}\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 },] },],
        "implicitLigature": [{ type: ViewChild, args: ['implicitLigature', { read: TemplateRef },] },],
        "explicitLigature": [{ type: ViewChild, args: ['explicitLigature', { 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',] },],
        "glyphName": [{ type: Input, args: ['iconName',] },],
        "getInactive": [{ type: HostBinding, args: ['class.igx-icon--inactive',] },],
        "getIconColor": [{ type: HostBinding, args: ['style.color',] },],
    };
    return IgxIconComponent;
}());
export { IgxIconComponent };
function IgxIconComponent_tsickle_Closure_declarations() {
    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
    IgxIconComponent.decorators;
    /**
     * @nocollapse
     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
     */
    IgxIconComponent.ctorParameters;
    /** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
    IgxIconComponent.propDecorators;
    /** @type {?} */
    IgxIconComponent.prototype.noLigature;
    /** @type {?} */
    IgxIconComponent.prototype.implicitLigature;
    /** @type {?} */
    IgxIconComponent.prototype.explicitLigature;
    /**
     *  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" name="settings" color="blue" [isActive]="false"></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" name="settings" color="blue" [isActive]="false"></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" name="settings" color="blue"></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" name="settings" ></igx-icon>
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.iconColor;
    /**
     *    An \@Input property that allows you to change the `iconName` of the icon.
     *    The `iconName` can be set using the `name`.
     *    You can provide either ligature `name` or glyph `iconName`, but not both at the same time.
     * ```html
     * <igx-icon name="question_answer" color="blue" [isActive]="true" fontSet="material"></igx-icon>
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.iconName;
    /**
     *    An \@Input property that allows you to change the `glyphName` of the icon.
     *    The `glyphName` can be set using `iconName`.
     *    You can provide either ligature `name` or glyph `iconName`, but not both at the same time.
     * ```html
     * <igx-icon iconName="question_answer" color="blue" [isActive]="true" fontSet="material"></igx-icon>
     * ```
     * @type {?}
     */
    IgxIconComponent.prototype.glyphName;
    /**
     * An ElementRef property of the `igx-icon` component.
     * @type {?}
     */
    IgxIconComponent.prototype.el;
    /** @type {?} */
    IgxIconComponent.prototype._el;
    /** @type {?} */
    IgxIconComponent.prototype.iconService;
}

//# sourceMappingURL=data:application/json;base64, 