@ngbase/adk 0.1.6 → 0.1.8

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

@@ -0,0 +1,26 @@
+# MEE Breadcrumb
+
+```typescript
+import { Breadcrumb, Breadcrumbs, BreadcrumbsSeparator } from '@/ui/breadcrumb';
+```
+
+## Components
+
+### `<<%= name %>-breadcrumbs>`
+
+### `<<%= name %>-breadcrumb>`
+
+### `<<%= name %>-breadcrumbs-separator>` - Optional
+
+## Usage
+
+```html
+<<%= name %>-breadcrumbs>
+  <ng-template <%= name %>BreadcrumbsSeparator>
+    <<%= name %>-icon name="lucideChevronRight"></<%= name %>-icon>
+  </ng-template>
+
+  <a <%= name %>Breadcrumb routerLink="/home">Home</a>
+  <<%= name %>-breadcrumb>Contact</<%= name %>-breadcrumb>
+</<%= name %>-breadcrumbs>
+```

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

@@ -8,14 +8,16 @@ import {
   NgbBreadcrumbLink,
   NgbBreadcrumbs,
   NgbBreadcrumbSeparator,
-  NgbBreadcrumbSeparatorAria,
 } from '@ngbase/adk/breadcrumb';
 
 @Component({
   selector: '<%= name %>-breadcrumbs',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucideChevronRight })],
   hostDirectives: [NgbBreadcrumbs],
-  template: `<ng-content />`,
+  imports: [Icon, NgbBreadcrumbSeparator],
+  template: `<ng-content />
+    <<%= name %>-icon *ngbBreadcrumbsSeparator name="lucideChevronRight" class="text-muted-foreground" /> `,
   host: {
     class: 'flex items-center gap-2',
   },
@@ -23,25 +25,14 @@ import {
 export class Breadcrumbs {}
 
 @Component({
-  selector: '<%= name %>-breadcrumb',
+  selector: '<%= name %>-breadcrumb, [<%= name %>Breadcrumb]',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [aliasBreadcrumb(Breadcrumb)],
-  viewProviders: [provideIcons({ lucideChevronRight })],
-  imports: [Icon, NgbBreadcrumbLink, NgbBreadcrumbSeparatorAria],
-  template: `
-    <a class='hover:text-primary aria-[current="page"]:text-primary' ngbBreadcrumbLink>
-      <ng-content />
-    </a>
-    @if (!active()) {
-      <<%= name %>-icon
-        ngbBreadcrumbSeparatorAria
-        name="lucideChevronRight"
-        class="text-muted-foreground"
-      />
-    }
-  `,
+  hostDirectives: [NgbBreadcrumbLink],
+  template: `<ng-content />`,
   host: {
-    class: 'flex items-center gap-2 text-muted-foreground',
+    class:
+      'flex items-center gap-2 text-muted-foreground aria-[current="page"]:text-primary hover:text-primary cursor-pointer',
   },
 })
 export class Breadcrumb extends NgbBreadcrumb {}

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

@@ -0,0 +1,22 @@
+# MEE Button
+
+```typescript
+import { Button } from '@/ui/button';
+```
+
+## Components
+
+### `[<%= name %>Button]`
+
+- ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'icon'
+- **Inputs:**
+
+  - `variant`: ButtonVariant = 'primary'
+
+- **Export:** `#button="<%= name %>Button"` - Template reference
+
+## Usage
+
+```html
+<button <%= name %>Button>Button</button> <button <%= name %>Button variant="ghost">Button</button>
+```

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

@@ -0,0 +1,16 @@
+# MEE Card
+
+```typescript
+import { Card } from '@/ui/card';
+```
+
+## Components
+
+### `<<%= name %>-card>, [<%= name %>Card]`
+
+## Usage
+
+```html
+<<%= name %>-card>Card</<%= name %>-card>
+<div <%= name %>Card>Card</div>
+```

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

@@ -0,0 +1,38 @@
+# MEE Carousel
+
+```typescript
+import { Carousel, CarouselItem, CarouselButton } from '@/ui/carousel';
+```
+
+## Components
+
+### `<<%= name %>-carousel>, [<%= name %>Carousel]`
+
+- **Export:** `#carousel="<%= name %>Carousel"` - Template reference
+
+### `[<%= name %>CarouselItem]`
+
+- **Export:** `#carouselItem="<%= name %>CarouselItem"` - Template reference
+
+### `<<%= name %>-carousel-button>, [<%= name %>CarouselButton]`
+
+- **Inputs:**
+
+  - `<%= name %>CarouselButton`: 'next' | 'prev' | number - Carousel button
+
+- **Export:** `#carouselButton="<%= name %>CarouselButton"` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-carousel>
+  <div <%= name %>CarouselItem class="pl-4lg:basis-1/3 aspect-square shrink-0 grow-0 basis-full">
+    Item 1
+  </div>
+  <div <%= name %>CarouselItem class="pl-4lg:basis-1/3 aspect-square shrink-0 grow-0 basis-full">
+    Item 2
+  </div>
+  <button <%= name %>CarouselButton="next">Next</button>
+  <button <%= name %>CarouselButton="prev">Prev</button>
+</<%= name %>-carousel>
+```

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/checkbox/focus-style.directive.ts.template

@@ -1,12 +1,15 @@
-import { booleanAttribute, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
+
+export const focusStyles = {
+  within: 'focus-within:ring-[2px] focus-within:border-primary',
+  focus:
+    'outline-none focus-visible:ring-[2px] ring-primary/30 ring-offset-background focus-visible:border-primary',
+};
 
 @Directive({
   selector: '[<%= name %>FocusStyle]',
   host: {
-    class: 'outline-none',
-    '[class]': `!unfocus() ? 'focus-visible:ring-2 focus-within:ring-2 focus-within:ring-offset-2 ring-primary focus-visible:ring-offset-2 ring-offset-background data-[focus]:ring-2 data-[focus]:ring-offset-2 data-[focus]:ring-offset-background data-[focus]:ring-primary' : ''`,
+    class: focusStyles.focus,
   },
 })
-export class FocusStyle {
-  unfocus = input(false, { transform: booleanAttribute });
-}
+export class FocusStyle {}

package/schematics/components/files/checkbox/index.ts.template

@@ -3,4 +3,4 @@
  */
 
 export * from './checkbox';
-export { FocusStyle as ɵFocusStyle } from './focus-style.directive';
+export { FocusStyle as ɵFocusStyle, focusStyles as ɵFocusStyles } from './focus-style.directive';

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

@@ -25,7 +25,7 @@ import { NgbSelectTarget } from '@ngbase/adk/select';
   template: `
     <ng-content select="[<%= name %>Label]" />
     <ng-content select="[<%= name %>Description]" />
-    <div class="mt-1 flex items-center" #target <%= name %>InputStyle>
+    <div class="flex items-center" #target <%= name %>InputStyle>
       <ng-content select="[<%= name %>Prefix]" />
       <ng-content />
       <ng-content select="[<%= name %>Suffix]" />
@@ -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/form-field/input-style.directive.ts.template

@@ -1,11 +1,10 @@
 import { Directive } from '@angular/core';
-import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
+import { ɵFocusStyles as focusStyles } from '<%= basepath %>/checkbox';
 
 @Directive({
   selector: '[<%= name %>InputStyle]',
-  hostDirectives: [{ directive: FocusStyle, inputs: ['unfocus'] }],
   host: {
-    class: 'inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10',
+    class: `mis inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10 ${focusStyles.focus} ${focusStyles.within}`,
   },
 })
 export class InputStyle {}

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

@@ -1,5 +1,6 @@
 import { Directive } from '@angular/core';
 import { NgbList, NgbListActionGroup, provideList } from '@ngbase/adk/list';
+import { FocusStyle } from '../checkbox/focus-style.directive';
 
 @Directive({
   selector: '[<%= name %>ListStyle]',
@@ -12,7 +13,7 @@ export class ListStyle {}
 
 @Directive({
   selector: '[<%= name %>List]',
-  hostDirectives: [ListStyle],
+  hostDirectives: [ListStyle, FocusStyle],
   providers: [provideList(List)],
   host: {
     role: 'list',

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