@ngbase/adk 0.1.5 → 0.1.7

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" />
+```

package/schematics/components/files/tooltip/tooltip.ts.template

@@ -14,11 +14,7 @@ import {
   hostDirectives: [
     {
       directive: NgbTooltip,
-      inputs: [
-        'ngbTooltip: <%= name %>Tooltip',
-        'ngbTooltipPosition: <%= name %>TooltipPosition',
-        'delay',
-      ],
+      inputs: ['ngbTooltip: <%= name %>Tooltip', 'ngbTooltipPosition: <%= name %>TooltipPosition', 'delay'],
     },
   ],
 })

package/schematics/components/files/tree/tree.ts.template

@@ -25,6 +25,7 @@ export class Tree<T> extends NgbTree<T> {}
   selector: '<%= name %>-tree-node',
   exportAs: '<%= name %>TreeNode',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasTreeNode(TreeNode)],
   template: `
     <div class="flex items-start">
       <ng-content />
@@ -32,7 +33,6 @@ export class Tree<T> extends NgbTree<T> {}
     <ng-content select="[<%= name %>TreeNodeContent]" />
     <ng-container #container />
   `,
-  providers: [provideTreeNode(TreeNode)],
   host: {
     class: 'block w-full cursor-pointer',
   },

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" },