| Yoshie Muranaka | 0d11902 | 2019-11-04 10:07:32 -0800 | [diff] [blame^] | 1 | window.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); |