Toggle Card

Display card and toggle card details.

Features/Functionality

Initially display open card with some details.
Click on show more, more details will be display.
Click on toggle icon, card details will be toggle.
Component is responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependency

jquery
font awesome
shared styles
shared scripts

HTML Structure

<require from="{user_path}/toggle-cards/toggle-card"></require>
<cst-toggle-card title.bind= {title} item.bind="{item}" display-label.bind={displayLabel} item-template.bind="{itemTemplate}" options.bind="{options}"></cst-toggle-card>

Bindable Properties

Property	Data Type	Required	Description
title	string	Yes	Title of the card
item	object	Yes	Data to be passed to component.
displayLabel	object	No	Display item with the key name
itemTemplate	object	No	Arrangement of the item in row and column form and display rowCount on load
options	object	No	Basic component options

Structure of bindable properties

item

item = {
    tenderName: 'Ten2412',
    lineNumber: 'Lin2412',
    description: '',
    tenderCover: 'Open Stage',
    stage: 'Opened',
    cot: 'TESTDEP21',
    costOpenDate: '17-03-2020',
    estimateCost: '200000'
}

displayLabel

displayLabel = {
    tenderName: 'Tender Name',
    lineNumber: 'Line Number',
    description: 'Description',
    tenderCover: 'Tender Cover',
    stage: 'Stage',
    cot: 'COT'
    costOpenDate: 'Actual Cost Open Date',
    estimateCost: 'Estimate Cost'
}

itemTemplate

itemTemplate = {
    arrangement : {
        small: [],
        medium: [],
        large: [
            "tenderName, lineNumber",       // In this row two columns     
            "description",                  // description in one row
            "tenderCover, stage, cot",      // In this row three columns
            "costOpenDate * 2, estimateCost"// In this row three columns but costOpenDate will take 2 columns space
        ]
    },
    rowCount:''         // Display rows on open card
}

Rows are separated by comma(,)
Columns are also separated by comma in side the row item
'*' with digit split the column

options

options = {
    style: 'styleCenterStep',  // styleCenterStep, styleRegular, styleLine, styleRightTie           
    state: {
      closed:''             // On load card should open or close, default opened
    },
    labelIcons: {
      moreLabel: '',        // Label to display for show more
      moreIcon: '',         // Icon name for more
      lessLabel: '',        // Label to display for show less
      lessIcon: ''          // Icon name for less
    },          
    hide: {
      head:'',               // To hide header of toggle card, default false,
      toggle: ''             // Toggle card, default false
    },
    pageLabel: {},          // Override page labels
    pageColorData: {}       // Override css colour property 
}

CSS Overriding

Following classes are given to override CSS:
- .cst-toggle-card-container-override : Container Class
- .cst-toggle-card-element-override: Element Class

Note

While giving the classes in page, give them in nested structure.

Rules

Bind events with jquery if bind method is given.
Use disabled property as external property so that change can be handled.
Do not use classes as bindable properties, Instead give a class overridable class name to div which we want to override and in page give the class inside the component div.
Always keep overridable, id and label property in options.
In Js file, the bindable properties names are changed.

Working Example

HTML

<template>
  <require from="./components/toggle-cards/toggle-card"></require>
  <div>
    <cst-toggle-card title.bind="title" item.bind="item" display-label.bind=displayLabel item-template.bind="itemTemplate" options.bind="options"></cst-toggle-card>
  </div>
</template>

CSS

.cst-ex-toggle-card {
    .cst-toggle-card-element-override {
        width: 200px !important;
        height: 40px !important;
        background-color: white !important;
        color: blue !important;
    }
}

class MyCls{
    constructor(){
        this.title = 'Tender details';
        this.item = {
            tenderName: 'Ten2412',
            lineNumber: 'Lin2412',
            description: '',
            tenderCover: 'Open Stage',
            stage: 'Opened',
            cot: 'TESTDEP21',
            costOpenDate: '17-03-2020',
            estimateCost: '200000'
        };
        this.displayLabel = {
            tenderName: 'Tender Name',
            lineNumber: 'Line Number',
            description: 'Description',
            tenderCover: 'Tender Cover',
            stage: 'Stage',
            cot: 'COT'
            costOpenDate: 'Actual Cost Open Date',
            estimateCost: 'Estimate Cost'
        };
        this.itemTemplate = {
            arrangement : {
                small: [
                    "tenderName",
                    "lineNumber",
                    "description",
                    "tenderCover",
                    "stage",
                    "cot"
                    "costOpenDate",
                    "estimateCost"
                ],
                medium: [
                    "tenderName, lineNumber",       
                    "description",                  
                    "tenderCover, stage",      
                    "cot, estimateCost",
                    "costOpenDate"
                ],
                large: [
                    "tenderName, lineNumber",       
                    "description",                  
                    "tenderCover, stage, cot",      
                    "costOpenDate*2, estimateCost"
                ]
            },
            rowCount: 2
        };
        this.options = {
            style: 'style-center',  
            isClosed: true,            
        };
    }
}
export { MyCls }