@colletdev/angular 0.1.3

package/src/toggle-group.component.ts

@@ -0,0 +1,123 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-toggle-group>
+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 { ToggleDetail, ToggleItem } from './types.js';
+
+@Component({
+  selector: 'cx-toggle-group[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxToggleGroup),
+    multi: true,
+  }],
+  template: `
+  <cx-toggle-group
+    [attr.id]="id"
+    [attr.label]="label"
+    [items]="_serialize_items()"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.mode]="mode"
+    [attr.orientation]="orientation"
+    [attr.intent]="intent"
+    [attr.size]="size"
+    [attr.disabled]="disabled || null"
+    [attr.value]="value"
+    #el
+  ><ng-content /></cx-toggle-group>
+  `,
+})
+export class CxToggleGroup implements AfterViewInit, OnChanges, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() items?: ToggleItem[] | string = undefined;
+  @Input() variant?: 'outline' | 'ghost' | 'filled' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() mode?: 'single' | 'multiple' = undefined;
+  @Input() orientation?: 'horizontal' | 'vertical' = undefined;
+  @Input() intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() disabled?: boolean = undefined;
+  /** Controlled pressed item IDs. Pass a single ID or an array. */
+  @Input() value?: string | string[] = undefined;
+
+  @Output() cxInput = new EventEmitter<CustomEvent>();
+  @Output() cxChange = new EventEmitter<CustomEvent<ToggleDetail>>();
+
+  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);
+    });
+    // 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['items'] && this.el) {
+      const val = this.items;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('items', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('items');
+      }
+    }
+  }
+
+  _serialize_items(): string | null {
+    const val = this.items;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+
+
+  // ── 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/tooltip.component.ts

@@ -0,0 +1,61 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-tooltip>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-tooltip[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-tooltip
+    [attr.id]="id"
+    [attr.content]="content"
+    [attr.trigger-html]="triggerHtml"
+    [attr.position]="position"
+    [attr.arrow]="arrow || null"
+    [attr.open-delay]="openDelay"
+    [attr.close-delay]="closeDelay"
+    #el
+  ><ng-content />
+    <ng-content select="[slot=trigger]" /></cx-tooltip>
+  `,
+})
+export class CxTooltip implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  /** Tooltip text shown on hover/focus. Also serves as the accessible name. */
+  @Input() content?: string = undefined;
+  @Input() triggerHtml?: string = undefined;
+  @Input() position?: 'top' | 'bottom' | 'left' | 'right' = undefined;
+  @Input() arrow?: boolean = undefined;
+  @Input() openDelay?: number = undefined;
+  @Input() closeDelay?: number = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}

package/src/types.ts

@@ -0,0 +1,334 @@
+// Shared TypeScript interfaces for structured component props.
+// These mirror the Rust config structs in crates/wasm-api/src/*.rs.
+// Auto-generated by the framework wrapper generator — DO NOT EDIT.
+
+// ─── Shared Option Types (Select, Listbox, Autocomplete) ───
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  icon?: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface OptionGroup {
+  label: string;
+  options: SelectOption[];
+}
+
+// ─── Tabs ───
+
+export interface TabItem {
+  value: string;
+  label: string;
+  content?: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+// ─── Table ───
+
+export interface TableColumn {
+  id: string;
+  header: string;
+  sortable?: boolean;
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+  visible?: boolean;
+  pinned?: 'left' | 'right';
+  resizable?: boolean;
+  sr_only?: boolean;
+  min_width?: string;
+  max_width?: string;
+}
+
+export interface TableCell {
+  text?: string;
+  html?: string;
+  number?: number;
+}
+
+export interface TableRow {
+  id: string;
+  cells: TableCell[] | Record<string, string | TableCell>;
+  disabled?: boolean;
+  detail?: string;
+  expanded?: boolean;
+}
+
+export interface SortState {
+  column_id: string;
+  direction: 'asc' | 'desc' | 'ascending' | 'descending';
+}
+
+export interface PaginationConfig {
+  current_page: number;
+  page_size: number;
+  total_items: number;
+  page_size_options?: number[];
+}
+
+export interface FooterRow {
+  cells: Record<string, string | TableCell>;
+}
+
+export interface EmptyStateConfig {
+  title?: string;
+  icon?: string;
+  description?: string;
+}
+
+// ─── Accordion ───
+
+export interface AccordionItem {
+  id: string;
+  trigger_label: string;
+  panel_content: string;
+  icon?: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+// ─── Menu ───
+
+export interface MenuRadioItem {
+  value: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface MenuEntry {
+  type: 'item' | 'checkbox' | 'radio-group' | 'separator' | 'label';
+  id?: string;
+  label?: string;
+  icon?: string;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+  intent?: string;
+  checked?: boolean;
+  value?: string;
+  items?: MenuRadioItem[];
+}
+
+// ─── Sidebar ───
+
+export interface SidebarNavItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: string;
+  badge?: string;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+export interface SidebarGroup {
+  label?: string;
+  icon?: string;
+  items: SidebarNavItem[];
+  collapsible?: boolean;
+  expanded?: boolean;
+}
+
+// ─── Breadcrumb ───
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: string;
+  current?: boolean;
+  ellipsis?: boolean;
+}
+
+// ─── Radio Group ───
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  icon?: string;
+}
+
+// ─── Toggle Group ───
+
+export interface ToggleItem {
+  id: string;
+  label: string;
+  icon?: string;
+  icon_only?: boolean;
+  pressed?: boolean;
+  disabled?: boolean;
+}
+
+// ─── Split Button ───
+
+export interface SplitMenuEntry {
+  type: 'item' | 'separator';
+  id?: string;
+  label?: string;
+  icon?: string;
+  shortcut?: string;
+  intent?: string;
+  disabled?: boolean;
+}
+
+// ─── Carousel ───
+
+export interface CarouselSlide {
+  image_url?: string;
+  title: string;
+  badge?: string;
+  badge_color?: string;
+  subtitle?: string;
+  href?: string;
+}
+
+export interface CarouselDetail {
+  index: number;
+  total: number;
+}
+
+// ─── Speed Dial ───
+
+export interface SpeedDialAction {
+  id: string;
+  icon: string;
+  label: string;
+  intent?: string;
+  disabled?: boolean;
+  handler?: string;
+}
+
+// ─── Message Group ───
+
+export interface MessageGroupPart {
+  id?: string;
+  kind: 'text' | 'tool-call' | 'tool-result' | 'thinking' | 'code-block' | 'error';
+  connection?: 'standalone' | 'first' | 'middle' | 'last';
+  content?: string;
+  html_content?: string;
+  tool_name?: string;
+  tool_arguments?: string;
+  tool_status?: 'pending' | 'success' | 'error';
+  collapsible?: boolean;
+  thinking_label?: string;
+  language?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+// ─── Stepper ───
+
+export interface StepperStep {
+  id: string;
+  label: string;
+  description?: string;
+  status?: 'pending' | 'active' | 'completed' | 'error' | 'loading';
+  disabled?: boolean;
+  optional?: boolean;
+}
+
+// ─── Event Detail Interfaces ───
+
+export interface InputDetail {
+  value: string;
+}
+
+export interface SelectDetail {
+  value: string;
+}
+
+export interface CheckedDetail {
+  checked: boolean;
+}
+
+export interface SliderDetail {
+  value: number;
+}
+
+export interface ToggleDetail {
+  pressed: string[];
+}
+
+export interface AccordionDetail {
+  expanded: string[];
+}
+
+export interface CollapsibleDetail {
+  open: boolean;
+}
+
+export interface MenuActionDetail {
+  id: string;
+  label?: string;
+}
+
+export interface MenuChangeDetail {
+  id: string;
+  checked?: boolean;
+  value?: string;
+}
+
+export interface SortDetail {
+  column_id: string;
+  direction: 'asc' | 'desc' | 'none';
+}
+
+export interface TableSelectDetail {
+  selected: string[];
+  row_id?: string;
+}
+
+export interface TableExpandDetail {
+  row_id: string;
+  expanded: boolean;
+}
+
+export interface PageDetail {
+  page: number;
+  page_size?: number;
+}
+
+export interface NavigateDetail {
+  href: string;
+  label: string;
+}
+
+export interface ClickDetail {
+  x?: number;
+  y?: number;
+}
+
+export interface FileChangeDetail {
+  files: FileInfo[];
+}
+
+export interface FileInfo {
+  name: string;
+  size: number;
+  type: string;
+}
+
+export interface CloseDetail {
+  reason?: 'escape' | 'backdrop' | 'close-button';
+}
+
+export interface DismissDetail {
+  reason?: 'user' | 'timeout';
+}
+
+export interface FocusDetail {
+  relatedTarget: EventTarget | null;
+}
+
+export interface KeyboardDetail {
+  key: string;
+  code: string;
+  shiftKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+  metaKey: boolean;
+}