callapsible-card

Callapsible Card

Callapsible Card is a simple material card with the ability to hide/show content Action button is provided if hidden content is provided. Animations included.

Expanded/Callapsed states are maintained on reload An attribute now can set the default of the initial state

Installation

npm install callapsible-card

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    CallapsibleModule
  ],

Selector Usage

This is the basic selector with no content, header or hiddend content

This selector uses content projection - the following selector can be projected into the component - the element does not matter.

Content Projection Selectors

Selector header - this will project your content into the header area

<div header></div>

Selector showContent - this will project your content into the content area

<div showContent></div>

Selector hiddenContent - this will project your content into the hidden content area

<div hiddenContent></div>

Please note that is you do not provide hidden content - the actions will not appear thus displaying the card as a regular card compoent.

Here is a sample using all content projection selectors

<wav-collapsible-card>
  <div header fxFlex>
    <mat-toolbar>
        <span fxFlex class="title">Title</span>
        <button mat-icon-button>
            <mat-icon class="fade">info</mat-icon>
        </button>
    </mat-toolbar>
  </div>

  <div showContent style="padding: 16px;">
    <div fxFlex style="padding-top: 8px;">There is no configurations defined in this group</div>
  </div>

  <div hiddenContent style="padding: 16px;">
    <div fxFlex style="padding-top: 8px;">There is no configurations defined in this group</div>
    <button mat-stroked-button color="primary">Create New Config</button>
  </div>

</wav-collapsible-card>

Inputs

The following Inputs are available

Input	Type	Defaut	Description
action	ButtonActionState	More, Less	customization for the More or Less
id	STRING	''	ID for Tag on Selected event feedback info

ButtonActionState

ButtonActionState Model allows for the customization for the More or Less button text { expanded: 'More', collapsed: 'Less' }

Outputs

Event	Type	Description
selected	SelectedState	show/hide action when clicked - returns state and id

This event returns SelectedState that will look like the following structure

{ id: 'sample', state: true }

The ID is the reference string you assign the input

The STATE returns whether the card is expanded or callapsied

Attributes

• expanded - initial expanded state to true
• actionDivider - divider above actions
• disableActions - disables the actions for custom action implementation
• cacheState - retains expanded/callapsed states on reload
• noPadding - removes all padding in Card
• elevation - height of elevation (shadow)

Apply any number of attributes to the component like this

<wav-collapsible-card expanded actionDivider cacheState>

ViewChild Accessors

To access events to connect to your own behaviours for expand and collapse, connect to the component as a ViewChild and the following functions are available.

Function	Description
toggle()	changes the state of the current expanded/collapsed state
expand()	changes the state to expanded
collapse()	changes the state to collapse

FormControl

formControlName="comments"

countrySelection = this.fb.group({
  comments: [null],
})

Options

<div *ngFor="let item of searchData" style="margin-bottom: 16px; padding: 8px;">
  <wav-collapsible-card
    [elevation]="0"
    [action]="action"
    [actionDivider]="false"
    [noPadding]="true"
    [id]="item.value"
    (selected)="onSelected($event)"
  >
    <div header fxFlex>
      <mat-toolbar>
          <span fxFlex class="title">Title</span>
          <button mat-icon-button>
              <mat-icon class="fade">info</mat-icon>
          </button>
      </mat-toolbar>
    </div>

    <div showContent style="padding: 16px;">
      <div fxFlex style="padding-top: 8px;">There is no configurations defined in this group</div>
    </div>

    <div hiddenContent style="padding: 16px;">
      <div fxFlex style="padding-top: 8px;">There is no configurations defined in this group</div>
      <button mat-stroked-button color="primary">Create New Config</button>
    </div>

  </wav-collapsible-card>
</div>

Below is a sample of a function capturing the selected event and the customization of the action text for the button to callapse/expand

action = { expanded: 'MORE', collapsed: 'LESS'}


onSelected(event: SelectedState) {
  console.log('selected', event)
}