@ngbase/adk 0.1.5 → 0.1.7

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

@@ -0,0 +1,19 @@
+# Mask
+
+```typescript
+import { Mask } from '@/ui/mask';
+```
+
+## Components
+
+### `<%= name %>Mask`
+
+- **Inputs**
+  - `<%= name %>Mask`: string - The mask pattern to apply to the input
+  - `showMaskType`: boolean = false - Whether to show the mask type
+
+## Usage
+
+```html
+<<%= name %>-mask [<%= name %>Mask]="'(000) 000-0000'" [showMaskType]="showMaskType" />
+```

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import { AccessibleGroup } from '@ngbase/adk/a11y';
-import { NgbMenu, NgbMenuTrigger, NgpMenuGroup, aliasMenu } from '@ngbase/adk/menu';
+import { NgbMenu, NgbMenuTrigger, NgpMenuGroup, aliasMenu, NgpMenuContent } from '@ngbase/adk/menu';
 
 @Component({
   selector: '<%= name %>-menu',
@@ -35,3 +35,9 @@ export class Menu extends NgbMenu {}
   },
 })
 export class MenuTrigger {}
+
+@Directive({
+  selector: 'ng-template[<%= name %>MenuContent]',
+  hostDirectives: [NgpMenuContent],
+})
+export class MenuContent {}

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

@@ -23,7 +23,7 @@ export class RadioGroup {}
       ngbRadioIndicator
       class="custom-radio relative flex h-4 w-4 flex-none items-center justify-center rounded-full border border-primary group-aria-[disabled='true']:border-muted-foreground"
     >
-       <div
+      <div
         class="h-2 w-2 rounded-full bg-primary group-aria-[disabled='true']:bg-muted-foreground"
       ></div>
     </button>

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

@@ -92,5 +92,8 @@ export class SelectOption<T> {}
   },
 })
 export class Select<T> extends NgbSelect<T> {
-  override sideOffset = 16;
+  override defaultOptions = {
+    sideOffset: 16,
+    offset1: 0,
+  };
 }

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