nereo-material/esm2015/lib/banner/banner.component.js

This project contains [Material Design](https://material.io/design/) components built with Angular and Angular Material. Its goal is to provide components that are not yet implemented in [Angular Material](https://material.angular.io/).

import { __decorate, __metadata } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
let BannerComponent = class BannerComponent {
    constructor() {
        this.mainActionClick = new EventEmitter();
        this.secondaryActionClick = new EventEmitter();
    }
    ngOnInit() {
    }
    mainActionClicked() {
        this.mainActionClick.emit();
    }
    secondaryActionClicked() {
        this.secondaryActionClick.emit();
    }
};
__decorate([
    Input(),
    __metadata("design:type", Boolean)
], BannerComponent.prototype, "show", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], BannerComponent.prototype, "icon", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], BannerComponent.prototype, "firstSentence", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], BannerComponent.prototype, "secondSentence", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], BannerComponent.prototype, "mainActionText", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], BannerComponent.prototype, "secondaryActionText", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], BannerComponent.prototype, "mainActionClick", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], BannerComponent.prototype, "secondaryActionClick", void 0);
BannerComponent = __decorate([
    Component({
        selector: 'nm-banner',
        template: `
  <mat-card *ngIf="show">
    <mat-card-content>
        <mat-list>
        <mat-list-item>
            <mat-icon matListIcon color="primary" *ngIf="icon">{{icon}}</mat-icon>
            <div id="banner-text-container">
                <p matLine>{{firstSentence}}</p>
                <p matLine *ngIf="secondSentence">{{secondSentence}}</p>
            </div>
        </mat-list-item>    
        </mat-list>
        <div id="banner-actions">
            <button mat-button color="primary" (click)="secondaryActionClicked()" *ngIf="secondaryActionText">{{secondaryActionText}}</button>  
            <button mat-button color="primary" (click)="mainActionClicked()">{{mainActionText}}</button>
        </div>
    </mat-card-content>
    </mat-card>
  `,
        styles: [`
    mat-card {
        height: 52px;
        padding: 0;
    }
    
    mat-card-content{
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 90%;
        flex-wrap: wrap;
    }
    
    #banner-text-container {
        margin-left: 24px;
    }

    #banner-text-container p{
        font-size: 14px;
        margin: 3px 0;
    }

    #banner-actions button{
        text-transform: uppercase !important;
    }
         
    mat-card-content,
    mat-list,
    mat-list-item {
        height: 100% !important;
        padding: 0;
    }

    .mat-list, .mat-list-item, .mat-list-text{
        flex-direction: row !important;
    }

    @media(max-width:959px){
        mat-card {
            height: 112px;
        }
        
        mat-card-content,
        mat-list,
        mat-list-item {
            height: auto !important;
            max-width: 100% !important;
            width: 100% !important;
        }    

        mat-list-item {
            margin: 12px 0 !important;
        }

        #banner-text-container {
            margin-left: 16px !important;
        }

        #banner-actions {
            justify-content: flex-end;
            display: flex;
            width: 100%;
        } 
    }
  `]
    }),
    __metadata("design:paramtypes", [])
], BannerComponent);
export { BannerComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25lcmVvLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsibGliL2Jhbm5lci9iYW5uZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBMkYvRSxJQUFhLGVBQWUsR0FBNUIsTUFBYSxlQUFlO0lBMEJ4QjtRQUxBLG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUdyQyx5QkFBb0IsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBRTFCLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFRCxpQkFBaUI7UUFDZixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCxzQkFBc0I7UUFDcEIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksRUFBRSxDQUFDO0lBQ25DLENBQUM7Q0FDRixDQUFBO0FBbkNDO0lBREMsS0FBSyxFQUFFOzs2Q0FDTTtBQUdkO0lBREMsS0FBSyxFQUFFOzs2Q0FDSztBQUdiO0lBREMsS0FBSyxFQUFFOztzREFDYztBQUd0QjtJQURDLEtBQUssRUFBRTs7dURBQ2U7QUFHdkI7SUFEQyxLQUFLLEVBQUU7O3VEQUNlO0FBR3ZCO0lBREMsS0FBSyxFQUFFOzs0REFDb0I7QUFHNUI7SUFEQyxNQUFNLEVBQUU7O3dEQUM0QjtBQUdyQztJQURDLE1BQU0sRUFBRTs7NkRBQ2lDO0FBeEJqQyxlQUFlO0lBekYzQixTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsV0FBVztRQUNyQixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCVDtpQkFDUTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0VSO0tBQ0YsQ0FBQzs7R0FDVyxlQUFlLENBc0N6QjtTQXRDVSxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdubS1iYW5uZXInLFxuICB0ZW1wbGF0ZTogYFxuICA8bWF0LWNhcmQgKm5nSWY9XCJzaG93XCI+XG4gICAgPG1hdC1jYXJkLWNvbnRlbnQ+XG4gICAgICAgIDxtYXQtbGlzdD5cbiAgICAgICAgPG1hdC1saXN0LWl0ZW0+XG4gICAgICAgICAgICA8bWF0LWljb24gbWF0TGlzdEljb24gY29sb3I9XCJwcmltYXJ5XCIgKm5nSWY9XCJpY29uXCI+e3tpY29ufX08L21hdC1pY29uPlxuICAgICAgICAgICAgPGRpdiBpZD1cImJhbm5lci10ZXh0LWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgIDxwIG1hdExpbmU+e3tmaXJzdFNlbnRlbmNlfX08L3A+XG4gICAgICAgICAgICAgICAgPHAgbWF0TGluZSAqbmdJZj1cInNlY29uZFNlbnRlbmNlXCI+e3tzZWNvbmRTZW50ZW5jZX19PC9wPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbWF0LWxpc3QtaXRlbT4gICAgXG4gICAgICAgIDwvbWF0LWxpc3Q+XG4gICAgICAgIDxkaXYgaWQ9XCJiYW5uZXItYWN0aW9uc1wiPlxuICAgICAgICAgICAgPGJ1dHRvbiBtYXQtYnV0dG9uIGNvbG9yPVwicHJpbWFyeVwiIChjbGljayk9XCJzZWNvbmRhcnlBY3Rpb25DbGlja2VkKClcIiAqbmdJZj1cInNlY29uZGFyeUFjdGlvblRleHRcIj57e3NlY29uZGFyeUFjdGlvblRleHR9fTwvYnV0dG9uPiAgXG4gICAgICAgICAgICA8YnV0dG9uIG1hdC1idXR0b24gY29sb3I9XCJwcmltYXJ5XCIgKGNsaWNrKT1cIm1haW5BY3Rpb25DbGlja2VkKClcIj57e21haW5BY3Rpb25UZXh0fX08L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9tYXQtY2FyZC1jb250ZW50PlxuICAgIDwvbWF0LWNhcmQ+XG4gIGAsXG4gIHN0eWxlczogW2BcbiAgICBtYXQtY2FyZCB7XG4gICAgICAgIGhlaWdodDogNTJweDtcbiAgICAgICAgcGFkZGluZzogMDtcbiAgICB9XG4gICAgXG4gICAgbWF0LWNhcmQtY29udGVudHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICBtYXJnaW46IDAgYXV0bztcbiAgICAgICAgbWF4LXdpZHRoOiA5MCU7XG4gICAgICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICB9XG4gICAgXG4gICAgI2Jhbm5lci10ZXh0LWNvbnRhaW5lciB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAyNHB4O1xuICAgIH1cblxuICAgICNiYW5uZXItdGV4dC1jb250YWluZXIgcHtcbiAgICAgICAgZm9udC1zaXplOiAxNHB4O1xuICAgICAgICBtYXJnaW46IDNweCAwO1xuICAgIH1cblxuICAgICNiYW5uZXItYWN0aW9ucyBidXR0b257XG4gICAgICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2UgIWltcG9ydGFudDtcbiAgICB9XG4gICAgICAgICBcbiAgICBtYXQtY2FyZC1jb250ZW50LFxuICAgIG1hdC1saXN0LFxuICAgIG1hdC1saXN0LWl0ZW0ge1xuICAgICAgICBoZWlnaHQ6IDEwMCUgIWltcG9ydGFudDtcbiAgICAgICAgcGFkZGluZzogMDtcbiAgICB9XG5cbiAgICAubWF0LWxpc3QsIC5tYXQtbGlzdC1pdGVtLCAubWF0LWxpc3QtdGV4dHtcbiAgICAgICAgZmxleC1kaXJlY3Rpb246IHJvdyAhaW1wb3J0YW50O1xuICAgIH1cblxuICAgIEBtZWRpYShtYXgtd2lkdGg6OTU5cHgpe1xuICAgICAgICBtYXQtY2FyZCB7XG4gICAgICAgICAgICBoZWlnaHQ6IDExMnB4O1xuICAgICAgICB9XG4gICAgICAgIFxuICAgICAgICBtYXQtY2FyZC1jb250ZW50LFxuICAgICAgICBtYXQtbGlzdCxcbiAgICAgICAgbWF0LWxpc3QtaXRlbSB7XG4gICAgICAgICAgICBoZWlnaHQ6IGF1dG8gIWltcG9ydGFudDtcbiAgICAgICAgICAgIG1heC13aWR0aDogMTAwJSAhaW1wb3J0YW50O1xuICAgICAgICAgICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICAgICAgfSAgICBcblxuICAgICAgICBtYXQtbGlzdC1pdGVtIHtcbiAgICAgICAgICAgIG1hcmdpbjogMTJweCAwICFpbXBvcnRhbnQ7XG4gICAgICAgIH1cblxuICAgICAgICAjYmFubmVyLXRleHQtY29udGFpbmVyIHtcbiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAxNnB4ICFpbXBvcnRhbnQ7XG4gICAgICAgIH1cblxuICAgICAgICAjYmFubmVyLWFjdGlvbnMge1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgfSBcbiAgICB9XG4gIGBdXG59KVxuZXhwb3J0IGNsYXNzIEJhbm5lckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICBASW5wdXQoKVxuICAgIHNob3c6IGJvb2xlYW47XG5cbiAgICBASW5wdXQoKVxuICAgIGljb246IHN0cmluZztcbiAgXG4gICAgQElucHV0KClcbiAgICBmaXJzdFNlbnRlbmNlOiBzdHJpbmc7XG4gIFxuICAgIEBJbnB1dCgpXG4gICAgc2Vjb25kU2VudGVuY2U6IHN0cmluZztcbiAgXG4gICAgQElucHV0KClcbiAgICBtYWluQWN0aW9uVGV4dDogc3RyaW5nO1xuICBcbiAgICBASW5wdXQoKVxuICAgIHNlY29uZGFyeUFjdGlvblRleHQ6IHN0cmluZztcbiAgXG4gICAgQE91dHB1dCgpXG4gICAgbWFpbkFjdGlvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBcbiAgICBAT3V0cHV0KClcbiAgICBzZWNvbmRhcnlBY3Rpb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgXG4gICAgY29uc3RydWN0b3IoKSB7IH1cbiAgXG4gICAgbmdPbkluaXQoKSB7XG4gICAgfVxuICBcbiAgICBtYWluQWN0aW9uQ2xpY2tlZCgpe1xuICAgICAgdGhpcy5tYWluQWN0aW9uQ2xpY2suZW1pdCgpO1xuICAgIH1cbiAgXG4gICAgc2Vjb25kYXJ5QWN0aW9uQ2xpY2tlZCgpe1xuICAgICAgdGhpcy5zZWNvbmRhcnlBY3Rpb25DbGljay5lbWl0KCk7XG4gICAgfVxuICB9XG4iXX0=