@universis/common
Version:
Universis - common directives and services
47 lines (46 loc) • 5.8 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
/**
*
* Component for Card-Box element with Inputs:
* Usage <universis-msgbox [title]="HelloWorld" ...></universis-msgbox>
* @Input() title: Title of Box
* @Input() icon: Icon displayed on the left of the element
* @Input() info: The Status displayed on user
* @Input() message: Explanation of the status
* @Input() extraMessage: Some extra guidence
* @Input() actionButton: Text displayed as Text in button
* @Input() actionText: Text displayed as an action
* @Input() disableBut: Disable button
* @export
*/
export class MsgboxComponent {
constructor() {
// Default class sets the color to green, otherwise pass it the correct bootstrap class
this.buttonClass = 'btn-success';
// Usage (action)="someFunction()"
this.action = new EventEmitter();
}
clicked() {
this.action.emit();
}
}
MsgboxComponent.decorators = [
{ type: Component, args: [{
selector: 'universis-msgbox',
template: "<div class=\"card\">\n <div class=\"msgbox_main-container\">\n <div class=\"msgbox_icon\">\n <span class=\"fa-4x far {{icon}}\" style=\"color:#678898;\"></span>\n </div>\n <div class=\"msgbox_details\">\n <div *ngIf=\"title && !title.includes('title')\" class=\"msgbox_title\" id=\"title\">{{title}}</div>\n <div class=\"font pt-3 msgbox_item\" id=\"message\">{{message}}</div>\n <div class=\"pt-3 msgbox_item\" *ngIf=\"extraMessage && !extraMessage.includes('extraMessage')\">{{extraMessage}}</div>\n <div>\n <div class=\"pt-3 msgbox_item\" *ngIf=\"actionButton && !actionButton.includes('actionButton')\">\n <button type=\"button\" class=\"btn s--btn\" [ngClass]=\"buttonClass\" [disabled]=\"disableBut\" (click)=\"clicked()\">{{actionButton}}</button>\n </div>\n <div class=\"pt-3 msgbox_item\" *ngIf=\"actionText && !actionText.includes('actionText')\" id=\"text\">\n <span><span class=\"fa-1x icon-arrow-right\"></span>{{actionText}}</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n",
styles: [".msgbox_main-container{display:flex;margin:30px 40px}.msgbox_title{text-transform:uppercase;color:#536c79}.msgbox_details{display:flex;flex-direction:column;justify-content:center}.msgbox_icon{padding-right:60px;padding-left:20px;display:flex;align-items:center}.msgbox_item{display:flex}@media screen and (max-width:600px){.msgbox_main-container{flex-direction:column;align-items:center}.msgbox_title{text-align:center;justify-content:center;padding:1rem 5px 0}.msgbox_item{justify-content:center;text-align:center}.msgbox_icon{padding-right:0;padding-left:0;justify-content:center}}"]
}] }
];
MsgboxComponent.propDecorators = {
title: [{ type: Input }],
icon: [{ type: Input }],
info: [{ type: Input }],
message: [{ type: Input }],
extraMessage: [{ type: Input }],
actionButton: [{ type: Input }],
actionText: [{ type: Input }],
disableBut: [{ type: Input }],
buttonClass: [{ type: Input }],
action: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXNnYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B1bml2ZXJzaXMvY29tbW9uLyIsInNvdXJjZXMiOlsic2hhcmVkL2NvbXBvbmVudHMvbXNnYm94L21zZ2JveC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV2RTs7Ozs7Ozs7Ozs7OztHQWFHO0FBTUgsTUFBTTtJQUxOO1FBZUUsdUZBQXVGO1FBQzlFLGdCQUFXLEdBQUcsYUFBYSxDQUFDO1FBQ3JDLGtDQUFrQztRQUN4QixXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQU83QyxDQUFDO0lBSEMsT0FBTztRQUNMLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQzs7O1lBeEJGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1Qixxa0NBQXNDOzthQUV2Qzs7O29CQUdFLEtBQUs7bUJBQ0wsS0FBSzttQkFDTCxLQUFLO3NCQUNMLEtBQUs7MkJBQ0wsS0FBSzsyQkFDTCxLQUFLO3lCQUNMLEtBQUs7eUJBQ0wsS0FBSzswQkFFTCxLQUFLO3FCQUVMLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqXG4gKiBDb21wb25lbnQgZm9yIENhcmQtQm94IGVsZW1lbnQgd2l0aCBJbnB1dHM6XG4gKiBVc2FnZSA8dW5pdmVyc2lzLW1zZ2JveCBbdGl0bGVdPVwiSGVsbG9Xb3JsZFwiIC4uLj48L3VuaXZlcnNpcy1tc2dib3g+XG4gKiBASW5wdXQoKSB0aXRsZTogVGl0bGUgb2YgQm94XG4gKiBASW5wdXQoKSBpY29uOiBJY29uIGRpc3BsYXllZCBvbiB0aGUgbGVmdCBvZiB0aGUgZWxlbWVudFxuICogQElucHV0KCkgaW5mbzogVGhlIFN0YXR1cyBkaXNwbGF5ZWQgb24gdXNlclxuICogQElucHV0KCkgbWVzc2FnZTogRXhwbGFuYXRpb24gb2YgdGhlIHN0YXR1c1xuICogQElucHV0KCkgZXh0cmFNZXNzYWdlOiBTb21lIGV4dHJhIGd1aWRlbmNlXG4gKiBASW5wdXQoKSBhY3Rpb25CdXR0b246IFRleHQgZGlzcGxheWVkIGFzIFRleHQgaW4gYnV0dG9uXG4gKiBASW5wdXQoKSBhY3Rpb25UZXh0OiBUZXh0IGRpc3BsYXllZCBhcyBhbiBhY3Rpb25cbiAqIEBJbnB1dCgpIGRpc2FibGVCdXQ6IERpc2FibGUgYnV0dG9uXG4gKiBAZXhwb3J0XG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3VuaXZlcnNpcy1tc2dib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vbXNnYm94LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbXNnYm94LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTXNnYm94Q29tcG9uZW50IHtcblxuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGluZm86IHN0cmluZztcbiAgQElucHV0KCkgbWVzc2FnZTogc3RyaW5nO1xuICBASW5wdXQoKSBleHRyYU1lc3NhZ2U6IHN0cmluZztcbiAgQElucHV0KCkgYWN0aW9uQnV0dG9uOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFjdGlvblRleHQ6IHN0cmluZztcbiAgQElucHV0KCkgZGlzYWJsZUJ1dDogYm9vbGVhbjtcbiAgLy8gRGVmYXVsdCBjbGFzcyBzZXRzIHRoZSBjb2xvciB0byBncmVlbiwgb3RoZXJ3aXNlIHBhc3MgaXQgdGhlIGNvcnJlY3QgYm9vdHN0cmFwIGNsYXNzXG4gIEBJbnB1dCgpIGJ1dHRvbkNsYXNzID0gJ2J0bi1zdWNjZXNzJztcbiAgLy8gVXNhZ2UgKGFjdGlvbik9XCJzb21lRnVuY3Rpb24oKVwiXG4gIEBPdXRwdXQoKSBhY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBidG5DbGlja2VkOiBib29sZWFuO1xuXG4gIGNsaWNrZWQoKSB7XG4gICAgdGhpcy5hY3Rpb24uZW1pdCgpO1xuICB9XG59XG4iXX0=