[{"__symbolic":"module","version":3,"metadata":{"NotificationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"simple-notification","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["enterLeave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["fromRight",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => fromRight",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"translateX(5%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["fromRightOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"translateX(-5%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["fromRight => fromRightOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"translateX(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["fromLeft",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => fromLeft",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"translateX(-5%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["fromLeftOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"translateX(5%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["fromLeft => fromLeftOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"translateX(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["scale",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"scale(1)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => scale",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"scale(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["scaleOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"scale(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["scale => scaleOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"scale(1)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["rotate",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"rotate(0deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => rotate",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"rotate(5deg)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["rotateOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"rotate(-5deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["rotate => rotateOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"rotate(0deg)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]}]]}],"template":"\n        <div class=\"simple-notification\"\n            [@enterLeave]=\"item.state\"\n            (click)=\"onClick($event)\"\n            [class]=\"theClass\"\n\n            [ngClass]=\"{\n                'alert': item.type === 'alert',\n                'error': item.type === 'error',\n                'success': item.type === 'success',\n                'info': item.type === 'info',\n                'bare': item.type === 'bare',\n                'rtl-mode': rtl\n            }\"\n\n            (mouseenter)=\"onEnter()\"\n            (mouseleave)=\"onLeave()\">\n\n            <div *ngIf=\"!item.html\">\n                <div class=\"sn-title\">{{item.title}}</div>\n                <div class=\"sn-content\">{{item.content | max:maxLength}}</div>\n\n                <div *ngIf=\"item.type !== 'bare'\" [innerHTML]=\"safeSvg\"></div>\n            </div>\n            <div *ngIf=\"item.html\" [innerHTML]=\"item.html\"></div>\n\n            <div class=\"sn-progress-loader\" *ngIf=\"showProgressBar\">\n                <span [ngStyle]=\"{'width': progressWidth + '%'}\"></span>\n            </div>\n\n        </div>\n    ","styles":["\n        .simple-notification {\n            width: 100%;\n            padding: 10px 20px;\n            box-sizing: border-box;\n            position: relative;\n            float: left;\n            margin-bottom: 10px;\n            color: #fff;\n            cursor: pointer;\n            transition: all 0.5s;\n        }\n\n        .simple-notification .sn-title {\n            margin: 0;\n            padding: 0 50px 0 0;\n            line-height: 30px;\n            font-size: 20px;\n        }\n\n        .simple-notification .sn-content {\n            margin: 0;\n            font-size: 16px;\n            padding: 0 50px 0 0;\n            line-height: 20px;\n        }\n\n        .simple-notification svg {\n            position: absolute;\n            box-sizing: border-box;\n            top: 0;\n            right: 0;\n            width: 70px;\n            height: 70px;\n            padding: 10px;\n            fill: #fff;\n        }\n\n        .simple-notification.rtl-mode {\n            direction: rtl;\n        }\n\n        .simple-notification.rtl-mode .sn-content {\n            padding: 0 0 0 50px;\n        }\n\n        .simple-notification.rtl-mode svg {\n            left: 0;\n            right: auto;\n        }\n\n        .simple-notification.error { background: #F44336; }\n        .simple-notification.success { background: #8BC34A; }\n        .simple-notification.alert { background: #ffdb5b; }\n        .simple-notification.info { background: #03A9F4; }\n\n        .simple-notification .sn-progress-loader {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 5px;\n        }\n\n        .simple-notification .sn-progress-loader span {\n            float: left;\n            height: 100%;\n        }\n\n        .simple-notification.success .sn-progress-loader span { background: #689F38; }\n        .simple-notification.error .sn-progress-loader span { background: #D32F2F; }\n        .simple-notification.alert .sn-progress-loader span { background: #edc242; }\n        .simple-notification.info .sn-progress-loader span { background: #0288D1; }\n        .simple-notification.bare .sn-progress-loader span { background: #ccc; }\n    "]}]}],"members":{"timeOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showProgressBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pauseOnHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickToClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rtl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./notifications.service","name":"NotificationsService"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngOnInit":[{"__symbolic":"method"}],"startTimeOut":[{"__symbolic":"method"}],"onEnter":[{"__symbolic":"method"}],"onLeave":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"attachOverrides":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NotificationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"simple-notification","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["enterLeave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["fromRight",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => fromRight",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"translateX(5%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["fromRightOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"translateX(-5%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["fromRight => fromRightOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"translateX(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["fromLeft",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => fromLeft",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"translateX(-5%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["fromLeftOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"translateX(5%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["fromLeft => fromLeftOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"translateX(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["scale",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"scale(1)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => scale",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"scale(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["scaleOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"scale(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["scale => scaleOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"scale(1)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["rotate",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"rotate(0deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => rotate",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"rotate(5deg)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["rotateOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"transform":"rotate(-5deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["rotate => rotateOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"transform":"rotate(0deg)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in-out"]}]]}]]}],"template":"\n        <div class=\"simple-notification\"\n            [@enterLeave]=\"item.state\"\n            (click)=\"onClick($event)\"\n            [class]=\"theClass\"\n\n            [ngClass]=\"{\n                'alert': item.type === 'alert',\n                'error': item.type === 'error',\n                'success': item.type === 'success',\n                'info': item.type === 'info',\n                'bare': item.type === 'bare',\n                'rtl-mode': rtl\n            }\"\n\n            (mouseenter)=\"onEnter()\"\n            (mouseleave)=\"onLeave()\">\n\n            <div *ngIf=\"!item.html\">\n                <div class=\"sn-title\">{{item.title}}</div>\n                <div class=\"sn-content\">{{item.content | max:maxLength}}</div>\n\n                <div *ngIf=\"item.type !== 'bare'\" [innerHTML]=\"safeSvg\"></div>\n            </div>\n            <div *ngIf=\"item.html\" [innerHTML]=\"item.html\"></div>\n\n            <div class=\"sn-progress-loader\" *ngIf=\"showProgressBar\">\n                <span [ngStyle]=\"{'width': progressWidth + '%'}\"></span>\n            </div>\n\n        </div>\n    ","styles":["\n        .simple-notification {\n            width: 100%;\n            padding: 10px 20px;\n            box-sizing: border-box;\n            position: relative;\n            float: left;\n            margin-bottom: 10px;\n            color: #fff;\n            cursor: pointer;\n            transition: all 0.5s;\n        }\n\n        .simple-notification .sn-title {\n            margin: 0;\n            padding: 0 50px 0 0;\n            line-height: 30px;\n            font-size: 20px;\n        }\n\n        .simple-notification .sn-content {\n            margin: 0;\n            font-size: 16px;\n            padding: 0 50px 0 0;\n            line-height: 20px;\n        }\n\n        .simple-notification svg {\n            position: absolute;\n            box-sizing: border-box;\n            top: 0;\n            right: 0;\n            width: 70px;\n            height: 70px;\n            padding: 10px;\n            fill: #fff;\n        }\n\n        .simple-notification.rtl-mode {\n            direction: rtl;\n        }\n\n        .simple-notification.rtl-mode .sn-content {\n            padding: 0 0 0 50px;\n        }\n\n        .simple-notification.rtl-mode svg {\n            left: 0;\n            right: auto;\n        }\n\n        .simple-notification.error { background: #F44336; }\n        .simple-notification.success { background: #8BC34A; }\n        .simple-notification.alert { background: #ffdb5b; }\n        .simple-notification.info { background: #03A9F4; }\n\n        .simple-notification .sn-progress-loader {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 5px;\n        }\n\n        .simple-notification .sn-progress-loader span {\n            float: left;\n            height: 100%;\n        }\n\n        .simple-notification.success .sn-progress-loader span { background: #689F38; }\n        .simple-notification.error .sn-progress-loader span { background: #D32F2F; }\n        .simple-notification.alert .sn-progress-loader span { background: #edc242; }\n        .simple-notification.info .sn-progress-loader span { background: #0288D1; }\n        .simple-notification.bare .sn-progress-loader span { background: #ccc; }\n    "]}]}],"members":{"timeOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showProgressBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pauseOnHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickToClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rtl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./notifications.service","name":"NotificationsService"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngOnInit":[{"__symbolic":"method"}],"startTimeOut":[{"__symbolic":"method"}],"onEnter":[{"__symbolic":"method"}],"onLeave":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"attachOverrides":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}]}}}}]