@ojiepermana/angular 22.0.1 → 22.0.29

package/component/dropdown-menu/README.md

@@ -1,311 +0,0 @@
-# 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/dropdown-menu/package.json

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

package/component/editor/README.md

@@ -1,136 +0,0 @@
-# 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

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

package/component/empty/README.md

@@ -1,183 +0,0 @@
-# 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

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