Events

new CustomEvent(name, {
  detail: payload,
  bubbles: true,
  composed: true,
})

interface BaseComponentEventDetail {
  value: string;
  rawValue: string;
  isValid: boolean;
  validationState: ValidationState;
  errorMessage?: string;
  hasInteracted: boolean;
}

interface InputEventDetail extends BaseComponentEventDetail {
  characterCount?: number;
  maxLength?: number;
}

interface PhoneInputEventDetail extends BaseComponentEventDetail {
  formattedValue: string;
  countryCode?: string;
}

interface SearchSelectEventDetail extends BaseComponentEventDetail {
  selectedOption: any;   // full option object { value, label }
  options: any[];
  searchQuery?: string;
}

interface AccountEventDetail {
  account_uuid: string;
  status: string;
  account_status: string;  // mirrors status
  skipped?: true;          // present when the account already existed and was skipped
}

interface PaymentMethodEventDetail {
  payment_method_uuid: string;
  status: string;
}

interface StepEventDetail {
  stepIndex: number;
  stepType: string;
  result: any;      // accumulated results from all steps up to this point
  error?: Error;
}

interface StepBarrierEventDetail {
  stepType: string;
  stepIndex?: number;
  account_uuid?: string;
  status?: string;
  title?: string;
  message?: string;
  description?: string;
}

interface StepActionRequiredEventDetail {
  stepType: string;
  stepIndex?: number;
  account_uuid?: string;
  status?: string;
  status_reason?: string;
  message?: string;
}

interface FlowEventDetail {
  currentStep: number;
  totalSteps: number;
  stepResults: Record<number, any>;
  isComplete: boolean;
}

user interaction
  → component logic + API call
    → domain event (account / payment-method)  ← optional
    → form-success / form-error / form-barrier / form-action-required

step emits form-success
  → MultiStepFlow stores result, merges account_uuid / payment_method_uuid
  → MultiStepFlow emits flow-step-complete
  → next step receives merged data automatically
  ...
final step completes
  → MultiStepFlow emits flow-complete

{
  checked: boolean;
  value: any;   // the component's value prop
  name: string;
}

{ value: any }  // from the selectable prop

{ reason: 'backdrop' | 'escape' | 'button' | 'programmatic' }

import { ComponentEvents } from '@alviere/ui';

element.addEventListener(ComponentEvents.FORM_SUCCESS, handler);
element.addEventListener(ComponentEvents.ACCOUNT, handler);

export const ComponentEvents = {
  // Text inputs
  TEXT_INPUT:  'text-input',
  TEXT_CHANGE: 'text-change',
  TEXT_FOCUS:  'text-focus',
  TEXT_BLUR:   'text-blur',

  // Phone input
  PHONE_INPUT:  'phone-input',
  PHONE_CHANGE: 'phone-change',
  PHONE_FOCUS:  'phone-focus',
  PHONE_BLUR:   'phone-blur',

  // Search select
  SEARCH_SELECT_INPUT:  'search-select-input',
  SEARCH_SELECT_CHANGE: 'search-select-change',
  SEARCH_SELECT_OPEN:   'search-select-open',
  SEARCH_SELECT_CLOSE:  'search-select-close',

  // Form lifecycle
  FORM_SUCCESS:         'form-success',
  FORM_ERROR:           'form-error',
  FORM_BARRIER:         'form-barrier',
  FORM_ACTION_REQUIRED: 'form-action-required',
  FORM_SUBMIT:          'form-submit',
  FORM_RESET:           'form-reset',

  // Flow lifecycle
  FLOW_STEP_COMPLETE: 'flow-step-complete',
  FLOW_STEP_ERROR:    'flow-step-error',
  FLOW_COMPLETE:      'flow-complete',
  FLOW_RESET:         'flow-reset',

  // Domain events
  ACCOUNT:        'account',
  PAYMENT_METHOD: 'payment-method',

  // Legacy card inputs
  CARD_PAN_INPUT:  'card-pan-input',
  CARD_PAN_CHANGE: 'card-pan-change',
  CARD_PAN_FOCUS:  'card-pan-focus',
  CARD_PAN_BLUR:   'card-pan-blur',
  CARD_CVV_INPUT:  'card-cvv-input',
  CARD_CVV_CHANGE: 'card-cvv-change',
  CARD_CVV_FOCUS:  'card-cvv-focus',
  CARD_CVV_BLUR:   'card-cvv-blur',
  CARD_EXP_INPUT:  'card-exp-input',
  CARD_EXP_CHANGE: 'card-exp-change',
  CARD_EXP_FOCUS:  'card-exp-focus',
  CARD_EXP_BLUR:   'card-exp-blur',
} as const;

<alviere-create-account
  jwt="your-jwt-token"
  business-uuid="your-business-uuid"
  public-certificate="your-cert"
  public-certificate-id="your-cert-id"
></alviere-create-account>

<script>
  const el = document.querySelector('alviere-create-account');

  el.addEventListener('account', e => {
    console.log('Account created:', e.detail.account_uuid);
  });

  el.addEventListener('form-success', e => {
    console.log('Step done:', e.detail);
  });

  el.addEventListener('form-barrier', e => {
    showBarrierUI(e.detail.title, e.detail.message);
  });

  el.addEventListener('form-action-required', e => {
    console.log('Additional fields required:', e.detail.status_reason);
  });

  el.addEventListener('form-error', e => {
    console.error('Error:', e.detail.error);
  });
</script>

<alviere-multi-step-flow
  jwt="your-jwt-token"
  business-uuid="your-business-uuid"
  config='{"steps":[{"type":"CREATE_ACCOUNT","label":"Account"},{"type":"ADD_BANK_ACCOUNT","label":"Bank"}]}'
></alviere-multi-step-flow>

<script>
  const flow = document.querySelector('alviere-multi-step-flow');

  // Flow lifecycle
  flow.addEventListener('flow-step-complete', e => {
    console.log('Step', e.detail.stepType, 'done. Result:', e.detail.result);
  });

  flow.addEventListener('flow-complete', e => {
    console.log('All steps done:', e.detail.stepResults);
  });

  flow.addEventListener('flow-step-error', e => {
    console.error('Step failed:', e.detail.stepType, e.detail.error);
  });

  // Domain events bubble up from child steps
  flow.addEventListener('account', e => {
    console.log('Account:', e.detail.account_uuid);
  });

  flow.addEventListener('payment-method', e => {
    console.log('Payment method:', e.detail.payment_method_uuid);
  });
</script>

import {
  ComponentEvents,
  type AccountEventDetail,
  type PaymentMethodEventDetail,
  type StepEventDetail,
  type FlowEventDetail,
} from '@alviere/ui';

const flow = document.querySelector('alviere-multi-step-flow')!;

flow.addEventListener(
  ComponentEvents.ACCOUNT,
  ((e: CustomEvent<AccountEventDetail>) => {
    const { account_uuid, status } = e.detail;
    console.log(account_uuid, status);
  }) as EventListener
);

flow.addEventListener(
  ComponentEvents.FLOW_COMPLETE,
  ((e: CustomEvent<FlowEventDetail>) => {
    console.log('Steps:', e.detail.totalSteps, 'Results:', e.detail.stepResults);
  }) as EventListener
);