Sample Usage -
Include the component in your template simply by adding vlocity-dc-filter custom tag
<vlocity-dc-filter .filterData="${offerListComponent.filterData}"></vlocity-dc-filter>
| Attribute Name | Type Expected | Required |
|-------------------|---------------------------------------------------------------------------------|----------|
| filterData | It expects an array of FilterData object. | required |
--------------------------------------------------------------------------------------------------------------------------------------
KEY INFO -
events fired : none
events registered : none
Dependency - vlocity-dc-filter is an independent component and has no dependency on parent component.
| Parent Component | Expected Child Component |
|------------------|---------------------------|
| none | none |
Sample with slots -
<vlocity-dc-filter>
<span slot="{slot_name}">
Custom HTML elements goes here
</span>
</vlocity-dc-filter>
List of available slots -
| Slot names | Dynamic | Description | Impact |
|---------------------------------------|-------------|----------------------------------------------------|
| dc-filter-wrapper | - | Wrapper for template | Replaces DOM |
Extends
LitElement
Members
(static, readonly) properties
Properties that will be available in the binding system
Properties:
Name
Type
Description
displayFilterBox
Boolean
boolen value to show/hide filter box.
filterData
Array
filter data to be populated.
selectedFilters
Array
selected filters.
Methods
(static) filterSelected(selectedFilterId)
This function is called on selection of filter.
Parameters:
Name
Type
Description
selectedFilterId
string
id of the slected filter
VlocityDCFilter
vlocity-dc-filter is a web component used to filter item in offer list/grid view.
Sample Usage -
Include the component in your template simply by adding vlocity-dc-filter custom tag
<vlocity-dc-filter .filterData="${offerListComponent.filterData}"></vlocity-dc-filter>
| Attribute Name | Type Expected | Required |
|-------------------|---------------------------------------------------------------------------------|----------|
| filterData | It expects an array of FilterData object. | required |
--------------------------------------------------------------------------------------------------------------------------------------
KEY INFO -
events fired : vlocity-dc-filter-list-updated
| Event Name | Description |
|--------------------------------------|---------------------------------------------------------------|
|vlocity-dc-filter-list-updated | Event to publish update of filter list. |
events registered : none
Dependency - vlocity-dc-filter is an independent component and has no dependency on parent component.
| Parent Component | Expected Child Component |
|------------------|---------------------------|
| none | none |
Sample with slots -
<vlocity-dc-filter>
<span slot="{slot_name}">
Custom HTML elements goes here
</span>
</vlocity-dc-filter>
List of available slots -
| Slot names | Dynamic | Description | Impact |
|---------------------------------------|-------------|----------------------------------------------------|
| dc-filter-wrapper | - | Wrapper for template | Replaces DOM |
Extends
LitElement
Members
(static, readonly) properties
Properties that will be available in the binding system