@colletdev/angular 0.1.3

package/README.md

@@ -0,0 +1,60 @@
+# @collet/angular
+
+Angular 16+ standalone components for the Collet component library. Typed `@Input`/`@Output` bindings, `ControlValueAccessor` for forms, and OnPush change detection over 48 Rust/WASM Custom Elements.
+
+## Install
+
+```bash
+npm install @collet/angular @collet/core
+```
+
+`@angular/forms` is an optional peer dependency, required only if you use form-associated components (`CxTextInput`, `CxSelect`, `CxCheckbox`, etc.) with `ngModel` or reactive forms.
+
+## Quick Start
+
+```typescript
+import { Component } from '@angular/core';
+import { CxButton, CxTextInput, init } from '@collet/angular';
+
+await init(); // once, at app bootstrap
+
+@Component({
+  standalone: true,
+  imports: [CxButton, CxTextInput],
+  template: `
+    <cx-button collet variant="filled" label="Save" intent="primary"
+               (cxClick)="save()"></cx-button>
+    <cx-text-input collet label="Email" kind="email"
+                   (cxInput)="onInput($event)"></cx-text-input>
+  `
+})
+export class AppComponent { }
+```
+
+## Features
+
+- **Standalone components** -- no `NgModule` required, import directly
+- **Typed inputs** -- union-literal types for variant, intent, size, and all enums
+- **Typed outputs** -- `(cxClick)`, `(cxChange)`, `(cxInput)` with typed `$event.detail`
+- **ControlValueAccessor** -- form-associated components work with `ngModel` and `FormControl`
+- **OnPush** -- all wrappers use `ChangeDetectionStrategy.OnPush` with detached `ChangeDetectorRef`
+- **Ships source** -- `.ts` files included; compile with your project's TypeScript/ng-packagr
+
+## Naming Convention
+
+Angular wrappers use the `Cx` prefix: `CxButton`, `CxTextInput`, `CxSelect`, `CxDialog`, etc. Template tags remain `<cx-button>`, `<cx-text-input>`, etc. with the `collet` directive attribute.
+
+## Event Pattern
+
+```html
+<cx-select collet label="Country" [options]="countries"
+           (cxChange)="setCountry($event)"></cx-select>
+```
+
+## API Reference
+
+See [@collet/docs](https://www.npmjs.com/package/@collet/docs) for the full props/events reference and framework guides.
+
+## License
+
+MIT -- [github.com/Danrozen87/collet](https://github.com/Danrozen87/collet)

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@colletdev/angular",
+  "version": "0.1.3",
+  "description": "Angular wrappers for Collet Rust/WASM UI components",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src/"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=16.0.0",
+    "@angular/forms": ">=16.0.0",
+    "@colletdev/core": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/forms": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "angular",
+    "web-components",
+    "rust",
+    "wasm",
+    "ui",
+    "collet"
+  ],
+  "author": "Dan",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Danrozen87/collet",
+    "directory": "packages/angular"
+  }
+}

package/src/accordion.component.ts

@@ -0,0 +1,97 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-accordion>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { AccordionDetail, AccordionItem } from './types.js';
+
+@Component({
+  selector: 'cx-accordion[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-accordion
+    [attr.id]="id"
+    [attr.label]="label"
+    [items]="_serialize_items()"
+    [attr.mode]="mode"
+    [attr.collapsible]="collapsible || null"
+    [attr.heading-level]="headingLevel"
+    [default-expanded]="_serialize_defaultExpanded()"
+    [attr.size]="size"
+    [attr.disabled]="disabled || null"
+    #el
+  ><ng-content /></cx-accordion>
+  `,
+})
+export class CxAccordion implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() items?: AccordionItem[] | string = undefined;
+  @Input() mode?: 'single' | 'multiple' = undefined;
+  @Input() collapsible?: boolean = undefined;
+  @Input() headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = undefined;
+  @Input() defaultExpanded?: string[] | string = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() disabled?: boolean = undefined;
+
+  @Output() cxChange = new EventEmitter<CustomEvent<AccordionDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-change', (e: Event) => {
+      this.cxChange.emit(e as CustomEvent);
+    });
+  }
+
+  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');
+      }
+    }
+    if (changes['defaultExpanded'] && this.el) {
+      const val = this.defaultExpanded;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('default-expanded', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('default-expanded');
+      }
+    }
+  }
+
+  _serialize_items(): string | null {
+    const val = this.items;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_defaultExpanded(): string | null {
+    const val = this.defaultExpanded;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+
+
+}

package/src/activity-group.component.ts

@@ -0,0 +1,61 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-activity-group>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-activity-group[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-activity-group
+    [attr.id]="id"
+    [attr.status]="status"
+    [attr.size]="size"
+    [attr.border]="border"
+    [attr.summary]="summary"
+    [attr.action]="action"
+    [attr.expanded]="expanded || null"
+    [attr.parts]="parts"
+    #el
+  ><ng-content /></cx-activity-group>
+  `,
+})
+export class CxActivityGroup implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() status?: string = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() border?: string = undefined;
+  @Input() summary?: string = undefined;
+  @Input() action?: string = undefined;
+  @Input() expanded?: boolean = undefined;
+  @Input() parts?: string = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}

package/src/alert.component.ts

@@ -0,0 +1,75 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-alert>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+import type { DismissDetail } from './types.js';
+
+@Component({
+  selector: 'cx-alert[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-alert
+    [attr.id]="id"
+    [attr.title]="title"
+    [attr.description]="description"
+    [attr.variant]="variant"
+    [attr.intent]="intent"
+    [attr.size]="size"
+    [attr.show-icon]="showIcon || null"
+    [attr.icon]="icon"
+    [attr.dismissible]="dismissible || null"
+    [attr.dismiss-label]="dismissLabel"
+    [attr.compact]="compact || null"
+    [attr.dynamic]="dynamic || null"
+    [attr.actions-html]="actionsHtml"
+    #el
+  ><ng-content />
+    <ng-content select="[slot=actions]" /></cx-alert>
+  `,
+})
+export class CxAlert implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() title?: string = undefined;
+  @Input() description?: string = undefined;
+  @Input() variant?: 'subtle' | 'filled' | 'outline' = undefined;
+  @Input() intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() showIcon?: boolean = undefined;
+  @Input() icon?: string = undefined;
+  @Input() dismissible?: boolean = undefined;
+  @Input() dismissLabel?: string = undefined;
+  @Input() compact?: boolean = undefined;
+  @Input() dynamic?: boolean = undefined;
+  @Input() actionsHtml?: string = undefined;
+
+  @Output() cxDismiss = new EventEmitter<CustomEvent<DismissDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-dismiss', (e: Event) => {
+      this.cxDismiss.emit(e as CustomEvent);
+    });
+  }
+
+
+
+
+
+}

package/src/autocomplete.component.ts

@@ -0,0 +1,196 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-autocomplete>
+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, OptionGroup, SelectDetail, SelectOption } from './types.js';
+
+@Component({
+  selector: 'cx-autocomplete[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxAutocomplete),
+    multi: true,
+  }],
+  template: `
+  <cx-autocomplete
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.mode]="mode"
+    [selected]="_serialize_selected()"
+    [attr.query]="query"
+    [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"
+    [attr.allow-custom]="allowCustom || null"
+    [attr.clearable]="clearable || null"
+    [items]="_serialize_items()"
+    [groups]="_serialize_groups()"
+    #el
+  ><ng-content /></cx-autocomplete>
+  `,
+})
+export class CxAutocomplete implements AfterViewInit, OnChanges, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() variant?: 'outline' | 'filled' | 'ghost' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  /** 'single' for single select, 'multiple' for multi-select with chips. */
+  @Input() mode?: 'single' | 'multiple' = undefined;
+  @Input() selected?: string[] | string = undefined;
+  /** Current search query text. Controlled by onInput events. */
+  @Input() query?: string = 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;
+  /** When true, user can submit values not in the items list. */
+  @Input() allowCustom?: boolean = undefined;
+  @Input() clearable?: boolean = undefined;
+  /** Options to filter from. Filtering is client-side (fuzzy substring match). For server-side search, update this array in your onInput handler. */
+  @Input() items?: SelectOption[] | string = undefined;
+  @Input() groups?: OptionGroup[] | string = undefined;
+
+  @Output() cxInput = new EventEmitter<CustomEvent<InputDetail>>();
+  @Output() cxChange = new EventEmitter<CustomEvent<SelectDetail>>();
+  @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['selected'] && this.el) {
+      const val = this.selected;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('selected', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('selected');
+      }
+    }
+    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');
+      }
+    }
+    if (changes['groups'] && this.el) {
+      const val = this.groups;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('groups', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('groups');
+      }
+    }
+  }
+
+  _serialize_selected(): string | null {
+    const val = this.selected;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_items(): string | null {
+    const val = this.items;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_groups(): string | null {
+    const val = this.groups;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  /** Opens the suggestion dropdown. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the suggestion dropdown. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+  /** Clears all selections (multi-mode) or the input (single-mode). */
+  clear(): void { (this.el.nativeElement as any).clear(); }
+
+  /** Focuses the search input. */
+  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/avatar.component.ts

@@ -0,0 +1,59 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-avatar>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-avatar[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-avatar
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.image]="image"
+    [attr.initials]="initials"
+    [attr.clickable]="clickable || null"
+    #el
+  ><ng-content /></cx-avatar>
+  `,
+})
+export class CxAvatar implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() shape?: 'circle' | 'rounded' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() image?: string = undefined;
+  @Input() initials?: string = undefined;
+  @Input() clickable?: boolean = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}

package/src/backdrop.component.ts

@@ -0,0 +1,51 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-backdrop>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-backdrop[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-backdrop
+    [attr.tint]="tint"
+    [attr.blur]="blur"
+    [attr.dismissible]="dismissible || null"
+    #el
+  ><ng-content /></cx-backdrop>
+  `,
+})
+export class CxBackdrop implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() tint?: string = undefined;
+  @Input() blur?: string = undefined;
+  @Input() dismissible?: boolean = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}