## API for `<sn-search-results-container>`

```jsx
<sn-search-results-container
    searchResultMetadata={searchResultMetadata}
    geniusResults={geniusResultsData}
    searchResults={searchResultsData}
    sortFilters={[
		{
			sysId: "947110427310101052c7d5fdbdf6a73e",
			label: "Most Recent"
		},
    	{
			sysId: "fca0ed907320101052c7d5fdbdf6a799",
			label: "Last Updated"
		}
	]}

>
```

where `geniusResultsData` is an object containing data and the declarative actions for genius results. Here's an example:

```jsx
{
    all_actions: [
        {
            name: 'navigation',
            actionType: 'uxf_client_action',
            actionDispatch: 'NAVIGATION',
            actionPayload:
                '{\r\n        "table": "{{table}}",\r\n        "sysId": "{{sys_id}}",\r\n        "url": "{{url}}"\r\n}',
            assignmentId: 'd46f400473211010c342d5fdbdf6a7cf',
        },
        {
            name: 'call_number',
            actionType: 'uxf_client_action',
            actionDispatch: 'PHONE_ADDON_ACTION_CLICK',
            actionPayload:
                '{\r\n\t"phoneNumber": "{{value}}",\r\n\t"fieldName": "{{name}}",\r\n\t"fieldLabel": "{{label}}"\r\n}',
            assignmentId: 'e3a173c073151010c342d5fdbdf6a7a2',
        }
    ],
    items: [
        {
            template: 'sn-search-genius-user-card',
            propValues: {
                identifier: 'San Diego, USA',
                avatar:
                    'https://i.pinimg.com/736x/f5/1d/e5/f51de5a7734a755b1d20009bd3441d92.jpg',
                header: 'System Administrator',
                identifierCriticalText: '4:30 pm',
                primaryDescription: 'Software Engineer, Dev - Search UX',
                secondaryDescription: 'Web Interfaces',
                actions: [
                    {
                        assignmentId: '2477664313aw13455',
                        label: 'Email',
                    },
                    {
                        assignmentId: '876543wne23r5654',
                        label: 'Call',
                    },
                ],
                model: {
                    name: 'System Administrator',
                    email: 'admin@example.com',
                    company: 'ACME Germany',
                    home_phone: '8581234567',
                    avatar: '',
                    time_zone: null,
                    photo: '',
                    user_name: 'admin',
                    mobile_phone: '',
                    location: 'Bockenheimer Landstraße 123, Frankfurt',
                    department: 'Web Interfaces',
                    sysId: 'fd826bf03710200044e0bfc8bcbe5d30',
                    sys_id: 'fd826bf03710200044e0bfc8bcbe5d30',
                    table: 'sys_user',
                },
            },
        },
        {
            template: 'sn-search-genius-catalog-card',
            propValues: {
                actions: [
                    {
                        assignmentId: '876543wne23r5691',
                        label: 'Request this item',
                    },
                ],
                model: {
                    sysId: 'fd826bf03710200044e0bfc8bcbe5d31',
                    sys_id: 'fd826bf03710200044e0bfc8bcbe5d31',
                    table: 'sys_cat_item',
                },
                identifier: 'IT Hardware and Software',
                marker:
                    'https://cdn.tmobile.com/content/dam/t-mobile/en-p/cell-phones/apple/Apple-iPhone-11-Pro/Midnight-Green/Apple-iPhone-11-Pro-Midnight-Green-frontimage.jpg',
                markerType: 'image',
                heading: 'iPhone 11 Pro',
                description: 'You choose storage and color options',
            },
        },
    ];
}
```

`searchResultsData` is an of object containing data and declarative actions for search results. Example:

```jsx
{
    all_actions: [
        {
            name: 'navigation',
            actionType: 'uxf_client_action',
            actionDispatch: 'NAVIGATION',
            actionPayload:
                '{\r\n        "table": "{{table}}",\r\n        "sysId": "{{sys_id}}",\r\n        "url": "{{url}}"\r\n}',
            assignmentId: 'd46f400473211010c342d5fdbdf6a7cf',
        }
    ],
    items: [
        {
            template: 'sn-search-result-evam-card',
            propValues: {
                textHeaderLabelOne: 'OneDrive',
                textHeaderLabelTwo: 'Microsoft Word Document',
                title: '<highlight>Conference</highlight> Possibilities 2020',
                summary:
                    'Business travel is liskely to be restricted for the remainder of the year 2020 ... There are two different avenues we can explore for <highlight>conference</highlight> attendance: virtual <highlight>conference</highlight> (domestic and interational); and domestic short travel to in-state, limited attendance <highlight>conference</highlight>s ... Approval for travel in these circumstances requires the extra step ...',
                detailLabelSeparator: '|',
                detailLabelOne:
                    'https://taco.acmeco/eeportal/eedocs/hr/policy/conf_policy_emea21.doc',
                detailLabelType: 'inline',
                clickAction: {
                    name: 'action_name',
                },
                model: {
                    sys_id: 'abc',
                },
            },
        },
        {
            template: 'sn-search-result-evam-card',
            propValues: {
                imageType: 'image',
                imageURL: 'https://i.imgur.com/hsMNxH2.jpg',
                textHeaderLabelOne: 'IT Hardware & Software',
                title: '<highlight>iPhone</highlight> 11 Pro',
                summary: 'Apple <highlight>iPhone</highlight> 11 Pro',
                detailLabelOne: '$499',
                clickAction: {
                    name: 'action_name',
                },
                model: {
                    sys_id: 'abc',
                },
            },
        },
        {
            template: 'sn-search-result-evam-card',
            propValues: {
                imageType: 'icon',
                icon: 'document-outline',
                textHeaderLabelOne: 'Governance, Risk and Compliance',
                textHeaderLabelTwo: 'KB0042148',
                textHeaderLabelThree: '09/01/2020',
                title:
                    '<sentence>Global <highlight>Travel</highlight> Business Expense and Credit Card Policy</sentence>',
                summary:
                    'Lorem ipsum dolor sit amet, <highlight>travel</highlight> adipiscing elit. <p>Sed tortor leo,</p> aliquam ac neque non, sodales egestas odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus nec neque non tortor imperdiet ullamcorper at vitae ante. Donec vulputate erat ac purus mattis, et aliquet erat condimentum. Nullam sed libero id diam volutpat maximus non non velit.',
                clickAction: {
                    name: 'action_name',
                },
                model: {
                    sys_id: 'abc',
                },
            },
        },
    ];
}
```

and `searchResultMetadata` is an object containing metadata information related to search results component. Example:

```jsx
{
    searchTerm:'ipone',
    correctedSearchTerm: 'iPhone',
    previousPageToken:"YWRtaW4gYWRtaW4=",
    nextPageToken:"YWRtaW4gYWRtaW4=",
    matchedQueryIntents:"personFind",
    matchedGeniusResultIntents:"personFind, catalogFind",
    responseTimeInMs:918,
    searchAnalyticsPayload: {searchTerm: 'ipone',correctedSearchTerm:'iPhone', ...}
}
```

## Properties

### `isLoading`

_Type_: `boolean`

_Default Value_: `false`

Used to indicate that the search results are being fetched, if set to true - the component will show a loading state.

---

### `searchResultMetadata`

_Type_: `Object`

_Default Value_: `{}`

The metadata for search results component can be passed in using this property. An example is shown above in the component API description.

---

### `geniusResults`

_Type_: `[Object]`

_Default Value_: `[]`

The data for genius results can be passed in using this property. Genius results are shown above the search results on the first results page. An example is shown above in the component API description.

---

### `searchResults`

_Type_: `[Object]`

_Default Value_: `[]`

The data for search results can be passed in using this property. An example is shown above in the component API description.

---

#### `searchContextConfigId`

_Type_: `string` (required field)

_Default Value_: `''`

sys_id of the search context configuration. Given `searchContextConfigId`, our search service can retrieve all the search and autocomplete configuration metadata. This sys_id is defined in `sys_search_context_config` table.

---

### `resultCountFontSize`

_Type_: `'sm' | 'md' | 'lg' | 'xl'`

_Default Value_: `'md'`

Specifies the font size applied to the result count text.

---

### `spellCheckFontSize`

_Type_: `'sm' | 'md' | 'lg' | 'xl'`

_Default Value_: `'sm'`

Specifies the font size applied to the spell checker text.

---

### `selectedSearchContext`

_Type_: `string`

_Default Value_: `''`

Specifies the search context for which the results are being shown.

> Note: This property is only applicable in case of global search with multiple contexts.

---

#### `isGlobal`

_Type_: `boolean`

_Default Value_: `false`

Property to indicate if component is being rendered in platform global search. The component will have different styling in case of global search.

---

#### `facetsButtonShown`

_Type_: `boolean`

_Default Value_: `false`

Property which tracks the display of show filter present in `sn-search-result-wrapper`. This property is only application in case of global search

---

#### `viewAllLink`

_Type_: `string`

_Default Value_: `''`

Property which tracks the display of All results view link. This property is only application in case of global search.This specifies the navigation to processor path name provided through `sn-search-result-wrapper`

---

#### `isPanelView`

_Type_: `boolean`

_Default Value_: `false`

Specifies if the component is being rendered in right panel (eg. in case of Now Assist Self Service)

---

#### `searchFromChat`

_Type_: `boolean`

_Default Value_: `false`

Indicates the search page is redirected by clicking on the "View All" link on the right panel of the NASS VA component.

---

#### `debugView`

_Type_: `string`

_Default Value_: ``

If not empty, a drop down to toggle between debug views will be shown. The dropdown will render with the specified option selected.

- results: regular view
- raw: shows a code editor with the raw query response and templates
- results-detail: shows result cards with additional debugging information

---

#### `enableLabelValueTranslation`

_Type_: `boolean`

_Default Value_: `false`

Specifies if component should attempt to translate label values from sys_ui_message table.

---

#### `sortFilters`

_Type_: `Array.<{sysId: string, label:string}>`

_Default Value_: `[]`

The sortFilters response from the search GraphQL databroker, it contains the data for sort by fields with `sysId` and `label`. Below is an example:

```
[
    {
		sysId: "947110427310101052c7d5fdbdf6a73e",
		label: "Most Recent"
	},
	{
		sysId: "fca0ed907320101052c7d5fdbdf6a799",
		label: "Last Updated"
	}
]
```

---

#### `selectedSortFilters`

_Type_: `Array.<String>`

_Default Value_: `['relevancy']`

Specifies the `ID` of the selected sort filter. If this property is not passed in, `Relevancy` sort filter is selected by default.

---


## Actions

### `SN_SEARCH_RESULTS_CONTAINER#PAGINATION_BUTTON_CLICKED`

Dispatched when the pagination buttons are clicked. The payload contains the previous/next pagination token based on what page the user navigates to. Example:

```jsx
{
	paginationToken: 'nextPageToken';
}
```

### `SN_SEARCH_RESULTS_CONTAINER#SEARCH_EXECUTED`

Dispatched when the incorrectly spelled term in the spellcheck message is clicked. Example payload:

```jsx
{
    searchTerm: 'iPhn',
}
```

### `SN_SEARCH_RESULTS_CONTAINER#DECLARATIVE_ACTION`

Dispatched when a regular search result or an action on a genius card is clicked. Example Payload:

```jsx
{
    action: {
        assignmentId: "d46f400473211010c342d5fdbdf6a7cf",
        name: "navigation",
        label: "Navigation",
        actionType: "dispatch_action",
        icon: "",
        buttonType: "primary",
        actionDispatch: "NAVIGATION",
        serverScript: "",
        actionPayload: {
            table: "sys_user",
            sysId: "62826bf03710200044e0bfc8bcbe5df1"
        }
    },
    model: {
        name: 'Mac Marksberry',
        home_phone: '8581234567',
        location: 'Bockenheimer Landstraße 123, Frankfurt',
        department: 'Customer Support',
        sysId: 'fd826bf03710200044e0bfc8bcbe5d30',
        sys_id: 'fd826bf03710200044e0bfc8bcbe5d30',
        table: 'sys_user'
    },
    analyticsPayload: {

    }
}
```

### `SN_SEARCH_RESULTS_CONTAINER#NAVIGATE_TO_FULL_PAGE`

Dispatched when the view all link is clicked in right panel view. Example payload:

```jsx
{
    searchTerm: 'iPhone',
}
```

#### `SN_SEARCH_RESULTS_CONTAINER#SORT_FILTER_SELECTED`

_Payload Type_:

```
{
    selectedFilter: string (JSON stringified array of sys_ids)
}
```

_Example_:

```
{
    selectedFilter: "[\"3D6eff175e1b436010d999404fdc4bcbd4\"]"
}
```

Dispatched whenever a user selects any of the sort filters. The payload contains the `ID` for the selected sort filter.

```