@empathyco/x-components/docs/API-reference/api/x-components.facets.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [Facets](./x-components.facets.md)

## Facets variable

This component renders the list of facets stored in the Facets module. Facets can be rendered differently based on their purpose and this can be achieved using the exposed slots: - A default and required slot. - A custom slot for each facet with the facetId as its name. This allows each facet to be rendered differently based on its needs.

**Signature:**

```typescript
_default: import("vue").DefineComponent<{
    facetsIds: PropType<Array<Facet["id"]>>;
    alwaysVisible: BooleanConstructor;
    animation: {
        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
        default: string;
    };
    renderableFacets: StringConstructor;
}, {
    selectedFiltersByFacet: import("vue").ComputedRef<import("../..").FiltersByFacet>;
    hasFacets: import("vue").ComputedRef<boolean>;
    mappedFacets: import("vue").ComputedRef<Dictionary<RenderFacet>>;
    hasSlot: (name: string) => boolean;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    facetsIds: PropType<Array<Facet["id"]>>;
    alwaysVisible: BooleanConstructor;
    animation: {
        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
        default: string;
    };
    renderableFacets: StringConstructor;
}>>, {
    alwaysVisible: boolean;
    animation: string | Function | Record<string, any>;
}, {}>
```