@ngbase/adk 0.1.6 → 0.1.7

package/schematics/components/files/resizable/resizable-llm.md.template

@@ -0,0 +1,31 @@
+# Resizable
+
+```typescript
+import { Resizable, ResizableGroup } from '@/ui/resizable';
+```
+
+## Components
+
+### `<%= name %>-resizable-group`
+
+- **Inputs**
+  - `direction`: 'horizontal' | 'vertical' = 'horizontal' - The direction of the resizable group
+- **Exports** - `<%= name %>ResizableGroup`
+
+### `<%= name %>-resizable`
+
+- **Inputs**
+  - `size`: number | string = 'auto' - The size of the resizable
+  - `min`: number | string = 0 - The minimum size of the resizable
+  - `max`: number | string = undefined - The maximum size of the resizable
+- **Exports** - `<%= name %>Resizable`
+
+## Usage
+
+```html
+<<%= name %>-resizable-group>
+  <<%= name %>-resizable size="100px" />
+  <<%= name %>-resizable size="300px" />
+  <<%= name %>-resizable />
+</<%= name %>-resizable-group>
+```

package/schematics/components/files/select/select-llm.md.template

@@ -0,0 +1,87 @@
+# Select
+
+```typescript
+import { FormField, Label } from '@/ui/form-field';
+import { Select, Option, OptionGroup, SelectInput } from '@/ui/select';
+```
+
+## Components
+
+### `<%= name %>-select`
+
+- **Inputs**
+
+  - `value`: any[] | any - Selected value (2way)
+  - `disabled`: boolean = false - Disable the autocomplete (2way)
+  - `multiple`: boolean = false - Allow multiple selection
+  - `noAutoClose`: boolean = false - Prevent auto close
+  - `options`: any[] - Options
+  - `placeholder`: string = ' ' - Placeholder text
+  - `size`: 'target' | 'free' = 'free' - Size of the autocomplete
+  - `filterFn`: (option: any) => boolean = (option: any) => true - Filter function
+  - `queryFn`: (query: string, option: any) => boolean = (query: string, option: any) => true - Query function
+  - `filterOptions`: FilterOptions<any> - Filter options
+
+- **Outputs**
+
+  - `opened`: boolean - Open state
+  - `closed`: boolean - Close state
+
+- **Methods**
+
+  - `open()`: void - Open the select
+  - `close()`: void - Close the select
+
+- **Export** - `#select="<%= name %>Select"` - Template reference
+
+### `<%= name %>-option`
+
+- **Inputs**
+
+  - `value`: any - The value of the option
+  - `disabled`: boolean = false - Disable the option
+
+- **Export** - `#option="<%= name %>Option"` - Template reference
+
+### `<%= name %>-option-group`
+
+- **Inputs**
+
+  - `label`: string - The label of the option group
+
+- **Export** - `#optionGroup="<%= name %>OptionGroup"` - Template reference
+
+### `<%= name %>-select-input`
+
+- **Inputs**
+
+  - `placeholder`: string = ' ' - Placeholder text
+  - `value`: string = '' - Value (2way)
+
+- **Export** - `#selectInput="<%= name %>SelectInput"` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-form-field>
+  <label <%= name %>Label>Select</label>
+  <<%= name %>-select [(value)]="value">
+    <<%= name %>-option value="1">Option 1</<%= name %>-option>
+    <<%= name %>-option value="2">Option 2</<%= name %>-option>
+    <<%= name %>-option value="3">Option 3</<%= name %>-option>
+  </<%= name %>-select>
+</<%= name %>-form-field>
+
+<<%= name %>-form-field>
+  <<%= name %>-select [(ngModel)]="value">
+    <<%= name %>-option-group label="Group 1">
+      <<%= name %>-option value="1">Option 1</<%= name %>-option>
+      <<%= name %>-option value="2">Option 2</<%= name %>-option>
+    </<%= name %>-option-group>
+    <<%= name %>-option-group label="Group 2">
+      <<%= name %>-option value="3">Option 3</<%= name %>-option>
+      <<%= name %>-option value="4">Option 4</<%= name %>-option>
+    </<%= name %>-option-group>
+  </<%= name %>-select>
+</<%= name %>-form-field>
+```

package/schematics/components/files/selectable/selectable-llm.md.template

@@ -0,0 +1,31 @@
+# Selectable
+
+```typescript
+import { Selectable, SelectableItem } from '@/ui/selectable';
+```
+
+## Components
+
+### `<%= name %>-selectable`
+
+- **Inputs**
+  - `activeIndex`: number - Active index (2way)
+- **Outputs**
+  - `activeIndexChange`: EventEmitter<number> - Active index changed event
+  - `valueChanged`: EventEmitter<any> - Value changed event
+- **Export** - `<%= name %>Selectable` - Template reference
+
+### `<%= name %>-selectable-item, [<%= name %>SelectableItem]`
+
+- **Inputs**
+  - `value`: any - Value
+- **Export** - `<%= name %>SelectableItem` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-selectable [(activeIndex)]="activeIndex">
+  <<%= name %>-selectable-item value="1">Item 1</<%= name %>-selectable-item>
+  <button <%= name %>SelectableItem value="2">Item 2</button>
+</<%= name %>-selectable>
+```

package/schematics/components/files/sheet/sheet-llm.md.template

@@ -0,0 +1,54 @@
+# Sheet
+
+```typescript
+import { sheetPortal } from '@/ui/sheet';
+```
+
+## Notes:
+
+SheetOptions:
+
+- backdrop: boolean - Whether to show a backdrop
+- backdropColor: boolean - Whether to use the backdrop color
+- hideOverlay: boolean - Whether to hide the overlay
+- data: any - The data to pass to the sheet
+- title: string - The title of the sheet
+- fullWindow: boolean - Whether to use the full window
+- minWidth: string - The minimum width of the drawer
+- minHeight: string - The minimum height of the drawer
+- width: string - The width of the drawer
+- height: string - The height of the drawer
+- maxWidth: string - The maximum width of the drawer
+- maxHeight: string - The maximum height of the drawer
+- classNames: string[] - The class names of the drawer
+- header: boolean - Whether to show a header
+- disableClose: boolean - Whether to disable the close button
+- ayId: string - The id of the drawer
+- focusTrap: boolean - Whether to focus the drawer
+- afterFocusEl: HTMLElement - The element to focus after the drawer is opened
+
+## Usage
+
+```html
+<ng-template #sheetContent>
+  <div>
+    <h1>Sheet</h1>
+  </div>
+</ng-template>
+```
+
+```typescript
+const sheet = sheetPortal();
+
+sheet.open(SheetComponent, {
+  backdrop: true,
+  hideOverlay: false,
+  data: {},
+});
+
+sheet.open(sheetContent, {
+  backdrop: true,
+  hideOverlay: false,
+  data: {},
+});
+```

package/schematics/components/files/sidenav/sidenav-llm.md.template

@@ -0,0 +1,37 @@
+# Sidenav
+
+```typescript
+import { Sidenav, SidenavHeader } from '@/ui/sidenav';
+```
+
+## Components
+
+### `<%= name %>-sidenav`
+
+- **Inputs**
+  - `show`: boolean - Whether to show the sidenav (2way)
+  - `mode`: 'side' | 'over' - The mode of the sidenav
+- **Outputs**
+  - `showChange`: EventEmitter<boolean> - Show changed event
+- **Export** - `<%= name %>Sidenav` - Template reference
+
+### `<%= name %>-sidenav-header`
+
+- **Inputs**
+  - `width`: string - The width of the sidenav
+  - `minWidth`: string - The minimum width of the sidenav
+- **Export** - `<%= name %>SidenavHeader` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-sidenav [show]="show()" [mode]="mode()">
+  <<%= name %>-sidenav-header width="100px" minWidth="50px">
+    <div class="p-2">Collapsible content like side menu</div>
+  </<%= name %>-sidenav-header>
+  <div class="p-2">
+    <p>Main content</p>
+    <button (click)="toggle()">Toggle</button>
+  </div>
+</<%= name %>-sidenav>
+```

package/schematics/components/files/skeleton/skeleton-llm.md.template

@@ -0,0 +1,22 @@
+# Skeleton
+
+```typescript
+import { Skeleton } from '@/ui/skeleton';
+```
+
+## Components
+
+### `<%= name %>-skeleton`
+
+- **Inputs**
+  - `width`: string - The width of the skeleton
+  - `height`: string - The height of the skeleton
+  - `shape`: 'circle' | 'rectangle' - The shape of the skeleton
+- **Export** - `<%= name %>Skeleton` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-skeleton width="10px" height="10px" shape="circle"></<%= name %>-skeleton>
+<<%= name %>-skeleton width="25px" height="10px" shape="rectangle"></<%= name %>-skeleton>
+```

package/schematics/components/files/slider/slider-llm.md.template

@@ -0,0 +1,35 @@
+# Slider
+
+```typescript
+import { Slider } from '@/ui/slider';
+```
+
+## Components
+
+### `<%= name %>-slider`
+
+- **Inputs**
+  - `value`: number - The value of the slider (2way)
+  - `step`: number - The step of the slider
+  - `min`: number - The minimum value of the slider
+  - `max`: number - The maximum value of the slider
+  - `range`: number - The range of the slider
+  - `disabled`: boolean - Whether the slider is disabled
+  - `orientation`: 'horizontal' | 'vertical' = 'horizontal' - The orientation of the slider
+- **Export** - `<%= name %>Slider` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-slider [(ngModel)]="value" />
+<<%= name %>-slider formControlName="value" [step]="10" [max]="200" [range]="3" />
+<<%= name %>-slider
+  [(value)]="value()"
+  [step]="step()"
+  [min]="min()"
+  [max]="max()"
+  [range]="range()"
+  [disabled]="disabled()"
+  [orientation]="orientation()"
+></<%= name %>-slider>
+```

package/schematics/components/files/sonner/sonner-llm.md.template

@@ -0,0 +1,34 @@
+# Sonner
+
+```typescript
+import { sonnerPortal } from '@/ui/sonner';
+```
+
+## Notes
+
+- **Methods**
+  - `add(message: string, data?: SonnerData)`: void - Add a message
+  - `closeAll()`: void - Close all messages
+  - `success(message: string, data?: SonnerData)`: void - Add a success message
+  - `error(message: string, data?: SonnerData)`: void - Add an error message
+  - `warning(message: string, data?: SonnerData)`: void - Add a warning message
+  - `info(message: string, data?: SonnerData)`: void - Add an info message
+
+## Usage
+
+```html
+<button <%= name %>Button (click)="addMessage()">Add Message</button>
+<button <%= name %>Button (click)="clearMessage()">Clear Message</button>
+```
+
+```typescript
+sonner = sonnerPortal();
+
+addMessage() {
+  this.sonner.add('Event has been created', 'Sunday, December 03, 2023 at 9:00 AM');
+}
+
+clearMessage() {
+  this.sonner.closeAll();
+}
+```

package/schematics/components/files/spinner/spinner-llm.md.template

@@ -0,0 +1,29 @@
+# Spinner
+
+```typescript
+import { Spinner } from '@/ui/spinner';
+```
+
+## Components
+
+### `<%= name %>-spinner`
+
+- **Inputs**
+  - `size`: 'small' | 'medium' | 'large' = 'medium' - The size of the spinner
+  - `mode`: 'light' | 'dark' | '' = 'light' - The mode of the spinner
+  - `diameter`: number = 35 - The diameter of the spinner
+  - `strokeWidth`: number = 3 - The stroke width of the spinner
+  - `root`: boolean = false - Whether the spinner is the root spinner
+- **Export** - `<%= name %>Spinner` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-spinner
+  [size]="size()"
+  [mode]="mode()"
+  [diameter]="diameter()"
+  [strokeWidth]="strokeWidth()"
+  [root]="root()"
+></<%= name %>-spinner>
+```

package/schematics/components/files/stepper/stepper-llm.md.template

@@ -0,0 +1,32 @@
+# Stepper
+
+```typescript
+import { Stepper, Step, StepHeader } from '@/ui/stepper';
+```
+
+## Components
+
+### `<%= name %>-stepper`
+
+- **Inputs**
+  - `activeIndex`: number = 0 - The index of the active step (2way)
+  - `direction`: 'horizontal' | 'vertical' = 'horizontal' - The direction of the stepper
+- **Export** - `<%= name %>Stepper` - Template reference
+
+### `<%= name %>-step`
+
+- **Inputs**
+  - `title`: string - The title of the step
+- **Export** - `<%= name %>Step` - Template reference
+
+### `[<%= name %>StepHeader]`
+
+## Usage
+
+```html
+<<%= name %>-stepper [(activeIndex)]="activeIndex" [direction]="direction()">
+  <<%= name %>-step title="Step 1"> Step 1 </<%= name %>-step>
+  <<%= name %>-step title="Step 2"> Step 2 </<%= name %>-step>
+  <<%= name %>-step title="Step 3"> Step 3 </<%= name %>-step>
+</<%= name %>-stepper>
+```

package/schematics/components/files/switch/switch-llm.md.template

@@ -0,0 +1,23 @@
+# Switch
+
+```typescript
+import { Switch } from '@/ui/switch';
+```
+
+## Components
+
+### `<%= name %>-switch`
+
+- **Inputs**
+  - `checked`: boolean = false - Whether the switch is checked (2way)
+  - `disabled`: boolean = false - Whether the switch is disabled
+- **Outputs**
+  - `checkedChange`: EventEmitter<boolean> - Emits the checked value when it changes
+  - `change`: EventEmitter<boolean> - Emits the checked value when it changes
+- **Export** - `<%= name %>Switch` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-switch [(checked)]="checked" [disabled]="disabled()"></<%= name %>-switch>
+```

package/schematics/components/files/table/table-llm.md.template

@@ -0,0 +1,31 @@
+# Table
+
+```typescript
+import { TableComponents } from '@/ui/table';
+```
+
+### `<%= name %>Table`
+
+- **inputs**
+
+  - `data`: `T[]`
+  - `trackBy`: `(index: number, item: T) => string`
+
+- **Exports** - `<%= name %>Table`
+
+## Usage
+
+```html
+<table <%= name %>Table [data]="data" [trackBy]="trackBy">
+  <ng-container <%= name %>Column="name">
+    <th <%= name %>Head *<%= name %>HeadDef>Name</th>
+    <td <%= name %>Cell *<%= name %>CellDef="let row">{{row.name}}</td>
+  </ng-container>
+  <ng-container <%= name %>Column="age">
+    <th <%= name %>Head *<%= name %>HeadDef>Age</th>
+    <td <%= name %>Cell *<%= name %>CellDef="let row">{{row.age}}</td>
+  </ng-container>
+  <tr <%= name %>HeadRow *<%= name %>HeadRowDef="columns()"></tr>
+  <tr <%= name %>BodyRow *<%= name %>BodyRowDef="let row; columns: columns()"></tr>
+</table>
+```

package/schematics/components/files/tabs/tab.ts.template

@@ -36,7 +36,7 @@ import {
             @for (tab of tabs(); track tab.id) {
               <button
                 [ngbTabButton]="tab"
-                class="text-muted-foreground aria-[disabled=true]:text-muted-foreground whitespace-nowrap border-b-2 border-transparent px-4 py-3 font-medium aria-[disabled=true]:cursor-not-allowed aria-[selected=true]:!border-primary aria-[selected=true]:!text-primary aria-[disabled=true]:opacity-50"
+                class="whitespace-nowrap border-b-2 border-transparent px-4 py-3 font-medium text-muted-foreground aria-[disabled=true]:cursor-not-allowed aria-[selected=true]:!border-primary aria-[disabled=true]:text-muted-foreground aria-[selected=true]:!text-primary aria-[disabled=true]:opacity-50"
               ></button>
             }
           </div>

package/schematics/components/files/tabs/tabs-llm.md.template

@@ -0,0 +1,48 @@
+## Tabs
+
+```typescript
+import { Tabs, Tab, TabHeader, TabLazy } from '@/ui/tabs';
+```
+
+### `<%= name %>-tabs`
+
+- **inputs**
+
+  - `selectedIndex`: number (2way)
+
+- **outputs**
+  - `selectedTabChange`: `EventEmitter<TabChangeEvent>`
+
+### `<%= name %>-tab`
+
+- **inputs**
+
+  - `label`: string
+  - `disabled`: boolean
+  - `mode`: 'hidden' | 'lazy'
+  - `value`: string | number
+
+- **exports** - `<%= name %>Tab`
+
+### `<%= name %>-tab-header`
+
+- **exports** - `<%= name %>TabHeader`
+
+### `<%= name %>-tab-lazy`
+
+Use it to render the tab every time user visit the tab
+
+- **exports** - `<%= name %>TabLazy`
+
+## Usage
+
+```html
+<<%= name %>-tabs [(selectedIndex)]="selectedIndex">
+  <<%= name %>-tab label="Tab 1">Tab 1 Content</<%= name %>-tab>
+  <<%= name %>-tab>
+    <h4 *<%= name %>TabHeader>Tab 2</h4>
+    Tab 2 Content
+  </<%= name %>-tab>
+  <<%= name %>-tab *<%= name %>TabLazy="let tab"> Tab 3 </<%= name %>-tab>
+</<%= name %>-tabs>
+```

package/schematics/components/files/theme/index.ts.template

@@ -1,2 +1,2 @@
 export { injectTheme } from './theme.service';
-export { ThemeButton } from './theme-button.component';
+export { ThemeButton } from './theme-button';

package/schematics/components/files/theme/theme-button.ts.template

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Button } from '<%= basepath %>/button';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideMoon, lucideSun } from '@ng-icons/lucide';
+import { injectTheme } from './theme.service';
+// import { keyMap } from '@ngbase/adk/keys';
+
+@Component({
+  selector: '<%= name %>-theme-button',
+  imports: [Icon, Button],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucideMoon, lucideSun })],
+  template: `
+    <button <%= name %>Button="icon" class="tour-mode h-9 w-9" (click)="themeService.toggle()">
+      <<%= name %>-icon [name]="themeService.mode() === 'dark' ? 'lucideSun' : 'lucideMoon'" />
+      <span class="sr-only">Toggle theme</span>
+    </button>
+  `,
+})
+export class ThemeButton {
+  readonly themeService = injectTheme();
+
+  constructor() {
+    // keyMap('ctrl+b', () => this.themeService.toggle());
+  }
+}

package/schematics/components/files/theme/theme-llm.md.template

@@ -0,0 +1,23 @@
+# Theme
+
+```typescript
+import { ThemeButton, injectTheme } from '@/ui/theme';
+```
+
+## Components
+
+### ThemeButton
+
+```html
+<<%= name %>-theme-button />
+```
+
+## Usage
+
+```typescript
+const theme = injectTheme();
+
+theme.toggle();
+theme.mode(); // 'light' | 'dark' | ''
+theme.mode.set('light');
+```

package/schematics/components/files/theme/theme.service.ts.template

@@ -3,14 +3,12 @@ import { isClient } from '@ngbase/adk/utils';
 
 @Injectable({ providedIn: 'root' })
 export class ThemeService {
-  mode = signal<'light' | 'dark' | ''>('light');
+  readonly mode = signal<'light' | 'dark' | ''>('light');
 
   constructor() {
     if (isClient()) {
       const theme = localStorage.getItem('theme');
       this._update((theme as 'light' | 'dark') || 'light');
-
-      // registerShortcut('ctrl+h', () => this.open());
     }
   }
 

package/schematics/components/files/toggle/toggle-llm.md.template

@@ -0,0 +1,19 @@
+# Toggle
+
+```typescript
+import { Toggle } from '@/ui/toggle';
+```
+
+### `<%= name %>-toggle`
+
+- **inputs**
+
+  - `value`: boolean (2way)
+
+- **exports** - `<%= name %>Toggle`
+
+## Usage
+
+```html
+<<%= name %>-toggle [(value)]="value" />
+```

package/schematics/components/files/toggle-group/toggle-group-llm.md.template

@@ -0,0 +1,32 @@
+# Toggle
+
+```typescript
+import { ToggleGroup, ToggleItem } from '@/ui/toggle-group';
+```
+
+### `<%= name %>-toggle-group`
+
+- **inputs**
+
+  - `value`: boolean (2way)
+  - `multiple`: boolean
+
+- **exports** - `<%= name %>ToggleGroup`
+
+### `<%= name %>-toggle-item`
+
+- **inputs**
+
+  - `value`: boolean
+  - `disabled`: boolean
+
+- **exports** - `<%= name %>ToggleItem`
+
+## Usage
+
+```html
+<<%= name %>-toggle-group [(value)]="value" [multiple]="multiple">
+  <button <%= name %>ToggleItem value="1">1</button>
+  <button <%= name %>ToggleItem value="2">2</button>
+</<%= name %>-toggle-group>
+```

package/schematics/components/files/tooltip/tooltip-llm.md.template

@@ -0,0 +1,37 @@
+# Tooltip
+
+```typescript
+import { Tooltip } from '@/ui/tooltip';
+```
+
+## Components
+
+PopoverPosition =
+| 'top'
+| 'bottom'
+| 'left'
+| 'right'
+| 'rs'
+| 're'
+| 'ls'
+| 'le'
+| 'tl'
+| 'tr'
+| 'bl'
+| 'br';
+
+### `<%= name %>-tooltip`
+
+- **inputs**
+
+  - `<%= name %>Tooltip`: string
+  - `<%= name %>TooltipPosition`: PopoverPosition
+  - `delay`: number
+
+- **exports** - `<%= name %>Tooltip`
+
+## Usage
+
+```html
+<<%= name %>-tooltip <%= name %>Tooltip="Tooltip content" [delay]="100" />
+```