Vehicle Lookup

The <vehicle-lookup> component is a wrapper that composes all of the vehicle information components (specification, sale information, accessories, warranty & SSC, service history, paint thickness, claimable items) into one coordinated unit.

Unlike the individual components, the wrapper does not render its own tab bar — it exposes an activeElement property and renders whichever child is active. The host page is responsible for the tab UI. This lets integrators style the navigation to match their own design system.

When data is loaded for the active child, the wrapper automatically distributes the response to the other children, so switching tabs is instant and does not re-fetch.

Live Demo

Specification Sale Information Accessories Warranty & SSC Service History Paint Thickness Claimable Items

Try a VIN: JTMHX01J8L4198293 JTMW43FV10D123456 Loading components…

---

Usage

The wrapper renders one child at a time based on activeElement. Your page supplies the tab UI and updates activeElement on click. A single VIN search populates all children.

<!-- Your own tab bar -->
<nav>
  <button onclick="lookup.activeElement = 'vehicle-specification'">Specification</button>
  <button onclick="lookup.activeElement = 'vehicle-sale-information'">Sale Information</button>
  <button onclick="lookup.activeElement = 'vehicle-accessories'">Accessories</button>
  <button onclick="lookup.activeElement = 'vehicle-warranty-details'">Warranty &amp; SSC</button>
  <button onclick="lookup.activeElement = 'vehicle-service-history'">Service History</button>
  <button onclick="lookup.activeElement = 'vehicle-paint-thickness'">Paint Thickness</button>
  <button onclick="lookup.activeElement = 'vehicle-claimable-items'">Claimable Items</button>
</nav>

<vehicle-lookup
  id="lookup"
  language="en"
  base-url="https://your-api.com/"
  active-element="vehicle-specification">
</vehicle-lookup>

<script>
  const lookup = document.getElementById('lookup');
  lookup.fetchVin('JTMHX01J8L4198293');
</script>

---

Properties

Property	Attribute	Type	Default	Description
activeElement	active-element	string	''	Tag of the child to render. One of vehicle-specification, vehicle-sale-information, vehicle-accessories, vehicle-warranty-details, vehicle-service-history, vehicle-paint-thickness, vehicle-claimable-items.
baseUrl	base-url	string	''	Base URL for the vehicle lookup API. Passed down to the active child.
isDev	is-dev	boolean	false	Enables development mode. Loads mock data from mockUrl (or the published CDN mocks) instead of hitting the API.
mockUrl	mock-url	string	''	Custom URL for the mock data file. Only used when isDev is true. If empty, the wrapper loads the mock file published with the NPM package.
language	language	string	'en'	Language code for localization (en, ku, ar, ru).
disableVinValidation	disable-vin-validation	boolean	false	Disables VIN format validation on the active child.
queryString	query-string	string	''	Extra query string appended to API requests.
childrenProps	children-props	string | object	—	JSON string (or object) of per-child prop overrides. See below.
errorStateListener	—	(error: string) => void	—	Callback invoked whenever the wrapper's error message changes.
loadingStateChanged	—	(isLoading: boolean) => void	—	Callback invoked whenever any child enters / leaves the loading state.
dynamicClaimActivate	—	(vehicle: VehicleLookupDTO) => void	—	Callback fired when a user activates a dynamic claim from the claimable items tab.

---

Methods

Method	Description
fetchVin(vin, headers?)	Fetches data for the given VIN via the active child. Other children are hydrated from the response.
handleLoadData(response, activeChild?)	Distributes a pre-loaded VehicleLookupDTO to the children without making an HTTP call.
setBlazorRef(ref)	Registers a DotNetObjectReference so Blazor hosts can receive callbacks by name.

---

Passing Props to Children (childrenProps)

Some child components accept extra props that are not part of the wrapper's own surface (for example, the recaptchaKey for warranty details, or the claimEndPoint for dynamic claim). Use childrenProps to forward them:

<vehicle-lookup
  active-element="vehicle-specification"
  base-url="https://your-api.com/"
  children-props='{
    "vehicle-warranty-details": {
      "showSsc": true,
      "recaptchaKey": "YOUR_RECAPTCHA_SITE_KEY"
    },
    "vehicle-claimable-items": {
      "claimEndPoint": "https://your-api.com/service-claim",
      "claim-via-barcode-scanner": "false"
    }
  }'>
</vehicle-lookup>

The top-level keys must be the child tag name. Any props not listed here fall back to the wrapper's defaults.