{"__symbolic":"module","version":4,"metadata":{"NotificationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":5,"character":14}],"declarations":[{"__symbolic":"reference","name":"NotificationComponent"}],"exports":[{"__symbolic":"reference","name":"NotificationComponent"}]}]}],"members":{}},"NotificationStyle":{"__symbolic":"interface"},"NotificationPosition":{"__symbolic":"interface"},"NotificationTheme":{"__symbolic":"interface"},"NotificationAction":{"__symbolic":"interface"},"NotificationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"sebng-notification","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":18,"character":19},"member":"None"},"template":"<div class=\"{{ notificationClassNames }}\" [class.open]=\"toggle\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n    <div class=\"content-wrapper\" [class.clickable]=\"!!notificationClick.observers.length\" (click)=\"notificationClick.emit($event)\">\n        <h5 class=\"notification-title\" *ngIf=\"title\">{{ title }}</h5>\n        <p class=\"notification-message\" *ngIf=\"message\">{{ message }}</p>\n        <ng-content></ng-content>\n\n        <div *ngIf=\"actions\" class=\"actions-wrapper\" [class.partitioned]=\"actions.length === 2 && style === 'slide-in'\">\n            <ng-container *ngFor=\"let item of actions\">\n                <div class=\"action-wrapper\">\n                    <button class=\"btn btn-sm btn-secondary notification-action\" (click)=\"item.action()\">\n                        {{ item.text }}\n                    </button>\n                </div>\n            </ng-container>\n        </div>\n\n        <div class=\"progress\" *ngIf=\"progress && !persist\">\n            <div\n                class=\"progress-bar\"\n                [class.progress-bar-animated]=\"true\"\n                [attr.aria-valuenow]=\"progressValue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"100\"\n                [style.width.%]=\"progressValuePercentage\"\n                role=\"progressbar\"\n            ></div>\n        </div>\n    </div>\n\n    <div class=\"dismiss-btn\" *ngIf=\"dismissable\" (click)=\"dismissNotification()\">\n        <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n    </div>\n</div>\n\n<ng-template #closeIcon>\n    <svg name=\"times\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n        <path\n            d=\"M217.5 256l137.2-137.2c4.7-4.7 4.7-12.3 0-17l-8.5-8.5c-4.7-4.7-12.3-4.7-17 0L192 230.5 54.8 93.4c-4.7-4.7-12.3-4.7-17 0l-8.5 8.5c-4.7 4.7-4.7 12.3 0 17L166.5 256 29.4 393.2c-4.7 4.7-4.7 12.3 0 17l8.5 8.5c4.7 4.7 12.3 4.7 17 0L192 281.5l137.2 137.2c4.7 4.7 12.3 4.7 17 0l8.5-8.5c4.7-4.7 4.7-12.3 0-17L217.5 256z\"\n        />\n    </svg>\n</ng-template>\n","styles":[".custom-notification{position:fixed;display:block;z-index:1070;opacity:0;will-change:transform,opacity;transition:transform .6s cubic-bezier(.65,-.15,.47,1.16),opacity .8s ease-in-out}.custom-notification .content-wrapper{min-height:30px;position:relative;box-shadow:0 4px 4px -2px rgba(0,0,0,.251),3px 4px 15px rgba(0,0,0,.502);padding:8px 13px 0;color:#fff}.custom-notification .content-wrapper.clickable{cursor:pointer}.custom-notification .content-wrapper .progress{background-color:transparent;width:auto;margin-right:-13px;margin-left:-13px;height:4px}.custom-notification .content-wrapper .progress .progress-bar{background-color:#000;opacity:.2}.custom-notification .content-wrapper .notification-title{color:#fff;font-weight:500;padding-right:10px;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.custom-notification .content-wrapper .notification-message{color:#fff;font-size:12px;padding-right:18px;-webkit-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding-bottom:10px}.custom-notification .content-wrapper .actions-wrapper{margin-top:10px;padding-bottom:10px}.custom-notification .content-wrapper .actions-wrapper .action-wrapper{text-align:center}.custom-notification .content-wrapper .actions-wrapper .action-wrapper .notification-action{background-color:transparent;width:100%;border:1px solid #fff;border-radius:3px;will-change:background-color,color;transition:background-color .2s,color .2s;color:#fff}.custom-notification .content-wrapper .actions-wrapper .action-wrapper .notification-action:hover{background-color:#fff}.custom-notification .content-wrapper .actions-wrapper .action-wrapper .notification-action:focus{box-shadow:none}.custom-notification .content-wrapper .actions-wrapper.partitioned .action-wrapper{display:inline-block;width:50%}.custom-notification .content-wrapper .actions-wrapper.partitioned .action-wrapper:first-child{padding-right:2px}.custom-notification .content-wrapper .actions-wrapper.partitioned .action-wrapper:last-child{padding-left:2px}.custom-notification .dismiss-btn{position:absolute;top:10px;right:8px;cursor:pointer;will-change:top,right}.custom-notification .dismiss-btn svg{fill:#fff;position:relative;display:block;width:16px;height:16px}.custom-notification.style-slide-in{width:300px}.custom-notification.style-slide-in.bottom-left{-ms-transform:translateX(-300px) translateX(-50px);transform:translate(calc(-300px - 50px));left:20px;bottom:15px}.custom-notification.style-slide-in.bottom-right{-ms-transform:translateX(-300px) translateX(-50px);transform:translate(calc(300px + 50px));right:20px;bottom:15px}.custom-notification.style-slide-in.top-left{-ms-transform:translateX(-300px) translateX(-50px);transform:translate(calc(-300px - 50px));left:20px;top:15px}.custom-notification.style-slide-in.top-right{-ms-transform:translateX(-300px) translateX(-50px);transform:translate(calc(300px + 50px));right:20px;top:15px}.custom-notification.style-slide-in.open{transform:translate(0);opacity:1}.custom-notification.style-slide-in .content-wrapper{border-radius:4px;will-change:box-shadow,top,left;transition:box-shadow 80ms linear,top .1s ease,left .1s ease,background-color .2s ease}.custom-notification.style-slide-in .content-wrapper.clickable:active{box-shadow:0 0 rgba(0,0,0,0),1px 2px 11px rgba(0,0,0,.502);top:1px;left:1px}.custom-notification.style-slide-in .content-wrapper.clickable:active+.dismiss-btn{top:9px;right:7px}.custom-notification.style-bar{width:100vw;left:0;right:0}.custom-notification.style-bar .content-wrapper{display:flex;align-items:center}.custom-notification.style-bar .content-wrapper .notification-title{margin-bottom:0}.custom-notification.style-bar .content-wrapper .actions-wrapper{display:flex;margin:0}.custom-notification.style-bar .content-wrapper .actions-wrapper>.action-wrapper:first-child:not(:last-child){margin-right:10px}.custom-notification.style-bar.top{top:0;transform:translateY(-150%)}.custom-notification.style-bar.bottom{bottom:0;transform:translateY(150%)}.custom-notification.style-bar.open{transform:translateY(0);opacity:1}.custom-notification.theme-purple{background-color:#4f2c99}.custom-notification.theme-purple .content-wrapper.clickable:hover{background-color:#5f35b9}.custom-notification.theme-purple .content-wrapper.clickable:active{background-color:#4f2c99}.custom-notification.theme-purple .content-wrapper .actions-wrapper .action-wrapper .notification-action:hover{color:#4f2c99}.custom-notification.theme-purple .dismiss-btn svg:hover{fill:#000}.custom-notification.theme-inverted{background-color:#000}.custom-notification.theme-inverted .content-wrapper.clickable:hover{background-color:#141414}.custom-notification.theme-inverted .content-wrapper.clickable:active{background-color:#000}.custom-notification.theme-inverted .content-wrapper .actions-wrapper .action-wrapper .notification-action:hover{color:#000}.custom-notification.theme-inverted .dismiss-btn svg:hover{fill:#868686}.custom-notification.theme-primary{background-color:#007ac7}.custom-notification.theme-primary .content-wrapper.clickable:hover{background-color:#0093f0}.custom-notification.theme-primary .content-wrapper.clickable:active{background-color:#007ac7}.custom-notification.theme-primary .content-wrapper .actions-wrapper .action-wrapper .notification-action:hover{color:#007ac7}.custom-notification.theme-primary .dismiss-btn svg:hover{fill:#000}.custom-notification.theme-success{background-color:#379d00}.custom-notification.theme-success .content-wrapper.clickable:hover{background-color:#45c600}.custom-notification.theme-success .content-wrapper.clickable:active{background-color:#379d00}.custom-notification.theme-success .content-wrapper .actions-wrapper .action-wrapper .notification-action:hover{color:#379d00}.custom-notification.theme-success .dismiss-btn svg:hover{fill:#000}.custom-notification.theme-danger{background-color:#d81a1a}.custom-notification.theme-danger .content-wrapper.clickable:hover{background-color:#e73434}.custom-notification.theme-danger .content-wrapper.clickable:active{background-color:#d81a1a}.custom-notification.theme-danger .content-wrapper .actions-wrapper .action-wrapper .notification-action:hover{color:#d81a1a}.custom-notification.theme-danger .dismiss-btn svg:hover{fill:#000}.custom-notification.theme-warning{background-color:#ffb400}.custom-notification.theme-warning .content-wrapper.clickable:hover{background-color:#ffc029}.custom-notification.theme-warning .content-wrapper.clickable:active{background-color:#ffb400}.custom-notification.theme-warning .content-wrapper .actions-wrapper .action-wrapper .notification-action:hover{color:#ffb400}.custom-notification.theme-warning .dismiss-btn svg:hover{fill:#fff}.custom-notification.theme-warning .content-wrapper{color:#000}.custom-notification.theme-warning .content-wrapper .actions-wrapper .action-wrapper .notification-action{border-color:#000;color:#000}.custom-notification.theme-warning .content-wrapper .actions-wrapper .action-wrapper .notification-action:hover{border-color:#fff;color:#000}.custom-notification.theme-warning .dismiss-btn svg{fill:#000}@media only screen and (max-width: 420px){.custom-notification.style-slide-in{opacity:0;width:90%;right:auto}.custom-notification.style-slide-in.bottom-left,.custom-notification.style-slide-in.bottom-right,.custom-notification.style-slide-in.top-right,.custom-notification.style-slide-in.top-left{left:50%}.custom-notification.style-slide-in.bottom-left,.custom-notification.style-slide-in.bottom-right{transform:translate(-50%,150%);bottom:15px;top:auto}.custom-notification.style-slide-in.top-right,.custom-notification.style-slide-in.top-left{transform:translate(-50%,-150%);bottom:auto;top:15px}.custom-notification.style-slide-in.open{transform:translate(-50%);opacity:1}}\n"]}]}],"members":{"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"dismissable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"dismissTimeout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"persist":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"toggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"actions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"progress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"notificationClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":5}}]}],"dismiss":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":5}}]}],"getStyleClass":[{"__symbolic":"method"}],"getThemeClass":[{"__symbolic":"method"}],"getPositionClass":[{"__symbolic":"method"}],"startTimer":[{"__symbolic":"method"}],"pauseTimer":[{"__symbolic":"method"}],"restartTimer":[{"__symbolic":"method"}],"stopTimer":[{"__symbolic":"method"}],"dismissNotification":[{"__symbolic":"method"}],"clearTimer":[{"__symbolic":"method"}],"setClassNames":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"mouseEnter":[{"__symbolic":"method"}],"mouseLeave":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"NotificationModule":"./notification.module","NotificationStyle":"./notification.component","NotificationPosition":"./notification.component","NotificationTheme":"./notification.component","NotificationAction":"./notification.component","NotificationComponent":"./notification.component"},"importAs":"@sebgroup/ng-components/lib/notification"}