@ngbase/adk 0.1.6 → 0.1.8

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 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 [&[data-ch='false']]:px-4 [&[data-ch='false']]:py-3 [&[data-ch='true']>*:first-child]:px-4 [&[data-ch='true']>*:first-child]:py-3"
               ></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.component.ts.template → theme-button.ts.template}

@@ -4,6 +4,7 @@ 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',
@@ -21,6 +22,6 @@ export class ThemeButton {
   readonly themeService = injectTheme();
 
   constructor() {
-    // shortcutListener('ctrl+d', () => this.themeService.toggle());
+    // 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" />
+```

package/schematics/components/schema.json

@@ -73,6 +73,7 @@
           "switch",
           "table",
           "tabs",
+          "theme",
           "toggle",
           "toggle-group",
           "tooltip",
@@ -129,6 +130,7 @@
           { "value": "switch", "label": "Switch" },
           { "value": "table", "label": "Table" },
           { "value": "tabs", "label": "Tabs" },
+          { "value": "theme", "label": "Theme" },
           { "value": "toggle", "label": "Toggle" },
           { "value": "toggle-group", "label": "Toggle Group" },
           { "value": "tooltip", "label": "Tooltip" },