bp-sdk-dynamic-input
Custom element hooks
| Name | Description |
|---|---|
bp-sdk-external-dynamic-input | disables html |
Classes
| Name | Description |
|---|---|
bp-sdk-dynamic__container | container div at root of tree |
bp-sdk-dynamic_container--labeled | Optional class when dynamic input has text on it |
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
answerId | answer-id | Answer id | string | undefined |
answerPoolId | answer-pool-id | Answer pool id | string | undefined |
answeredBySource | answered-by-source | Specifically how the question was answered (ie. "ACORD 126") | string | undefined |
applicationFormId | application-form-id | Application form id | string | undefined |
choiceId | choice-id | Choice Id, should only be used on autocomplete, business-classification-selector, select, and radio inputs | string | undefined |
choiceIds | -- | Choice ids, should only be used on select-input or product-list | string[] | [] |
choices | -- | Choices, used in any component that uses choiceId or ChoiceIds | IChoice[] | undefined |
code | code | Question code | string | undefined |
disableAddressAutocomplete | disable-address-autocomplete | Disables Google Autocomplete for address groups when true | boolean | false |
displayType | display-type | Display type | "internal" \| "private" \| "public" | undefined |
errorText | error-text | Error text | string | undefined |
errors | -- | Error messages | string[] | undefined |
fieldType | field-type | Field type | string | undefined |
helpText | help-text | Help text | string | undefined |
inputComponentType | input-component-type | Input component type | string | undefined |
isAutocomplete | is-autocomplete | Is autocomplete | boolean | undefined |
isCompleted | is-completed | Is completed | boolean | undefined |
isCoverageType | is-coverage-type | Is Coverage Type | boolean | true |
isHidden | is-hidden | Is hidden | boolean | undefined |
isLabelledField | is-labelled-field | Is labelled field | boolean | false |
isMultiple | is-multiple | Is multiple | boolean | undefined |
isReadOnly | is-read-only | When true, the field will be readonly. It will display only the label and value as plain text. | boolean | false |
isRequired | is-required | Is required | boolean | undefined |
isSensitive | is-sensitive | Is sensitive | boolean | undefined |
isTrackable | is-trackable | Is trackable | boolean | undefined |
label | label | Label to use | string | undefined |
labelId | label-id | Label id | string | 'a11y-' |
labelledBy | labelled-by | Labels that describe group | string | undefined |
maxDate | max-date | Max date range | Date \| string | undefined |
maxValue | max-value | Maximum length or value, depending on field type | number | undefined |
minDate | min-date | Minimum date range | Date \| string | undefined |
minValue | min-value | Minimum value or length depending on field type | number | undefined |
order | order | Question order | number | undefined |
pattern | pattern | Regex pattern answer is expected to conform to | string | undefined |
placeholder | placeholder | Placeholder text | string | undefined |
pristine | pristine | Is pristine | boolean | true |
questionGroupId | question-group-id | Question Group Id | string | undefined |
questionId | question-id | Question Id | string | undefined |
questionSetId | question-set-id | Question Set id | string | undefined |
referenceType | reference-type | Question reference type | string | undefined |
shouldShowInput | should-show-input | Should show input | boolean | true |
showBusinessClassificationSelector | show-business-classification-selector | Show business class selector | boolean | false |
text | text | Question text | string | undefined |
touched | touched | Is touched | boolean | false |
useSelectAlias | use-select-alias | Use select alias | boolean | false |
value | value | Question value | string | undefined |
Events
| Event | Description | Type |
|---|---|---|
componentMissing | Notification component could not be classified for a answer | CustomEvent<string> |
Dependencies
Used by
- bp-sdk-dynamic-input-event-container
- bp-sdk-vehicle-configurations
- bp-sdk-vehicle-makes
- bp-sdk-vehicle-models
- bp-sdk-vehicle-years
Depends on
- bp-sdk-message-outlet
- bp-sdk-label
- bp-sdk-google-places-autocomplete-container
- bp-sdk-driver-input-container
- bp-sdk-increment-input
- bp-sdk-text-input-container
- bp-sdk-masked-input-container
- bp-sdk-date-input-container
- bp-sdk-month-year-input-container
- bp-sdk-select-input-container
- bp-sdk-autocomplete-naics-container
- bp-sdk-business-classification-selector-container
- bp-sdk-radio-dialog
- bp-sdk-checkbox-input
- bp-sdk-radio-input
- bp-sdk-product-list-container
- bp-sdk-add-question-pool-item-container
- bp-sdk-delete-question-pool-item-container
- bp-sdk-autocomplete-input
Graph
graph TD;
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-dynamic-input-event-container --> bp-sdk-dynamic-input
bp-sdk-vehicle-configurations --> bp-sdk-dynamic-input
bp-sdk-vehicle-makes --> bp-sdk-dynamic-input
bp-sdk-vehicle-models --> bp-sdk-dynamic-input
bp-sdk-vehicle-years --> bp-sdk-dynamic-input
style bp-sdk-dynamic-input fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS