@kigi/components 1.33.4-beta.2 → 1.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.33.4-beta.2",
+  "version": "1.34.0",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {

package/src/components/mbg-homescreen/cards/index.ts

@@ -1,3 +1 @@
 export * from './typeone/typeone'
-export * from './panel/panel'
-export * from './chart-wrapper/chart-wrapper'

package/src/components/mbg-homescreen/charts/bar-line/bar-line.html

@@ -1,11 +1,5 @@
 <div class="mb-h-charts-container">
-
-    <mbg-chart-wrapper panels="$ctrl.panels"
-                       loading="$ctrl.loading"
-                       display-values="$ctrl.displayValues"
-                       allowed-to-see="$ctrl.allowedToSee"
-                       allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
-
+    <div class="home-chart"> </div>
     <div ng-show="!$ctrl.hasData()"
          class="empty">
         <svg xmlns:dc="http://purl.org/dc/elements/1.1/"

package/src/components/mbg-homescreen/charts/bar-line/bar-line.ts

@@ -236,16 +236,12 @@ class MbgChartBarLineController {
   }
 }
 
-MbgChartBarLineController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
+MbgChartBarLineController.$inject = ['$scope', '$element', '$attrs', '$timeout']
 
 const mbgChartBarLine = {
   bindings: {
     chart: '=',
-    panels: '=',
-    loading: '=?',
     displayValues: '=?',
-    allowedToSee: '=?',
-    allowedCallBack: '&?',
   },
   template,
   controller: MbgChartBarLineController,

package/src/components/mbg-homescreen/charts/bar-line-pie/bar-line-pie.html

@@ -1,11 +1,5 @@
 <div class="mb-h-charts-container">
-
-    <mbg-chart-wrapper panels="$ctrl.panels"
-                       loading="$ctrl.loading"
-                       display-values="$ctrl.displayValues"
-                       allowed-to-see="$ctrl.allowedToSee"
-                       allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
-
+    <div class="home-chart"> </div>
     <div ng-show="!$ctrl.hasData()"
          class="empty">
         <svg xmlns:dc="http://purl.org/dc/elements/1.1/"

package/src/components/mbg-homescreen/charts/bar-line-pie/bar-line-pie.ts

@@ -261,16 +261,12 @@ class MbgChartBarLinePieController {
   }
 }
 
-MbgChartBarLinePieController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
+MbgChartBarLinePieController.$inject = ['$scope', '$element', '$attrs', '$timeout']
 
 const mbgChartBarLinePie = {
   bindings: {
     chart: '=',
-    panels: '=',
-    loading: '=?',
     displayValues: '=?',
-    allowedToSee: '=?',
-    allowedCallBack: '&?',
   },
   template,
   controller: MbgChartBarLinePieController,

package/src/components/mbg-homescreen/charts/line/line.html

@@ -1,11 +1,5 @@
 <div class="mb-h-charts-container">
-
-    <mbg-chart-wrapper panels="$ctrl.panels"
-                       loading="$ctrl.loading"
-                       display-values="$ctrl.displayValues"
-                       allowed-to-see="$ctrl.allowedToSee"
-                       allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
-
+    <div class="home-chart"> </div>
     <div ng-show="!$ctrl.hasData()"
          class="empty">
         <svg xmlns:dc="http://purl.org/dc/elements/1.1/"

package/src/components/mbg-homescreen/charts/line/line.scss

@@ -10,7 +10,6 @@ mbg-chart-line {
         overflow: hidden;
         user-select: none;
         position: relative;
-
         .empty {
             position: absolute;
             left: 0;

package/src/components/mbg-homescreen/charts/line/line.ts

@@ -45,7 +45,6 @@ class MbgChartLineController {
       this.$element[0].querySelector('.home-chart'),
       this.getHighchartConfig(),
     )
-
     this.hasData = () => {
       const finds =
         chartInstance.series.reduce((value, serie) => {
@@ -211,36 +210,28 @@ class MbgChartLineController {
     } else {
       arrayChartColors = this.chart.chartColor
     }
-
     series = arrayChartColors.map((chartColor, i) => {
-      const defaultStops = chartColor.fillColor
-        ? chartColor.fillColor
-        : [
-            [0, 'rgba(253,147,0,8)'],
-            [1, 'rgba(247,41,14,8)'],
-          ]
-      const props = chartColor.isDefault
-        ? {
-            lineWidth: 0,
-            lineColor: 'transparent',
-            zIndex: 1,
-            fillColor: {
-              linearGradient: [0, 0, 0, 500],
-              stops: defaultStops,
-            },
-            opacity: 0.5,
-          }
-        : {
-            lineWidth: 2,
-            fillColor: 'transparent',
-            zIndex: 2,
-          }
-
       return {
         type: 'areaspline',
+        lineWidth: 0,
         color: chartColor.fillColor ? chartColor.fillColor[0][1] : 'rgba(255,147,43,1)',
-
-        ...props,
+        lineColor: 'transparent',
+        marker: {
+          enabled: false,
+          lineColor: '#fff',
+          lineWidth: 2,
+        },
+        fillOpacity: 0.75,
+        opacity: 0.5,
+        fillColor: {
+          linearGradient: [0, 0, 0, 400],
+          stops: chartColor.fillColor
+            ? chartColor.fillColor
+            : [
+                [0, 'rgba(253,147,0,0.8)'],
+                [1, 'rgba(247,41,14,0.8)'],
+              ],
+        },
         name: this.chart.series[i].name,
         data: [],
       }
@@ -257,16 +248,12 @@ class MbgChartLineController {
   }
 }
 
-MbgChartLineController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
+MbgChartLineController.$inject = ['$scope', '$element', '$attrs', '$timeout']
 
 const mbgChartLine = {
   bindings: {
     chart: '=',
-    panels: '=',
-    loading: '=?',
     displayValues: '=?',
-    allowedToSee: '=?',
-    allowedCallBack: '&?',
   },
   template,
   controller: MbgChartLineController,

package/src/components/mbg-homescreen/index.ts

@@ -1,16 +1,15 @@
 import * as angular from 'angular'
 import { mbgHomescreen } from './mbg-homescreen'
-import { mbgCardPanel, mbgCardTypeone, mbgChartWrapper } from './cards'
+import { mbgCardTypeone } from './cards'
 import { mbgChartLine, mbgChartBarLine, mbgChartBarLinePie } from './charts'
 
 const mbgHomeScreenModule = angular
-  .module('mbg.components.mbgHomescreen', [])
-  .component('mbgHomescreen', mbgHomescreen)
-  .component('mbgCardTypeone', mbgCardTypeone)
-  .component('mbgChartLine', mbgChartLine)
-  .component('mbgChartBarLine', mbgChartBarLine)
-  .component('mbgChartBarLinePie', mbgChartBarLinePie)
-  .component('mbgCardPanel', mbgCardPanel)
-  .component('mbgChartWrapper', mbgChartWrapper).name
+    .module('mbg.components.mbgHomescreen', [])
+    .component('mbgHomescreen', mbgHomescreen)
+    .component('mbgCardTypeone', mbgCardTypeone)
+    .component('mbgChartLine', mbgChartLine)
+    .component('mbgChartBarLine', mbgChartBarLine)
+    .component('mbgChartBarLinePie', mbgChartBarLinePie)
+    .name
 
 export { mbgHomeScreenModule }

package/src/components/mbg-homescreen/mbg-homescreen.html

@@ -1,10 +1,5 @@
 <div class="mh-container"
-     ng-if="!$ctrl.loading">
-
-  <div class="overlay"
-       ng-if="$ctrl.openedFilters"
-       ng-click="$ctrl.closeFilters($event)"></div>
-
+     ng-show="!$ctrl.loading">
   <div class="mbg-h-tabs">
     <div class="mbg-h-t-tab"
          ng-repeat="tab in $ctrl.tabs"
@@ -12,59 +7,32 @@
          ng-class="{ 'active' : tab.active }">
       {{ tab.name }}
     </div>
-
-    <div class="homescreen-filter"
-         ng-click="$ctrl.onToggleFilters($event)">
-      <i class="fa fa-filter"
-         aria-hidden="true"></i>
-    </div>
   </div>
-
-
   <div class="homescreen-filters"
-       ng-if="$ctrl.openedFilters && $ctrl.tabs && $ctrl.tabs[$ctrl.activeIndex].active && $ctrl.tabs[$ctrl.activeIndex].filters">
-    <span>
-      Período
-    </span>
-    <div class="homescreen-filters-body">
-
-      <div ng-repeat="item in $ctrl.tabs[$ctrl.activeIndex].filters">
-        <button ng-class="{'active': item.active}"
-                ng-if="item.type === 'BUTTON'"
-                ng-click="$ctrl.selectFilter(item)">{{item.name}}</button>
-        <div ng-if="item.type === 'DATE'"
-             style="margin: 0 5px 14px 0;">
-          <mbg-input-date ng-model="item.value"
-                          ng-change="$ctrl.onChangeFilter()"
-                          calendar="true"
-                          placeholder="{{ item.placeholder }}"></mbg-input-date>
-        </div>
+       ng-if="$ctrl.tabs && $ctrl.tabs[$ctrl.activeIndex].active && $ctrl.tabs[$ctrl.activeIndex].filters">
+    <div ng-repeat="item in $ctrl.tabs[$ctrl.activeIndex].filters">
+      <button ng-class="{'active': item.active}"
+              ng-if="item.type === 'BUTTON'"
+              ng-click="$ctrl.selectFilter(item)">{{item.name}}</button>
+      <div ng-if="item.type === 'DATE'"
+           style="margin: 0 5px 14px 0;">
+        <mbg-input-date ng-model="item.value"
+                        ng-change="$ctrl.onChangeFilter()"
+                        calendar="true"
+                        placeholder="{{ item.placeholder }}"></mbg-input-date>
       </div>
     </div>
 
   </div>
-
   <div class="charts">
     <mbg-chart-line chart="$ctrl.chart"
-                    panels="$ctrl.cards"
                     display-values="$ctrl.displayValues"
-                    loading="$ctrl.loading"
-                    allowed-to-see="$ctrl.allowedToSee"
-                    allowed-call-back="$ctrl.allowedCallBack()"
                     ng-if="$ctrl.chart && $ctrl.chart.type == 'line'"></mbg-chart-line>
     <mbg-chart-bar-line chart="$ctrl.chart"
-                        panels="$ctrl.cards"
                         display-values="$ctrl.displayValues"
-                        loading="$ctrl.loading"
-                        allowed-to-see="$ctrl.allowedToSee"
-                        allowed-call-back="$ctrl.allowedCallBack()"
                         ng-if="$ctrl.chart && $ctrl.chart.type == 'barline'"></mbg-chart-bar-line>
     <mbg-chart-bar-line-pie chart="$ctrl.chart"
-                            panels="$ctrl.cards"
                             display-values="$ctrl.displayValues"
-                            loading="$ctrl.loading"
-                            allowed-to-see="$ctrl.allowedToSee"
-                            allowed-call-back="$ctrl.allowedCallBack()"
                             ng-if="$ctrl.chart && $ctrl.chart.type == 'barlinepie'"></mbg-chart-bar-line-pie>
     <div class="display-values">
       <a ng-show="!$ctrl.displayValues"
@@ -73,6 +41,13 @@
          ng-click="$ctrl.handleDisplayValues()"><i class="fas fa-eye-slash"></i> <span>Esconder valores</span></a>
     </div>
   </div>
+  <div class="mbg-h-card-container">
+    <mbg-card-typeone ng-repeat="card in $ctrl.cards"
+                      allowed-to-see="$ctrl.allowedToSee"
+                      display-values="$ctrl.displayValues"
+                      allowed-call-back="$ctrl.allowedCallBack()"
+                      card="card"></mbg-card-typeone>
+  </div>
 
 </div>
 
@@ -85,4 +60,18 @@
   <div class="fake-chart">
     <mbg-skeleton></mbg-skeleton>
   </div>
+  <div class="mbg-h-card-container">
+    <div class="fake-card">
+      <mbg-skeleton></mbg-skeleton>
+    </div>
+    <div class="fake-card">
+      <mbg-skeleton></mbg-skeleton>
+    </div>
+    <div class="fake-card">
+      <mbg-skeleton></mbg-skeleton>
+    </div>
+    <div class="fake-card">
+      <mbg-skeleton></mbg-skeleton>
+    </div>
+  </div>
 </div>

package/src/components/mbg-homescreen/mbg-homescreen.scss

@@ -1,13 +1,4 @@
 mbg-homescreen {
-  .overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9;
-  }
-
   .charts {
     .display-values {
       display: flex;
@@ -16,7 +7,6 @@ mbg-homescreen {
       transition: all 300ms ease;
       opacity: 0;
       cursor: pointer;
-      width: 90%;
 
       a {
         color: var(--neutral2);
@@ -28,55 +18,15 @@ mbg-homescreen {
 
     &:hover {
       .display-values {
-        transform: translateY(-24px);
+        transform: translateY(10px);
         opacity: 1;
       }
     }
   }
-
-  .homescreen-filter{
-    position: absolute;
-    right: 3px;
-    top: .5px;
-    padding: 10px;
-    background:  var(--primary);
-    border-radius: 100px;
-    width: 48px;
-    height: 48px;
-    text-align: center;
-    font-size: 30px;
+  .homescreen-filters {
     display: flex;
-    justify-content: center;
     align-items: center;
-    color: white;
-    cursor: pointer;
-  }
-
-  .homescreen-filters {
-    position: absolute;
-    right: 24px;
-    top: 74px;
-    z-index: 10;
-
-    span {
-      color: var(--neutral2);
-      padding: 12px;
-      display: inline-block;
-    }
-
-    background-color: white;
-    border-radius: 10px;
-    height: 100px;
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
-    
-    .homescreen-filters-body {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-      padding: 0 12px;
-    }
-    
+    justify-content: center;
 
     button {
       height: 35px;
@@ -84,6 +34,8 @@ mbg-homescreen {
       color: var(--primary);
       background-color: #fff;
       border: 2px solid var(--primary);
+      margin-right: 14px;
+      margin-bottom: 14px;
       transition: all 200ms ease;
       border-radius: 35px;
 
@@ -96,7 +48,7 @@ mbg-homescreen {
   .mh-container {
     width: 100%;
     height: auto;
-    padding: 10px 2px;
+    padding: 15px;
 
     .mh-panel-container {
       background-color: white;

package/src/components/mbg-homescreen/mbg-homescreen.ts

@@ -14,15 +14,8 @@ class MbgHomescreenController {
   private displayValues: boolean
   private activeIndex: number
   private activeFilter: any
-  private openedFilters = false
-  private panels: {
-    icon: string
-    description: string
-    value: number
-    isCurrency: boolean
-  }[]
 
-  constructor(public $scope, public $element, public $attrs, public $timeout) {}
+  constructor(public $scope, public $element, public $attrs, public $timeout) { }
 
   $onInit() {
     this.$scope.$watch('$ctrl.config', (data) => {
@@ -36,17 +29,6 @@ class MbgHomescreenController {
     })
   }
 
-  onToggleFilters(event) {
-    event.stopPropagation()
-    this.openedFilters = !this.openedFilters
-  }
-
-  closeFilters() {
-    if (this.openedFilters) {
-      this.openedFilters = false
-    }
-  }
-
   onChangeFilter() {
     this.$timeout(() => {
       if (this.tabs[this.activeIndex].executeFilter) {
@@ -65,7 +47,6 @@ class MbgHomescreenController {
       item.active = true
       if (this.tabs[this.activeIndex].executeFilter) {
         this.tabs[this.activeIndex].executeFilter(this.config)
-        this.openedFilters = false
       }
     }
   }

package/src/components/mbg-status-label/mbg-status-label.ts

@@ -71,7 +71,6 @@ class MbgStatusLabelController {
         this.label = 'Inutilizada'
         break
       case 'TODO':
-      case 'OPEN':
         this.label = 'Aberta'
         break
       case 'PROCESSED':
@@ -82,9 +81,6 @@ class MbgStatusLabelController {
         break
       case 'NOT_PROCESSED':
         this.label = 'Não processado'
-        break
-      default:
-        this.label = undefined
     }
   }
 
@@ -120,7 +116,6 @@ class MbgStatusLabelController {
       case 'ENVIADA':
       case 'NAO_ENVIADA':
       case 'TODO':
-      case 'OPEN':
         this.labelClass = 'light'
         break
       case 'REVERSED':
@@ -131,8 +126,6 @@ class MbgStatusLabelController {
       case 'IN_PROGRESS':
         this.labelClass = 'primary'
         break
-      default:
-        this.labelClass = undefined
     }
   }
 }

package/src/components/mbg-homescreen/cards/chart-wrapper/chart-wrapper.html

@@ -1,17 +0,0 @@
-<div class="mb-h-chart-wrapper">
-    <div class="home-chart"> </div>
-    <div class="divider"></div>
-    <div class="home-cards">
-        <mbg-card-panel ng-repeat="panel in $ctrl.panels"
-                        loading="$ctrl.loading"
-                        display-values="$ctrl.displayValues"
-                        allowed-to-see="$ctrl.allowedToSee"
-                        allowed-call-back="$ctrl.allowedCallBack()"
-                        panel="panel">
-            <i class="{{ panel.icon }}"
-               aria-hidden="true"></i>
-        </mbg-card-panel>
-
-    </div>
-
-</div>

package/src/components/mbg-homescreen/cards/chart-wrapper/chart-wrapper.scss

@@ -1,30 +0,0 @@
-mbg-chart-wrapper {
-    .mb-h-chart-wrapper {
-        display: flex;
-        align-items: center;
-
-        .home-chart {
-            height: 400px;
-            width: 100%;
-            overflow: hidden;
-            user-select: none;
-        }
-
-        .divider {
-            height: 360px;
-            width: 1px;
-            background: var(--color2);
-        }
-
-        .home-cards {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-evenly;
-
-            width: 300px;
-            padding: 8px;
-            gap: 4px;
-            height: 400px;
-        }
-    }
-}

package/src/components/mbg-homescreen/cards/chart-wrapper/chart-wrapper.ts

@@ -1,22 +0,0 @@
-import './chart-wrapper.scss'
-import template from './chart-wrapper.html'
-class MbgChartWrapperController {
-  constructor() {}
-  $onInit() {}
-}
-
-MbgChartWrapperController['$inject'] = []
-
-const mbgChartWrapper = {
-  bindings: {
-    loading: '=?',
-    panels: '=',
-    displayValues: '=?',
-    allowedToSee: '=?',
-    allowedCallBack: '&?',
-  },
-  template,
-  controller: MbgChartWrapperController,
-}
-
-export { mbgChartWrapper }

package/src/components/mbg-homescreen/cards/panel/panel.html

@@ -1,53 +0,0 @@
-<div class="mbg-h-c-panel">
-    <div class="panel-container">
-        <div class="panel-icon"
-             ng-transclude></div>
-        <div class="panel-content">
-            <div class="description-container">
-                <p class="description">{{ $ctrl.panel.text }}</p>
-                <div class="mbg-h-c-tone-s-icon"
-                     ng-click="$ctrl.toggleShowValue()">
-                    <i ng-if="$ctrl.hideValue === true"
-                       disable-animate
-                       class="far fa-eye"></i>
-                    <i ng-if="$ctrl.hideValue !== true"
-                       disable-animate
-                       class="far fa-eye-slash"></i>
-                </div>
-            </div>
-            <!-- quando valores estão visiveis -->
-            <div class="footer"
-                 ng-show="!$ctrl.hideValue"
-                 disable-animate>
-                <p class="value"
-                   ng-class="{'positive': $ctrl.panel.isCurrency && $ctrl.panel.value >= 0, 
-                                'negative': $ctrl.panel.isCurrency && $ctrl.panel.value < 0}"
-                   ng-if="$ctrl.panel.isCurrency">{{ $ctrl.panel.value || 0 | currency: 'R$ ' }}
-                </p>
-                <p class="value"
-                   ng-if="!$ctrl.panel.isCurrency">{{ $ctrl.panel.value || 0}}
-                </p>
-                <span ng-if="$ctrl.panel.value > 0"
-                      class="positive"><i class="fa fa-arrow-up"
-                       aria-hidden="true"></i></i></span>
-                <span ng-if="!$ctrl.panel.positive < 0"
-                      class="negative"><i class="fa fa-arrow-down"
-                       aria-hidden="true"></i></span>
-            </div>
-
-            <!-- quando valores estão ocultos -->
-            <div class="footer"
-                 ng-show="$ctrl.hideValue"
-                 disable-animate>
-                <p class="value">{{ $ctrl.randomEmoji }}</p>
-
-                <span ng-if="$ctrl.panel.value > 0"
-                      class="positive"><i class="fa fa-arrow-up"
-                       aria-hidden="true"></i></i></span>
-                <span ng-if="!$ctrl.panel.positive < 0"
-                      class="negative"><i class="fa fa-arrow-down"
-                       aria-hidden="true"></i></span>
-            </div>
-        </div>
-    </div>
-</div>

package/src/components/mbg-homescreen/cards/panel/panel.scss

@@ -1,74 +0,0 @@
-mbg-card-panel {
-  .mbg-h-c-panel {
-    border: 1px solid var(--neutral3);
-    border-radius: 12px;
-    padding: 8px;
-
-    .panel-container {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-
-      color: var(--neutral2);
-
-      .panel-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background-color: var(--color2);
-        color: var(--neutral2);
-        padding: 4px;
-      }
-
-      .panel-content {
-        flex-grow: 1;
-        color: var(--titleColor);
-
-        .description-container {
-          display: flex;
-          justify-content: space-between;
-
-          .mbg-h-c-tone-s-icon {
-            transition: opacity 500ms ease;
-            opacity: 0;
-          }
-        }
-
-        .description {
-          font-size: 14px;
-        }
-
-        .footer {
-          display: flex;
-          align-items: center;
-
-          .value {
-            flex-grow: 1;
-            font-weight: bold;
-            line-height: 1.2;
-          }
-        }
-      }
-    }
-    .positive {
-      color: var(--success);
-    }
-
-    .negative {
-      color: var(--error);
-    }
-
-    &:hover {
-      .panel-container {
-        .panel-content {
-          .mbg-h-c-tone-s-icon {
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/mbg-homescreen/cards/panel/panel.ts

@@ -1,74 +0,0 @@
-import './panel.scss'
-import template from './panel.html'
-
-class MbgCardPanelController {
-  public loading
-  public panel
-  public hideValue: boolean
-  public randomEmoji: string
-  public allowedToSee: boolean
-  private allowedCallBack: Function
-
-  constructor(public $scope, public $element, public $attrs, public $timeout) {}
-  $onInit() {
-    this.syncValue()
-    this.$scope.$watch('$ctrl.displayValues', (data) => {
-      this.randomEmoji = this.generateRandomEmoji()
-      this.hideValue = !data
-    })
-
-    this.randomEmoji = this.generateRandomEmoji()
-
-    this.panel.setNewValue = (value) => {
-      this.setValue(value)
-    }
-  }
-
-  setValue = (value) => {
-    this.$timeout(() => {
-      this.panel.value = value
-      this.panel.loading = false
-    }, 1000)
-  }
-
-  syncValue() {
-    if (this.panel.sync) {
-      this.panel.loading = true
-      this.panel.sync(this)
-    }
-  }
-
-  generateRandomEmoji = () => {
-    const emojis = ['👏👏👏', '🙈🙉🙊', '🎉🎉🎉', '😎😎😎', '🔐🔐🔐', '🚀🚀🚀', '🤖🤖🤖']
-    const rand = Math.floor(Math.random() * emojis.length)
-    return emojis[rand]
-  }
-
-  toggleShowValue = () => {
-    if (this.allowedToSee !== undefined && !this.allowedToSee) {
-      if (this.allowedCallBack) {
-        this.allowedCallBack()
-      }
-      return
-    }
-    this.randomEmoji = this.generateRandomEmoji()
-    this.hideValue = !this.hideValue
-  }
-}
-
-MbgCardPanelController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
-
-const mbgCardPanel = {
-  transclude: true,
-  bindings: {
-    loading: '=?',
-    panel: '=',
-    displayValues: '=?',
-    allowedToSee: '=?',
-    allowedCallBack: '&?',
-  },
-  template,
-  controller: MbgCardPanelController,
-}
-
-export { mbgCardPanel }