{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a1",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a2",
   "metadata": {},
   "source": [
    "The `Clickable` wrapper adds click interaction to any child component. It wraps a single child element with a clickable area, providing a `clicks` counter and an `on_click` callback mechanism. Optionally renders a Material UI ripple effect on click.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`object`** (Viewable): The child component to wrap.\n",
    "* **`clicks`** (int): Number of clicks. Increments each time the component is clicked.\n",
    "* **`disabled`** (bool): Whether the clickable area is disabled. Default is False.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`disable_ripple`** (bool): Whether to disable the ripple effect on click. Default is False.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API for advanced customization.\n",
    "- **`theme_config`** (dict): Theming API for consistent design system integration.\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b1",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "Wrap any component to make it clickable:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b2",
   "metadata": {},
   "outputs": [],
   "source": [
    "clickable = pmui.Clickable(\n",
    "    pmui.Card(\n",
    "        title=\"Click me!\", elevation=3, width=200, height=100, collapsible=False\n",
    "    )\n",
    ")\n",
    "\n",
    "clickable"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c1",
   "metadata": {},
   "source": [
    "### Click Counter\n",
    "\n",
    "The `clicks` parameter increments each time the wrapped element is clicked:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c2",
   "metadata": {},
   "outputs": [],
   "source": [
    "clickable.clicks"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d1",
   "metadata": {},
   "source": [
    "### Callback\n",
    "\n",
    "Use `on_click` to register a callback, either as a constructor argument or method call:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d2",
   "metadata": {},
   "outputs": [],
   "source": [
    "status = pmui.Typography(\"Not clicked yet\")\n",
    "\n",
    "clickable = pmui.Clickable(\n",
    "    pmui.Card(title=\"Click this card\", height=100, width=250),\n",
    "    on_click=lambda e: status.param.update(object=f\"Clicked {e.new} times\")\n",
    ")\n",
    "\n",
    "pmui.Column(clickable, status)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e1",
   "metadata": {},
   "source": [
    "### Disable Ripple\n",
    "\n",
    "Set `disable_ripple=True` to remove the ripple animation on click while keeping the click behavior:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e2",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(\n",
    "    pmui.Clickable(\n",
    "        pmui.Paper(pmui.Column(pn.pane.Str(\"With ripple\")), elevation=2, width=150, height=80),\n",
    "    ),\n",
    "    pmui.Clickable(\n",
    "        pmui.Paper(pmui.Column(pn.pane.Str(\"No ripple\")), elevation=2, width=150, height=80),\n",
    "        disable_ripple=True,\n",
    "    ),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f1",
   "metadata": {},
   "source": [
    "### Disabled\n",
    "\n",
    "Set `disabled=True` to prevent clicks:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f2",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Clickable(\n",
    "    pmui.Paper(pmui.Column(pn.pane.Str(\"Can't click me\")), elevation=2, width=200, height=80),\n",
    "    disabled=True,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "g1",
   "metadata": {},
   "source": [
    "### Responsive Sizing\n",
    "\n",
    "When the wrapped component uses a responsive `sizing_mode`, set the same on the `Clickable` so the child fills the available space:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "g2",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Clickable(\n",
    "    pmui.Paper(\n",
    "        pmui.Column(pn.pane.Str(\"Full width clickable area\")),\n",
    "        elevation=2, sizing_mode=\"stretch_width\", height=80\n",
    "    ),\n",
    "    sizing_mode=\"stretch_width\",\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.14.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}