@open-rlb/ng-bootstrap 3.3.25 → 3.3.27

package/schematics/ng-add/claude-skills/rlb-components/SKILL.md

@@ -0,0 +1,364 @@
+---
+name: rlb-components
+description: Expert guidance for the @open-rlb/ng-bootstrap Angular component library (buttons, cards, dropdowns, toasts, loaders, badges, progress, etc.), built on Angular signals, OnPush, and Bootstrap 5. Use when using or composing these UI components.
+---
+
+# RLB ng-Bootstrap Components Skill
+
+You are an expert in the **@open-rlb/ng-bootstrap** Angular component library. All components use Angular 18+ signals, `ChangeDetectionStrategy.OnPush`, and Bootstrap 5. Import via `RlbBootstrapModule` or individual standalone imports.
+
+## Shared Types
+
+```typescript
+type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+type Size = 'sm' | 'md' | 'lg';
+type TextAlignment = 'left' | 'center' | 'right';
+```
+
+---
+
+## Buttons
+
+```html
+<!-- Basic button -->
+<button rlb-button color="primary" size="md">Click me</button>
+<button rlb-button color="danger" outline>Delete</button>
+<button rlb-button color="secondary" [disabled]="true">Disabled</button>
+<a rlb-button color="info" isLink>Link</a>
+
+<!-- Button group -->
+<rlb-button-group orientation="horizontal" size="md">
+  <button rlb-button color="primary">A</button>
+  <button rlb-button color="primary">B</button>
+</rlb-button-group>
+
+<!-- FAB (Floating Action Button) -->
+<rlb-fab color="primary" size="md" position="br">
+  <i class="bi bi-plus"></i>
+</rlb-fab>
+```
+
+**Button inputs:** `color`, `size`, `disabled`, `outline`, `isLink`
+**FAB inputs:** `color`, `size`, `disabled`, `outline`, `position` ('br'|'bl'|'tr'|'tl')
+
+---
+
+## Alerts
+
+```html
+<rlb-alert color="success">Operation successful.</rlb-alert>
+<rlb-alert color="danger" [dismissible]="true" (dismissed)="onDismiss()">
+  An error occurred!
+</rlb-alert>
+```
+
+**Inputs:** `color`, `dismissible` (boolean), `class`
+**Outputs:** `dismissed`
+
+---
+
+## Badges
+
+```html
+<span rlb-badge color="primary">New</span>
+<span rlb-badge color="success" [pill]="true">Active</span>
+<span rlb-badge color="danger" [border]="true">3</span>
+```
+
+**Inputs:** `color`, `pill`, `border`, `hidden-text`, `class`, `badge-text-color`
+
+---
+
+## Avatar
+
+```html
+<rlb-avatar [size]="48" shape="circle" src="/assets/user.png"></rlb-avatar>
+<rlb-avatar [size]="40" shape="round">AB</rlb-avatar>
+<rlb-avatar [size]="56" shape="square" src="/assets/logo.png"></rlb-avatar>
+```
+
+**Inputs:** `size` (px number), `shape` ('circle'|'round'|'square'), `src`, `class`
+
+---
+
+## Cards
+
+```html
+<rlb-card align="left" background="light">
+  <rlb-card-header>Card Title</rlb-card-header>
+  <rlb-card-image src="/img.png"></rlb-card-image>
+  <rlb-card-body>
+    <rlb-card-title>Title</rlb-card-title>
+    <rlb-card-subtitle>Subtitle</rlb-card-subtitle>
+    <rlb-card-text>Body text here.</rlb-card-text>
+    <rlb-card-link href="/more">Read more</rlb-card-link>
+  </rlb-card-body>
+  <rlb-card-footer>Footer</rlb-card-footer>
+</rlb-card>
+```
+
+**Card inputs:** `align`, `overlay`, `background` (Color), `border` (Color)
+**Sub-components:** `rlb-card-body`, `rlb-card-header`, `rlb-card-footer`, `rlb-card-image`, `rlb-card-title`, `rlb-card-subtitle`, `rlb-card-text`, `rlb-card-link`
+
+---
+
+## Accordion
+
+```html
+<rlb-accordion [flush]="false" [always-open]="false" [card-style]="true">
+  <rlb-accordion-item>
+    <ng-template rlb-accordion-header>Section 1</ng-template>
+    <ng-template rlb-accordion-body>Content 1</ng-template>
+  </rlb-accordion-item>
+  <rlb-accordion-item>
+    <ng-template rlb-accordion-header>Section 2</ng-template>
+    <ng-template rlb-accordion-body>Content 2</ng-template>
+  </rlb-accordion-item>
+</rlb-accordion>
+```
+
+**Inputs:** `flush`, `always-open`, `card-style`, `id`
+
+---
+
+## Tabs
+
+```html
+<rlb-tabs view="tab" [vertical]="false" fill="fill">
+  <rlb-tab title="Tab 1">Content for tab 1</rlb-tab>
+  <rlb-tab title="Tab 2">Content for tab 2</rlb-tab>
+  <rlb-tab title="Tab 3" [disabled]="true">Disabled</rlb-tab>
+</rlb-tabs>
+```
+
+**Inputs:** `view` ('tab'|'pills'|'underline'|'none'), `vertical`, `fill` ('fill'|'justified'), `horizontal-alignment` ('center'|'end'), `id`, `class`
+
+---
+
+## Carousel
+
+```html
+<rlb-carousel
+  autoplay="auto"
+  [interval]="3000"
+  pause="hover"
+  [wrap]="true"
+  [hide-indicators]="false"
+  [hide-controls]="false"
+  [(current-slide)]="currentSlide"
+  (slid)="onSlid($event)"
+>
+  <rlb-carousel-slide active>
+    Slide 1
+    <rlb-carousel-caption>
+      <h5>First slide</h5>
+    </rlb-carousel-caption>
+  </rlb-carousel-slide>
+  <rlb-carousel-slide>Slide 2</rlb-carousel-slide>
+</rlb-carousel>
+```
+
+**Children:** `rlb-carousel-slide` (input `active`, `id`), `rlb-carousel-caption`
+**Inputs:** `autoplay` (`'auto' | 'manual' | 'none'`), `interval`, `pause`, `wrap`, `cross-fade`, `hide-indicators`, `hide-controls`, `no-touch`, `keyboard`, `id`
+**Two-way:** `current-slide`
+**Outputs:** `slid`, `slide`, `slide-count`
+**Methods (via viewChild):** `prev()`, `next()`, `to(index)`, `pause()`, `cycle()`
+
+### Wizard pattern (multi-step form)
+
+There is no separate wizard component — a wizard **is** a carousel used as a controlled stepper.
+Disable autoplay/controls/indicators/touch, drive `current-slide` from your own Back / Next buttons,
+and gate `Next` on the current step's validity. Often embedded in a modal (see the `rlb-modals` skill).
+
+```html
+<div [formGroup]="form">
+  <rlb-carousel
+    autoplay="none"
+    no-touch
+    hide-controls
+    hide-indicators
+    [current-slide]="page()"
+    (current-slideChange)="page.set($event)"
+    (slide-count)="count.set($event)"
+    id="wizard"
+  >
+    <rlb-carousel-slide active>
+      <div formGroupName="account"><!-- step 1 fields --></div>
+    </rlb-carousel-slide>
+    <rlb-carousel-slide>
+      <div formGroupName="profile"><!-- step 2 fields --></div>
+    </rlb-carousel-slide>
+  </rlb-carousel>
+</div>
+
+<button rlb-button outline [disabled]="page() === 0" (click)="prev()">Back</button>
+@if (page() < count() - 1) {
+  <button rlb-button color="primary" [disabled]="currentStepInvalid()" (click)="next()">Next</button>
+} @else {
+  <button rlb-button color="success" [disabled]="form.invalid" (click)="onFinish()">Finish</button>
+}
+```
+
+```typescript
+readonly page = signal(0);   // bound one-way to [current-slide]
+readonly count = signal(0);  // set from (slide-count)
+readonly groupNames = ['account', 'profile'];
+
+// Validate one step at a time to gate the Next button.
+currentStepInvalid(): boolean {
+  return !!this.form.get(this.groupNames[this.page()])?.invalid;
+}
+prev() { this.page.update(p => Math.max(0, p - 1)); }
+next() { this.page.update(p => Math.min(this.count() - 1, p + 1)); }
+```
+
+> Key points: bind `[current-slide]` **one-way** and update the signal yourself (don't use `[(...)]`
+> two-way when you drive navigation manually); use `(slide-count)` to detect the last step; keep each
+> step in its own nested `FormGroup` so `currentStepInvalid()` can validate steps independently.
+
+---
+
+## Breadcrumb
+
+```html
+<rlb-breadcrumb
+  divider="/"
+  [items]="[
+    { id: '1', label: 'Home', link: '/' },
+    { id: '2', label: 'Products', link: '/products' },
+    { id: '3', label: 'Detail' }
+  ]"
+/>
+```
+
+**Inputs:** `divider`, `items: BreadcrumbItem[]`, `cssClasses`
+**BreadcrumbItem:** `{ id: string; label: string; link?: string }`
+
+---
+
+## Dropdown
+
+```html
+<rlb-dropdown direction="down">
+  <button rlb-button color="primary" rlb-dropdown>Actions</button>
+  <div rlb-dropdown-menu>
+    <a class="dropdown-item" href="#">Option 1</a>
+    <a class="dropdown-item" href="#">Option 2</a>
+  </div>
+</rlb-dropdown>
+```
+
+**Inputs:** `direction` ('up'|'down'|'left'|'right'|'up-center'|'down-center')
+
+---
+
+## Pagination
+
+```html
+<rlb-pagination size="md" alignment="center">
+  <rlb-pagination-item [active]="true">1</rlb-pagination-item>
+  <rlb-pagination-item>2</rlb-pagination-item>
+</rlb-pagination>
+```
+
+**Inputs:** `size`, `alignment` ('start'|'center'|'end'), `class`
+
+---
+
+## Navigation (Navbar + Sidebar)
+
+```html
+<rlb-navbar color="primary" [dark]="true" expand="lg" placement="fixed-top">
+  <a rlb-navbar-brand href="/">MyApp</a>
+  <rlb-navbar-items>
+    <a class="nav-link" routerLink="/home">Home</a>
+  </rlb-navbar-items>
+</rlb-navbar>
+
+<rlb-sidebar [dark]="true" [rounded]="false">
+  <rlb-sidebar-item routerLink="/dashboard">Dashboard</rlb-sidebar-item>
+  <rlb-sidebar-item routerLink="/settings">Settings</rlb-sidebar-item>
+</rlb-sidebar>
+```
+
+**Navbar inputs:** `dark`, `color`, `placement`, `expand`, `show-sidebar-toggler`, `enable-dropdown-toggler`, `class`
+**Sidebar inputs:** `dark`, `rounded`
+
+---
+
+## Loaders
+
+```html
+<!-- Spinner -->
+<rlb-spinner style="border" color="primary" size="md"></rlb-spinner>
+<rlb-spinner style="grow" color="success" size="sm"></rlb-spinner>
+
+<!-- Progress bar -->
+<rlb-progress
+  [value]="65"
+  [max]="100"
+  color="primary"
+  [striped]="true"
+  [animated]="true"
+  [showValue]="true"
+></rlb-progress>
+
+<!-- Infinite progress -->
+<rlb-progress [infinite]="true" color="info"></rlb-progress>
+```
+
+**Spinner inputs:** `style` ('border'|'grow'), `color`, `size`
+**Progress inputs:** `value`, `max`, `min`, `height`, `animated`, `striped`, `infinite`, `showValue`, `color`, `text-color`, `aria-label`
+
+---
+
+## Toast
+
+```typescript
+// In component
+constructor(private toast: ToastService) {}
+
+showSuccess() {
+  this.toast.openToast('my-toast', 'success-toast').subscribe();
+}
+```
+
+---
+
+## Tooltip
+
+```html
+<button rlb-button rlb-tooltip title="Helpful tip" placement="top">Hover me</button>
+```
+
+---
+
+## Collapse & Offcanvas
+
+```html
+<!-- Collapse -->
+<button rlb-button rlb-collapse-toggle target="myCollapse">Toggle</button>
+<rlb-collapse id="myCollapse">Hidden content</rlb-collapse>
+
+<!-- Offcanvas -->
+<button rlb-button rlb-offcanvas-toggle target="myPanel">Open Panel</button>
+<rlb-offcanvas id="myPanel" placement="start">Panel content</rlb-offcanvas>
+```
+
+---
+
+## Module Import
+
+```typescript
+import { RlbBootstrapModule } from '@open-rlb/ng-bootstrap';
+
+@NgModule({
+  imports: [RlbBootstrapModule]
+})
+export class AppModule {}
+```
+
+Or import individual components for standalone:
+```typescript
+import { ButtonComponent, AlertComponent, CardComponent } from '@open-rlb/ng-bootstrap';
+```

package/schematics/ng-add/claude-skills/rlb-datatable/SKILL.md

@@ -0,0 +1,295 @@
+---
+name: rlb-datatable
+description: Expert guidance for the @open-rlb/ng-bootstrap rlb-dt-table datatable: pagination (pages or load-more), sorting, filtering, row actions, loading and empty states. Use when building or configuring data tables.
+---
+
+# RLB ng-Bootstrap DataTable Skill
+
+You are an expert in the **@open-rlb/ng-bootstrap** datatable component (`rlb-dt-table`). It supports pagination (pages or load-more), sorting, filtering, row actions, loading states, and empty states.
+
+## Component Tree
+
+```
+rlb-dt-table
+├── rlb-dt-header       — column header (sortable/filterable)
+├── rlb-dt-row          — data row (repeated with *ngFor)
+│   ├── rlb-dt-cell     — data cell
+│   └── rlb-dt-actions  — row action menu
+│       └── rlb-dt-action — individual action item
+├── rlb-dt-loading      — custom loading template
+└── rlb-dt-noitems      — custom empty state template
+```
+
+---
+
+## rlb-dt-table Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | — | Table title |
+| `items` | `any[]` | `[]` | Data rows |
+| `loading` | `boolean` | `false` | Loading overlay |
+| `card-style` | `boolean` | `true` | Wrap in card |
+| `table-hover` | `boolean` | `false` | Hover highlight |
+| `table-striped` | `boolean` | `false` | Alternating row colors |
+| `table-striped-columns` | `boolean` | `false` | Alternating column colors |
+| `table-bordered` | `boolean` | `false` | Cell borders |
+| `table-borderless` | `boolean` | `false` | Remove all borders |
+| `table-small` | `boolean` | `false` | Compact rows |
+| `pagination-mode` | `'none'\|'load-more'\|'pages'` | `'none'` | Pagination strategy |
+| `total-items` | `number` | — | Total record count |
+| `current-page` | `number` | — | Current page (1-based) |
+| `page-size` | `number` | — | Rows per page |
+| `show-refresh` | `boolean` | `false` | Show refresh button |
+| `show-actions` | `'row'\|'head'` | `'row'` | Actions column position |
+| `creation-strategy` | `'none'\|'modal'\|'page'` | `'none'` | Create button behavior |
+| `creation-url` | `any[]\|string\|null` | — | Router link for 'page' strategy |
+| `load-more-label` | `string` | `'Load more'` | Load more button text |
+
+## rlb-dt-table Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `create-item` | `void` | Fired when create button clicked |
+| `refresh-item` | `void` | Fired when refresh button clicked |
+| `load-more` | `void` | Fired when load-more clicked |
+| `current-pageChange` | `number` | Two-way page binding |
+| `page-sizeChange` | `number` | Two-way page-size binding |
+| `pagination` | `{ page: number; size: number }` | Combined pagination event |
+
+---
+
+## rlb-dt-header Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `field` | `string` | — | Data field name (for sort/filter) |
+| `sortable` | `boolean` | `false` | Enable column sorting |
+| `filtrable` | `boolean` | `false` | Enable column filtering |
+| `type` | `'number'\|'string'` | — | Column data type |
+| `class` | `string` | — | CSS classes |
+| `style` | `string` | — | Inline styles |
+
+## rlb-dt-row Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `row-click` | `MouseEvent` | Row click event |
+
+## rlb-dt-actions Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | Disable all actions |
+
+## rlb-dt-action Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `label` | `string` | — | Action label (required) |
+| `disabled` | `boolean` | `false` | Disable this action |
+
+---
+
+## Basic Table (no pagination)
+
+```html
+<rlb-dt-table
+  title="Users"
+  [items]="users"
+  [loading]="loading"
+  [table-hover]="true"
+  [table-striped]="true"
+  [show-refresh]="true"
+  (refresh-item)="loadUsers()"
+>
+  <rlb-dt-header field="name" [sortable]="true">Name</rlb-dt-header>
+  <rlb-dt-header field="email">Email</rlb-dt-header>
+  <rlb-dt-header field="role">Role</rlb-dt-header>
+
+  <rlb-dt-row *ngFor="let user of users" (row-click)="onRowClick(user)">
+    <rlb-dt-cell>{{ user.name }}</rlb-dt-cell>
+    <rlb-dt-cell>{{ user.email }}</rlb-dt-cell>
+    <rlb-dt-cell>
+      <span rlb-badge [color]="user.role === 'admin' ? 'danger' : 'primary'">{{ user.role }}</span>
+    </rlb-dt-cell>
+    <rlb-dt-actions>
+      <rlb-dt-action label="Edit" (click)="editUser(user)"></rlb-dt-action>
+      <rlb-dt-action label="Delete" (click)="deleteUser(user)" [disabled]="user.role === 'admin'"></rlb-dt-action>
+    </rlb-dt-actions>
+  </rlb-dt-row>
+
+  <rlb-dt-noitems>
+    <p class="text-muted text-center py-4">No users found.</p>
+  </rlb-dt-noitems>
+</rlb-dt-table>
+```
+
+---
+
+## Server-side Pagination (pages)
+
+```html
+<rlb-dt-table
+  title="Orders"
+  [items]="orders"
+  [loading]="loading"
+  pagination-mode="pages"
+  [total-items]="totalOrders"
+  [(current-page)]="currentPage"
+  [(page-size)]="pageSize"
+  (pagination)="onPaginate($event)"
+  creation-strategy="modal"
+  (create-item)="openCreateModal()"
+>
+  <rlb-dt-header field="id" type="number">#</rlb-dt-header>
+  <rlb-dt-header field="customer" [sortable]="true">Customer</rlb-dt-header>
+  <rlb-dt-header field="amount" type="number" [sortable]="true">Amount</rlb-dt-header>
+  <rlb-dt-header field="status">Status</rlb-dt-header>
+
+  <rlb-dt-row *ngFor="let order of orders">
+    <rlb-dt-cell>{{ order.id }}</rlb-dt-cell>
+    <rlb-dt-cell>{{ order.customer }}</rlb-dt-cell>
+    <rlb-dt-cell>{{ order.amount | currency:'EUR' }}</rlb-dt-cell>
+    <rlb-dt-cell>
+      <span rlb-badge [color]="statusColor(order.status)">{{ order.status }}</span>
+    </rlb-dt-cell>
+    <rlb-dt-actions>
+      <rlb-dt-action label="View" (click)="viewOrder(order)"></rlb-dt-action>
+      <rlb-dt-action label="Cancel" (click)="cancelOrder(order)" [disabled]="order.status !== 'pending'"></rlb-dt-action>
+    </rlb-dt-actions>
+  </rlb-dt-row>
+</rlb-dt-table>
+```
+
+```typescript
+@Component({ ... })
+export class OrderListComponent {
+  orders: Order[] = [];
+  totalOrders = 0;
+  currentPage = 1;
+  pageSize = 10;
+  loading = false;
+
+  ngOnInit() { this.loadOrders(); }
+
+  onPaginate({ page, size }: { page: number; size: number }) {
+    this.currentPage = page;
+    this.pageSize = size;
+    this.loadOrders();
+  }
+
+  private loadOrders() {
+    this.loading = true;
+    this.orderService.getPage(this.currentPage, this.pageSize).subscribe(res => {
+      this.orders = res.items;
+      this.totalOrders = res.total;
+      this.loading = false;
+    });
+  }
+
+  statusColor(status: string): Color {
+    const map: Record<string, Color> = {
+      pending:   'warning',
+      confirmed: 'primary',
+      shipped:   'info',
+      delivered: 'success',
+      cancelled: 'danger'
+    };
+    return map[status] ?? 'secondary';
+  }
+}
+```
+
+---
+
+## Load-more Pattern (infinite scroll style)
+
+```html
+<rlb-dt-table
+  [items]="items"
+  [loading]="loading"
+  pagination-mode="load-more"
+  [total-items]="total"
+  load-more-label="Load more items"
+  (load-more)="loadMore()"
+>
+  <rlb-dt-header>Name</rlb-dt-header>
+  <rlb-dt-row *ngFor="let item of items">
+    <rlb-dt-cell>{{ item.name }}</rlb-dt-cell>
+  </rlb-dt-row>
+</rlb-dt-table>
+```
+
+```typescript
+page = 1;
+items: any[] = [];
+total = 0;
+
+loadMore() {
+  this.page++;
+  this.service.getPage(this.page).subscribe(res => {
+    this.items = [...this.items, ...res.items]; // append, don't replace
+    this.total = res.total;
+  });
+}
+```
+
+---
+
+## Custom Loading State
+
+```html
+<rlb-dt-table [items]="items" [loading]="loading">
+  <!-- headers and rows... -->
+
+  <rlb-dt-loading>
+    <div class="d-flex justify-content-center p-4">
+      <rlb-spinner color="primary" size="lg"></rlb-spinner>
+    </div>
+  </rlb-dt-loading>
+</rlb-dt-table>
+```
+
+---
+
+## Creation Strategies
+
+```html
+<!-- Modal: fires (create-item) output -->
+<rlb-dt-table creation-strategy="modal" (create-item)="openCreateModal()">...</rlb-dt-table>
+
+<!-- Page: navigates to route -->
+<rlb-dt-table creation-strategy="page" creation-url="/users/new">...</rlb-dt-table>
+<rlb-dt-table creation-strategy="page" [creation-url]="['/users', 'new']">...</rlb-dt-table>
+
+<!-- None (default): no create button -->
+<rlb-dt-table creation-strategy="none">...</rlb-dt-table>
+```
+
+---
+
+## Table Style Combinations
+
+```html
+<!-- Compact bordered table -->
+<rlb-dt-table [table-small]="true" [table-bordered]="true" [card-style]="false">
+
+<!-- Striped hover table (most common for lists) -->
+<rlb-dt-table [table-striped]="true" [table-hover]="true">
+
+<!-- Borderless minimal table -->
+<rlb-dt-table [table-borderless]="true" [card-style]="false">
+```
+
+---
+
+## Best Practices
+
+1. Always provide `[total-items]` when using `pagination-mode="pages"` — the paginator needs total count.
+2. Use `[(current-page)]` and `[(page-size)]` for two-way binding; or listen to `(pagination)` for both at once.
+3. Reset `currentPage = 1` whenever filters/sort change, then reload.
+4. For append-style lists use `load-more` mode and concat arrays: `this.items = [...this.items, ...newItems]`.
+5. Provide `<rlb-dt-noitems>` with a helpful message — empty tables are confusing without context.
+6. Use `[disabled]` on `rlb-dt-action` for conditional actions (e.g., only admins can delete).
+7. Avoid putting complex logic inside `*ngFor` templates — compute display values in the component.