@ngbase/adk 0.1.6 → 0.1.7

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

@@ -0,0 +1,27 @@
+# MEE Checkbox
+
+```typescript
+import { Checkbox } from '<%= basepath %>/checkbox';
+```
+
+## Component
+
+### `<<%= name %>-checkbox>`
+
+- **Inputs:**
+
+  - `disabled`: boolean - Whether the checkbox is disabled
+  - `checked`: boolean - Whether the checkbox is checked (2way)
+  - `indeterminate`: boolean - Whether the checkbox is indeterminate
+
+- **Outputs:**
+
+  - `checkedChange`: boolean - Whether the checkbox is checked
+  - `change`: boolean - Whether the checkbox is checked
+
+## Usage
+
+```html
+<<%= name %>-checkbox [checked]="true" (checkedChange)="onChange($event)" />
+<<%= name %>-checkbox [(checked)]="property" />
+```

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

@@ -0,0 +1,29 @@
+# MEE Chip
+
+```typescript
+import { Chip, ChipGroup } from '<%= basepath %>/chip';
+```
+
+## Components
+
+### `<<%= name %>-chip-group>`
+
+### `<<%= name %>-chip>, [<%= name %>Chip]`
+
+- **Inputs:**
+
+  - `removable`: boolean - Whether the chip is removable
+  - `value`: any - The value of the chip
+
+- **Outputs:**
+
+  - `close`: void - Emits when the chip is closed
+
+## Usage
+
+```html
+<<%= name %>-chip-group>
+  <<%= name %>-chip [value]="item" [removable]="true">Text</<%= name %>-chip>
+  <button <%= name %>Chip [value]="item" [removable]="true">Text</button>
+</<%= name %>-chip-group>
+```

package/schematics/components/files/color-picker/color-picker-llm.md.template

@@ -0,0 +1,27 @@
+# MEE Color Picker
+
+```typescript
+import { FormField, Label } from '@/ui/form-field';
+import { ColorInput } from '@/ui/color-picker';
+```
+
+## Components
+
+### `<<%= name %>-color-input>`
+
+ColorFormat: `hex` | `rgb` | `hsl` | `hsb`
+
+- **Inputs:**
+
+  - `format`: ColorFormat - The format of the color input
+  - `presetColors`: string[] - The preset colors of the color input
+  - `value`: string - The value of the color input (2way)
+
+## Usage
+
+```html
+<<%= name %>-form-field>
+  <label <%= name %>Label>Color</label>
+  <<%= name %>-color-input [format]="format" [presetColors]="presetColors" [(value)]="value" />
+</<%= name %>-form-field>
+```

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

@@ -0,0 +1,43 @@
+# MEE Datepicker
+
+```typescript
+import { FormField, Label } from '@/ui/form-field';
+import { DatepickerTrigger } from '@/ui/datepicker';
+```
+
+## Components
+
+### `[<%= name %>DatepickerTrigger]`
+
+- **Inputs:**
+
+  - `noOfCalendars`: number - The number of calendars to display
+  - `range`: boolean - Whether to display a range of dates
+  - `time`: boolean - Whether to display a time picker
+  - `format`: string - The format of the date input
+  - `fieldFormat`: string - The format of the date input in the datepicker group
+  - `dateFilter`: (date: Date) => boolean - A function to filter dates
+  - `pickerType`: 'date' | 'month' | 'year' - The type of picker to display
+  - `pickerTemplate`: TemplateRef<any> - A template to display in the picker
+
+## Usage
+
+```html
+<<%= name %>-form-field>
+  <label <%= name %>Label>Date</label>
+  <<%= name %>-datepicker-trigger
+    [noOfCalendars]="noOfCalendars"
+    [range]="range"
+    [time]="time"
+    [format]="format"
+    [fieldFormat]="fieldFormat"
+    [dateFilter]="dateFilter"
+    [pickerType]="'date'"
+    [pickerTemplate]="pickerTemplate"
+  />
+  <ng-template #pickerTemplate>
+    <button <%= name %>Button>Today</button>
+    <button <%= name %>Button>Yesterday</button>
+  </ng-template>
+</<%= name %>-form-field>
+```

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

@@ -0,0 +1,69 @@
+# MEE Dialog
+
+```typescript
+import { dialogPortal } from '@/ui/dialog';
+```
+
+## Notes:
+
+DialogOptions:
+
+- 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 dialog
+- title: string - The title of the dialog
+- fullWindow: boolean - Whether to use the full window
+- minWidth: string - The minimum width of the dialog
+- minHeight: string - The minimum height of the dialog
+- width: string - The width of the dialog
+- height: string - The height of the dialog
+- maxWidth: string - The maximum width of the dialog
+- maxHeight: string - The maximum height of the dialog
+- classNames: string[] - The class names of the dialog
+- header: boolean - Whether to show a header
+- disableClose: boolean - Whether to disable the close button
+- ayId: string - The id of the dialog
+- focusTrap: boolean - Whether to focus the dialog
+- afterFocusEl: HTMLElement - The element to focus after the dialog is opened
+
+## Usage
+
+```html
+<ng-template #dialogTemplate>
+  <div>
+    <h1>Dialog</h1>
+  </div>
+</ng-template>
+```
+
+```typescript
+import { DialogRef } from '@ngbase/adk/portal';
+@Component({
+  template: `content`,
+})
+export class AddTaskComponent {
+  readonly dialogRef = inject<DialogRef<Task>>(DialogRef);
+  readonly data = this.dialogRef.data;
+
+  close() {
+    this.dialogRef.close(data);
+  }
+}
+
+const ref = dialog.open(AddTaskComponent, {
+  backdrop: true,
+  hideOverlay: false,
+  data: {},
+});
+
+ref.afterClosed.subscribe(data => {
+  console.log(data);
+});
+
+dialog.open(dialogContent(), {
+  backdrop: true,
+  hideOverlay: false,
+  data: {},
+});
+```

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

@@ -0,0 +1,54 @@
+# MEE Drawer
+
+```typescript
+import { drawerPortal } from '@/ui/drawer';
+```
+
+## Notes:
+
+DrawerOptions:
+
+- 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 drawer
+- title: string - The title of the drawer
+- 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 #drawerContent>
+  <div>
+    <h1>Drawer</h1>
+  </div>
+</ng-template>
+```
+
+```typescript
+const drawer = drawerPortal();
+
+drawer.open(DrawerComponent, {
+  backdrop: true,
+  hideOverlay: false,
+  data: {},
+});
+
+drawer.open(drawerContent, {
+  backdrop: true,
+  hideOverlay: false,
+  data: {},
+});
+```

package/schematics/components/files/form-field/form-field-llm.md.template

@@ -0,0 +1,56 @@
+# MEE Form Field
+
+```typescript
+import { Icon } from '@/ui/icon';
+import {
+  FormField,
+  Label,
+  Description,
+  InputPrefix,
+  InputSuffix,
+  InputError,
+  MeeInput,
+} from '@/ui/form-field';
+```
+
+## Components
+
+### `<%= name %>-form-field, [<%= name %>FormField]`
+
+### `[<%= name %>Label]`
+
+### `[<%= name %>Description]`
+
+### `[<%= name %>Prefix]`
+
+### `[<%= name %>Suffix]`
+
+### `[<%= name %>Error]`
+
+- **Inputs**
+  - `<%= name %>Error`: string - condition to show the error similar to ngIf
+
+### `[<%= name %>Input]`
+
+- **Inputs**
+  - `value`: string - The value of the input (2way)
+- **Outputs**
+  - `valueChange`: EventEmitter<string> - The event emitter for the value change
+
+## Usage
+
+```html
+<<%= name %>-form-field>
+  <label <%= name %>Label>Label</label>
+  <input <%= name %>Input [(value)]="value" />
+  <p <%= name %>Description>Description</p>
+  <p <%= name %>Error="required">Error</p>
+  <p <%= name %>Error="!required && minlength">Error</p>
+  <<%= name %>-icon <%= name %>Prefix name="info" />
+  <<%= name %>-icon <%= name %>Suffix name="info" />
+</<%= name %>-form-field>
+
+<<%= name %>-form-field>
+  <input <%= name %>Input [(ngModel)]="value" />
+</<%= name %>-form-field>
+```

package/schematics/components/files/form-field/form-field.ts.template

@@ -52,7 +52,7 @@ export class FormField {
     '[class.border-red-500]': 'formField?.hasErrors()',
   },
 })
-export class Input {
+export class MeeInput {
   readonly formField = inject(NgbFormField, { optional: true });
 }
 

package/schematics/components/files/hover-card/hover-card-llm.md.template

@@ -0,0 +1,26 @@
+# Hover Card
+
+```typescript
+import { HoverCard } from '@/ui/hover-card';
+```
+
+## Components
+
+### `<%= name %>-hover-card`
+
+- **Inputs**
+  - `<%= name %>HoverCard`: TemplateRef<any> - The template to show when hovering over the element
+  - `options`: PopoverOptions - The options for the hover card
+  - `delay`: number - The delay in milliseconds before the hover card is shown
+
+## Usage
+
+```html
+<button [<%= name %>HoverCard]="myTemplate" <%= name %>Button="ghost" class="underline">
+  Hover over to show hover card
+</button>
+
+<ng-template #myTemplate>
+  <div>Hover card content</div>
+</ng-template>
+```

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

@@ -0,0 +1,19 @@
+# Icon
+
+```typescript
+import { Icon } from '@/ui/icon';
+```
+
+## Components
+
+### `<%= name %>-icon`
+
+- **Inputs**
+  - `name`: string - The name of the icon to display
+  - `size`: string - The size of the icon to display
+
+## Usage
+
+```html
+<<%= name %>-icon name="info" />
+```

package/schematics/components/files/inline-edit/inline-edit-llm.md.template

@@ -0,0 +1,22 @@
+# Inline Edit
+
+```typescript
+import { InlineEdit } from '@/ui/inline-edit';
+```
+
+## Components
+
+### `<%= name %>-inline-edit`
+
+- **Inputs**
+  - `value`: string - The value of the input (2way)
+  - `editOn`: 'click' | 'dblclick' = 'dblclick' - The event to trigger the edit
+- **Outputs**
+  - `valueChange`: EventEmitter<string> - The event emitter for the value change
+
+## Usage
+
+```html
+<<%= name %>-inline-edit [value]="value" [editOn]="editOn" (valueChange)="onValueChange($event)" />
+<<%= name %>-inline-edit [(value)]="value" />
+```

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

@@ -0,0 +1,23 @@
+# List
+
+```typescript
+import { List } from '@/ui/list';
+```
+
+## Components
+
+### `[<%= name %>List]`
+
+- **inputs**
+
+  - `disabled`: boolean
+
+- **exports** - `<%= name %>List`
+
+## Usage
+
+```html
+<button <%= name %>List>Item 1</button>
+<button <%= name %>List>Item 2</button>
+<button <%= name %>List>Item 3</button>
+```

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