@ojiepermana/angular 21.3.3 → 22.0.1

package/component/dropdown-menu/README.md

@@ -0,0 +1,311 @@
+# Dropdown Menu
+
+Accessible menu rendered in a CDK overlay with keyboard navigation (arrow keys,
+Home/End, type-ahead, Escape).
+
+This Angular implementation follows the shadcn Dropdown Menu information architecture while mapping the React root
+component to an explicit trigger directive and projected menu template.
+
+## Import
+
+```ts
+import {
+  MenuCheckboxItemComponent,
+  MenuTriggerDirective,
+  MenuContentDirective,
+  MenuGroupComponent,
+  MenuSurfaceComponent,
+  MenuItemComponent,
+  MenuRadioGroupComponent,
+  MenuRadioItemComponent,
+  MenuSeparatorComponent,
+  MenuLabelComponent,
+  MenuShortcutComponent,
+} from '@ojiepermana/angular/component/dropdown-menu';
+```
+
+## Usage
+
+```html
+<button
+  ui-button
+  type="button"
+  variant="outline"
+  #accountTrigger="uiMenuTrigger"
+  [uiMenuTrigger]="menu"
+  side="bottom"
+  align="end">
+  Open
+</button>
+
+<ng-template uiMenuContent #menu="uiMenuContent">
+  <ui-menu-surface class="w-56">
+    <ui-menu-group>
+      <ui-menu-label>My account</ui-menu-label>
+      <button ui-menu-item type="button" (selected)="onProfile(); accountTrigger.close()">
+        Profile
+        <span ui-menu-shortcut>⌘P</span>
+      </button>
+      <button ui-menu-item type="button" (selected)="onSettings(); accountTrigger.close()">Settings</button>
+    </ui-menu-group>
+    <ui-menu-separator />
+    <ui-menu-group>
+      <button ui-menu-item type="button" disabled>Disabled</button>
+      <button ui-menu-item type="button" variant="destructive" (selected)="onSignOut(); accountTrigger.close()">
+        Sign out
+      </button>
+    </ui-menu-group>
+  </ui-menu-surface>
+</ng-template>
+```
+
+Use the trigger export when a standard command row should dismiss the overlay. Checkbox and radio rows can stay open so
+the user can adjust multiple settings in one pass.
+
+## Composition
+
+```text
+button[ui-button][uiMenuTrigger]
+└── ng-template[uiMenuContent]
+    └── ui-menu-surface
+        ├── ui-menu-group
+        │   ├── ui-menu-label
+        │   ├── button[ui-menu-item]
+        │   └── button[ui-menu-item][uiMenuTrigger]
+        │       └── ng-template[uiMenuContent]
+        │           └── ui-menu-surface
+        ├── ui-menu-separator
+        ├── button[ui-menu-checkbox-item]
+        └── ui-menu-radio-group
+            └── button[ui-menu-radio-item]
+```
+
+## Common patterns
+
+### Basic account menu
+
+```html
+<button ui-button type="button" variant="outline" #menuTrigger="uiMenuTrigger" [uiMenuTrigger]="menu">Open</button>
+
+<ng-template uiMenuContent #menu="uiMenuContent">
+  <ui-menu-surface class="w-56">
+    <ui-menu-group>
+      <ui-menu-label>My Account</ui-menu-label>
+      <button ui-menu-item type="button" (selected)="menuTrigger.close()">Profile</button>
+      <button ui-menu-item type="button" (selected)="menuTrigger.close()">Billing</button>
+      <button ui-menu-item type="button" (selected)="menuTrigger.close()">Settings</button>
+    </ui-menu-group>
+    <ui-menu-separator />
+    <ui-menu-group>
+      <button ui-menu-item type="button" (selected)="menuTrigger.close()">GitHub</button>
+      <button ui-menu-item type="button" (selected)="menuTrigger.close()">Support</button>
+      <button ui-menu-item type="button" [disabled]="true">API</button>
+    </ui-menu-group>
+  </ui-menu-surface>
+</ng-template>
+```
+
+### Submenu
+
+Map shadcn `DropdownMenuSub` to `uiMenuTrigger` on a `button[ui-menu-item]`.
+
+```html
+<ng-template uiMenuContent #inviteUsersMenu="uiMenuContent">
+  <ui-menu-surface class="w-48">
+    <button ui-menu-item type="button">Email</button>
+    <button ui-menu-item type="button">Message</button>
+    <button ui-menu-item type="button">Calendar invite</button>
+  </ui-menu-surface>
+</ng-template>
+
+<ui-menu-surface class="w-56">
+  <ui-menu-group>
+    <button ui-menu-item type="button">Team</button>
+    <button ui-menu-item type="button" [uiMenuTrigger]="inviteUsersMenu" side="right" align="start">
+      Invite users
+      <span class="ml-auto text-xs text-muted-foreground">›</span>
+    </button>
+  </ui-menu-group>
+</ui-menu-surface>
+```
+
+### Checkboxes
+
+Use checkbox rows when the menu exposes independent toggles.
+
+```ts
+const showStatusBar = signal(true);
+const showActivityBar = signal(false);
+const showPanel = signal(false);
+```
+
+```html
+<ui-menu-surface class="w-44">
+  <ui-menu-group>
+    <ui-menu-label>Appearance</ui-menu-label>
+    <button ui-menu-checkbox-item type="button" [(checked)]="showStatusBar">Status Bar</button>
+    <button ui-menu-checkbox-item type="button" [(checked)]="showActivityBar">Activity Bar</button>
+    <button ui-menu-checkbox-item type="button" [(checked)]="showPanel">Panel</button>
+  </ui-menu-group>
+</ui-menu-surface>
+```
+
+### Radio group
+
+Use a radio group for one exclusive choice.
+
+```ts
+const panelPosition = signal<'top' | 'bottom' | 'right'>('bottom');
+```
+
+```html
+<ui-menu-surface class="w-44">
+  <ui-menu-label [inset]="true">Panel Position</ui-menu-label>
+  <ui-menu-radio-group [(value)]="panelPosition">
+    <button ui-menu-radio-item type="button" value="top">Top</button>
+    <button ui-menu-radio-item type="button" value="bottom">Bottom</button>
+    <button ui-menu-radio-item type="button" value="right">Right</button>
+  </ui-menu-radio-group>
+</ui-menu-surface>
+```
+
+### Shortcuts and icons
+
+Project shortcut text and inline icons directly into the row content.
+
+```html
+<ui-menu-surface class="w-56">
+  <button ui-menu-item type="button">
+    <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24">...</svg>
+    Profile
+    <span ui-menu-shortcut>⇧⌘P</span>
+  </button>
+  <button ui-menu-item type="button">
+    <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24">...</svg>
+    Billing
+    <span ui-menu-shortcut>⌘B</span>
+  </button>
+</ui-menu-surface>
+```
+
+### Avatar trigger composition
+
+Also import the avatar entrypoint when the trigger should be an account avatar.
+
+```ts
+import { AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@ojiepermana/angular/component/avatar';
+```
+
+```html
+<button
+  ui-button
+  type="button"
+  variant="ghost"
+  size="icon"
+  class="h-10 w-10 rounded-full p-0"
+  [uiMenuTrigger]="accountMenu"
+  align="end">
+  <ui-avatar>
+    <ui-avatar-image src="https://github.com/shadcn.png" alt="Ada Lovelace" />
+    <ui-avatar-fallback>AL</ui-avatar-fallback>
+  </ui-avatar>
+</button>
+```
+
+### RTL
+
+Set `dir="rtl"` and `lang` on the surface, and prefer `side="left"` when nested content should open toward the visual
+start edge.
+
+```html
+<ng-template uiMenuContent #rtlAccountMenu="uiMenuContent">
+  <ui-menu-surface dir="rtl" lang="ar" class="w-44 text-right">
+    <button ui-menu-item type="button">الملف الشخصي</button>
+    <button ui-menu-item type="button">الفوترة</button>
+  </ui-menu-surface>
+</ng-template>
+
+<ui-menu-surface dir="rtl" lang="ar" class="w-56 text-right">
+  <button ui-menu-item type="button" [uiMenuTrigger]="rtlAccountMenu" side="left" align="start">
+    الحساب
+    <span class="mr-auto text-xs text-muted-foreground">‹</span>
+  </button>
+</ui-menu-surface>
+```
+
+## API
+
+### `[uiMenuTrigger]`
+
+| Input           | Type                                     | Default    |
+| --------------- | ---------------------------------------- | ---------- |
+| `uiMenuTrigger` | `MenuContentDirective`                   | _required_ |
+| `side`          | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` |
+| `align`         | `'start' \| 'center' \| 'end'`           | `'start'`  |
+| `disabled`      | `boolean`                                | `false`    |
+
+Output: `openedChange: boolean`. Methods: `open()`, `close()`, `toggle()`.
+
+### `ng-template[uiMenuContent]`
+
+Projected template wrapper for the menu surface that is consumed by `[uiMenuTrigger]`.
+
+### `ui-menu-surface`
+
+Container with `role="menu"` and arrow key navigation wired through
+`FocusKeyManager` (wrapping + type-ahead). Emits `closeRequested` on Tab.
+
+### `ui-menu-item`
+
+`role="menuitem"`. Inputs: `disabled`, `inset`, `class`. Output: `selected`.
+
+### `ui-menu-checkbox-item`
+
+`role="menuitemcheckbox"`. Inputs: `[(checked)]`, `disabled`, `variant`, `class`.
+
+### `ui-menu-radio-group` and `ui-menu-radio-item`
+
+Use `[(value)]` on the group and `value` on each radio row. Radio items expose `role="menuitemradio"`.
+
+### Auxiliary
+
+- `ui-menu-group` → structural wrapper with `role="group"`.
+- `ui-menu-separator` → `role="separator"`.
+- `ui-menu-label` — non-interactive label row.
+- `ui-menu-shortcut` — right-aligned shortcut badge.
+
+## Styling and theming
+
+Pass `class` to the surface or individual rows to control width, spacing, and emphasis. Borders and separators use the
+shared theme border tokens, destructive rows use the destructive palette, and projected icons inherit the current text
+color.
+
+## Accessibility
+
+- Trigger: `aria-haspopup="menu"`, `aria-expanded` reflects state.
+- Surface: `role="menu"`, items receive `role="menuitem"`, disabled items get
+  `aria-disabled="true"`.
+- Checkbox and radio items expose `aria-checked` semantics through the relevant menuitem roles.
+- Close on outside click, Escape, or Tab. Focus returns to the trigger.
+
+## Keyboard interactions
+
+- Enter, Space, and ArrowDown on the trigger open the menu.
+- Arrow Up and Arrow Down move between enabled rows; Home and End jump to the first or last row.
+- Typeahead matches the row label text.
+- Enter and Space activate the focused row.
+
+## Angular notes
+
+- There is no React-style `DropdownMenu` root component; the root behavior is handled by `uiMenuTrigger` and
+  `ng-template[uiMenuContent]`.
+- Reuse `uiMenuTrigger` on `button[ui-menu-item]` when you need a submenu.
+- Standard command rows can dismiss the overlay explicitly through a `#menuTrigger="uiMenuTrigger"` template reference,
+  while checkbox and radio rows can stay open for multi-step preference changes.
+
+## Source parity
+
+This Angular entrypoint keeps the main shadcn dropdown-menu patterns: grouped commands, shortcuts, icons, nested menus,
+checkbox items, radio groups, avatar triggers, destructive rows, and RTL guidance. The shadcn page includes additional
+permutations such as checkbox-icons, radio-icons, and a very large complex menu; the local demos cover the same
+primitives through representative compositions instead of duplicating every permutation one-to-one.

package/component/editor/README.md

@@ -0,0 +1,136 @@
+# Editor
+
+Rich text editor shell with an accessible toolbar, configurable toolbar items, contenteditable form control support, and shadcn-style tokens.
+
+This component is conceptually inspired by Flux Editor. It does not bundle Tiptap or Flux JavaScript; instead, it provides a lightweight Angular primitive that applications can compose, bind, and extend.
+
+## Import
+
+```ts
+import { FormsModule } from '@angular/forms';
+import {
+  EditorButtonComponent,
+  EditorComponent,
+  EditorContentComponent,
+  EditorSeparatorComponent,
+  EditorSpacerComponent,
+  EditorToolbarComponent,
+} from '@ojiepermana/angular/component/editor';
+```
+
+## Usage
+
+```html
+<ui-editor>
+  <ui-editor-toolbar items="heading | bold italic underline | align ~ undo redo" />
+  <ui-editor-content placeholder="Write something..." aria-label="Article body">
+    <h3>What's changed</h3>
+    <p>Draft release notes, article copy, or support responses here.</p>
+  </ui-editor-content>
+</ui-editor>
+```
+
+## Forms
+
+`ui-editor-content` implements `ControlValueAccessor`, so it can bind to Angular forms as an HTML string.
+
+```html
+<ui-editor>
+  <ui-editor-toolbar />
+  <ui-editor-content [(ngModel)]="content" name="content" aria-label="Article body" />
+</ui-editor>
+```
+
+Sanitize persisted HTML at the application boundary before rendering it elsewhere.
+
+## Toolbar Items
+
+The toolbar accepts a space-separated `items` string. Use `|` for a separator and `~` for a spacer.
+
+```html
+<ui-editor-toolbar items="heading | bold italic strike underline | bullet ordered blockquote link align ~ undo redo" />
+```
+
+Supported item names:
+
+| Item          | Behavior                                             |
+| ------------- | ---------------------------------------------------- |
+| `heading`     | Text, heading 1, heading 2, and heading 3 selector.  |
+| `bold`        | Bold formatting.                                     |
+| `italic`      | Italic formatting.                                   |
+| `strike`      | Strikethrough formatting.                            |
+| `underline`   | Underline formatting.                                |
+| `bullet`      | Bulleted list.                                       |
+| `ordered`     | Numbered list.                                       |
+| `blockquote`  | Block quote block.                                   |
+| `subscript`   | Subscript formatting.                                |
+| `superscript` | Superscript formatting.                              |
+| `highlight`   | Highlight selected text.                             |
+| `link`        | Create a placeholder link for the current selection. |
+| `code`        | Code block.                                          |
+| `align`       | Left, center, and right alignment selector.          |
+| `undo`        | Undo last edit.                                      |
+| `redo`        | Redo last edit.                                      |
+
+## Custom Toolbar
+
+Pass `items=""` and project custom toolbar controls.
+
+```html
+<ui-editor>
+  <ui-editor-toolbar items="">
+    <button ui-editor-button command="bold" aria-label="Bold">B</button>
+    <button ui-editor-button command="italic" aria-label="Italic">I</button>
+    <ui-editor-separator />
+    <button ui-editor-button command="highlight" aria-label="Highlight">H</button>
+    <ui-editor-spacer />
+    <button ui-editor-button command="undo" aria-label="Undo">
+      <svg
+        aria-hidden="true"
+        class="size-4"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round">
+        <path d="M9 14 4 9l5-5" />
+        <path d="M4 9h10a6 6 0 0 1 0 12h-2" />
+      </svg>
+    </button>
+  </ui-editor-toolbar>
+  <ui-editor-content aria-label="Custom editor" />
+</ui-editor>
+```
+
+## Keyboard Shortcuts
+
+| Action        | Shortcut          |
+| ------------- | ----------------- |
+| Bold          | Cmd/Ctrl+B        |
+| Italic        | Cmd/Ctrl+I        |
+| Underline     | Cmd/Ctrl+U        |
+| Strikethrough | Cmd/Ctrl+Shift+X  |
+| Ordered list  | Cmd/Ctrl+Shift+7  |
+| Bulleted list | Cmd/Ctrl+Shift+8  |
+| Heading 1-3   | Cmd/Ctrl+Alt+1..3 |
+| Undo          | Cmd/Ctrl+Z        |
+| Redo          | Cmd/Ctrl+Shift+Z  |
+
+## Styling
+
+The editor uses `border-input`, `bg-background`, `ring-ring`, `text-foreground`, `text-muted-foreground`, and `bg-muted` tokens. Pass sizing classes directly to the content slot when adjusting height.
+
+```html
+<ui-editor>
+  <ui-editor-toolbar />
+  <ui-editor-content class="min-h-30 max-h-60" aria-label="Compact editor" />
+</ui-editor>
+```
+
+## Accessibility
+
+- `ui-editor-toolbar` renders `role="toolbar"`.
+- `ui-editor-content` renders `role="textbox"` and `aria-multiline="true"`.
+- Provide a clear `aria-label` for each editor content surface.
+- Give terse or icon-only custom toolbar buttons an explicit `aria-label`.

package/component/editor/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../../fesm2022/ojiepermana-angular-component-editor.mjs",
+  "typings": "../../types/ojiepermana-angular-component-editor.d.ts"
+}

package/component/empty/README.md

@@ -0,0 +1,183 @@
+# Empty
+
+Displays a reusable empty state with header, media, title, description, and content slots.
+
+Use Empty for onboarding gaps, no-results screens, no-notification panels, and 404-like recovery surfaces that need a clear next action.
+
+## Import
+
+```ts
+import {
+  EmptyComponent,
+  EmptyContentComponent,
+  EmptyDescriptionComponent,
+  EmptyHeaderComponent,
+  EmptyMediaComponent,
+  EmptyTitleComponent,
+} from '@ojiepermana/angular/component/empty';
+import { ButtonComponent } from '@ojiepermana/angular/component/button';
+```
+
+## Composition
+
+The Angular structure follows the shadcn Empty information architecture while keeping actions on native buttons and anchors.
+
+```text
+ui-empty
+├── ui-empty-header
+│   ├── ui-empty-media
+│   ├── ui-empty-title
+│   └── ui-empty-description
+└── ui-empty-content
+```
+
+## Basic usage
+
+```html
+<ui-empty class="max-w-xl rounded-2xl border border-border bg-card/40">
+  <ui-empty-header>
+    <ui-empty-media variant="icon">
+      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 6v12" />
+        <path d="M6 12h12" />
+      </svg>
+    </ui-empty-media>
+    <ui-empty-title>No projects yet</ui-empty-title>
+    <ui-empty-description>
+      You have not created any projects yet. Start by creating a new project or importing an existing one.
+    </ui-empty-description>
+  </ui-empty-header>
+
+  <ui-empty-content class="sm:flex-row">
+    <button ui-button type="button">Create project</button>
+    <button ui-button type="button" variant="outline">Import project</button>
+  </ui-empty-content>
+
+  <a ui-button href="/docs/getting-started" variant="link" class="text-muted-foreground">Learn more</a>
+</ui-empty>
+```
+
+## Common patterns
+
+### Outline shell
+
+Use border utilities on the root when the empty state should read like an inset card or dashboard panel.
+
+```html
+<ui-empty class="rounded-2xl border border-dashed border-border">
+  <ui-empty-header>
+    <ui-empty-media variant="icon">...</ui-empty-media>
+    <ui-empty-title>Cloud storage empty</ui-empty-title>
+    <ui-empty-description>Upload files to your cloud storage to access them anywhere.</ui-empty-description>
+  </ui-empty-header>
+  <ui-empty-content>
+    <button ui-button type="button" variant="outline" size="sm">Upload files</button>
+  </ui-empty-content>
+</ui-empty>
+```
+
+### Avatar media
+
+Leave `ui-empty-media` on the default variant when projecting an avatar, avatar group, or any other custom artwork.
+
+```html
+<ui-empty>
+  <ui-empty-header>
+    <ui-empty-media>
+      <ui-avatar class="size-12">
+        <ui-avatar-image src="https://github.com/shadcn.png" alt="shadcn" />
+        <ui-avatar-fallback>CN</ui-avatar-fallback>
+      </ui-avatar>
+    </ui-empty-media>
+    <ui-empty-title>User offline</ui-empty-title>
+    <ui-empty-description>Leave a message and they will be notified when they come back online.</ui-empty-description>
+  </ui-empty-header>
+  <ui-empty-content>
+    <button ui-button type="button" size="sm">Leave message</button>
+  </ui-empty-content>
+</ui-empty>
+```
+
+### Input group recovery
+
+Compose `ui-empty-content` with the existing input-group primitives when the empty state should immediately guide recovery or search.
+
+```html
+<ui-empty class="max-w-xl rounded-2xl border border-border">
+  <ui-empty-header>
+    <ui-empty-title>404 - Not found</ui-empty-title>
+    <ui-empty-description>
+      The page you are looking for does not exist. Try searching for what you need below.
+    </ui-empty-description>
+  </ui-empty-header>
+  <ui-empty-content class="max-w-md">
+    <ui-input-group class="w-full">
+      <input ui-input-group-input aria-label="Search pages" placeholder="Try searching for pages..." />
+      <ui-input-group-addon>
+        <span aria-hidden="true">⌕</span>
+      </ui-input-group-addon>
+      <ui-input-group-addon align="inline-end">
+        <span
+          aria-hidden="true"
+          class="inline-flex h-6 items-center rounded-md border border-border bg-background px-2 font-mono text-[11px] font-medium text-foreground shadow-sm">
+          /
+        </span>
+      </ui-input-group-addon>
+    </ui-input-group>
+  </ui-empty-content>
+</ui-empty>
+```
+
+## API reference
+
+### `EmptyComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+### `EmptyMediaComponent`
+
+| Input     | Type                  | Default     |
+| --------- | --------------------- | ----------- |
+| `variant` | `'default' \| 'icon'` | `'default'` |
+| `class`   | `string`              | `''`        |
+
+### Parts
+
+- `ui-empty-header` centers the media, title, and description stack.
+- `ui-empty-title` provides the primary heading.
+- `ui-empty-description` renders supporting copy with muted foreground color.
+- `ui-empty-content` groups actions, inputs, or recovery affordances under the header.
+
+All Empty parts also accept a `class` input.
+
+## Styling and theming
+
+The primitive keeps styling neutral by default: the root controls spacing and alignment, while visual shells such as borders, gradients, and muted backgrounds are layered through `class`.
+
+`ui-empty-media` uses `border-border` and `bg-muted/40` for the icon variant so the icon chip matches the rest of the theme without inheriting text color for borders.
+
+Use `class` on the root or parts to add panel borders, gradient backgrounds, tighter widths, or horizontal action layouts.
+
+## Accessibility
+
+- Keep the title and description visible so the empty state communicates both the missing content and the next step.
+- Put actions on native `<button>` or `<a ui-button>` hosts instead of faking interactivity with generic elements.
+- Mark decorative icons inside `ui-empty-media` as `aria-hidden="true"` unless the icon itself provides unique meaning.
+
+## Keyboard interactions
+
+- The Empty primitives themselves are passive layout containers and do not enter the tab order.
+- Projected buttons, anchors, and inputs keep their native Tab, Enter, and Space behavior.
+- When `ui-empty-content` contains an input group, the control remains first in the DOM so tab order stays predictable.
+
+## Angular notes
+
+- `ui-empty` is a reusable content primitive, not the same surface as `@ojiepermana/angular/layout/empty`, which remains a route-shell layout.
+- The link action from the upstream shadcn preview maps cleanly to `<a ui-button variant="link">` in Angular.
+- Project any custom artwork into `ui-empty-media`; only the `icon` variant applies a circular icon shell.
+
+## Source parity
+
+This Angular implementation follows the shadcn Empty page structure, examples, and API reference while translating React composition to Angular selectors and keeping page-shell layout concerns separate from the reusable empty-state primitive.

package/component/empty/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../../fesm2022/ojiepermana-angular-component-empty.mjs",
+  "typings": "../../types/ojiepermana-angular-component-empty.d.ts"
+}