@colletdev/angular 0.1.3

package/src/table.component.ts

@@ -0,0 +1,219 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-table>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { EmptyStateConfig, FooterRow, KeyboardDetail, PageDetail, PaginationConfig, SortDetail, SortState, TableColumn, TableExpandDetail, TableRow, TableSelectDetail } from './types.js';
+
+@Component({
+  selector: 'cx-table[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-table
+    [attr.id]="id"
+    [attr.caption]="caption"
+    [columns]="_serialize_columns()"
+    [rows]="_serialize_rows()"
+    [attr.variant]="variant"
+    [attr.size]="size"
+    [attr.selectable]="selectable"
+    [selected]="_serialize_selected()"
+    [sorts]="_serialize_sorts()"
+    [pagination]="_serialize_pagination()"
+    [attr.hoverable]="hoverable || null"
+    [attr.sticky-header]="stickyHeader || null"
+    [footer]="_serialize_footer()"
+    [empty-state]="_serialize_emptyState()"
+    [column-order]="_serialize_columnOrder()"
+    [attr.disabled]="disabled || null"
+    [attr.loading]="loading"
+    [attr.error]="error"
+    #el
+  ><ng-content /></cx-table>
+  `,
+})
+export class CxTable implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() caption!: string;
+  @Input() columns?: TableColumn[] | string = undefined;
+  @Input() rows?: TableRow[] | string = undefined;
+  @Input() variant?: 'plain' | 'striped' | 'bordered' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() selectable?: string = undefined;
+  @Input() selected?: string[] | string = undefined;
+  @Input() sorts?: SortState[] | string = undefined;
+  @Input() pagination?: PaginationConfig | string = undefined;
+  @Input() hoverable?: boolean = undefined;
+  @Input() stickyHeader?: boolean = undefined;
+  @Input() footer?: FooterRow[] | string = undefined;
+  @Input() emptyState?: EmptyStateConfig | string = undefined;
+  @Input() columnOrder?: string[] | string = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() loading?: number = undefined;
+  @Input() error?: string = undefined;
+
+  @Output() cxSort = new EventEmitter<CustomEvent<SortDetail>>();
+  @Output() cxSelect = new EventEmitter<CustomEvent<TableSelectDetail>>();
+  @Output() cxExpand = new EventEmitter<CustomEvent<TableExpandDetail>>();
+  @Output() cxPage = new EventEmitter<CustomEvent<PageDetail>>();
+  @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-sort', (e: Event) => {
+      this.cxSort.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-select', (e: Event) => {
+      this.cxSelect.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-expand', (e: Event) => {
+      this.cxExpand.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-page', (e: Event) => {
+      this.cxPage.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['columns'] && this.el) {
+      const val = this.columns;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('columns', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('columns');
+      }
+    }
+    if (changes['rows'] && this.el) {
+      const val = this.rows;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('rows', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('rows');
+      }
+    }
+    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['sorts'] && this.el) {
+      const val = this.sorts;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('sorts', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('sorts');
+      }
+    }
+    if (changes['pagination'] && this.el) {
+      const val = this.pagination;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('pagination', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('pagination');
+      }
+    }
+    if (changes['footer'] && this.el) {
+      const val = this.footer;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('footer', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('footer');
+      }
+    }
+    if (changes['emptyState'] && this.el) {
+      const val = this.emptyState;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('empty-state', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('empty-state');
+      }
+    }
+    if (changes['columnOrder'] && this.el) {
+      const val = this.columnOrder;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('column-order', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('column-order');
+      }
+    }
+  }
+
+  _serialize_columns(): string | null {
+    const val = this.columns;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_rows(): string | null {
+    const val = this.rows;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_selected(): string | null {
+    const val = this.selected;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_sorts(): string | null {
+    const val = this.sorts;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_pagination(): string | null {
+    const val = this.pagination;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_footer(): string | null {
+    const val = this.footer;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_emptyState(): string | null {
+    const val = this.emptyState;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  _serialize_columnOrder(): string | null {
+    const val = this.columnOrder;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+
+
+}

package/src/tabs.component.ts

@@ -0,0 +1,82 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-tabs>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { SelectDetail, TabItem } from './types.js';
+
+@Component({
+  selector: 'cx-tabs[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-tabs
+    [attr.id]="id"
+    [attr.label]="label"
+    [items]="_serialize_items()"
+    [attr.default-tab]="defaultTab"
+    [attr.variant]="variant"
+    [attr.orientation]="orientation"
+    [attr.width]="width"
+    [attr.size]="size"
+    #el
+  ><ng-content /></cx-tabs>
+  `,
+})
+export class CxTabs implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() items?: TabItem[] | string = undefined;
+  @Input() defaultTab?: string = undefined;
+  @Input() variant?: 'underline' | 'enclosed' | 'pill' = undefined;
+  @Input() orientation?: 'horizontal' | 'vertical' = undefined;
+  @Input() width?: 'auto' | 'full' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 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['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);
+  }
+
+  /** Focuses the active tab. */
+  focus(): void { (this.el.nativeElement as any).focus(); }
+
+}

package/src/text-input.component.ts

@@ -0,0 +1,158 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-text-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, InputDetail, KeyboardDetail } from './types.js';
+
+@Component({
+  selector: 'cx-text-input[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxTextInput),
+    multi: true,
+  }],
+  template: `
+  <cx-text-input
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.kind]="kind"
+    [attr.placeholder]="placeholder"
+    [attr.value]="value"
+    [attr.helper-text]="helperText"
+    [attr.error]="error"
+    [attr.disabled]="disabled || null"
+    [attr.readonly]="readonly || null"
+    [attr.required]="required || null"
+    [attr.clearable]="clearable || null"
+    [attr.prefix-icon]="prefixIcon"
+    [attr.suffix-icon]="suffixIcon"
+    [attr.password-toggle]="passwordToggle || null"
+    [attr.password-visible]="passwordVisible || null"
+    [attr.name]="name"
+    [attr.min-length]="minLength"
+    [attr.max-length]="maxLength"
+    [attr.pattern]="pattern"
+    [attr.autocomplete]="autocomplete"
+    [attr.rows]="rows"
+    [attr.auto-grow]="autoGrow || null"
+    #el
+  ><ng-content /></cx-text-input>
+  `,
+})
+export class CxTextInput implements AfterViewInit, 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;
+  /** Input type. Use 'multiline' for textarea behavior with optional rows and autoGrow. */
+  @Input() kind?: 'text' | 'email' | 'password' | 'search' | 'multiline' = undefined;
+  @Input() placeholder?: string = undefined;
+  /** Controlled value. Set via onInput callback. */
+  @Input() value?: string = undefined;
+  @Input() helperText?: string = undefined;
+  @Input() error?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() readonly?: boolean = undefined;
+  @Input() required?: boolean = undefined;
+  @Input() clearable?: boolean = undefined;
+  @Input() prefixIcon?: string = undefined;
+  @Input() suffixIcon?: string = undefined;
+  @Input() passwordToggle?: boolean = undefined;
+  @Input() passwordVisible?: boolean = undefined;
+  @Input() name?: string = undefined;
+  @Input() minLength?: number = undefined;
+  @Input() maxLength?: number = undefined;
+  @Input() pattern?: string = undefined;
+  @Input() autocomplete?: string = undefined;
+  @Input() rows?: number = undefined;
+  @Input() autoGrow?: boolean = undefined;
+
+  @Output() cxInput = new EventEmitter<CustomEvent<InputDetail>>();
+  @Output() cxChange = new EventEmitter<CustomEvent<InputDetail>>();
+  @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 inner input or textarea. */
+  focus(): void { (this.el.nativeElement as any).focus(); }
+
+  /** Blurs the inner input or textarea. */
+  blur(): void { (this.el.nativeElement as any).blur(); }
+
+  /** Selects all text in the input. */
+  select(): void { (this.el.nativeElement as any).select(); }
+
+  // ── 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/text.component.ts

@@ -0,0 +1,73 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-text>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'cx-text[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-text
+    [attr.id]="id"
+    [attr.role]="role"
+    [attr.align]="align"
+    [attr.color]="color"
+    [attr.muted]="muted || null"
+    [attr.strong]="strong || null"
+    [attr.italic]="italic || null"
+    [attr.underline]="underline || null"
+    [attr.underline-strong]="underlineStrong || null"
+    [attr.truncate]="truncate || null"
+    [attr.line-clamp]="lineClamp"
+    [attr.balance]="balance || null"
+    [attr.prose]="prose || null"
+    [attr.element-as]="elementAs"
+    #el
+  ><ng-content /></cx-text>
+  `,
+})
+export class CxText implements AfterViewInit {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code' = undefined;
+  @Input() align?: 'start' | 'center' | 'end' = undefined;
+  @Input() color?: 'primary' | 'inverse' | 'muted' = undefined;
+  @Input() muted?: boolean = undefined;
+  @Input() strong?: boolean = undefined;
+  @Input() italic?: boolean = undefined;
+  @Input() underline?: boolean = undefined;
+  @Input() underlineStrong?: boolean = undefined;
+  @Input() truncate?: boolean = undefined;
+  @Input() lineClamp?: number = undefined;
+  @Input() balance?: boolean = undefined;
+  @Input() prose?: boolean = undefined;
+  @Input() elementAs?: string = undefined;
+
+
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+
+  }
+
+
+
+
+
+}

package/src/thinking.component.ts

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

package/src/toast.component.ts

@@ -0,0 +1,72 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-toast>
+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-toast[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-toast
+    [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.duration]="duration"
+    #el
+  ><ng-content />
+    <ng-content select="[slot=action]" /></cx-toast>
+  `,
+})
+export class CxToast 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() duration?: number = 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);
+    });
+  }
+
+
+
+  /** Dismisses the toast with exit animation. */
+  dismiss(): void { (this.el.nativeElement as any).dismiss(); }
+
+}