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)
}