1window.angular && (function(angular) { 2 'use strict'; 3 4 /** 5 * alertBanner Component 6 */ 7 8 9 /** 10 * alertBanner Component controller 11 */ 12 const controller = function() { 13 this.status; 14 this.$onInit = () => { 15 switch (this.type) { 16 case 'warn': 17 case 'error': 18 this.status = this.type; 19 break; 20 case 'success': 21 this.status = 'on'; 22 break; 23 default: 24 } 25 }; 26 }; 27 28 /** 29 * alertBanner Component template 30 */ 31 const template = ` 32 <div class="alert-banner" 33 ng-class="{ 34 'alert-banner--info': $ctrl.type === 'info', 35 'alert-banner--warn': $ctrl.type === 'warn', 36 'alert-banner--error': $ctrl.type === 'error', 37 'alert-banner--success': $ctrl.type === 'success'}"> 38 <status-icon 39 ng-if="$ctrl.type !== 'info'" 40 status="{{$ctrl.status}}" 41 class="status-icon"> 42 </status-icon> 43 <ng-bind-html 44 ng-bind-html="$ctrl.bannerText || ''"> 45 </ng-bind-html> 46 </div> 47 ` 48 49 /** 50 * Register alertBanner component 51 */ 52 angular.module('app.common.components').component('alertBanner', { 53 template, 54 controller, 55 bindings: { 56 type: '@', // string 'info', 'warn', 'error' or 'success' 57 bannerText: '<' // string, can include valid HTML 58 } 59 }) 60})(window.angular);