Represents an item in a (vertical) list of "cards," following a search/query.

Params Security Search

card-type

A constant object that makes reference to the state name and the state id to use

card-item

An object with following properties:

• id
• name
• active
• attributes
  • wrap [bool - optional default false]
  • label [text - optional]
  • value [text]

Gift Card Search Card

A "vertical" list of cards. This component provides a list item component that can be used to display gift card data.

HTML

<div ng-controller="GiftCardSearchCardExampleController as ctrl" class="t-content c-content">
    <div style="width: 50%; max-width: 300px; background-color: white;">
        <inv-gift-card-search-card
            id="ctrl.id"
            card-title="ctrl.cardTitle"
            name="ctrl.name"
            email="ctrl.email"
            status="ctrl.status"
            card-title-clicked="ctrl.cardTitleClicked">
        </inv-gift-card-search-card>
    </div>
</div>
<div ng-controller="GiftCardSearchCardExampleController as ctrl" ng-init="ctrl.status=true" class="t-content c-content">
    <div style="width: 50%; max-width: 300px; background-color: white;">
        <inv-gift-card-search-card
            id="ctrl.id"
            card-title="ctrl.cardTitle"
            name="ctrl.name"
            email="ctrl.email"
            status="ctrl.status"
            card-title-clicked="ctrl.cardTitleClicked">
        </inv-gift-card-search-card>
    </div>
</div>

Contract Search Card

A card that show contract details

HTML

<div ng-controller="ContractSearchCardExampleController as ctrl" class="t-content c-content">
    <div style="width: 50%; max-width: 300px; background-color: white;">
        <inv-contract-search-card
            contract="ctrl.contract"
            card-title-clicked="ctrl.cardTitleClicked"
            description-length-limit="200"
        ></inv-contract-search-card>
    </div>
</div>

Customer Search Card

A "vertical" list of cards. It uses the Subscriber Status component to show active or inactive.

HTML

<div ng-controller="CustomerSearchCardExampleController as ctrl" class="t-content c-content">
  <div style="width: 50%; max-width: 300px; background-color: white;">
    <inv-customer-search-card customer="ctrl.customer" customer-accounts="ctrl.customerAccounts"
                              card-title-clicked="ctrl.cardTitleClicked"
                              more-action-menu-item-selected="ctrl.moreActionMenuItemSelected"
                              popout-selected="ctrl.popoutSelected"></inv-customer-search-card>
  </div>
</div>

Security Search Card

A "vertical" list of cards. It uses the Simple Status component to show active or inactive.

HTML

<div ng-controller="SecuritySearchCardExampleController as ctrl" class="t-content c-content">
    <div style="width: 50%; max-width: 300px; background-color: white;">
        <inv-security-search-card card-item="ctrl.cardItem"
                         card-title-clicked="ctrl.cardTitleClicked"
                         card-type="ctrl.cardType"
                         more-action-menu-item-selected="ctrl.moreActionMenuItemSelected"
                         popout-selected="ctrl.popoutSelected"></inv-security-search-card>
    </div>
</div>

Operation Search Card

A "vertical" list of cards. It uses the Task Status Icon component to show operation status.

HTML

<div ng-controller="OperationSearchCardExampleController as ctrl" class="t-content c-content">
    <div style="width: 50%; max-width: 300px; background-color: white;">
        <inv-operation-search-card operation="ctrl.operation"
                                  card-title-clicked="ctrl.cardTitleClicked"
                                  more-action-menu-item-selected="ctrl.moreActionMenuItemSelected"
                                  popout-selected="ctrl.popoutSelected"></inv-operation-search-card>
    </div>
</div>