@ngbase/adk 0.1.6 → 0.1.8

package/schematics/components/files/menu/context-menu-llm.md.template

@@ -0,0 +1,28 @@
+# Menu
+
+```typescript
+import { Menu, MenuTrigger, MenuContent } from '@/ui/menu';
+```
+
+## Components
+
+### `[<%= name %>ContextMenu]`
+
+- **Inputs**
+  - `<%= name %>ContextMenu`: Menu - Menu reference
+- **Outputs**
+  - `ctxOpen`: EventEmitter<void> - Emits when the context menu is opened
+  - `ctxClose`: EventEmitter<void> - Emits when the context menu is closed
+- **Exports** - `<%= name %>ContextMenu`
+
+## Usage
+
+```html
+<button [<%= name %>ContextMenu]="menu">Context Menu</button>
+<<%= name %>-menu #menu>
+  <button>Item 1</button>
+  <button>Item 2</button>
+</<%= name %>-menu>
+```
+
+## Context Menu

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

@@ -0,0 +1,37 @@
+# Menu
+
+```typescript
+import { Menu, MenuTrigger, MenuContent } from '@/ui/menu';
+```
+
+## Components
+
+### `<%= name %>-menu`
+
+- **Exports** - `<%= name %>Menu`
+
+### `<%= name %>MenuContent`
+
+### `<%= name %>MenuTrigger`
+
+- **Inputs**
+  - `<%= name %>MenuTrigger`: <%= name %>Menu - Menu reference
+- **Exports** - `<%= name %>MenuTrigger`
+
+## Menu Usage
+
+```html
+<button [<%= name %>MenuTrigger]="menu">Menu</button>
+<<%= name %>-menu #menu>
+  <button>Item 1</button>
+  <button>Item 2</button>
+</<%= name %>-menu>
+
+<button [<%= name %>MenuTrigger]="menu1" [<%= name %>MenuTriggerData]="{ data: 'Custom data' }">Menu</button>
+<<%= name %>-menu #menu1>
+  <ng-template <%= name %>MenuContent let-data="data">
+    <button <%= name %>List>{{ data }}</button>
+    <button <%= name %>List>Item 2</button>
+  </ng-template>
+</<%= name %>-menu>
+```

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

@@ -0,0 +1,21 @@
+# OTP
+
+```typescript
+import { Otp } from '@/ui/otp';
+```
+
+## Components
+
+### `<%= name %>-otp-input`
+
+- **Inputs**
+  - `size`: number[] - The size of the OTP input
+  - `masked`: boolean - Whether the OTP input is masked
+  - `disabled`: boolean - Whether the OTP input is disabled
+- **Exports** - `<%= name %>OtpInput`
+
+## Usage
+
+```html
+<<%= name %>-otp-input [size]="[4, 4, 4]" [masked]="true" [disabled]="false"></<%= name %>-otp-input>
+```

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

@@ -0,0 +1,29 @@
+# Pagination
+
+```typescript
+import { Pagination } from '@/ui/pagination';
+```
+
+## Components
+
+### `<%= name %>-pagination`
+
+- **Inputs**
+  - `size`: number - The size of the pagination (2way)
+  - `active`: number - The active page (2way)
+  - `total`: number - The total number of pages
+  - `sizeOptions`: number[] - The options for the size of the pagination
+- **Outputs**
+  - `valueChanged`: EventEmitter<number> - Emits when the value changes
+- **Exports** - `<%= name %>Pagination`
+
+## Usage
+
+```html
+<<%= name %>-pagination
+  [size]="10"
+  [active]="1"
+  [total]="100"
+  [sizeOptions]="[10, 20, 50, 100]"
+></<%= name %>-pagination>
+```

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

@@ -10,6 +10,7 @@ import {
   lucideChevronsLeft,
   lucideChevronsRight,
 } from '@ng-icons/lucide';
+import { FormField } from '<%= basepath %>/form-field';
 
 @Component({
   selector: '<%= name %>-pagination',
@@ -22,21 +23,19 @@ import {
       lucideChevronsRight,
     }),
   ],
-  imports: [Button, Icon, Select, Option, NgbPaginationBtn],
+  imports: [Button, Icon, Select, Option, NgbPaginationBtn, FormField],
   template: `
     <div class="flex items-center gap-2">
       <div>Rows per page</div>
-      <<%= name %>-select
-        [value]="size()"
-        (valueChange)="sizeChanged($event)"
-        class="h-8 !w-auto rounded-md border px-2"
-      >
-        @for (size of sizeOptions(); track size) {
-          <<%= name %>-option [value]="size">
-            {{ size }}
-          </<%= name %>-option>
-        }
-      </<%= name %>-select>
+      <<%= name %>-form-field class="!w-auto [&>.mis]:min-h-8 [&>.mis]:py-0">
+        <<%= name %>-select [value]="size()" (valueChange)="sizeChanged($event)">
+          @for (size of sizeOptions(); track size) {
+            <<%= name %>-option [value]="size">
+              {{ size }}
+            </<%= name %>-option>
+          }
+        </<%= name %>-select>
+      </<%= name %>-form-field>
     </div>
     <div>Page {{ active() }} of {{ totalSnaps() }}</div>
     <div class="flex items-center gap-2">

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

@@ -0,0 +1,59 @@
+# Popover
+
+```typescript
+import { popoverPortal, PopoverTrigger, PopoverClose } from '@/ui/popover';
+```
+
+## Components
+
+### `<%= name %>PopoverTrigger`
+
+- **Inputs**
+  - `<%= name %>PopoverTrigger`: Popover - Popover reference
+  - `<%= name %>PopoverTriggerData`: any - The data to pass to the popover
+  -
+- **Outputs**
+- **Exports** - `<%= name %>PopoverTrigger`
+
+### `<%= name %>PopoverClose`
+
+- **Inputs**
+  - `<%= name %>PopoverClose`: any - The data to pass to the afterClose event
+- **Exports** - `<%= name %>PopoverClose`
+
+## Usage
+
+```html
+<div [<%= name %>PopoverTrigger]="popoverTemplate"></div>
+
+<ng-template #popoverTemplate>
+  <div>
+    <h1>Popover</h1>
+  </div>
+</ng-template>
+```
+
+```typescript
+class PopoverComponent {
+  readonly popover = popoverPortal();
+  readonly popoverTemplate = viewChild<TemplateRef<any>>('popoverTemplate');
+
+  open() {
+    const dialogRef = this.dialog.open(Component, {
+      data: {
+        message: 'Hello, world!',
+      },
+    });
+    or;
+    const dialogRef = this.dialog.open(popoverTemplate, {
+      data: {
+        message: 'Hello, world!',
+      },
+    });
+
+    dialogRef.afterClosed.subscribe(data => {
+      console.log(data);
+    });
+  }
+}
+```

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

@@ -0,0 +1,19 @@
+# Progress
+
+```typescript
+import { Progress } from '@/ui/progress';
+```
+
+## Components
+
+### `<%= name %>-progress`
+
+- **Inputs**
+  - `value`: number - The value of the progress
+- **Exports** - `<%= name %>Progress`
+
+## Usage
+
+```html
+<<%= name %>-progress [value]="progress"></<%= name %>-progress>
+```

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

@@ -0,0 +1,36 @@
+# Radio
+
+```typescript
+import { Radio, RadioGroup } from '@/ui/radio';
+```
+
+## Components
+
+### `<%= name %>-radio-group`
+
+- **Inputs**
+  - `value`: any - The value of the radio group (2way)
+  - **Outputs**
+  - `valueChange`: EventEmitter<any> - The event emitter for the value change
+- **Exports** - `<%= name %>RadioGroup`
+
+### `<%= name %>-radio`
+
+- **Inputs**
+  - `value`: any - The value of the radio
+  - `disabled`: boolean - Whether the radio is disabled
+- **Exports** - `<%= name %>Radio`
+
+## Usage
+
+```html
+<<%= name %>-radio-group [(value)]="value">
+  <<%= name %>-radio value="1">Radio 1</<%= name %>-radio>
+  <<%= name %>-radio value="2">Radio 2</<%= name %>-radio>
+</<%= name %>-radio-group>
+
+<<%= name %>-radio-group [(ngModel)]="value">
+  <<%= name %>-radio value="1">Radio 1</<%= name %>-radio>
+  <<%= name %>-radio value="2">Radio 2</<%= name %>-radio>
+</<%= name %>-radio-group>
+```

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/option.ts.template

@@ -14,7 +14,7 @@ import { ListStyle } from '<%= basepath %>/list';
     <ng-content />`,
   host: {
     class: 'outline-none',
-    '[class.bg-muted]': 'option.active() || option.checked()',
+    '[class.bg-muted]': 'option.active() || (!option.multiple() && option.checked())',
   },
 })
 export class Option<T> {
@@ -24,7 +24,7 @@ export class Option<T> {
 @Component({
   selector: '<%= name %>-option-group, [<%= name %>OptionGroup]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="text-muted-foreground bg-popover sticky -top-1 z-10 px-2 py-1.5 text-sm">
+  template: `<div class="sticky -top-1 z-10 bg-popover px-2 py-1.5 text-sm text-muted-foreground">
       {{ label() }}
     </div>
     <ng-content />`,

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/selectable/selectable.ts.template

@@ -1,15 +1,16 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { NgbSelectable, NgbSelectableItem } from '@ngbase/adk/selectable';
+import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
 
 @Component({
   selector: '<%= name %>-selectable-item, [<%= name %>SelectableItem]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbSelectableItem, inputs: ['value'] }],
+  hostDirectives: [{ directive: NgbSelectableItem, inputs: ['value'] }, FocusStyle],
   template: `<ng-content />`,
   host: {
     class:
-      'flex-1 flex items-center font-medium justify-center px-3 py-1.5 cursor-pointer transition-colors rounded-md whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-    '[class]': `selectable.selected() ? 'bg-background text-primary shadow-md ring-1 ring-border' : 'opacity-60'`,
+      'flex-1 flex items-center font-medium justify-center px-3 py-1.5 cursor-pointer transition-colors rounded-md whitespace-nowrap border',
+    '[class]': `selectable.selected() ? 'bg-background text-primary shadow-md border-border' : 'opacity-60 border-transparent'`,
   },
 })
 export class SelectableItem<T> {

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();
+}
+```