<commit_before>import {Component, OnDestroy, OnInit} from '@angular/core';
import {Alert, AlertLevel, AlertService} from "../../services/alert.service";
import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';
import {Subscription} from "rxjs/Subscription";


@Component({
    selector: 'mc-alert-container',
    templateUrl: './alertContainer.component.html',
    styleUrls: ['./alertContainer.component.scss'],
    animations: [

        trigger('alertAnimation', [
            transition('* => *', [

                query(':leave',
                    animate('1s ease-in', keyframes([
                        style({opacity: 1, transform: 'translateY(0)',     offset: 0}),
                        style({opacity: 1, transform: 'translateY(300px)', offset: 1.0}),
                    ])), {optional: true}),

                query(':enter',
                    animate('1s ease-in', keyframes([
                        style({opacity: 1, transform: 'translateY(300px)', offset: 0}),
                        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
                    ])), {optional: true})
            ])
        ])

    ]
})

export class AlertContainerComponent implements OnInit, OnDestroy {

    private alertSubscription: Subscription;

    private visibleAlerts: Alert[] = [];

    public AlertLevel:  any = AlertLevel;

    constructor(private alertService: AlertService) { }

    ngOnInit() {
        this.alertSubscription = this.alertService.getAlerts().subscribe((alerts: Alert[]) => {
            // TODO: we need some sort of animation here
            this.visibleAlerts = alerts;
        });
    }

    ngOnDestroy(): void {
        this.alertSubscription.unsubscribe();
    }

}<commit_msg>slide in slide out animation<commit_after>import {Component, OnDestroy, OnInit} from '@angular/core';
import {Alert, AlertLevel, AlertService} from "../../services/alert.service";
import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';
import {Subscription} from "rxjs/Subscription";


@Component({
    selector: 'mc-alert-container',
    templateUrl: './alertContainer.component.html',
    styleUrls: ['./alertContainer.component.scss'],
    animations: [

        trigger('alertAnimation', [
            transition('* => *', [

                query(':leave',
                    animate('0.5s ease-in-out', keyframes([
                        style({transform: 'translateX(0)', offset: 0.0}),
                        style({transform: 'translateX(calc(100vw))', offset: 1.0}),
                    ])), {optional: true}),

                query(':enter',
                    animate('0.5s ease-in-out', keyframes([
                        style({transform: 'translateY(calc(100vh))', offset: 0.0}),
                        style({transform: 'translateY(0)',     offset: 1.0}),
                    ])), {optional: true})
            ])
        ])

    ]
})

export class AlertContainerComponent implements OnInit, OnDestroy {

    private alertSubscription: Subscription;

    private visibleAlerts: Alert[] = [];

    public AlertLevel:  any = AlertLevel;

    constructor(private alertService: AlertService) { }

    ngOnInit() {
        this.alertSubscription = this.alertService.getAlerts().subscribe((alerts: Alert[]) => {
            // TODO: we need some sort of animation here
            this.visibleAlerts = alerts;
        });
    }

    ngOnDestroy(): void {
        this.alertSubscription.unsubscribe();
    }

}
{'fraction_non_alphanumeric': 0.14402711098559728, 'fraction_numerical': 0.011296243998870376, 'mean_word_length': 2.30718954248366, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7658678', 'n_tokens_mistral': 992, 'n_tokens_neox': 917, 'n_words': 200}