bp-sdk-vehicle-panel
w--- hide_title: true id: bp-sdk-vehicle-panel title: Web Components
sidebar_label: vehicle-panel
bp-sdk-vehicle-panel
Custom element hooks
| Name | Description |
|---|---|
bp-sdk-external-vehicle-panel | disable html |
Classes
| Name | Description |
|---|---|
bp-sdk-vehicle-panel__container | Root div element |
bp-sdk-vehicle-panel__buttons | Element containing buttons displayed in header section |
bp-sdk-vehicle-panel__content | Div element containing content |
bp-sdk-vehicle-panel__label | Element containing vehicle information displayed in header section |
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
answers | -- | Non-vehicle specific answers | IAnswer[] | [] |
canDelete | can-delete | Can Delete | boolean | false |
canEdit | can-edit | Can edit | boolean | false |
canSave | can-save | Can Save | boolean | true |
code | code | Code | string | undefined |
handleClose | -- | On close function hook | () => void | undefined |
handleDelete | -- | On close function hook | () => void | undefined |
handleEdit | -- | On open function hook | (e: MouseEvent) => void | undefined |
handleOpen | -- | On open function hook | () => void | undefined |
isEditing | is-editing | Is editing | boolean | false |
isExpanded | is-expanded | Is expanded | boolean | true |
isValid | is-valid | Is vehicle valid | boolean | true |
isVehicleTrailer | is-vehicle-trailer | Is vehicle trailer? | boolean | false |
questionGroup | -- | Question Group | IMappedQuestionGroupAnswers | undefined |
shouldShowTrailers | should-show-trailers | should show trailers? | boolean | false |
vehicleInformation | -- | Vehicle information | IVehicleSummary | { year: '', make: '', model: '', configuration: '' } |
vehicleLabel | vehicle-label | Default "Add new vehicle" label text | string | 'Add new vehicle' |
Dependencies
Used by
Depends on
- bp-sdk-vehicle-panel-content
- bp-sdk-vehicle-group
- bp-sdk-icon-container
- bp-sdk-vehicle-panel-label
- bp-sdk-vehicle-panel-buttons
Graph
graph TD;
bp-sdk-vehicle-panel --> bp-sdk-vehicle-panel-content
bp-sdk-vehicle-panel --> bp-sdk-vehicle-group
bp-sdk-vehicle-panel --> bp-sdk-icon-container
bp-sdk-vehicle-panel --> bp-sdk-vehicle-panel-label
bp-sdk-vehicle-panel --> bp-sdk-vehicle-panel-buttons
bp-sdk-vehicle-panel-content --> bp-sdk-dynamic-input-redux-container
bp-sdk-vehicle-panel-content --> bp-sdk-question-group-container
bp-sdk-dynamic-input-redux-container --> bp-sdk-dynamic-input-event-container
bp-sdk-dynamic-input-event-container --> bp-sdk-dynamic-input
bp-sdk-dynamic-input --> bp-sdk-message-outlet
bp-sdk-dynamic-input --> bp-sdk-label
bp-sdk-dynamic-input --> bp-sdk-google-places-autocomplete-container
bp-sdk-dynamic-input --> bp-sdk-driver-input-container
bp-sdk-dynamic-input --> bp-sdk-increment-input
bp-sdk-dynamic-input --> bp-sdk-text-input-container
bp-sdk-dynamic-input --> bp-sdk-masked-input-container
bp-sdk-dynamic-input --> bp-sdk-date-input-container
bp-sdk-dynamic-input --> bp-sdk-month-year-input-container
bp-sdk-dynamic-input --> bp-sdk-select-input-container
bp-sdk-dynamic-input --> bp-sdk-autocomplete-naics-container
bp-sdk-dynamic-input --> bp-sdk-business-classification-selector-container
bp-sdk-dynamic-input --> bp-sdk-radio-dialog
bp-sdk-dynamic-input --> bp-sdk-checkbox-input
bp-sdk-dynamic-input --> bp-sdk-radio-input
bp-sdk-dynamic-input --> bp-sdk-product-list-container
bp-sdk-dynamic-input --> bp-sdk-add-question-pool-item-container
bp-sdk-dynamic-input --> bp-sdk-delete-question-pool-item-container
bp-sdk-dynamic-input --> bp-sdk-autocomplete-input
bp-sdk-google-places-autocomplete-container --> bp-sdk-google-places-autocomplete
bp-sdk-google-places-autocomplete --> bp-sdk-errors-container
bp-sdk-errors-container --> bp-sdk-errors
bp-sdk-driver-input-container --> bp-sdk-text-input-container
bp-sdk-text-input-container --> bp-sdk-text-input
bp-sdk-text-input --> bp-sdk-errors-container
bp-sdk-increment-input --> bp-sdk-text-input-container
bp-sdk-masked-input-container --> bp-sdk-masked-input
bp-sdk-masked-input --> bp-sdk-errors-container
bp-sdk-masked-input --> bp-sdk-masked-input-button
bp-sdk-masked-input --> bp-sdk-icon-container
bp-sdk-date-input-container --> bp-sdk-date-input
bp-sdk-date-input --> bp-sdk-errors-container
bp-sdk-month-year-input-container --> bp-sdk-month-year-input
bp-sdk-month-year-input --> bp-sdk-errors-container
bp-sdk-select-input-container --> bp-sdk-select-input
bp-sdk-select-input --> bp-sdk-errors-container
bp-sdk-autocomplete-naics-container --> bp-sdk-autocomplete-input
bp-sdk-autocomplete-input --> bp-sdk-errors-container
bp-sdk-business-classification-selector-container --> bp-sdk-business-classification-selector
bp-sdk-business-classification-selector --> bp-sdk-autocomplete-input
bp-sdk-business-classification-selector --> bp-sdk-business-classification-selector-list-container
bp-sdk-business-classification-selector-list-container --> bp-sdk-business-classification-selector-list
bp-sdk-business-classification-selector-list --> bp-sdk-business-classification-selector-naics-group
bp-sdk-business-classification-selector-naics-group --> bp-sdk-business-classification-selector-naics-group-header
bp-sdk-business-classification-selector-naics-group --> bp-sdk-business-classification-selector-list-item-container
bp-sdk-business-classification-selector-list-item-container --> bp-sdk-business-classification-selector-list-item
bp-sdk-business-classification-selector-list-item --> bp-sdk-business-classification-selector-card-content
bp-sdk-business-classification-selector-card-content --> bp-sdk-business-classification-selector-card-header
bp-sdk-business-classification-selector-card-content --> bp-sdk-business-classification-selector-card-body
bp-sdk-business-classification-selector-card-content --> bp-sdk-business-classification-selector-relevance-chip
bp-sdk-radio-dialog --> bp-sdk-dialog
bp-sdk-radio-dialog --> bp-sdk-radio-input
bp-sdk-dialog --> bp-sdk-dialog-close-button
bp-sdk-dialog-close-button --> bp-sdk-button
bp-sdk-dialog-close-button --> bp-sdk-icon-container
bp-sdk-radio-input --> bp-sdk-errors-container
bp-sdk-checkbox-input --> bp-sdk-errors-container
bp-sdk-product-list-container --> bp-sdk-product-list
bp-sdk-product-list --> bp-sdk-select-input
bp-sdk-add-question-pool-item-container --> bp-sdk-question-pool-container
bp-sdk-question-pool-container --> bp-sdk-parent-question-pool-selector
bp-sdk-question-pool-container --> bp-sdk-add-item-container
bp-sdk-parent-question-pool-selector --> bp-sdk-select-input
bp-sdk-parent-question-pool-selector --> bp-sdk-button
bp-sdk-add-item-container --> bp-sdk-icon-container
bp-sdk-add-item-container --> bp-sdk-button
bp-sdk-delete-question-pool-item-container --> bp-sdk-delete-question-pool-item
bp-sdk-delete-question-pool-item --> bp-sdk-delete-button
bp-sdk-delete-button --> bp-sdk-icon-container
bp-sdk-question-group-container --> bp-sdk-question-group
bp-sdk-question-group --> bp-sdk-dynamic-input-redux-container
bp-sdk-question-group --> bp-sdk-question-group-container
bp-sdk-question-group --> bp-sdk-question-group-label
bp-sdk-question-group --> bp-sdk-address-group-container
bp-sdk-question-group --> bp-sdk-accumulation-question-group-container
bp-sdk-question-group --> bp-sdk-vehicle-question-pool-container
bp-sdk-question-group --> bp-sdk-driver-question-pool-container
bp-sdk-question-group --> bp-sdk-stepper-group-container
bp-sdk-question-group --> bp-sdk-accordion
bp-sdk-question-group --> bp-sdk-coverage-group
bp-sdk-address-group-container --> bp-sdk-address-group
bp-sdk-address-group --> bp-sdk-dynamic-input-redux-container
bp-sdk-address-group --> bp-sdk-google-address-validation
bp-sdk-google-address-validation --> bp-sdk-button
bp-sdk-google-address-validation --> bp-sdk-address-group
bp-sdk-accumulation-question-group-container --> bp-sdk-accumulation-question-group
bp-sdk-accumulation-question-group --> bp-sdk-progress
bp-sdk-accumulation-question-group --> bp-sdk-dynamic-input-redux-container
bp-sdk-vehicle-question-pool-container --> bp-sdk-vehicle-panel-container
bp-sdk-vehicle-panel-container --> bp-sdk-vehicle-panel
bp-sdk-driver-question-pool-container --> bp-sdk-driver-group
bp-sdk-driver-group --> bp-sdk-icon-container
bp-sdk-driver-group --> bp-sdk-dynamic-input-list
bp-sdk-dynamic-input-list --> bp-sdk-dynamic-input-redux-container
bp-sdk-stepper-group-container --> bp-sdk-stepper-group
bp-sdk-stepper-group-container --> bp-sdk-stepper-group-button
bp-sdk-stepper-group --> bp-sdk-stepper-group
bp-sdk-stepper-group --> bp-sdk-dynamic-input-redux-container
bp-sdk-accordion --> bp-sdk-dynamic-input-redux-container
bp-sdk-accordion --> bp-sdk-question-group-container
bp-sdk-accordion --> bp-sdk-question-group-label
bp-sdk-coverage-group --> bp-sdk-dynamic-input-redux-container
bp-sdk-coverage-group --> bp-sdk-question-group-container
bp-sdk-coverage-group --> bp-sdk-question-group-label
bp-sdk-vehicle-group --> bp-sdk-vehicle-interface
bp-sdk-vehicle-group --> bp-sdk-vehicle-vin-container
bp-sdk-vehicle-group --> bp-sdk-dynamic-input-redux-container
bp-sdk-vehicle-group --> bp-sdk-vehicle-delete-button
bp-sdk-vehicle-group --> bp-sdk-vehicle-save-button
bp-sdk-vehicle-interface --> bp-sdk-vehicle-years-container
bp-sdk-vehicle-interface --> bp-sdk-vehicle-makes-container
bp-sdk-vehicle-interface --> bp-sdk-vehicle-models-container
bp-sdk-vehicle-interface --> bp-sdk-vehicle-configurations-container
bp-sdk-vehicle-years-container --> bp-sdk-vehicle-years
bp-sdk-vehicle-years --> bp-sdk-dynamic-input
bp-sdk-vehicle-makes-container --> bp-sdk-vehicle-makes
bp-sdk-vehicle-makes --> bp-sdk-dynamic-input
bp-sdk-vehicle-models-container --> bp-sdk-vehicle-models
bp-sdk-vehicle-models --> bp-sdk-dynamic-input
bp-sdk-vehicle-configurations-container --> bp-sdk-vehicle-configurations
bp-sdk-vehicle-configurations --> bp-sdk-dynamic-input
bp-sdk-vehicle-vin-container --> bp-sdk-vehicle-vin
bp-sdk-vehicle-vin --> bp-sdk-text-input
bp-sdk-vehicle-vin --> bp-sdk-vehicle-configurations-container
bp-sdk-vehicle-save-button --> bp-sdk-button
bp-sdk-vehicle-panel-buttons --> bp-sdk-vehicle-delete-button
bp-sdk-vehicle-panel-buttons --> bp-sdk-vehicle-edit-button
style bp-sdk-vehicle-panel fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS