# Card Widget Plugin

The CardWidget plugin provides collapse, expand, remove, and maximize functionality for card components.

##### Usage

This plugin is activated via data attributes on buttons inside a `.card` element.

Data API

Add `data-lte-toggle="card-collapse"` to toggle card body visibility, `data-lte-toggle="card-remove"` to remove the card, or `data-lte-toggle="card-maximize"` to maximize it.

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Card Title</h3>
        <div class="card-tools">
          <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
            <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
          </button>
          <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize" title="Maximize">
            <i class="bi bi-fullscreen"></i>
          </button>
          <button type="button" class="btn btn-tool" data-lte-toggle="card-remove" title="Remove">
            <i class="bi bi-x-lg"></i>
          </button>
        </div>
      </div>
      <div class="card-body">Card content here.</div>
      <div class="card-footer">Card footer</div>
    </div>

##### Events

The plugin dispatches the following events on the trigger element:

Event | Description
--- | ---
`collapsed.lte.card-widget` | Fired when the card body is collapsed.
`expanded.lte.card-widget` | Fired when the card body is expanded.
`remove.lte.card-widget` | Fired when the card is removed.
`maximized.lte.card-widget` | Fired when the card is maximized.
`minimized.lte.card-widget` | Fired when the card is minimized (restored from maximized).

##### CSS Classes

Class | Description
--- | ---
`collapsed-card` | Applied to the card when collapsed.
`maximized-card` | Applied to the card when maximized.

##### Configuration

The plugin reads no `data-*` configuration attributes. To customize behaviour, instantiate it programmatically and pass a config:

Option | Default | Description
--- | --- | ---
`animationSpeed` | `500` | Slide animation duration in milliseconds.
`collapseTrigger` | `[data-lte-toggle="card-collapse"]` | CSS selector for collapse buttons.
`removeTrigger` | `[data-lte-toggle="card-remove"]` | CSS selector for remove buttons.
`maximizeTrigger` | `[data-lte-toggle="card-maximize"]` | CSS selector for maximize buttons.

##### Programmatic API

    import { CardWidget } from "admin-lte"

    const card = document.querySelector("#chart-card")
    const widget = new CardWidget(card, { animationSpeed: 250 })

    widget.maximize()     // expand to fullscreen
    widget.collapse()     // hide body and footer
    widget.expand()       // restore from collapsed
    widget.remove()       // animate out and remove from DOM
    widget.toggle()       // expand / collapse based on current state
    widget.toggleMaximize()  // maximize / minimize based on current state

###### Methods

Method | Returns | Description
--- | --- | ---
`collapse()` | `void` | Slides up body and footer, adds `collapsed-card`. Fires `collapsed.lte.card-widget`.
`expand()` | `void` | Slides down body and footer, removes `collapsed-card`. Fires `expanded.lte.card-widget`.
`toggle()` | `void` | Calls `collapse()` or `expand()` based on the `collapsed-card` class.
`maximize()` | `void` | Sets the card to fixed fullscreen positioning, adds `maximized-card`. Fires `maximized.lte.card-widget`.
`minimize()` | `void` | Restores original size, removes `maximized-card`. Fires `minimized.lte.card-widget`.
`toggleMaximize()` | `void` | Calls `maximize()` or `minimize()` based on the `maximized-card` class.
`remove()` | `void` | Animates the card out and removes it from the DOM. Fires `remove.lte.card-widget`.

##### Notes

- Nested cards are handled correctly: collapsing a parent card does not affect child cards.
- Maximizing a card also adds `maximized-card` to `<html>` so global styles can react.
- A card that’s collapsed when you maximize it remembers that — the `was-collapsed` class tracks this state.