@colletdev/angular 0.1.3

package/src/collapsible.component.ts

@@ -0,0 +1,72 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-collapsible>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+import type { CollapsibleDetail } from './types.js';
+
+@Component({
+  selector: 'cx-collapsible[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-collapsible
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.trigger-html]="triggerHtml"
+    [attr.open]="open || null"
+    [attr.icon]="icon"
+    [attr.no-icon]="noIcon || null"
+    [attr.size]="size"
+    [attr.disabled]="disabled || null"
+    #el
+  ><ng-content />
+    <ng-content select="[slot=trigger]" /></cx-collapsible>
+  `,
+})
+export class CxCollapsible implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() triggerHtml?: string = undefined;
+  @Input() open?: boolean = undefined;
+  @Input() icon?: string = undefined;
+  @Input() noIcon?: boolean = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() disabled?: boolean = undefined;
+
+  @Output() cxChange = new EventEmitter<CustomEvent<CollapsibleDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-change', (e: Event) => {
+      this.cxChange.emit(e as CustomEvent);
+    });
+  }
+
+
+
+  /** Expands the collapsible content. */
+  doOpen(): void { (this.el.nativeElement as any).open(); }
+
+  /** Collapses the content. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+  /** Toggles the collapsible state. */
+  toggle(): void { (this.el.nativeElement as any).toggle(); }
+
+}

package/src/date-picker.component.ts

@@ -0,0 +1,159 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-date-picker>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+  forwardRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+
+@Component({
+  selector: 'cx-date-picker[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxDatePicker),
+    multi: true,
+  }],
+  template: `
+  <cx-date-picker
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.selected]="selected"
+    [attr.min]="min"
+    [attr.max]="max"
+    [disabled-dates]="_serialize_disabledDates()"
+    [attr.format]="format"
+    [attr.first-day]="firstDay"
+    [attr.placeholder]="placeholder"
+    [attr.helper-text]="helperText"
+    [attr.error]="error"
+    [attr.disabled]="disabled || null"
+    [attr.required]="required || null"
+    [attr.readonly]="readonly || null"
+    [attr.name]="name"
+    #el
+  ><ng-content /></cx-date-picker>
+  `,
+})
+export class CxDatePicker implements AfterViewInit, OnChanges, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label!: string;
+  @Input() variant?: 'outline' | 'filled' | 'ghost' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() selected?: string = undefined;
+  @Input() min?: string = undefined;
+  @Input() max?: string = undefined;
+  @Input() disabledDates?: string[] | string = undefined;
+  @Input() format?: 'iso' | 'us-short' | 'eu-short' | 'eu-dot' = undefined;
+  @Input() firstDay?: 'monday' | 'sunday' = undefined;
+  @Input() placeholder?: string = undefined;
+  @Input() helperText?: string = undefined;
+  @Input() error?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() required?: boolean = undefined;
+  @Input() readonly?: boolean = undefined;
+  @Input() name?: string = undefined;
+
+  @Output() cxInput = new EventEmitter<CustomEvent<InputDetail>>();
+  @Output() cxChange = new EventEmitter<CustomEvent<InputDetail>>();
+  @Output() cxFocus = new EventEmitter<CustomEvent<FocusDetail>>();
+  @Output() cxBlur = new EventEmitter<CustomEvent<FocusDetail>>();
+  @Output() cxKeydown = new EventEmitter<CustomEvent<KeyboardDetail>>();
+  @Output() cxKeyup = new EventEmitter<CustomEvent<KeyboardDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-input', (e: Event) => {
+      this.cxInput.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-change', (e: Event) => {
+      this.cxChange.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-focus', (e: Event) => {
+      this.cxFocus.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-blur', (e: Event) => {
+      this.cxBlur.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-keydown', (e: Event) => {
+      this.cxKeydown.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-keyup', (e: Event) => {
+      this.cxKeyup.emit(e as CustomEvent);
+    });
+    // CVA: sync CE value changes back to Angular forms
+    this.el.nativeElement.addEventListener('cx-change', (e: Event) => {
+      this._onChange((e as CustomEvent).detail?.value);
+    });
+    this.el.nativeElement.addEventListener('focusout', () => {
+      this._onTouched();
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['disabledDates'] && this.el) {
+      const val = this.disabledDates;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('disabled-dates', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('disabled-dates');
+      }
+    }
+  }
+
+  _serialize_disabledDates(): string | null {
+    const val = this.disabledDates;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  /** Opens the calendar panel. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the calendar panel. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+  /** Focuses the trigger button. */
+  focus(): void { (this.el.nativeElement as any).focus(); }
+
+  // ── ControlValueAccessor ──
+  private _onChange: (value: any) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  writeValue(value: any): void {
+    if (this.el) (this.el.nativeElement as any).value = value ?? '';
+  }
+
+  registerOnChange(fn: (value: any) => void): void { this._onChange = fn; }
+  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (this.el) {
+      if (isDisabled) this.el.nativeElement.setAttribute('disabled', '');
+      else this.el.nativeElement.removeAttribute('disabled');
+    }
+  }
+}

package/src/dialog.component.ts

@@ -0,0 +1,67 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-dialog>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+import type { CloseDetail } from './types.js';
+
+@Component({
+  selector: 'cx-dialog[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-dialog
+    [attr.id]="id"
+    [attr.title]="title"
+    [attr.variant]="variant"
+    [attr.description]="description"
+    [attr.size]="size"
+    [attr.close-button]="closeButton"
+    [attr.drawer]="drawer"
+    #el
+  ><ng-content />
+    <ng-content select="[slot=footer]" /></cx-dialog>
+  `,
+})
+export class CxDialog implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() title?: string = undefined;
+  @Input() variant?: 'standard' | 'alert' = undefined;
+  @Input() description?: string = undefined;
+  @Input() size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' = undefined;
+  @Input() closeButton?: string = undefined;
+  @Input() drawer?: string = undefined;
+
+  @Output() cxClose = new EventEmitter<CustomEvent<CloseDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-close', (e: Event) => {
+      this.cxClose.emit(e as CustomEvent);
+    });
+  }
+
+
+
+  /** Opens the dialog modal with entrance animation. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the dialog modal with exit animation. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+}

package/src/drawer.component.ts

@@ -0,0 +1,67 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-drawer>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+import type { CloseDetail } from './types.js';
+
+@Component({
+  selector: 'cx-drawer[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-drawer
+    [attr.id]="id"
+    [attr.title]="title"
+    [attr.description]="description"
+    [attr.side]="side"
+    [attr.size]="size"
+    [attr.shape]="shape"
+    [attr.close-button]="closeButton"
+    #el
+  ><ng-content />
+    <ng-content select="[slot=footer]" /></cx-drawer>
+  `,
+})
+export class CxDrawer implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() title?: string = undefined;
+  @Input() description?: string = undefined;
+  @Input() side?: 'left' | 'right' | 'top' | 'bottom' = undefined;
+  @Input() size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() closeButton?: string = undefined;
+
+  @Output() cxClose = new EventEmitter<CustomEvent<CloseDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-close', (e: Event) => {
+      this.cxClose.emit(e as CustomEvent);
+    });
+  }
+
+
+
+  /** Opens the drawer panel with slide-in animation. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the drawer panel with slide-out animation. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+}

package/src/fab.component.ts

@@ -0,0 +1,70 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-fab>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+import type { ClickDetail } from './types.js';
+
+@Component({
+  selector: 'cx-fab[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-fab
+    [attr.icon]="icon"
+    [attr.label]="label"
+    [attr.aria-label]="ariaLabel"
+    [attr.variant]="variant"
+    [attr.intent]="intent"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.disabled]="disabled || null"
+    [attr.has-popup]="hasPopup || null"
+    [attr.expanded]="expanded || null"
+    [attr.controls]="controls"
+    #el
+  ><ng-content /></cx-fab>
+  `,
+})
+export class CxFab implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() icon?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() ariaLabel?: string = undefined;
+  @Input() variant?: 'filled' | 'outline' | 'ghost' = undefined;
+  @Input() intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger' = undefined;
+  @Input() shape?: 'rounded' | 'pill' = undefined;
+  @Input() size?: 'sm' | 'md' | 'lg' = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() hasPopup?: boolean = undefined;
+  @Input() expanded?: boolean = undefined;
+  @Input() controls?: string = undefined;
+
+  @Output() cxClick = new EventEmitter<CustomEvent<ClickDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-click', (e: Event) => {
+      this.cxClick.emit(e as CustomEvent);
+    });
+  }
+
+
+
+
+
+}

package/src/file-upload.component.ts

@@ -0,0 +1,77 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-file-upload>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-file-upload[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-file-upload
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.mode]="mode"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.disabled]="disabled || null"
+    [attr.multiple]="multiple || null"
+    [attr.accept]="accept"
+    [attr.max-size]="maxSize"
+    [attr.heading]="heading"
+    [attr.browse-text]="browseText"
+    [attr.hint]="hint"
+    [attr.capture]="capture"
+    [attr.preview]="preview || null"
+    #el
+  ><ng-content /></cx-file-upload>
+  `,
+})
+export class CxFileUpload implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() mode?: 'inline' | 'overlay' = undefined;
+  @Input() variant?: 'outline' | 'filled' | 'subtle' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() multiple?: boolean = undefined;
+  @Input() accept?: string = undefined;
+  @Input() maxSize?: number = undefined;
+  @Input() heading?: string = undefined;
+  @Input() browseText?: string = undefined;
+  @Input() hint?: string = undefined;
+  @Input() capture?: string = undefined;
+  @Input() preview?: boolean = undefined;
+
+  @Output() cxChange = new EventEmitter<CustomEvent>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-change', (e: Event) => {
+      this.cxChange.emit(e as CustomEvent);
+    });
+  }
+
+
+
+
+
+}

package/src/index.ts

@@ -0,0 +1,99 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrappers for Collet Custom Elements.
+// Each wrapper is a standalone component with:
+//   - Typed @Input() props with union literals
+//   - Typed @Output() EventEmitters for custom events
+//   - ControlValueAccessor for form-associated components
+//   - OnPush change detection with detached ChangeDetectorRef
+//
+// Usage:
+//   import { CxButton, CxTextInput } from '@colletdev/angular';
+//
+//   @Component({
+//     imports: [CxButton, CxTextInput],
+//     template: `<cx-button collet variant="filled" label="Click" />`
+//   })
+import '@colletdev/core';
+
+// Re-export init and types from core
+export { init, componentNames } from '@colletdev/core';
+export type { InitOptions, ComponentName } from '@colletdev/core';
+
+// Structured prop types
+export type {
+  SelectOption, OptionGroup,
+  TabItem,
+  TableColumn, TableCell, TableRow, SortState, PaginationConfig, FooterRow, EmptyStateConfig,
+  AccordionItem,
+  MenuEntry, MenuRadioItem,
+  SidebarNavItem, SidebarGroup,
+  BreadcrumbItem,
+  RadioOption,
+  ToggleItem,
+  SplitMenuEntry,
+  SpeedDialAction,
+  CarouselSlide,
+  MessageGroupPart,
+  StepperStep,
+} from './types.js';
+
+// Event detail types
+export type {
+  InputDetail, SelectDetail, CheckedDetail, SliderDetail,
+  ToggleDetail, AccordionDetail, CollapsibleDetail,
+  MenuActionDetail, MenuChangeDetail,
+  SortDetail, TableSelectDetail, TableExpandDetail, PageDetail,
+  NavigateDetail, ClickDetail, CloseDetail, DismissDetail,
+  FocusDetail, KeyboardDetail,
+  CarouselDetail, FileChangeDetail, FileInfo,
+} from './types.js';
+
+export { CxAccordion } from './accordion.component.js';
+export { CxActivityGroup } from './activity-group.component.js';
+export { CxAlert } from './alert.component.js';
+export { CxAutocomplete } from './autocomplete.component.js';
+export { CxAvatar } from './avatar.component.js';
+export { CxBackdrop } from './backdrop.component.js';
+export { CxBadge } from './badge.component.js';
+export { CxBreadcrumb } from './breadcrumb.component.js';
+export { CxButton } from './button.component.js';
+export { CxCard } from './card.component.js';
+export { CxCarousel } from './carousel.component.js';
+export { CxChatInput } from './chat-input.component.js';
+export { CxCheckbox } from './checkbox.component.js';
+export { CxCodeBlock } from './code-block.component.js';
+export { CxCollapsible } from './collapsible.component.js';
+export { CxDatePicker } from './date-picker.component.js';
+export { CxDialog } from './dialog.component.js';
+export { CxDrawer } from './drawer.component.js';
+export { CxFab } from './fab.component.js';
+export { CxFileUpload } from './file-upload.component.js';
+export { CxListbox } from './listbox.component.js';
+export { CxMenu } from './menu.component.js';
+export { CxMessageBubble } from './message-bubble.component.js';
+export { CxMessageGroup } from './message-group.component.js';
+export { CxMessagePart } from './message-part.component.js';
+export { CxPagination } from './pagination.component.js';
+export { CxPopover } from './popover.component.js';
+export { CxProfileMenu } from './profile-menu.component.js';
+export { CxProgress } from './progress.component.js';
+export { CxRadioGroup } from './radio-group.component.js';
+export { CxScrollbar } from './scrollbar.component.js';
+export { CxSearchBar } from './search-bar.component.js';
+export { CxSelect } from './select.component.js';
+export { CxSidebar } from './sidebar.component.js';
+export { CxSkeleton } from './skeleton.component.js';
+export { CxSlider } from './slider.component.js';
+export { CxSpeedDial } from './speed-dial.component.js';
+export { CxSpinner } from './spinner.component.js';
+export { CxSplitButton } from './split-button.component.js';
+export { CxStepper } from './stepper.component.js';
+export { CxSwitch } from './switch.component.js';
+export { CxTable } from './table.component.js';
+export { CxTabs } from './tabs.component.js';
+export { CxText } from './text.component.js';
+export { CxTextInput } from './text-input.component.js';
+export { CxThinking } from './thinking.component.js';
+export { CxToast } from './toast.component.js';
+export { CxToggleGroup } from './toggle-group.component.js';
+export { CxTooltip } from './tooltip.component.js';