/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { CommonModule } from '@angular/common';
import { Component, ElementRef, EventEmitter, HostBinding, Input, NgModule, Output, Renderer2, ViewChild, ContentChild } from '@angular/core';
import { IgxProcessBarTextTemplateDirective } from './progressbar.common';
/** @type {?} */
var ONE_PERCENT = 0.01;
/** @type {?} */
var MIN_VALUE = 0;
/** @enum {string} */
var IgxTextAlign = {
    START: 'start',
    CENTER: 'center',
    END: 'end',
};
export { IgxTextAlign };
/** @enum {string} */
var IgxProgressType = {
    DANGER: 'danger',
    INFO: 'info',
    WARNING: 'warning',
    SUCCESS: 'success',
};
export { IgxProgressType };
/**
 * @record
 */
export function IChangeProgressEventArgs() { }
if (false) {
    /** @type {?} */
    IChangeProgressEventArgs.prototype.previousValue;
    /** @type {?} */
    IChangeProgressEventArgs.prototype.currentValue;
}
/**
 * @abstract
 */
var /**
 * @abstract
 */
BaseProgress = /** @class */ (function () {
    function BaseProgress() {
        /**
         * @hidden
         */
        this.requestAnimationId = undefined;
        /**
         * @hidden
         */
        this._valueInPercent = MIN_VALUE;
        /**
         * @hidden
         */
        this._max = 100;
        /**
         * @hidden
         */
        this._value = MIN_VALUE;
        /**
         * @hidden
         */
        this._animate = true;
    }
    Object.defineProperty(BaseProgress.prototype, "valueInPercent", {
        /**
         *Returns the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
         *public valuePercent(event){
         *    let percentValue = this.progressBar.valueInPercent;
         *    alert(percentValue);
         *}
         *```
         */
        get: /**
         * Returns the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
         * public valuePercent(event){
         *    let percentValue = this.progressBar.valueInPercent;
         *    alert(percentValue);
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._valueInPercent;
        },
        /**
         *Sets the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
         *    public setValue(event){
         *    this.progressBar.valueInPercent = 56;
         *}
         * //...
         *```
         *```html
         *<button igxButton="fab" igxRipple="" (click)="setValue()">setValue</button>
         *```
         */
        set: /**
         * Sets the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
         *    public setValue(event){
         *    this.progressBar.valueInPercent = 56;
         * }
         * //...
         * ```
         * ```html
         * <button igxButton="fab" igxRipple="" (click)="setValue()">setValue</button>
         * ```
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._valueInPercent = value;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @param {?} val
     * @param {?} step
     * @return {?}
     */
    BaseProgress.prototype.runAnimation = /**
     * @hidden
     * @protected
     * @param {?} val
     * @param {?} step
     * @return {?}
     */
    function (val, step) {
        var _this = this;
        this.requestAnimationId = requestAnimationFrame(function () { return _this.updateProgressSmoothly.call(_this, val, step); });
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @param {?} val
     * @param {?} step
     * @return {?}
     */
    BaseProgress.prototype.updateProgressSmoothly = /**
     * @hidden
     * @protected
     * @param {?} val
     * @param {?} step
     * @return {?}
     */
    function (val, step) {
        var _this = this;
        this._value += step;
        /** @type {?} */
        var passedValue = convertInPercentage(val, this._max);
        /** @type {?} */
        var progressValue = convertInPercentage(this._value, this._max);
        if (this.valueInPercent === passedValue) {
            this.updateProgress(val);
            cancelAnimationFrame(this.requestAnimationId);
        }
        else if (this.isInLimitRange(progressValue, passedValue, step)) {
            this.updateProgress(val);
            cancelAnimationFrame(this.requestAnimationId);
        }
        else {
            this.valueInPercent = progressValue;
            this.requestAnimationId = requestAnimationFrame(function () { return _this.updateProgressSmoothly.call(_this, val, step); });
        }
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @param {?} val
     * @return {?}
     */
    BaseProgress.prototype.updateProgressDirectly = /**
     * @hidden
     * @protected
     * @param {?} val
     * @return {?}
     */
    function (val) {
        this._value = val;
        this.valueInPercent = convertInPercentage(this._value, this._max);
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @param {?} currentValue
     * @param {?} prevValue
     * @param {?} step
     * @return {?}
     */
    BaseProgress.prototype.directionFlow = /**
     * @hidden
     * @protected
     * @param {?} currentValue
     * @param {?} prevValue
     * @param {?} step
     * @return {?}
     */
    function (currentValue, prevValue, step) {
        if (currentValue < prevValue) {
            return step;
        }
        return -step;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @private
     * @param {?} val
     * @param {?} comparator
     * @param {?} step
     * @return {?}
     */
    BaseProgress.prototype.isInLimitRange = /**
     * @hidden
     * @private
     * @param {?} val
     * @param {?} comparator
     * @param {?} step
     * @return {?}
     */
    function (val, comparator, step) {
        return this.isExceedingUpperLimit(val, comparator, step) || this.isExceedingLowerLimit(val, comparator, step);
    };
    /**
     * @hidden
     *
     *
     * @param val
     * @param comparator
     * @param step
     */
    /**
     * @hidden
     *
     *
     * @private
     * @param {?} val
     * @param {?} comparator
     * @param {?} step
     * @return {?}
     */
    BaseProgress.prototype.isExceedingUpperLimit = /**
     * @hidden
     *
     *
     * @private
     * @param {?} val
     * @param {?} comparator
     * @param {?} step
     * @return {?}
     */
    function (val, comparator, step) {
        return val > comparator && step > 0;
    };
    /**
     * @hidden
     *
     * @param val
     * @param comparator
     * @param step
     */
    /**
     * @hidden
     *
     * @private
     * @param {?} val
     * @param {?} comparator
     * @param {?} step
     * @return {?}
     */
    BaseProgress.prototype.isExceedingLowerLimit = /**
     * @hidden
     *
     * @private
     * @param {?} val
     * @param {?} comparator
     * @param {?} step
     * @return {?}
     */
    function (val, comparator, step) {
        return val < comparator && step < 0;
    };
    /**
     * @hidden
     * @param step
     */
    /**
     * @hidden
     * @private
     * @param {?} val
     * @return {?}
     */
    BaseProgress.prototype.updateProgress = /**
     * @hidden
     * @private
     * @param {?} val
     * @return {?}
     */
    function (val) {
        this._value = val;
        this.valueInPercent = convertInPercentage(this._value, this._max);
    };
    return BaseProgress;
}());
/**
 * @abstract
 */
export { BaseProgress };
if (false) {
    /**
     * @hidden
     * @type {?}
     * @private
     */
    BaseProgress.prototype.requestAnimationId;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    BaseProgress.prototype._valueInPercent;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    BaseProgress.prototype._max;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    BaseProgress.prototype._value;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    BaseProgress.prototype._animate;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    BaseProgress.prototype._step;
}
/** @type {?} */
var NEXT_LINEAR_ID = 0;
/** @type {?} */
var NEXT_CIRCULAR_ID = 0;
var IgxLinearProgressBarComponent = /** @class */ (function (_super) {
    tslib_1.__extends(IgxLinearProgressBarComponent, _super);
    function IgxLinearProgressBarComponent() {
        var _this = _super.call(this) || this;
        _this.valueMin = 0;
        _this.cssClass = 'igx-linear-bar';
        /**
         * Set `IgxLinearProgressBarComponent` to have striped style. By default it is set to false.
         * ```html
         * <igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
         * ```
         */
        _this.striped = false;
        /**
         * Set `IgxLinearProgressBarComponent` to have indeterminate. By default it is set to false.
         * ```html
         * <igx-linear-bar [indeterminate]="true"></igx-linear-bar>
         * ```
         */
        _this.indeterminate = false;
        /**
         * An \@Input property that sets the value of the `role` attribute. If not provided it will be automatically set to `progressbar`.
         * ```html
         * <igx-linear-bar role="progressbar"></igx-linear-bar>
         * ```
         */
        _this.role = 'progressbar';
        /**
         * An \@Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
         * ```
         */
        _this.id = "igx-linear-bar-" + NEXT_LINEAR_ID++;
        /**
         * Set the position that defines where the text is aligned.
         * Possible options - `IgxTextAlign.START` (default), `IgxTextAlign.CENTER`, `IgxTextAlign.END`.
         * ```typescript
         * public positionCenter: IgxTextAlign;
         * public ngOnInit() {
         *    this.positionCenter = IgxTextAlign.CENTER;
         * }
         * //...
         * ```
         * ```html
         * <igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
         * ```
         */
        _this.textAlign = IgxTextAlign.START;
        /**
         * Set the text to be visible. By default it is set to true.
         * ```html
         * <igx-linear-bar type="default" [textVisibility]="false"></igx-linear-bar>
         * ```
         */
        _this.textVisibility = true;
        /**
         * Set the position that defines if the text should be aligned above the progress line. By default is set to false.
         * ```html
         * <igx-linear-bar type="danger" [textTop]="true"></igx-linear-bar>
         * ```
         */
        _this.textTop = false;
        /**
         * Set type of the `IgxLinearProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `danger`.
         * ```html
         * <igx-linear-bar [striped]="false" [max]="100" [value]="0" type="danger"></igx-linear-bar>
         * ```
         */
        _this.type = 'default';
        /**
         * An event, which is triggered after a progress is changed.
         * ```typescript
         * public progressChange(event) {
         *    alert("Progress made!");
         * }
         * //...
         * ```
         * ```html
         * <igx-linear-bar (onProgressChanged)="progressChange($event)" type="success">
         * ```
         */
        _this.onProgressChanged = new EventEmitter();
        return _this;
    }
    Object.defineProperty(IgxLinearProgressBarComponent.prototype, "animate", {
        /**
         *Returns whether the `IgxLinearProgressBarComponent` has animation true/false.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxLinearProgressBarComponent;
         *public animationStatus(event) {
         *    let animationStatus = this.progressBar.animate;
         *    alert(animationStatus);
         *}
         *```
         */
        get: /**
         * Returns whether the `IgxLinearProgressBarComponent` has animation true/false.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxLinearProgressBarComponent;
         * public animationStatus(event) {
         *    let animationStatus = this.progressBar.animate;
         *    alert(animationStatus);
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._animate;
        },
        /**
         *Animation on progress `IgxLinearProgressBarComponent`. By default it is set to true.
         *```html
         *<igx-linear-bar [animate]="false" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
         *```
         */
        set: /**
         * Animation on progress `IgxLinearProgressBarComponent`. By default it is set to true.
         * ```html
         * <igx-linear-bar [animate]="false" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
         * ```
         * @param {?} animate
         * @return {?}
         */
        function (animate) {
            this._animate = animate;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLinearProgressBarComponent.prototype, "max", {
        /**
         *Returns the the maximum progress value of the `IgxLinearProgressBarComponent`.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxLinearProgressBarComponent;
         *public maxValue(event) {
         *    let max = this.progressBar.max;
         *    alert(max);
         *}
         *```
         */
        get: /**
         * Returns the the maximum progress value of the `IgxLinearProgressBarComponent`.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxLinearProgressBarComponent;
         * public maxValue(event) {
         *    let max = this.progressBar.max;
         *    alert(max);
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._max;
        },
        /**
         *Set maximum value that can be passed. By default it is set to 100.
         *```html
         *<igx-linear-bar [striped]="false" [max]="200" [value]="0"></igx-linear-bar>
         *```
         */
        set: /**
         * Set maximum value that can be passed. By default it is set to 100.
         * ```html
         * <igx-linear-bar [striped]="false" [max]="200" [value]="0"></igx-linear-bar>
         * ```
         * @param {?} maxNum
         * @return {?}
         */
        function (maxNum) {
            this._max = maxNum;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLinearProgressBarComponent.prototype, "step", {
        /**
         *Returns the value which update the progress indicator of the `IgxLinearProgressBarComponent`.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxLinearProgressBarComponent;
         *public stepValue(event) {
         *    let step = this.progressBar.step;
         *    alert(step);
         *}
         *```
         */
        get: /**
         * Returns the value which update the progress indicator of the `IgxLinearProgressBarComponent`.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxLinearProgressBarComponent;
         * public stepValue(event) {
         *    let step = this.progressBar.step;
         *    alert(step);
         * }
         * ```
         * @return {?}
         */
        function () {
            if (this._step) {
                return this._step;
            }
            return this._max * ONE_PERCENT;
        },
        /**
         *Sets the value by which progress indicator is updated. By default it is 1% of the maximum value.
         *```html
         *<igx-linear-bar [striped]="false" [max]="200" [value]="0" [step]="1"></igx-linear-bar>
         *```
         */
        set: /**
         * Sets the value by which progress indicator is updated. By default it is 1% of the maximum value.
         * ```html
         * <igx-linear-bar [striped]="false" [max]="200" [value]="0" [step]="1"></igx-linear-bar>
         * ```
         * @param {?} val
         * @return {?}
         */
        function (val) {
            this._step = Number(val);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLinearProgressBarComponent.prototype, "value", {
        /**
        *Returns value that indicates the current `IgxLinearProgressBarComponent` position.
        *```typescript
        *@ViewChild("MyProgressBar")
        *public progressBar: IgxLinearProgressBarComponent;
        *public getValue(event) {
        *    let value = this.progressBar.value;
        *    alert(value);
        *}
        *```
        */
        get: /**
         * Returns value that indicates the current `IgxLinearProgressBarComponent` position.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxLinearProgressBarComponent;
         * public getValue(event) {
         *    let value = this.progressBar.value;
         *    alert(value);
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._value;
        },
        /**
         *Set value that indicates the current `IgxLinearProgressBarComponent` position.
         *```html
         *<igx-linear-bar [striped]="false" [max]="200" [value]="50"></igx-linear-bar>
         *```
         */
        set: /**
         * Set value that indicates the current `IgxLinearProgressBarComponent` position.
         * ```html
         * <igx-linear-bar [striped]="false" [max]="200" [value]="50"></igx-linear-bar>
         * ```
         * @param {?} val
         * @return {?}
         */
        function (val) {
            val = Number(val);
            if (this._value === val || this.indeterminate) {
                return;
            }
            /** @type {?} */
            var valueInRange = getValueInProperRange(val, this.max);
            if (isNaN(valueInRange)) {
                return;
            }
            /** @type {?} */
            var changedValues = {
                currentValue: valueInRange,
                previousValue: this._value
            };
            /** @type {?} */
            var updateValue = _super.prototype.directionFlow.call(this, this._value, val, this.step);
            if (this._animate && val >= this.step) {
                _super.prototype.runAnimation.call(this, valueInRange, updateValue);
            }
            else {
                _super.prototype.updateProgressDirectly.call(this, valueInRange);
            }
            this.onProgressChanged.emit(changedValues);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLinearProgressBarComponent.prototype, "danger", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.type === IgxProgressType.DANGER;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLinearProgressBarComponent.prototype, "info", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.type === IgxProgressType.INFO;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLinearProgressBarComponent.prototype, "warning", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.type === IgxProgressType.WARNING;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLinearProgressBarComponent.prototype, "success", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.type === IgxProgressType.SUCCESS;
        },
        enumerable: true,
        configurable: true
    });
    IgxLinearProgressBarComponent.decorators = [
        { type: Component, args: [{
                    selector: 'igx-linear-bar',
                    template: "<div class=\"igx-linear-bar__base\">\n    <div class=\"igx-linear-bar__indicator\"\n    [style.width.%]=\"valueInPercent\"></div>\n</div>\n\n<span\n    class=\"igx-linear-bar__value\"\n    [ngClass]=\"{\n        'igx-linear-bar__value--start': textAlign === 'start',\n        'igx-linear-bar__value--center': textAlign === 'center',\n        'igx-linear-bar__value--end': textAlign === 'end',\n        'igx-linear-bar__value--top': textTop,\n        'igx-linear-bar__value--hidden': !textVisibility\n    }\">\n        {{text ? text : valueInPercent + '%'}}\n</span>\n"
                }] }
    ];
    /** @nocollapse */
    IgxLinearProgressBarComponent.ctorParameters = function () { return []; };
    IgxLinearProgressBarComponent.propDecorators = {
        animate: [{ type: Input }],
        max: [{ type: HostBinding, args: ['attr.aria-valuemax',] }, { type: Input }],
        step: [{ type: Input }],
        valueMin: [{ type: HostBinding, args: ['attr.aria-valuemin',] }],
        cssClass: [{ type: HostBinding, args: ['class.igx-linear-bar',] }],
        striped: [{ type: HostBinding, args: ['class.igx-linear-bar--striped',] }, { type: Input }],
        indeterminate: [{ type: HostBinding, args: ['class.igx-linear-bar--indeterminate',] }, { type: Input }],
        role: [{ type: HostBinding, args: ['attr.role',] }, { type: Input }],
        id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
        textAlign: [{ type: Input }],
        textVisibility: [{ type: Input }],
        textTop: [{ type: Input }],
        text: [{ type: Input }],
        type: [{ type: Input }],
        value: [{ type: HostBinding, args: ['attr.aria-valuenow',] }, { type: Input }],
        onProgressChanged: [{ type: Output }],
        danger: [{ type: HostBinding, args: ['class.igx-linear-bar--danger',] }],
        info: [{ type: HostBinding, args: ['class.igx-linear-bar--info',] }],
        warning: [{ type: HostBinding, args: ['class.igx-linear-bar--warning',] }],
        success: [{ type: HostBinding, args: ['class.igx-linear-bar--success',] }]
    };
    return IgxLinearProgressBarComponent;
}(BaseProgress));
export { IgxLinearProgressBarComponent };
if (false) {
    /** @type {?} */
    IgxLinearProgressBarComponent.prototype.valueMin;
    /** @type {?} */
    IgxLinearProgressBarComponent.prototype.cssClass;
    /**
     * Set `IgxLinearProgressBarComponent` to have striped style. By default it is set to false.
     * ```html
     * <igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.striped;
    /**
     * Set `IgxLinearProgressBarComponent` to have indeterminate. By default it is set to false.
     * ```html
     * <igx-linear-bar [indeterminate]="true"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.indeterminate;
    /**
     * An \@Input property that sets the value of the `role` attribute. If not provided it will be automatically set to `progressbar`.
     * ```html
     * <igx-linear-bar role="progressbar"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.role;
    /**
     * An \@Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
     * ```html
     * <igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.id;
    /**
     * Set the position that defines where the text is aligned.
     * Possible options - `IgxTextAlign.START` (default), `IgxTextAlign.CENTER`, `IgxTextAlign.END`.
     * ```typescript
     * public positionCenter: IgxTextAlign;
     * public ngOnInit() {
     *    this.positionCenter = IgxTextAlign.CENTER;
     * }
     * //...
     * ```
     * ```html
     * <igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.textAlign;
    /**
     * Set the text to be visible. By default it is set to true.
     * ```html
     * <igx-linear-bar type="default" [textVisibility]="false"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.textVisibility;
    /**
     * Set the position that defines if the text should be aligned above the progress line. By default is set to false.
     * ```html
     * <igx-linear-bar type="danger" [textTop]="true"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.textTop;
    /**
     * Set a custom text that is displayed according to the defined position.
     * ```html
     * <igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.text;
    /**
     * Set type of the `IgxLinearProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `danger`.
     * ```html
     * <igx-linear-bar [striped]="false" [max]="100" [value]="0" type="danger"></igx-linear-bar>
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.type;
    /**
     * An event, which is triggered after a progress is changed.
     * ```typescript
     * public progressChange(event) {
     *    alert("Progress made!");
     * }
     * //...
     * ```
     * ```html
     * <igx-linear-bar (onProgressChanged)="progressChange($event)" type="success">
     * ```
     * @type {?}
     */
    IgxLinearProgressBarComponent.prototype.onProgressChanged;
}
var IgxCircularProgressBarComponent = /** @class */ (function (_super) {
    tslib_1.__extends(IgxCircularProgressBarComponent, _super);
    function IgxCircularProgressBarComponent(renderer) {
        var _this = _super.call(this) || this;
        _this.renderer = renderer;
        _this.STROKE_OPACITY_DVIDER = 100;
        _this.STROKE_OPACITY_ADDITION = .2;
        /**
         * @hidden
         */
        _this.cssClass = 'igx-circular-bar';
        /**
         * An event, which is triggered after a progress is changed.
         * ```typescript
         * public progressChange(event) {
         *    alert("Progress made!");
         * }
         * //...
         * ```
         * ```html
         * <igx-circular-bar [value]="currentValue" (onProgressChanged)="progressChange($event)"></igx-circular-bar>
         * ```
         */
        _this.onProgressChanged = new EventEmitter();
        /**
         * An \@Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-circular-bar [id]="'igx-circular-bar-55'" [value]="50"></igx-circular-bar>
         * ```
         */
        _this.id = "igx-circular-bar-" + NEXT_CIRCULAR_ID++;
        /**
         * An \@Input property that sets the value of the `indeterminate` attribute. If not provided it will be automatically set to false.
         * ```html
         * <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
         * ```
         */
        _this.indeterminate = false;
        /**
         * Sets the text visibility. By default it is set to true.
         * ```html
         * <igx-circular-bar [textVisibility]="false"></igx-circular-bar>
         * ```
         */
        _this.textVisibility = true;
        _this._circleRadius = 46;
        _this._circumference = 2 * Math.PI * _this._circleRadius;
        return _this;
    }
    Object.defineProperty(IgxCircularProgressBarComponent.prototype, "context", {
        /**
         * @hidden
        */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return {
                $implicit: { value: this.value, valueInPercent: this.valueInPercent, max: this.max }
            };
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxCircularProgressBarComponent.prototype, "animate", {
        /**
         *Returns whether the `IgxCircularProgressBarComponent` has animation true/false.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxCircularProgressBarComponent;
         *public animationStatus(event) {
         *    let animationStatus = this.progressBar.animate;
         *    alert(animationStatus);
         *}
         *```
         */
        get: /**
         * Returns whether the `IgxCircularProgressBarComponent` has animation true/false.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxCircularProgressBarComponent;
         * public animationStatus(event) {
         *    let animationStatus = this.progressBar.animate;
         *    alert(animationStatus);
         * }
         * ```
         * @return {?}
         */
        function () {
            return this._animate;
        },
        /**
        *Animation on progress `IgxCircularProgressBarComponent`. By default it is set to true.
         *```html
         *<igx-circular-bar [animate]="false" [value]="50"></igx-circular-bar>
         *```
         */
        set: /**
         * Animation on progress `IgxCircularProgressBarComponent`. By default it is set to true.
         * ```html
         * <igx-circular-bar [animate]="false" [value]="50"></igx-circular-bar>
         * ```
         * @param {?} animate
         * @return {?}
         */
        function (animate) {
            this._animate = animate;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxCircularProgressBarComponent.prototype, "max", {
        /**
         *Returns the the maximum progress value of the `IgxCircularProgressBarComponent`.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxCircularProgressBarComponent;
         *public maxValue(event) {
         *    let max = this.progressBar.max;
         *    alert(max);
         *}
         *```
         *```html
         *<igx-circular-bar [max]="245" [animate]="false" [value]="currentValue"></igx-circular-bar>
         *```
         */
        get: /**
         * Returns the the maximum progress value of the `IgxCircularProgressBarComponent`.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxCircularProgressBarComponent;
         * public maxValue(event) {
         *    let max = this.progressBar.max;
         *    alert(max);
         * }
         * ```
         * ```html
         * <igx-circular-bar [max]="245" [animate]="false" [value]="currentValue"></igx-circular-bar>
         * ```
         * @return {?}
         */
        function () {
            return this._max;
        },
        /**
         *Set maximum value that can be passed. By default it is set to 100.
         *```html
         *<igx-circular-bar [max]="200" [value]="0"></igx-circular-bar>
         *```
         */
        set: /**
         * Set maximum value that can be passed. By default it is set to 100.
         * ```html
         * <igx-circular-bar [max]="200" [value]="0"></igx-circular-bar>
         * ```
         * @param {?} maxNum
         * @return {?}
         */
        function (maxNum) {
            this._max = maxNum;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxCircularProgressBarComponent.prototype, "step", {
        /**
         *Returns the value which update the progress indicator of the `IgxCircularProgressBarComponent`.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxCircularProgressBarComponent;
         *public stepValue(event) {
         *    let step = this.progressBar.step;
         *    alert(step);
         *}
         *```
         */
        get: /**
         * Returns the value which update the progress indicator of the `IgxCircularProgressBarComponent`.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxCircularProgressBarComponent;
         * public stepValue(event) {
         *    let step = this.progressBar.step;
         *    alert(step);
         * }
         * ```
         * @return {?}
         */
        function () {
            if (this._step) {
                return this._step;
            }
            return this._max * ONE_PERCENT;
        },
        /**
         *Sets the value by which progress indicator is updated. By default it is 1% of the maximum value.
         *```html
         *<igx-circular-bar [striped]="false" [max]="200" [value]="0" [step]="1"></igx-circular-bar>
         *```
        */
        set: /**
         * Sets the value by which progress indicator is updated. By default it is 1% of the maximum value.
         * ```html
         * <igx-circular-bar [striped]="false" [max]="200" [value]="0" [step]="1"></igx-circular-bar>
         * ```
         * @param {?} val
         * @return {?}
         */
        function (val) {
            this._step = Number(val);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxCircularProgressBarComponent.prototype, "value", {
        /**
         *Returns value that indicates the current `IgxCircularProgressBarComponent` position.
         *```typescript
         *@ViewChild("MyProgressBar")
         *public progressBar: IgxCircularProgressBarComponent;
         *public getValue(event) {
         *    let value = this.progressBar.value;
         *    alert(value);
         *}
         *```
         *```html
         *<button igxButton="fab" igxRipple="" (click)="getValue()">Click</button>
         *```
         */
        get: /**
         * Returns value that indicates the current `IgxCircularProgressBarComponent` position.
         * ```typescript
         * \@ViewChild("MyProgressBar")
         * public progressBar: IgxCircularProgressBarComponent;
         * public getValue(event) {
         *    let value = this.progressBar.value;
         *    alert(value);
         * }
         * ```
         * ```html
         * <button igxButton="fab" igxRipple="" (click)="getValue()">Click</button>
         * ```
         * @return {?}
         */
        function () {
            return this._value;
        },
        /**
         *Set value that indicates the current `IgxCircularProgressBarComponent` position.
         *```html
         *<igx-circular-bar [value]="50"></igx-circular-bar>
         *```
         */
        set: /**
         * Set value that indicates the current `IgxCircularProgressBarComponent` position.
         * ```html
         * <igx-circular-bar [value]="50"></igx-circular-bar>
         * ```
         * @param {?} val
         * @return {?}
         */
        function (val) {
            val = Number(val);
            if (this._value === val || this.indeterminate) {
                return;
            }
            /** @type {?} */
            var valueInProperRange = getValueInProperRange(val, this.max);
            if (isNaN(valueInProperRange)) {
                return;
            }
            /** @type {?} */
            var changedValues = {
                currentValue: valueInProperRange,
                previousValue: this._value
            };
            /** @type {?} */
            var updateValue = _super.prototype.directionFlow.call(this, this._value, val, this.step);
            if (this.animate && val >= this.step) {
                _super.prototype.runAnimation.call(this, valueInProperRange, updateValue);
            }
            else {
                this.updateProgressDirectly(valueInProperRange);
            }
            this.onProgressChanged.emit(changedValues);
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} val
     * @param {?} step
     * @return {?}
     */
    IgxCircularProgressBarComponent.prototype.updateProgressSmoothly = /**
     * @hidden
     * @param {?} val
     * @param {?} step
     * @return {?}
     */
    function (val, step) {
        // Set frames for the animation
        /** @type {?} */
        var FRAMES = [{
                strokeDashoffset: this.getProgress(this._value),
                strokeOpacity: (this._value / this.STROKE_OPACITY_DVIDER) + this.STROKE_OPACITY_ADDITION
            }, {
                strokeDashoffset: this.getProgress(this.valueInPercent),
                strokeOpacity: (this.valueInPercent / this.STROKE_OPACITY_DVIDER) + this.STROKE_OPACITY_ADDITION
            }];
        this._svgCircle.nativeElement.animate(FRAMES, {
            easing: 'ease-out',
            fill: 'forwards'
        });
        _super.prototype.updateProgressSmoothly.call(this, val, step);
    };
    Object.defineProperty(IgxCircularProgressBarComponent.prototype, "textContent", {
        /**
         * @hidden
        */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.text;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
    */
    /**
     * @hidden
     * @param {?} val
     * @return {?}
     */
    IgxCircularProgressBarComponent.prototype.updateProgressDirectly = /**
     * @hidden
     * @param {?} val
     * @return {?}
     */
    function (val) {
        _super.prototype.updateProgressDirectly.call(this, val);
        this.renderer.setStyle(this._svgCircle.nativeElement, 'stroke-dashoffset', this.getProgress(this.valueInPercent));
        this.renderer.setStyle(this._svgCircle.nativeElement, 'stroke-opacity', (this.valueInPercent / this.STROKE_OPACITY_DVIDER) + this.STROKE_OPACITY_ADDITION);
    };
    /**
     * @private
     * @param {?} percentage
     * @return {?}
     */
    IgxCircularProgressBarComponent.prototype.getProgress = /**
     * @private
     * @param {?} percentage
     * @return {?}
     */
    function (percentage) {
        return this._circumference - (percentage * this._circumference / 100);
    };
    IgxCircularProgressBarComponent.decorators = [
        { type: Component, args: [{
                    selector: 'igx-circular-bar',
                    template: "<svg #svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\"\n    viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    [attr.aria-valuemax]=\"max\"\n    [attr.aria-valuenow]=\"value\">\n    <circle class=\"igx-circular-bar__inner\" cx=\"50\" cy=\"50\" r=\"46\" />\n    <circle #circle class=\"igx-circular-bar__outer\" cx=\"50\" cy=\"50\" r=\"46\" />\n    <text [class.igx-circular-bar__text--hidden]=\"!textVisibility\" text-anchor=\"middle\" x=\"50\" y=\"60\">\n        <ng-container *ngTemplateOutlet=\"textTemplate ? textTemplate.template : defaultTextTemplate; context: context\">\n        </ng-container>\n    </text>\n\n    <ng-template #defaultTextTemplate>\n        <tspan class=\"igx-circular-bar__text\"> {{textContent ? textContent: valueInPercent + '%'}}</tspan>\n    </ng-template>\n</svg>\n"
                }] }
    ];
    /** @nocollapse */
    IgxCircularProgressBarComponent.ctorParameters = function () { return [
        { type: Renderer2 }
    ]; };
    IgxCircularProgressBarComponent.propDecorators = {
        cssClass: [{ type: HostBinding, args: ['class.igx-circular-bar',] }],
        onProgressChanged: [{ type: Output }],
        id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
        indeterminate: [{ type: HostBinding, args: ['class.igx-circular-bar--indeterminate',] }, { type: Input }],
        textVisibility: [{ type: Input }],
        text: [{ type: Input }],
        textTemplate: [{ type: ContentChild, args: [IgxProcessBarTextTemplateDirective, { read: IgxProcessBarTextTemplateDirective },] }],
        animate: [{ type: Input }],
        max: [{ type: Input }],
        step: [{ type: Input }],
        value: [{ type: Input }],
        _svgCircle: [{ type: ViewChild, args: ['circle',] }]
    };
    return IgxCircularProgressBarComponent;
}(BaseProgress));
export { IgxCircularProgressBarComponent };
if (false) {
    /**
     * @type {?}
     * @private
     */
    IgxCircularProgressBarComponent.prototype.STROKE_OPACITY_DVIDER;
    /**
     * @type {?}
     * @private
     */
    IgxCircularProgressBarComponent.prototype.STROKE_OPACITY_ADDITION;
    /**
     * @hidden
     * @type {?}
     */
    IgxCircularProgressBarComponent.prototype.cssClass;
    /**
     * An event, which is triggered after a progress is changed.
     * ```typescript
     * public progressChange(event) {
     *    alert("Progress made!");
     * }
     * //...
     * ```
     * ```html
     * <igx-circular-bar [value]="currentValue" (onProgressChanged)="progressChange($event)"></igx-circular-bar>
     * ```
     * @type {?}
     */
    IgxCircularProgressBarComponent.prototype.onProgressChanged;
    /**
     * An \@Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
     * ```html
     * <igx-circular-bar [id]="'igx-circular-bar-55'" [value]="50"></igx-circular-bar>
     * ```
     * @type {?}
     */
    IgxCircularProgressBarComponent.prototype.id;
    /**
     * An \@Input property that sets the value of the `indeterminate` attribute. If not provided it will be automatically set to false.
     * ```html
     * <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
     * ```
     * @type {?}
     */
    IgxCircularProgressBarComponent.prototype.indeterminate;
    /**
     * Sets the text visibility. By default it is set to true.
     * ```html
     * <igx-circular-bar [textVisibility]="false"></igx-circular-bar>
     * ```
     * @type {?}
     */
    IgxCircularProgressBarComponent.prototype.textVisibility;
    /**
     * Sets/gets the text to be displayed inside the `igxCircularBar`.
     * ```html
     * <igx-circular-bar text="Progress"></igx-circular-bar>
     * ```
     * ```typescript
     * let text = this.circularBar.text;
     * ```
     * @type {?}
     */
    IgxCircularProgressBarComponent.prototype.text;
    /** @type {?} */
    IgxCircularProgressBarComponent.prototype.textTemplate;
    /**
     * @type {?}
     * @private
     */
    IgxCircularProgressBarComponent.prototype._circleRadius;
    /**
     * @type {?}
     * @private
     */
    IgxCircularProgressBarComponent.prototype._circumference;
    /**
     * @type {?}
     * @private
     */
    IgxCircularProgressBarComponent.prototype._svgCircle;
    /**
     * @type {?}
     * @private
     */
    IgxCircularProgressBarComponent.prototype.renderer;
}
/**
 * @param {?} value
 * @param {?} max
 * @param {?=} min
 * @return {?}
 */
export function getValueInProperRange(value, max, min) {
    if (min === void 0) { min = 0; }
    return Math.max(Math.min(value, max), min);
}
/**
 * @param {?} value
 * @param {?} max
 * @return {?}
 */
export function convertInPercentage(value, max) {
    return Math.floor(100 * value / max);
}
/**
 * @hidden
 */
var IgxProgressBarModule = /** @class */ (function () {
    function IgxProgressBarModule() {
    }
    IgxProgressBarModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent, IgxProcessBarTextTemplateDirective],
                    exports: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent, IgxProcessBarTextTemplateDirective],
                    imports: [CommonModule]
                },] }
    ];
    return IgxProgressBarModule;
}());
export { IgxProgressBarModule };
//# sourceMappingURL=data:application/json;base64, 