@colletdev/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

npm install @colletdev/angular @colletdev/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

import { Component } from '@angular/core';
import { CxButton, CxTextInput, init } from '@colletdev/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

<cx-select collet label="Country" [options]="countries"
           (cxChange)="setCountry($event)"></cx-select>

API Reference

See @colletdev/docs for the full props/events reference and framework guides.

License

MIT -- github.com/Danrozen87/collet