@colletdev/angular 0.1.3

package/src/slider.component.ts

@@ -0,0 +1,134 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-slider>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+  forwardRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { FocusDetail, KeyboardDetail, SliderDetail } from './types.js';
+
+@Component({
+  selector: 'cx-slider[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxSlider),
+    multi: true,
+  }],
+  template: `
+  <cx-slider
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.aria-label]="ariaLabel"
+    [attr.value]="value"
+    [attr.min]="min"
+    [attr.max]="max"
+    [attr.step]="step"
+    [attr.orientation]="orientation"
+    [attr.shape]="shape"
+    [attr.intent]="intent"
+    [attr.size]="size"
+    [attr.show-value]="showValue || null"
+    [attr.value-text]="valueText"
+    [attr.helper-text]="helperText"
+    [attr.error-text]="errorText"
+    [attr.disabled]="disabled || null"
+    [attr.unlabeled]="unlabeled || null"
+    #el
+  ><ng-content /></cx-slider>
+  `,
+})
+export class CxSlider implements AfterViewInit, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() ariaLabel?: string = undefined;
+  @Input() value?: number = undefined;
+  @Input() min?: number = undefined;
+  @Input() max?: number = undefined;
+  @Input() step?: number = undefined;
+  @Input() orientation?: 'horizontal' | 'vertical' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() showValue?: boolean = undefined;
+  @Input() valueText?: string = undefined;
+  @Input() helperText?: string = undefined;
+  @Input() errorText?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() unlabeled?: boolean = undefined;
+
+  @Output() cxInput = new EventEmitter<CustomEvent<SliderDetail>>();
+  @Output() cxChange = new EventEmitter<CustomEvent>();
+  @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();
+    });
+  }
+
+
+
+  /** Focuses the range 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/speed-dial.component.ts

@@ -0,0 +1,100 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-speed-dial>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { CollapsibleDetail, MenuActionDetail, SpeedDialAction } from './types.js';
+
+@Component({
+  selector: 'cx-speed-dial[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-speed-dial
+    [attr.id]="id"
+    [attr.icon]="icon"
+    [attr.aria-label]="ariaLabel"
+    [attr.close-icon]="closeIcon"
+    [actions]="_serialize_actions()"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.direction]="direction"
+    [attr.backdrop]="backdrop || null"
+    [attr.tooltips]="tooltips || null"
+    [attr.disabled]="disabled || null"
+    #el
+  ><ng-content /></cx-speed-dial>
+  `,
+})
+export class CxSpeedDial implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id!: string;
+  @Input() icon!: string;
+  @Input() ariaLabel?: string = undefined;
+  @Input() closeIcon?: string = undefined;
+  @Input() actions?: SpeedDialAction[] | string = undefined;
+  @Input() variant?: 'filled' | 'outline' | 'ghost' = undefined;
+  @Input() shape?: 'rounded' | 'pill' = undefined;
+  @Input() size?: 'sm' | 'md' | 'lg' = undefined;
+  @Input() direction?: 'up' | 'down' | 'left' | 'right' = undefined;
+  @Input() backdrop?: boolean = undefined;
+  @Input() tooltips?: boolean = undefined;
+  @Input() disabled?: boolean = undefined;
+
+  @Output() cxAction = new EventEmitter<CustomEvent<MenuActionDetail>>();
+  @Output() cxChange = new EventEmitter<CustomEvent<CollapsibleDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-action', (e: Event) => {
+      this.cxAction.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-change', (e: Event) => {
+      this.cxChange.emit(e as CustomEvent);
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['actions'] && this.el) {
+      const val = this.actions;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('actions', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('actions');
+      }
+    }
+  }
+
+  _serialize_actions(): string | null {
+    const val = this.actions;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  /** Opens the speed dial action menu. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the speed dial action menu. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+  /** Toggles the speed dial action menu. */
+  toggle(): void { (this.el.nativeElement as any).toggle(); }
+
+}

package/src/spinner.component.ts

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

package/src/split-button.component.ts

@@ -0,0 +1,97 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-split-button>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { ClickDetail, MenuActionDetail, SplitMenuEntry } from './types.js';
+
+@Component({
+  selector: 'cx-split-button[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-split-button
+    [attr.id]="id"
+    [attr.label]="label"
+    [entries]="_serialize_entries()"
+    [attr.variant]="variant"
+    [attr.intent]="intent"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.icon-leading]="iconLeading"
+    [attr.disabled]="disabled || null"
+    [attr.primary-disabled]="primaryDisabled || null"
+    [attr.trigger-disabled]="triggerDisabled || null"
+    [attr.trigger-label]="triggerLabel"
+    #el
+  ><ng-content /></cx-split-button>
+  `,
+})
+export class CxSplitButton implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id!: string;
+  @Input() label!: string;
+  @Input() entries?: SplitMenuEntry[] | string = undefined;
+  @Input() variant?: 'filled' | 'outline' | 'ghost' = undefined;
+  @Input() intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() iconLeading?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() primaryDisabled?: boolean = undefined;
+  @Input() triggerDisabled?: boolean = undefined;
+  @Input() triggerLabel?: string = undefined;
+
+  @Output() cxClick = new EventEmitter<CustomEvent<ClickDetail>>();
+  @Output() cxAction = new EventEmitter<CustomEvent<MenuActionDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-click', (e: Event) => {
+      this.cxClick.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-action', (e: Event) => {
+      this.cxAction.emit(e as CustomEvent);
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['entries'] && this.el) {
+      const val = this.entries;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('entries', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('entries');
+      }
+    }
+  }
+
+  _serialize_entries(): string | null {
+    const val = this.entries;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  /** Opens the dropdown menu. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the dropdown menu. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+}

package/src/stepper.component.ts

@@ -0,0 +1,83 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-stepper>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { SelectDetail, StepperStep } from './types.js';
+
+@Component({
+  selector: 'cx-stepper[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-stepper
+    [attr.id]="id"
+    [attr.label]="label"
+    [steps]="_serialize_steps()"
+    [attr.current]="current"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.orientation]="orientation"
+    [attr.size]="size"
+    [attr.linear]="linear || null"
+    #el
+  ><ng-content /></cx-stepper>
+  `,
+})
+export class CxStepper implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() steps?: StepperStep[] | string = undefined;
+  @Input() current?: number = undefined;
+  @Input() variant?: 'outline' | 'filled' | 'ghost' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' = undefined;
+  @Input() orientation?: 'horizontal' | 'vertical' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() linear?: boolean = undefined;
+
+  @Output() cxChange = new EventEmitter<CustomEvent<SelectDetail>>();
+
+  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['steps'] && this.el) {
+      const val = this.steps;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('steps', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('steps');
+      }
+    }
+  }
+
+  _serialize_steps(): string | null {
+    const val = this.steps;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+
+
+}

package/src/switch.component.ts

@@ -0,0 +1,123 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-switch>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+  forwardRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+
+@Component({
+  selector: 'cx-switch[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxSwitch),
+    multi: true,
+  }],
+  template: `
+  <cx-switch
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.checked]="checked || null"
+    [attr.disabled]="disabled || null"
+    [attr.required]="required || null"
+    [attr.helper-text]="helperText"
+    [attr.error]="error"
+    [attr.description]="description"
+    [attr.unlabeled]="unlabeled || null"
+    #el
+  ><ng-content /></cx-switch>
+  `,
+})
+export class CxSwitch implements AfterViewInit, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  /** Boolean checked state (unlike Checkbox, which uses a string). */
+  @Input() checked?: boolean = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() required?: boolean = undefined;
+  @Input() helperText?: string = undefined;
+  @Input() error?: string = undefined;
+  @Input() description?: string = undefined;
+  @Input() unlabeled?: boolean = undefined;
+
+  @Output() cxInput = new EventEmitter<CustomEvent<CheckedDetail>>();
+  @Output() cxChange = new EventEmitter<CustomEvent<CheckedDetail>>();
+  @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?.checked);
+    });
+    this.el.nativeElement.addEventListener('focusout', () => {
+      this._onTouched();
+    });
+  }
+
+
+
+  /** Focuses the switch 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).checked = value ?? false;
+  }
+
+  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');
+    }
+  }
+}