<commit_before>import {Component, OnInit, AfterViewInit, OnDestroy, ViewEncapsulation, trigger, state, style, transition, animate} from "@angular/core"
import {DomSanitizationService, SafeHtml} from "@angular/platform-browser";
import {Notification} from "./notification"
import {NotificationsService} from "./notifications.service"
import {Icons} from "./icons"

@Component({
    selector: "simple-notification",

    inputs: [
        "item",
        "timeOut",
        "position",
        "clickToClose",
        "maxLength",
        "showProgressBar",
        "pauseOnHover",
        "theClass",
        "rtl",
        "animate",
        "icons"
    ],
    encapsulation: ViewEncapsulation.None,
    animations: [
        trigger("enterLeave", [

            // Enter from right
            state("fromRight", style({opacity: 1, transform: "translateX(0)"})),
            transition("* => fromRight", [
                style({opacity: 0, transform: "translateX(5%)"}),
                animate("400ms ease-in-out")
            ]),
            state("fromRightOut", style({opacity: 0, transform: "translateX(-5%)"})),
            transition("fromRight => fromRightOut", [
                style({opacity: 1, transform: "translateX(0)"}),
                animate("300ms ease-in-out")
            ]),

            // Enter from left
            state("fromLeft", style({opacity: 1, transform: "translateX(0)"})),
            transition("* => fromLeft", [
                style({opacity: 0, transform: "translateX(-5%)"}),
                animate("400ms ease-in-out")
            ]),
            state("fromLeftOut", style({opacity: 0, transform: "translateX(5%)"})),
            transition("fromLeft => fromLeftOut", [
                style({opacity: 1, transform: "translateX(0)"}),
                animate("300ms ease-in-out")
            ]),

            // Rotate
            state("scale", style({opacity: 1, transform: "scale(1)"})),
            transition("* => scale", [
                style({opacity: 0, transform: "scale(0)"}),
                animate("400ms ease-in-out")
            ]),
            state("scaleOut", style({opacity: 0, transform: "scale(0)"})),
            transition("scale => scaleOut", [
                style({opacity: 1, transform: "scale(1)"}),
                animate("400ms ease-in-out")
            ]),

            // Scale
            state("rotate", style({opacity: 1, transform: "rotate(0deg)"})),
            transition("* => rotate", [
                style({opacity: 0, transform: "rotate(5deg)"}),
                animate("400ms ease-in-out")
            ]),
            state("rotateOut", style({opacity: 0, transform: "rotate(-5deg)"})),
            transition("rotate => rotateOut", [
                style({opacity: 1, transform: "rotate(0deg)"}),
                animate("400ms ease-in-out")
            ])
        ])
    ],
    template: `
        <div class="simple-notification"
            [@enterLeave]="item.state"
            (click)="removeOnClick()"
            [class]="theClass"

            [ngClass]="{
                'alert': item.type === 'alert',
                'error': item.type === 'error',
                'success': item.type === 'success',
                'info': item.type === 'info',
                'bare': item.type === 'bare',
                'rtl-mode': rtl
            }"

            (mouseenter)="onEnter()"
            (mouseleave)="onLeave()">

            <div *ngIf="!item.html">
                <div class="sn-title">{{item.title}}</div>
                <div class="sn-content">{{item.content | max:maxLength}}</div>

                <div *ngIf="item.type !== 'bare'" [innerHTML]="safeSvg"></div>
            </div>
            <div *ngIf="item.html" [innerHTML]="item.html"></div>

            <div class="sn-progress-loader" *ngIf="showProgressBar">
                <span [ngStyle]="{'width': progressWidth + '%'}"></span>
            </div>

        </div>
    `,
    styles: [`
        .simple-notification {
            width: 100%;
            padding: 10px 20px;
            box-sizing: border-box;
            position: relative;
            float: left;
            margin-bottom: 10px;
            color: #fff;
            cursor: pointer;
            transition: all 0.5s;
        }

        .simple-notification .sn-title {
            margin: 0;
            padding: 0;
            line-height: 30px;
            font-size: 20px;
        }

        .simple-notification .sn-content {
            margin: 0;
            font-size: 16px;
            padding: 0 50px 0 0;
            line-height: 20px;
        }

        .simple-notification svg {
            position: absolute;
            box-sizing: border-box;
            top: 0;
            right: 0;
            width: auto;
            height: 70px;
            padding: 10px;
            fill: #fff;
        }

        .simple-notification.rtl-mode {<commit_msg>fix: Update svg width for IE toast<commit_after>import {Component, OnInit, AfterViewInit, OnDestroy, ViewEncapsulation, trigger, state, style, transition, animate} from "@angular/core"
import {DomSanitizationService, SafeHtml} from "@angular/platform-browser";
import {Notification} from "./notification"
import {NotificationsService} from "./notifications.service"
import {Icons} from "./icons"

@Component({
    selector: "simple-notification",

    inputs: [
        "item",
        "timeOut",
        "position",
        "clickToClose",
        "maxLength",
        "showProgressBar",
        "pauseOnHover",
        "theClass",
        "rtl",
        "animate",
        "icons"
    ],
    encapsulation: ViewEncapsulation.None,
    animations: [
        trigger("enterLeave", [

            // Enter from right
            state("fromRight", style({opacity: 1, transform: "translateX(0)"})),
            transition("* => fromRight", [
                style({opacity: 0, transform: "translateX(5%)"}),
                animate("400ms ease-in-out")
            ]),
            state("fromRightOut", style({opacity: 0, transform: "translateX(-5%)"})),
            transition("fromRight => fromRightOut", [
                style({opacity: 1, transform: "translateX(0)"}),
                animate("300ms ease-in-out")
            ]),

            // Enter from left
            state("fromLeft", style({opacity: 1, transform: "translateX(0)"})),
            transition("* => fromLeft", [
                style({opacity: 0, transform: "translateX(-5%)"}),
                animate("400ms ease-in-out")
            ]),
            state("fromLeftOut", style({opacity: 0, transform: "translateX(5%)"})),
            transition("fromLeft => fromLeftOut", [
                style({opacity: 1, transform: "translateX(0)"}),
                animate("300ms ease-in-out")
            ]),

            // Rotate
            state("scale", style({opacity: 1, transform: "scale(1)"})),
            transition("* => scale", [
                style({opacity: 0, transform: "scale(0)"}),
                animate("400ms ease-in-out")
            ]),
            state("scaleOut", style({opacity: 0, transform: "scale(0)"})),
            transition("scale => scaleOut", [
                style({opacity: 1, transform: "scale(1)"}),
                animate("400ms ease-in-out")
            ]),

            // Scale
            state("rotate", style({opacity: 1, transform: "rotate(0deg)"})),
            transition("* => rotate", [
                style({opacity: 0, transform: "rotate(5deg)"}),
                animate("400ms ease-in-out")
            ]),
            state("rotateOut", style({opacity: 0, transform: "rotate(-5deg)"})),
            transition("rotate => rotateOut", [
                style({opacity: 1, transform: "rotate(0deg)"}),
                animate("400ms ease-in-out")
            ])
        ])
    ],
    template: `
        <div class="simple-notification"
            [@enterLeave]="item.state"
            (click)="removeOnClick()"
            [class]="theClass"

            [ngClass]="{
                'alert': item.type === 'alert',
                'error': item.type === 'error',
                'success': item.type === 'success',
                'info': item.type === 'info',
                'bare': item.type === 'bare',
                'rtl-mode': rtl
            }"

            (mouseenter)="onEnter()"
            (mouseleave)="onLeave()">

            <div *ngIf="!item.html">
                <div class="sn-title">{{item.title}}</div>
                <div class="sn-content">{{item.content | max:maxLength}}</div>

                <div *ngIf="item.type !== 'bare'" [innerHTML]="safeSvg"></div>
            </div>
            <div *ngIf="item.html" [innerHTML]="item.html"></div>

            <div class="sn-progress-loader" *ngIf="showProgressBar">
                <span [ngStyle]="{'width': progressWidth + '%'}"></span>
            </div>

        </div>
    `,
    styles: [`
        .simple-notification {
            width: 100%;
            padding: 10px 20px;
            box-sizing: border-box;
            position: relative;
            float: left;
            margin-bottom: 10px;
            color: #fff;
            cursor: pointer;
            transition: all 0.5s;
        }

        .simple-notification .sn-title {
            margin: 0;
            padding: 0;
            line-height: 30px;
            font-size: 20px;
        }

        .simple-notification .sn-content {
            margin: 0;
            font-size: 16px;
            padding: 0 50px 0 0;
            line-height: 20px;
        }

        .simple-notification svg {
            position: absolute;
            box-sizing: border-box;
            top: 0;
            right: 0;
            width: 70px;
            height: 70px;
            padding: 10px;
            fill: #fff;
        }

        .simple-notification.rtl-mode {
{'fraction_non_alphanumeric': 0.1602635580334516, 'fraction_numerical': 0.01824632539280284, 'mean_word_length': 1.6471693050711027, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 51, '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': '4307048', 'n_tokens_mistral': 2924, 'n_tokens_neox': 2635, 'n_words': 556}