{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `TextAreaInput` allows entering any multiline string using a text input box. Lines are joined with the newline character ``\\n``. Unfortunately in the notebook, enter keys may not be intercepted correctly (see [ipywidgets](https://github.com/jupyter-widgets/ipywidgets/issues/3950)).\n",
    "\n",
    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](https://panel.holoviz.org/how_to/links/index.html) or [how to use them as part of declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html).\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",
    "* **`disabled`** (boolean, default=False): Whether the widget is editable\n",
    "* **`enter_pressed`** (event): An event that triggers when `<shift>+<enter>` is pressed.\n",
    "* **`value`** (str): The current value updated when pressing `<shift>+<enter>` or when the widget loses focus because the user clicks away or presses the tab key.\n",
    "* **`value_input`** (str): The current value updated on every key press.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`auto_grow`** (boolean, default=False): Whether the TextArea should automatically grow in height to fit the content.\n",
    "* **`color`** (str): The color variant of the input, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red).\n",
    "* **`cols`** (int, default=2): The number of columns in the text input field. \n",
    "* **`max_length`** (int, default=5000): Max character length of the input field. Defaults to 5000\n",
    "* **`max_rows`** (int, default=None): The maximum number of rows in the text input field when `auto_grow=True`. \n",
    "* **`label`** (str): The title of the widget\n",
    "* **`placeholder`** (str): A placeholder string displayed when no value is entered\n",
    "* **`rows`** (int, default=2): The number of rows in the text input field. \n",
    "* **`resizable`** (boolean | str, default='both'): Whether the layout is interactively resizable, and if so in which dimensions: `width`, `height`, or `both`.\n",
    "* **`variant`** (`Literal[\"filled\", \"outlined\", \"standard\"]`): The variant of the input field.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API.\n",
    "- **`theme_config`** (dict): Theming API.\n",
    "\n",
    "##### Aliases\n",
    "\n",
    "For compatibility with Panel certain parameters are allowed as aliases:\n",
    "\n",
    "- **`button_style`**: Alias for `variant`\n",
    "- **`button_type`**: Alias for `color`\n",
    "- **`name`**: Alias for `label`\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "text_area_input = pmui.TextAreaInput(label='Text Area Input', placeholder='Enter a string here...')\n",
    "text_area_input"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "``TextAreaInput.value`` returns a string type that can be read out and set like other widgets. Note that ``value`` is updated when pressing `<shift>+<enter>` or when the widget loses focus. To get the current value after every keystroke, use ``value_input`` instead:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "text_area_input.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "An auto-growing `TextAreaInput` will grow (and shrink) in height to accommodate the entered text. Setting `rows` together with `auto_grow` will set a lower bound on the number of rows and setting `max_rows` will provide an upper bound:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.TextAreaInput(label='Growing TextArea', auto_grow=True, max_rows=10, rows=6, value=\"\"\"\\\n",
    "This text area will grow when newlines are added to the text:\n",
    "\n",
    "1. Foo\n",
    "2. Bar\n",
    "3. Baz\n",
    "\"\"\", width=500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you only want the text area to be resizable in the vertical direction, you can set the resizeable parameter to 'height':"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.TextAreaInput(label=\"Vertical Adjustable TextArea\", resizable=\"height\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `TextAreaInput` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(text_area_input.controls(jslink=True), text_area_input)"
   ]
  }
 ],
 "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.12.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}