@colletdev/angular 0.1.3

package/src/radio-group.component.ts

@@ -0,0 +1,138 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-radio-group>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+  forwardRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { FocusDetail, KeyboardDetail, RadioOption, SelectDetail } from './types.js';
+
+@Component({
+  selector: 'cx-radio-group[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxRadioGroup),
+    multi: true,
+  }],
+  template: `
+  <cx-radio-group
+    [attr.name]="name"
+    [attr.legend]="legend"
+    [options]="_serialize_options()"
+    [attr.shape]="shape"
+    [attr.orientation]="orientation"
+    [attr.size]="size"
+    [attr.selected]="selected"
+    [attr.disabled]="disabled || null"
+    [attr.required]="required || null"
+    [attr.helper-text]="helperText"
+    [attr.error]="error"
+    #el
+  ><ng-content /></cx-radio-group>
+  `,
+})
+export class CxRadioGroup implements AfterViewInit, OnChanges, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() name?: string = undefined;
+  @Input() legend!: string;
+  @Input() options?: RadioOption[] | string = undefined;
+  @Input() shape?: 'round' | 'rounded' = undefined;
+  @Input() orientation?: 'vertical' | 'horizontal' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+  @Input() selected?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() required?: boolean = undefined;
+  @Input() helperText?: string = undefined;
+  @Input() error?: string = undefined;
+
+  @Output() cxInput = new EventEmitter<CustomEvent>();
+  @Output() cxChange = new EventEmitter<CustomEvent<SelectDetail>>();
+  @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();
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['options'] && this.el) {
+      const val = this.options;
+      if (val != null) {
+        this.el.nativeElement.setAttribute('options', typeof val === 'object' ? JSON.stringify(val) : String(val));
+      } else {
+        this.el.nativeElement.removeAttribute('options');
+      }
+    }
+  }
+
+  _serialize_options(): string | null {
+    const val = this.options;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+
+
+  // ── 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/scrollbar.component.ts

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

package/src/search-bar.component.ts

@@ -0,0 +1,127 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-search-bar>
+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-search-bar[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxSearchBar),
+    multi: true,
+  }],
+  template: `
+  <cx-search-bar
+    [attr.id]="id"
+    [attr.placeholder]="placeholder"
+    [attr.label]="label"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.name]="name"
+    [attr.value]="value"
+    [attr.debounce-ms]="debounceMs"
+    [attr.loading]="loading || null"
+    [attr.shortcut]="shortcut"
+    [attr.expandable]="expandable || null"
+    [attr.disabled]="disabled || null"
+    [attr.readonly]="readonly || null"
+    [attr.controls]="controls"
+    [attr.shimmer]="shimmer || null"
+    #el
+  ><ng-content /></cx-search-bar>
+  `,
+})
+export class CxSearchBar implements AfterViewInit, ControlValueAccessor {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() placeholder?: 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() name?: string = undefined;
+  @Input() value?: string = undefined;
+  @Input() debounceMs?: number = undefined;
+  @Input() loading?: boolean = undefined;
+  @Input() shortcut?: string = undefined;
+  @Input() expandable?: boolean = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() readonly?: boolean = undefined;
+  @Input() controls?: string = undefined;
+  @Input() shimmer?: 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 search input. */
+  focus(): void { (this.el.nativeElement as any).focus(); }
+
+  /** Clears the search input value. */
+  clear(): void { (this.el.nativeElement as any).clear(); }
+
+  // ── 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/select.component.ts

@@ -0,0 +1,181 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-select>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+  forwardRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { FocusDetail, InputDetail, KeyboardDetail, OptionGroup, SelectDetail, SelectOption } from './types.js';
+
+@Component({
+  selector: 'cx-select[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CxSelect),
+    multi: true,
+  }],
+  template: `
+  <cx-select
+    [attr.id]="id"
+    [attr.label]="label"
+    [attr.variant]="variant"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    [attr.mode]="mode"
+    [selected]="_serialize_selected()"
+    [attr.placeholder]="placeholder"
+    [attr.helper-text]="helperText"
+    [attr.error]="error"
+    [attr.disabled]="disabled || null"
+    [attr.required]="required || null"
+    [attr.name]="name"
+    [items]="_serialize_items()"
+    [groups]="_serialize_groups()"
+    #el
+  ><ng-content /></cx-select>
+  `,
+})
+export class CxSelect implements AfterViewInit, OnChanges, 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() mode?: 'single' | 'multiple' = undefined;
+  @Input() selected?: string[] | string = undefined;
+  @Input() placeholder?: string = undefined;
+  @Input() helperText?: string = undefined;
+  @Input() error?: string = undefined;
+  @Input() disabled?: boolean = undefined;
+  @Input() required?: boolean = undefined;
+  @Input() name?: string = undefined;
+  @Input() items?: SelectOption[] | string = undefined;
+  @Input() groups?: OptionGroup[] | string = undefined;
+
+  @Output() cxInput = new EventEmitter<CustomEvent<InputDetail>>();
+  @Output() cxChange = new EventEmitter<CustomEvent<SelectDetail>>();
+  @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();
+    });
+  }
+
+  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);
+  }
+
+  /** Opens the dropdown. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the dropdown. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+  /** Focuses the trigger button. */
+  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/sidebar.component.ts

@@ -0,0 +1,91 @@
+// Auto-generated by scripts/generate-angular.mjs — DO NOT EDIT
+// Angular wrapper for <cx-sidebar>
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ElementRef,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+} from '@angular/core';
+import type { CloseDetail, NavigateDetail, SidebarGroup } from './types.js';
+
+@Component({
+  selector: 'cx-sidebar[collet]',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <cx-sidebar
+    [attr.id]="id"
+    [attr.label]="label"
+    [groups]="_serialize_groups()"
+    [attr.separators-after]="separatorsAfter"
+    [attr.side]="side"
+    [attr.state]="state"
+    [attr.shape]="shape"
+    [attr.size]="size"
+    #el
+  ><ng-content />
+    <ng-content select="[slot=header]" />
+    <ng-content select="[slot=footer]" /></cx-sidebar>
+  `,
+})
+export class CxSidebar implements AfterViewInit, OnChanges {
+  @ViewChild('el', { static: true }) el!: ElementRef<HTMLElement>;
+
+  @Input() id?: string = undefined;
+  @Input() label?: string = undefined;
+  @Input() groups?: SidebarGroup[] | string = undefined;
+  @Input() separatorsAfter?: string = undefined;
+  @Input() side?: 'left' | 'right' = undefined;
+  @Input() state?: 'expanded' | 'narrow' | 'hidden' = undefined;
+  @Input() shape?: 'sharp' | 'rounded' | 'pill' = undefined;
+  @Input() size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = undefined;
+
+  @Output() cxClose = new EventEmitter<CustomEvent<CloseDetail>>();
+  @Output() cxNavigate = new EventEmitter<CustomEvent<NavigateDetail>>();
+
+  constructor(private c: ChangeDetectorRef) {
+    c.detach();
+  }
+
+  ngAfterViewInit(): void {
+    this.el.nativeElement.addEventListener('cx-close', (e: Event) => {
+      this.cxClose.emit(e as CustomEvent);
+    });
+    this.el.nativeElement.addEventListener('cx-navigate', (e: Event) => {
+      this.cxNavigate.emit(e as CustomEvent);
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    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_groups(): string | null {
+    const val = this.groups;
+    if (val == null) return null;
+    return typeof val === 'object' ? JSON.stringify(val) : String(val);
+  }
+
+  /** Opens the mobile sidebar drawer. */
+  open(): void { (this.el.nativeElement as any).open(); }
+
+  /** Closes the mobile sidebar drawer. */
+  close(): void { (this.el.nativeElement as any).close(); }
+
+}

package/src/skeleton.component.ts

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