import { __decorate } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, NgZone, OnDestroy, OnInit, 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 = 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 = 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(function () { return _this._changeDetection.detectChanges(); });
        };
        this.setTimeout = 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: function () {
            return "bb-notifications-item " + this.notification.type;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BbNotificationsItem.prototype, "progressStrokeArray", {
        get: function () {
            var value = Math.floor(this._circumference);
            return value + ", " + value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BbNotificationsItem.prototype, "progressStrokeOffset", {
        get: function () {
            return Math.floor(this._circumference - this._progress / 100 * this._circumference);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(BbNotificationsItem.prototype, "isContentString", {
        get: function () {
            return typeof this.notification.content === 'string';
        },
        enumerable: true,
        configurable: true
    });
    BbNotificationsItem.prototype.ngOnInit = 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();
    };
    BbNotificationsItem.prototype.ngOnDestroy = function () {
        // Clear the timeout if it was set.
        this._timer && window && window.clearTimeout && window.clearTimeout(this._timer);
    };
    BbNotificationsItem.prototype.startTimeout = 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(function () { return _this._timer = _this.setTimeout(_this.instance, _this._speed); });
    };
    BbNotificationsItem.ctorParameters = function () { return [
        { type: NgZone },
        { type: Platform },
        { type: ChangeDetectorRef }
    ]; };
    __decorate([
        Input()
    ], BbNotificationsItem.prototype, "notification", void 0);
    __decorate([
        Input()
    ], BbNotificationsItem.prototype, "dismissButtonText", void 0);
    __decorate([
        ViewChild('progress')
    ], BbNotificationsItem.prototype, "progressElementRef", void 0);
    __decorate([
        HostBinding('class')
    ], BbNotificationsItem.prototype, "getClass", null);
    BbNotificationsItem = __decorate([
        Component({
            selector: 'bb-notifications-item',
            template: "<div class=\"notification-content-wrapper\">\n    <!--\n        The icon for the notification.\n\n        The icon is reflected by the type of the\n        notification. Same goes for the color and\n        background-color.\n    -->\n    <div [style.color]=\"notification?.color\"\n         [style.background-color]=\"notification?.backgroundColor\"\n         class=\"notification-icon-wrapper\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 16 19.5\"\n             class=\"notification-icon\">\n            <path\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\">\n            </path>\n        </svg>\n\n        <!--\n            The circular progress for the notification.\n\n            The progress is only visible when a timeout is\n            set. The progress adapts to the time remaining\n            for the notification.\n        -->\n        <svg *ngIf=\"notification?.timeout > 0\"\n             class=\"notification-progress-ring\"\n             viewBox=\"0 0 40 40\"\n             role=\"progressbar\">\n            <circle #progress\n                    [attr.stroke-dasharray]=\"progressStrokeArray\"\n                    [attr.stroke-dashoffset]=\"progressStrokeOffset\"\n                    [style.stroke]=\"notification?.color\"\n                    class=\"notification-progress-circle\"\n                    stroke-width=\"2\"\n                    fill=\"transparent\"\n                    r=\"19\"\n                    cx=\"20\"\n                    cy=\"20\">\n            </circle>\n        </svg>\n    </div>\n\n    <!--\n        The content for the notification.\n\n        This displays a string or a template based\n        on the given parameter by the user.\n    -->\n    <div class=\"notification-content\">\n        <ng-container *ngIf=\"isContentString; else templateContent\"\n                      [ngSwitch]=\"notification?.localize\">\n            <ng-container *ngSwitchCase=\"true\">\n                {{ notification?.content | bbLocalize:{data: notification?.data} }}\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                {{ notification?.content }}\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<!--\n    The actions of the notification.\n\n    All actions are displayed here and are\n    based on the actions array the user provided.\n-->\n<div *ngIf=\"notification?.actions?.length > 0 || notification?.dismiss\"\n     class=\"notification-actions\">\n    <button *ngFor=\"let action of notification?.actions\"\n            (click)=\"callActionAndDestroy(notification, action)\"\n            type=\"button\"\n            [class.destructive]=\"action?.type === 'cancel'\"\n            class=\"notification-actions-button\">\n        <span [ngSwitch]=\"notification?.localize\"\n              class=\"notification-actions-button-highlight\">\n            <ng-container *ngSwitchCase=\"true\">\n                {{ action?.title | bbLocalize:{data: notification?.data} }}\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                {{ action?.title }}\n            </ng-container>\n        </span>\n    </button>\n    <button *ngIf=\"notification?.dismiss\"\n            (click)=\"notification?.destroy()\"\n            class=\"notification-actions-button destructive\"\n            type=\"button\">\n        <span class=\"notification-actions-button-highlight\">\n            {{ notification?.dismissText || dismissButtonText }}\n        </span>\n    </button>\n</div>\n\n<!--\n    The outlet for the notification content template ref.\n-->\n<ng-template #templateContent>\n    <ng-container *ngTemplateOutlet=\"notification?.content\"></ng-container>\n</ng-template>\n",
            changeDetection: ChangeDetectionStrategy.OnPush,
            encapsulation: ViewEncapsulation.None,
            preserveWhitespaces: false,
            host: {
                'role': 'alert'
            },
            styles: [".bb-notifications-item{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:4px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.notification-icon-wrapper{width:40px;height:40px;display:-webkit-box;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%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack: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{-webkit-box-flex:1;-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:-webkit-box;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{-webkit-box-flex:1;-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:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-transition:background-color 150ms cubic-bezier(0,0,.2,1);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{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;stroke:#657385}"]
        })
    ], BbNotificationsItem);
    return BbNotificationsItem;
}());
export { BbNotificationsItem };
//# sourceMappingURL=data:application/json;base64, 