import { Component } from '@angular/core' ; @ Component ( { selector : 'app-interface-cards' , template : `
    <ui-page>
      <ui-page-title
        title="Cards"
        icon="fe fe-box">
      </ui-page-title>

      <div class="row">
        <div class="col-md-6 col-xl-4" *ngFor="let card of cards">
          <ui-card
            [allowFullScreen]="card.allowFullScreen"
            [collapsed]="card.collapsed"
            [header]="card.header"
            [footer]="card.footer"
            [status]="card.status"
            [statusLeft]="card.statusLeft">
            <ui-card-body>
              {{ bodyText }}
            </ui-card-body>
          </ui-card>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-6" *ngFor="let card of formCards">
          <ui-card
            (action)="handleAction($event)"
            [header]="card.header"
            [buttons]="card.buttons"
            [search]="card.search">
            <ui-card-body>
              {{ bodyText }}
            </ui-card-body>
          </ui-card>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 col-xl-4" *ngFor="let card of moreCards">
          <ui-card
            (action)="handleAction($event)"
            [alert]="card.alert"
            [buttons]="card.buttons"
            [header]="card.header">
            <ui-card-body
              [loader]="card.loader">
              {{ bodyText }}
            </ui-card-body>
          </ui-card>
        </div>
      </div>
    </ui-page>
  ` , styles : [ ] , } ) export class InterfaceCardsComponent { public bodyText = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, 
    itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, 
    deserunt eaque error nulla temporibus!
  ` ; public cards = [ { header : 'This is a standard card' , footer : 'This is standard card footer' , } , { header : 'Built card' , } , { header : 'Card blue' , status : 'blue' , } , { header : 'Card green' , status : 'green' , } , { header : 'Card orange' , status : 'orange' , } , { header : 'Card red' , status : 'red' , } , { header : 'Card yellow' , status : 'yellow' , } , { header : 'Card teal' , status : 'teal' , } , { header : 'Card purple' , status : 'purple' , } , { header : 'Card status on left side' , status : 'blue' , statusLeft : true , } , { header : 'Initial collapsed card' , collapsed : true , } , { header : 'With additional fullscreen button\n' , allowFullScreen : true , } , ] ; public formCards = [ { header : 'Panel with custom buttons' , buttons : [ { text : 'Action 1' , type : 'button' , action : 'ACTION_1' , payload : 'ACTION_1_PAYLOAD' , } , { text : 'Action 2' , type : 'button' , action : 'ACTION_2' , payload : 'ACTION_2_PAYLOAD' , } , ] , } , { header : 'Card with search form\n' , search : { placeholder : 'Search something' , value : '' , } , buttons : [ ] , } , ] ; public moreCards = [ { header : 'Card with alert' , alert : { type : 'success' , text : 'Adding action was successful' , } , } , { header : 'Card with alert' , alert : { type : 'danger' , text : 'Adding action failed' , } , } , { header : 'Card with switch' , buttons : [ { type : 'switch' , checked : true , payload : 'MY_SWITCH' , } , ] , } , { header : 'Card with loader' , loader : true , } , ] ; public handleAction ( $event ) { console . log ( $event ) ; } }