# Resizable

Accessible resizable panel groups and layouts with pointer and keyboard support.

Use Resizable for split views, workspace layouts, drill-in dashboards, inspector panes, and settings screens where users should control how much space each pane receives.

## Import

```ts
import {
  ResizableHandleComponent,
  ResizablePanelComponent,
  ResizablePanelGroupComponent,
} from '@edsis/component/resizable';
```

## Composition

The Angular structure mirrors the shadcn composition while using Angular selectors and standalone imports.

```text
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel
```

## Basic usage

Use `ResizablePanelGroup` as the root, place `ResizablePanel` elements around each separator, and insert `ResizableHandle` between adjacent panels.

```html
<ResizablePanelGroup
  orientation="horizontal"
  class="h-[200px] max-w-lg rounded-lg border border-border"
>
  <ResizablePanel defaultSize="35%">
    <div class="flex h-full items-center justify-center p-6">Navigation</div>
  </ResizablePanel>

  <ResizableHandle aria-label="Resize navigation"></ResizableHandle>

  <ResizablePanel defaultSize="65%">
    <div class="flex h-full items-center justify-center p-6">Content</div>
  </ResizablePanel>
</ResizablePanelGroup>
```

## Common patterns

### Nested workspace layout

Nested groups work well for mail, support, or analytics layouts where a secondary area also needs its own split.

```html
<ResizablePanelGroup orientation="horizontal" class="h-[220px] rounded-lg border border-border">
  <ResizablePanel defaultSize="50%">
    <div class="flex h-full items-center justify-center p-6">Threads</div>
  </ResizablePanel>

  <ResizableHandle withHandle aria-label="Resize thread list"></ResizableHandle>

  <ResizablePanel defaultSize="50%">
    <ResizablePanelGroup orientation="vertical" class="h-full">
      <ResizablePanel defaultSize="28%">
        <div class="flex h-full items-center justify-center p-6">Summary</div>
      </ResizablePanel>
      <ResizableHandle withHandle aria-label="Resize summary"></ResizableHandle>
      <ResizablePanel defaultSize="72%">
        <div class="flex h-full items-center justify-center p-6">Details</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>
```

### Vertical resizing

Use `orientation="vertical"` when panes stack top-to-bottom.

```html
<ResizablePanelGroup
  orientation="vertical"
  class="h-[220px] max-w-sm rounded-lg border border-border"
>
  <ResizablePanel defaultSize="25%">...</ResizablePanel>
  <ResizableHandle aria-label="Resize header"></ResizableHandle>
  <ResizablePanel defaultSize="75%">...</ResizablePanel>
</ResizablePanelGroup>
```

### Visible handle

Add `withHandle` when the splitter should show a grab affordance.

```html
<ResizableHandle withHandle aria-label="Resize sidebar"></ResizableHandle>
```

### Size constraints

Use `minSize` and `maxSize` to keep navigation, preview, or inspector panes within useful bounds.

```html
<ResizablePanel defaultSize="30%" minSize="20%" maxSize="40%">...</ResizablePanel>
```

### RTL

Set `dir="rtl"` on `ResizablePanelGroup` or an ancestor when the layout should follow right-to-left direction. Pointer and arrow-key resizing adapt to the computed direction.

```html
<ResizablePanelGroup
  dir="rtl"
  orientation="horizontal"
  class="h-[200px] rounded-lg border border-border"
>
  <ResizablePanel defaultSize="50%">...</ResizablePanel>
  <ResizableHandle withHandle aria-label="تغيير حجم القائمة"></ResizableHandle>
  <ResizablePanel defaultSize="50%">...</ResizablePanel>
</ResizablePanelGroup>
```

## API reference

### `ResizablePanelGroupComponent`

| Input         | Type                         | Default        |
| ------------- | ---------------------------- | -------------- |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
| `class`       | `string`                     | `''`           |

### `ResizablePanelComponent`

| Input         | Type                       | Default        |
| ------------- | -------------------------- | -------------- |
| `defaultSize` | `string \| number \| null` | `null`         |
| `minSize`     | `string \| number`         | `'10%'`        |
| `maxSize`     | `string \| number`         | `'90%'`        |
| `id`          | `string \| null`           | auto-generated |
| `class`       | `string`                   | `''`           |

### `ResizableHandleComponent`

| Input        | Type             | Default          |
| ------------ | ---------------- | ---------------- |
| `withHandle` | `boolean`        | `false`          |
| `aria-label` | `string \| null` | `'Resize panel'` |
| `class`      | `string`         | `''`             |

## Styling and theming

Pass `class` to the group, panel, or handle to tune height, width, backgrounds, borders, and embedded layouts.

The primitives use the shared theme tokens, so utilities such as `border-border`, `bg-card`, `bg-muted/40`, `text-foreground`, and `focus-visible:ring-ring` work as expected.

## Accessibility

- Each handle is a focusable `separator` with `aria-controls`, `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
- Provide a clear `aria-label` for each handle when the surrounding pane label is not already obvious from context.
- Panels stay in normal page flow, which keeps nested forms and content accessible without extra portals or overlays.

## Keyboard interactions

- Arrow keys resize the adjacent panes.
- `Home` moves the primary pane to its minimum allowed size.
- `End` moves the primary pane to its maximum allowed size.
- `Enter` collapses the primary pane to its minimum and restores the previous size on the next press.

## Angular notes

- The API follows the shadcn `orientation` plus percent-size model, but does not require React or `react-resizable-panels`.
- `defaultSize`, `minSize`, and `maxSize` accept either percentage strings such as `'25%'` or numeric percentages such as `25`.
- Custom element hosts are explicitly block-level flex items so nested groups and dashboard panes size correctly inside Angular templates.

## Source parity

This Angular implementation follows the shadcn Resizable composition and examples while translating them to standalone component imports, Angular selectors, and a signal-driven internal layout model.