@colletdev/angular 0.1.3

package/src/badge.component.ts

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

package/src/breadcrumb.component.ts

@@ -0,0 +1,77 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-breadcrumb>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { BreadcrumbItem, NavigateDetail } from './types.js';
+
+@Component({
+  selector: 'cx-breadcrumb[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-breadcrumb
+    [attr.id]="id"
+    [items]="_serialize_items()"
+    [attr.separator]="separator"
+    [attr.size]="size"
+    [attr.nav-label]="navLabel"
+    [attr.disabled]="disabled || null"
+    #el
+  ><ng-content /></cx-breadcrumb>
+  `,
+})
+export class CxBreadcrumb implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() items?: BreadcrumbItem[] | string = undefined;
+  @Input() separator?: string = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() navLabel?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+
+  @Output() cxNavigate = new EventEmitter<CustomEvent<NavigateDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-navigate', (e: Event) => {
+      this.cxNavigate.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');
+      }
+    }
+  }
+
+  _serialize_items(): string | null {
+    const val = this.items;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+
+
+}

package/src/button.component.ts

@@ -0,0 +1,74 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-button>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+import type { ClickDetail } from './types.js';
+
+@Component({
+  selector: 'cx-button[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-button
+    [attr.label]="label"
+    [attr.variant]="variant"
+    [attr.intent]="intent"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.disabled]="disabled || null"
+    [attr.icon-leading]="iconLeading"
+    [attr.icon-trailing]="iconTrailing"
+    [attr.icon-only]="iconOnly"
+    [attr.aria-label]="ariaLabel"
+    [attr.kind]="kind"
+    [attr.pressed]="pressed || null"
+    [attr.href]="href"
+    #el
+  ><ng-content /></cx-button>
+  `,
+})
+export class CxButton implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() label?: string = undefined;
+  @Input() variant?: 'filled' | 'ghost' | 'outline' | 'underline' | 'side-indicator' = 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() disabled?: boolean = undefined;
+  @Input() iconLeading?: string = undefined;
+  @Input() iconTrailing?: string = undefined;
+  @Input() iconOnly?: string = undefined;
+  @Input() ariaLabel?: string = undefined;
+  @Input() kind?: 'button' | 'submit' | 'toggle' | 'link' = undefined;
+  @Input() pressed?: boolean = undefined;
+  @Input() href?: string = undefined;
+
+  @Output() cxClick = new EventEmitter<CustomEvent<ClickDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-click', (e: Event) => {
+      this.cxClick.emit(e as CustomEvent);
+    });
+  }
+
+
+
+
+
+}

package/src/card.component.ts

@@ -0,0 +1,72 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-card>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+import type { ClickDetail, KeyboardDetail } from './types.js';
+
+@Component({
+  selector: 'cx-card[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-card
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.clickable]="clickable || null"
+    [attr.texture]="texture || null"
+    #el
+  ><ng-content />
+    <ng-content select="[slot=header]" />
+    <ng-content select="[slot=footer]" /></cx-card>
+  `,
+})
+export class CxCard implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() variant?: 'elevated' | 'outlined' | 'filled' = undefined;
+  @Input() shape?: 'rounded' | 'sharp' | 'soft' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() clickable?: boolean = undefined;
+  @Input() texture?: boolean = undefined;
+
+  @Output() cxClick = new EventEmitter<CustomEvent<ClickDetail>>();
+  @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-click', (e: Event) => {
+      this.cxClick.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);
+    });
+  }
+
+
+
+
+
+}

package/src/carousel.component.ts

@@ -0,0 +1,96 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-carousel>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { CarouselDetail, CarouselSlide } from './types.js';
+
+@Component({
+  selector: 'cx-carousel[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-carousel
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [slides]="_serialize_slides()"
+    [attr.autoplay]="autoplay"
+    [attr.autoplay-interval]="autoplayInterval"
+    [attr.loop-mode]="loopMode || null"
+    [attr.motion-blur]="motionBlur || null"
+    [attr.custom-cursor]="customCursor || null"
+    [attr.indicator]="indicator"
+    #el
+  ><ng-content /></cx-carousel>
+  `,
+})
+export class CxCarousel implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() variant?: 'editorial' | 'card' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() slides?: CarouselSlide[] | string = undefined;
+  @Input() autoplay?: 'off' | 'on' = undefined;
+  @Input() autoplayInterval?: number = undefined;
+  @Input() loopMode?: boolean = undefined;
+  @Input() motionBlur?: boolean = undefined;
+  @Input() customCursor?: boolean = undefined;
+  @Input() indicator?: string = undefined;
+
+  @Output() cxChange = new EventEmitter<CustomEvent<CarouselDetail>>();
+
+  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['slides'] && this.el) {
+      const val = this.slides;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('slides', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('slides');
+      }
+    }
+  }
+
+  _serialize_slides(): string | null {
+    const val = this.slides;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  /** Advances to the next slide. */
+  next(): void { (this.el.nativeElement as any).next(); }
+
+  /** Returns to the previous slide. */
+  prev(): void { (this.el.nativeElement as any).prev(); }
+
+  /** Navigates to the slide at the given index. */
+  goTo(index: number): void { (this.el.nativeElement as any).goTo(index); }
+
+}

package/src/chat-input.component.ts

@@ -0,0 +1,116 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-chat-input>
+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 } from './types.js';
+
+@Component({
+  selector: 'cx-chat-input[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxChatInput),
+    multi: true,
+  }],
+  template: `
+  <cx-chat-input
+    [attr.id]="id"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.placeholder]="placeholder"
+    [attr.value]="value"
+    [attr.disabled]="disabled || null"
+    [attr.max-rows]="maxRows"
+    [attr.show-action-button]="showActionButton || null"
+    [attr.action-label]="actionLabel"
+    [attr.submit-label]="submitLabel"
+    [attr.label]="label"
+    [attr.slotted]="slotted || null"
+    #el
+  ><ng-content /></cx-chat-input>
+  `,
+})
+export class CxChatInput implements AfterViewInit, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() placeholder?: string = undefined;
+  @Input() value?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() maxRows?: number = undefined;
+  @Input() showActionButton?: boolean = undefined;
+  @Input() actionLabel?: string = undefined;
+  @Input() submitLabel?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() slotted?: boolean = 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);
+    });
+    // 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 textarea. */
+  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/checkbox.component.ts

@@ -0,0 +1,121 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-checkbox>
+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-checkbox[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxCheckbox),
+    multi: true,
+  }],
+  template: `
+  <cx-checkbox
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.checked]="checked"
+    [attr.disabled]="disabled || null"
+    [attr.required]="required || null"
+    [attr.helper-text]="helperText"
+    [attr.error]="error"
+    [attr.unlabeled]="unlabeled || null"
+    #el
+  ><ng-content /></cx-checkbox>
+  `,
+})
+export class CxCheckbox implements AfterViewInit, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() shape?: 'sharp' | 'rounded' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  /** Three-state check. Accepts true/false as aliases for 'checked'/unchecked, and keeps 'indeterminate' for the third state. */
+  @Input() checked?: boolean | '' | 'checked' | 'indeterminate' = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() required?: boolean = undefined;
+  @Input() helperText?: string = undefined;
+  @Input() error?: 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 checkbox 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');
+    }
+  }
+}

package/src/code-block.component.ts

@@ -0,0 +1,67 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-code-block>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-code-block[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-code-block
+    [attr.id]="id"
+    [attr.content]="content"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.language]="language"
+    [attr.filename]="filename"
+    [attr.line-numbers]="lineNumbers || null"
+    [attr.copy-button]="copyButton || null"
+    [attr.traffic-lights]="trafficLights || null"
+    [attr.slotted]="slotted || null"
+    #el
+  ><ng-content /></cx-code-block>
+  `,
+})
+export class CxCodeBlock implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() content?: string = undefined;
+  @Input() variant?: string = undefined;
+  @Input() shape?: string = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() language?: string = undefined;
+  @Input() filename?: string = undefined;
+  @Input() lineNumbers?: boolean = undefined;
+  @Input() copyButton?: boolean = undefined;
+  @Input() trafficLights?: boolean = undefined;
+  @Input() slotted?: boolean = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}