/**
 * @fileoverview added by tsickle
 * Generated from: lib/notifications-item/notifications-item.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, NgZone, ViewChild, ViewEncapsulation } from '@angular/core';
import { Platform } from '@bravobit/bb-foundation';
var BbNotificationsItem = /** @class */ (function () {
    function BbNotificationsItem(_zone, _platform, _changeDetection) {
        var _this = this;
        this._zone = _zone;
        this._platform = _platform;
        this._changeDetection = _changeDetection;
        // Data.
        this._progress = 0;
        this._count = 0;
        // Data.
        this._radius = 19;
        this._circumference = this._radius * 2 * Math.PI;
        this.callActionAndDestroy = (/**
         * @param {?} notification
         * @param {?} action
         * @return {?}
         */
        function (notification, action) {
            // Perform the callback (if it exists).
            action && action.callback && action.callback();
            // Call the destroy method (if it exists).
            notification && notification.destroy && notification.destroy();
        });
        this.instance = (/**
         * @return {?}
         */
        function () {
            // Calculate the difference.
            _this._difference = (new Date().getTime() - _this._startTime) - (_this._count * _this._speed);
            // Add up the count.
            if (_this._count++ === _this._steps) {
                _this.notification.destroy();
            }
            // Add the steps to the progress.
            _this._progress += 100 / _this._steps;
            // Set a new timer.
            _this._timer = _this.setTimeout(_this.instance, _this._speed - _this._difference);
            // Run a new change detection cycle.
            _this._zone.run((/**
             * @return {?}
             */
            function () { return _this._changeDetection.detectChanges(); }));
        });
        this.setTimeout = (/**
         * @param {?} method
         * @param {?} timeout
         * @return {?}
         */
        function (method, timeout) {
            // Check if the window and method exist.
            if (!window || !window.setTimeout) {
                return null;
            }
            return window.setTimeout(method, timeout);
        });
    }
    Object.defineProperty(BbNotificationsItem.prototype, "getClass", {
        get: /**
         * @return {?}
         */
        function () {
            return "bb-notifications-item " + this.notification.type;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BbNotificationsItem.prototype, "progressStrokeArray", {
        get: /**
         * @return {?}
         */
        function () {
            /** @type {?} */
            var value = Math.floor(this._circumference);
            return value + ", " + value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BbNotificationsItem.prototype, "progressStrokeOffset", {
        get: /**
         * @return {?}
         */
        function () {
            return Math.floor(this._circumference - this._progress / 100 * this._circumference);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BbNotificationsItem.prototype, "isContentString", {
        get: /**
         * @return {?}
         */
        function () {
            return typeof this.notification.content === 'string';
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @return {?}
     */
    BbNotificationsItem.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        // Check if the notification timeout is not 0 and the platform is a browser.
        if (this.notification.timeout <= 0 || !this._platform.isBrowser) {
            this.notification.dismiss = true;
            return;
        }
        // Start the timeout.
        this.startTimeout();
    };
    /**
     * @return {?}
     */
    BbNotificationsItem.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        // Clear the timeout if it was set.
        this._timer && window && window.clearTimeout && window.clearTimeout(this._timer);
    };
    /**
     * @private
     * @return {?}
     */
    BbNotificationsItem.prototype.startTimeout = /**
     * @private
     * @return {?}
     */
    function () {
        var _this = this;
        // Calculate the steps of the timeout.
        this._steps = this.notification.timeout / 10;
        // Calculate the speed of the timeout.
        this._speed = this.notification.timeout / this._steps;
        // Get the start time.
        this._startTime = new Date().getTime();
        // Set a new timer outside of Angular.
        this._zone.runOutsideAngular((/**
         * @return {?}
         */
        function () { return _this._timer = _this.setTimeout(_this.instance, _this._speed); }));
    };
    BbNotificationsItem.decorators = [
        { type: Component, args: [{
                    selector: 'bb-notifications-item',
                    template: "<div class=\"notification-content-wrapper\">\r\n    <!--\r\n        The icon for the notification.\r\n\r\n        The icon is reflected by the type of the\r\n        notification. Same goes for the color and\r\n        background-color.\r\n    -->\r\n    <div [style.color]=\"notification?.color\"\r\n         [style.background-color]=\"notification?.backgroundColor\"\r\n         class=\"notification-icon-wrapper\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n             viewBox=\"0 0 16 19.5\"\r\n             class=\"notification-icon\">\r\n            <path\r\n                d=\"M8 19.5c1.1 0 2-.9 2-2H6c0 1.1.9 2 2 2zM14 13.5v-5c0-3.1-1.6-5.6-4.5-6.3v-.7C9.5.7 8.8 0 8 0S6.5.7 6.5 1.5v.7C3.6 2.9 2 5.4 2 8.5v5l-2 2v1h16v-1l-2-2z\">\r\n            </path>\r\n        </svg>\r\n\r\n        <!--\r\n            The circular progress for the notification.\r\n\r\n            The progress is only visible when a timeout is\r\n            set. The progress adapts to the time remaining\r\n            for the notification.\r\n        -->\r\n        <svg *ngIf=\"notification?.timeout > 0\"\r\n             class=\"notification-progress-ring\"\r\n             viewBox=\"0 0 40 40\"\r\n             role=\"progressbar\">\r\n            <circle #progress\r\n                    [attr.stroke-dasharray]=\"progressStrokeArray\"\r\n                    [attr.stroke-dashoffset]=\"progressStrokeOffset\"\r\n                    [style.stroke]=\"notification?.color\"\r\n                    class=\"notification-progress-circle\"\r\n                    stroke-width=\"2\"\r\n                    fill=\"transparent\"\r\n                    r=\"19\"\r\n                    cx=\"20\"\r\n                    cy=\"20\">\r\n            </circle>\r\n        </svg>\r\n    </div>\r\n\r\n    <!--\r\n        The content for the notification.\r\n\r\n        This displays a string or a template based\r\n        on the given parameter by the user.\r\n    -->\r\n    <div class=\"notification-content\">\r\n        <ng-container *ngIf=\"isContentString; else templateContent\"\r\n                      [ngSwitch]=\"notification?.localize\">\r\n            <ng-container *ngSwitchCase=\"true\">\r\n                {{ notification?.content | bbLocalize:{data: notification?.data} }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{ notification?.content }}\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<!--\r\n    The actions of the notification.\r\n\r\n    All actions are displayed here and are\r\n    based on the actions array the user provided.\r\n-->\r\n<div *ngIf=\"notification?.actions?.length > 0 || notification?.dismiss\"\r\n     class=\"notification-actions\">\r\n    <button *ngFor=\"let action of notification?.actions\"\r\n            (click)=\"callActionAndDestroy(notification, action)\"\r\n            type=\"button\"\r\n            [class.destructive]=\"action?.type === 'cancel'\"\r\n            class=\"notification-actions-button\">\r\n        <span [ngSwitch]=\"notification?.localize\"\r\n              class=\"notification-actions-button-highlight\">\r\n            <ng-container *ngSwitchCase=\"true\">\r\n                {{ action?.title | bbLocalize:{data: notification?.data} }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{ action?.title }}\r\n            </ng-container>\r\n        </span>\r\n    </button>\r\n    <button *ngIf=\"notification?.dismiss\"\r\n            (click)=\"notification?.destroy()\"\r\n            class=\"notification-actions-button destructive\"\r\n            type=\"button\">\r\n        <span class=\"notification-actions-button-highlight\">\r\n            {{ notification?.dismissText || dismissButtonText }}\r\n        </span>\r\n    </button>\r\n</div>\r\n\r\n<!--\r\n    The outlet for the notification content template ref.\r\n-->\r\n<ng-template #templateContent>\r\n    <ng-container *ngTemplateOutlet=\"notification?.content\"></ng-container>\r\n</ng-template>\r\n",
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    preserveWhitespaces: false,
                    host: {
                        'role': 'alert'
                    },
                    styles: [".bb-notifications-item{display:-ms-flexbox;display:flex;border-radius:4px;-ms-flex-direction:column;flex-direction:column;background-color:#fff;border:1px solid #d6dbe0}.bb-notifications-item.success .notification-icon-wrapper{color:#2dc05d;background-color:#ebfaf0}.bb-notifications-item.success .notification-progress-circle{stroke:#36d068}.bb-notifications-item.error .notification-icon-wrapper{color:#f43e3e;background-color:#feeeee}.bb-notifications-item.error .notification-progress-circle{stroke:#f55656}.bb-notifications-item.warning .notification-icon-wrapper{color:#f1ae00;background-color:#fff8e7}.bb-notifications-item.warning .notification-progress-circle{stroke:#ffbc0b}.bb-notifications-item.info .notification-icon-wrapper{color:#099bf6;background-color:#e9f6fe}.bb-notifications-item.info .notification-progress-circle{stroke:#22a5f7}.bb-notifications-item.custom .notification-icon-wrapper{color:#657385;background-color:#f3f5f6}.bb-notifications-item.custom .notification-progress-circle{stroke:#657385}.notification-content-wrapper{padding:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.notification-icon-wrapper{width:40px;height:40px;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border-radius:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#657385;background-color:#f3f5f6}.notification-icon{width:100%;height:100%;padding:10px;fill:currentColor}.notification-content{-ms-flex:1;flex:1;font-size:14px;line-height:1.5;font-weight:500;margin-left:20px;color:rgba(0,0,0,.85)}.notification-content i{font-style:italic}.notification-actions-button,.notification-content{font-family:inherit}.notification-actions{display:-ms-flexbox;display:flex;margin:0 20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-top:1px solid #f3f5f6}.notification-actions-button{-ms-flex:1;flex:1;border:none;color:#22a5f7;cursor:pointer;font-size:14px;font-weight:500;padding:12px 2px;text-align:center;background-color:transparent}.notification-actions-button:focus>.notification-actions-button-highlight,.notification-actions-button:hover>.notification-actions-button-highlight{background-color:rgba(34,165,247,.1)}.notification-actions-button:active>.notification-actions-button-highlight{background-color:rgba(34,165,247,.2)}.notification-actions-button.destructive{color:#f55656}.notification-actions-button.destructive:focus>.notification-actions-button-highlight,.notification-actions-button.destructive:hover>.notification-actions-button-highlight{background-color:rgba(245,86,86,.1)}.notification-actions-button.destructive:active>.notification-actions-button-highlight{background-color:rgba(245,86,86,.2)}.notification-actions-button-highlight{padding:4px 12px;border-radius:12px;display:-ms-inline-flexbox;display:inline-flex;transition:background-color 150ms cubic-bezier(0,0,.2,1)}.notification-progress-ring{top:0;left:0;right:0;bottom:0;width:100%;height:100%;position:absolute}.notification-progress-circle{-ms-transform:rotate(-90deg);transform:rotate(-90deg);-ms-transform-origin:50% 50%;transform-origin:50% 50%;stroke:#657385}"]
                }] }
    ];
    /** @nocollapse */
    BbNotificationsItem.ctorParameters = function () { return [
        { type: NgZone },
        { type: Platform },
        { type: ChangeDetectorRef }
    ]; };
    BbNotificationsItem.propDecorators = {
        notification: [{ type: Input }],
        dismissButtonText: [{ type: Input }],
        progressElementRef: [{ type: ViewChild, args: ['progress', { static: false },] }],
        getClass: [{ type: HostBinding, args: ['class',] }]
    };
    return BbNotificationsItem;
}());
export { BbNotificationsItem };
if (false) {
    /** @type {?} */
    BbNotificationsItem.prototype.notification;
    /** @type {?} */
    BbNotificationsItem.prototype.dismissButtonText;
    /** @type {?} */
    BbNotificationsItem.prototype.progressElementRef;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._progress;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._count;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._steps;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._speed;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._timer;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._startTime;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._difference;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._radius;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._circumference;
    /** @type {?} */
    BbNotificationsItem.prototype.callActionAndDestroy;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype.instance;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype.setTimeout;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._zone;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._platform;
    /**
     * @type {?}
     * @private
     */
    BbNotificationsItem.prototype._changeDetection;
}
//# sourceMappingURL=data:application/json;base64, 