Applied Filters | Web Component

Properties

Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.

Property	Attribute	Description	Type	Default
`isOpen`	`open`	Controls the open state of the dropdown	boolean	false

Events

Event	Description	Type
`dkClearAllFilters`	This Event is fired when all filters should be removed.	any
`dkClearFilter`	This event is fired when an option has been clicked and that filter should be removed.	{ value: string; label: string; clearAll?: boolean; }

Single Filter

<dk-applied-filters>
        <dk-option
            type="clear"
            value="stock-status">
            Stock Status
        </dk-option>
    </dk-applied-filters>

Multiple Filters

<dk-applied-filters>
        <dk-option
            type="clear"
            value="stock-status"
            slot="filter-group">
            Stock Status
        </dk-option>
        <dk-option
            value="new-products"
            type="clear">
            New Products
        </dk-option>
        <dk-option
            value="new-products"
            type="clear">
            The tag
        </dk-option>
        <dk-option type="clear" value="in-stock">
            In Stock
        </dk-option>
        <dk-option
            type="clear"
            value="regularly-stocking">
            Regularly Stocking
        </dk-option>
    </dk-applied-filters>