@colletdev/angular 0.1.3

package/src/listbox.component.ts

@@ -0,0 +1,121 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-listbox>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { FocusDetail, KeyboardDetail, OptionGroup, SelectOption } from './types.js';
+
+@Component({
+  selector: 'cx-listbox[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-listbox
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.selection-mode]="selectionMode"
+    [selected]="_serialize_selected()"
+    [items]="_serialize_items()"
+    [groups]="_serialize_groups()"
+    #el
+  ><ng-content /></cx-listbox>
+  `,
+})
+export class CxListbox implements AfterViewInit, OnChanges {
+  @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;
+  @Input() selectionMode?: string = undefined;
+  @Input() selected?: string[] | string = undefined;
+  @Input() items?: SelectOption[] | string = undefined;
+  @Input() groups?: OptionGroup[] | string = undefined;
+
+  @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-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);
+    });
+  }
+
+  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);
+  }
+
+
+
+}

package/src/menu.component.ts

@@ -0,0 +1,99 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-menu>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { KeyboardDetail, MenuActionDetail, MenuChangeDetail, MenuEntry } from './types.js';
+
+@Component({
+  selector: 'cx-menu[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-menu
+    [attr.id]="id"
+    [attr.trigger-label]="triggerLabel"
+    [entries]="_serialize_entries()"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.width]="width"
+    [attr.size]="size"
+    [attr.icon]="icon"
+    [attr.disabled]="disabled || null"
+    #el
+  ><ng-content /></cx-menu>
+  `,
+})
+export class CxMenu implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() triggerLabel!: string;
+  @Input() entries?: MenuEntry[] | string = undefined;
+  @Input() variant?: 'filled' | 'outline' | 'ghost' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() width?: 'auto' | 'sm' | 'md' | 'lg' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() icon?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+
+  @Output() cxAction = new EventEmitter<CustomEvent<MenuActionDetail>>();
+  @Output() cxChange = new EventEmitter<CustomEvent<MenuChangeDetail>>();
+  @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-action', (e: Event) => {
+      this.cxAction.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-change', (e: Event) => {
+      this.cxChange.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);
+    });
+  }
+
+  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 menu dropdown. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the menu dropdown. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+}

package/src/message-bubble.component.ts

@@ -0,0 +1,67 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-message-bubble>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-message-bubble[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-message-bubble
+    [attr.id]="id"
+    [attr.role]="role"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.alignment]="alignment"
+    [attr.size]="size"
+    [attr.html-content]="htmlContent"
+    [attr.sender-name]="senderName"
+    [attr.timestamp]="timestamp"
+    [attr.border]="border"
+    [attr.animated]="animated || null"
+    #el
+  ><ng-content /></cx-message-bubble>
+  `,
+})
+export class CxMessageBubble implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() role?: 'user' | 'assistant' = undefined;
+  @Input() variant?: 'filled' | 'ghost' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' = undefined;
+  @Input() alignment?: 'auto' | 'start' | 'end' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() htmlContent?: string = undefined;
+  @Input() senderName?: string = undefined;
+  @Input() timestamp?: string = undefined;
+  @Input() border?: string = undefined;
+  @Input() animated?: boolean = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}

package/src/message-group.component.ts

@@ -0,0 +1,77 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-message-group>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { MessageGroupPart } from './types.js';
+
+@Component({
+  selector: 'cx-message-group[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-message-group
+    [attr.id]="id"
+    [attr.role]="role"
+    [attr.alignment]="alignment"
+    [attr.size]="size"
+    [attr.sender-name]="senderName"
+    [attr.animated]="animated || null"
+    [parts]="_serialize_parts()"
+    #el
+  ><ng-content /></cx-message-group>
+  `,
+})
+export class CxMessageGroup implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() role?: 'user' | 'assistant' = undefined;
+  @Input() alignment?: 'auto' | 'start' | 'end' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() senderName?: string = undefined;
+  @Input() animated?: boolean = undefined;
+  @Input() parts?: MessageGroupPart[] | string = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['parts'] && this.el) {
+      const val = this.parts;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('parts', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('parts');
+      }
+    }
+  }
+
+  _serialize_parts(): string | null {
+    const val = this.parts;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+
+
+}

package/src/message-part.component.ts

@@ -0,0 +1,47 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-message-part>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-message-part[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-message-part
+
+    #el
+  ><ng-content /></cx-message-part>
+  `,
+})
+export class CxMessagePart implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}

package/src/pagination.component.ts

@@ -0,0 +1,67 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-pagination>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-pagination[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-pagination
+    [attr.id]="id"
+    [attr.current-page]="currentPage"
+    [attr.page-size]="pageSize"
+    [attr.total-items]="totalItems"
+    [attr.label]="label"
+    [attr.size]="size"
+    [attr.show-info]="showInfo || null"
+    [attr.show-prev-next]="showPrevNext || null"
+    [attr.prev-label]="prevLabel"
+    [attr.next-label]="nextLabel"
+    [attr.page-size-options]="pageSizeOptions"
+    #el
+  ><ng-content /></cx-pagination>
+  `,
+})
+export class CxPagination implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() currentPage!: number;
+  @Input() pageSize!: number;
+  @Input() totalItems!: number;
+  @Input() label?: string = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() showInfo?: boolean = undefined;
+  @Input() showPrevNext?: boolean = undefined;
+  @Input() prevLabel?: string = undefined;
+  @Input() nextLabel?: string = undefined;
+  @Input() pageSizeOptions?: string = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}

package/src/popover.component.ts

@@ -0,0 +1,77 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-popover>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-popover[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-popover
+    [attr.id]="id"
+    [attr.trigger-label]="triggerLabel"
+    [attr.title]="title"
+    [attr.description]="description"
+    [attr.width]="width"
+    [attr.placement]="placement"
+    [attr.align]="align"
+    [attr.arrow]="arrow || null"
+    [attr.close-button]="closeButton || null"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.icon]="icon"
+    [attr.disabled]="disabled || null"
+    #el
+  ><ng-content /></cx-popover>
+  `,
+})
+export class CxPopover implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() triggerLabel!: string;
+  @Input() title?: string = undefined;
+  @Input() description?: string = undefined;
+  @Input() width?: 'sm' | 'md' | 'lg' | 'xl' | 'auto' = undefined;
+  @Input() placement?: 'top' | 'bottom' = undefined;
+  @Input() align?: 'start' | 'center' | 'end' = undefined;
+  @Input() arrow?: boolean = undefined;
+  @Input() closeButton?: boolean = undefined;
+  @Input() variant?: 'outline' | 'filled' | 'ghost' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() icon?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+  /** Opens the popover panel. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the popover panel. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+}

package/src/profile-menu.component.ts

@@ -0,0 +1,87 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-profile-menu>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { MenuActionDetail, MenuEntry } from './types.js';
+
+@Component({
+  selector: 'cx-profile-menu[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-profile-menu
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.image]="image"
+    [attr.initials]="initials"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.width]="width"
+    [entries]="_serialize_entries()"
+    [attr.disabled]="disabled || null"
+    #el
+  ><ng-content /></cx-profile-menu>
+  `,
+})
+export class CxProfileMenu implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label!: string;
+  @Input() image?: string = undefined;
+  @Input() initials?: string = undefined;
+  @Input() shape?: 'circle' | 'rounded' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() width?: 'auto' | 'sm' | 'md' | 'lg' = undefined;
+  @Input() entries?: MenuEntry[] | string = undefined;
+  @Input() disabled?: boolean = undefined;
+
+  @Output() cxAction = new EventEmitter<CustomEvent<MenuActionDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    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 profile menu dropdown. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the profile menu dropdown. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+}

package/src/progress.component.ts

@@ -0,0 +1,60 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-progress>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-progress[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-progress
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.value]="value"
+    [attr.value-text]="valueText"
+    [attr.intent]="intent"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    #el
+  ><ng-content /></cx-progress>
+  `,
+})
+export class CxProgress implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  /** Percentage 0–100. No max prop — the component assumes max=100. */
+  @Input() value?: number = undefined;
+  @Input() valueText?: string = undefined;
+  @Input() intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger' = undefined;
+  @Input() shape?: 'rounded' | 'sharp' | 'pill' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}