# nylas-event-location

Source: https://developer.nylas.com/docs/reference/ui/event-location/

The `nylas-event-location` component is a form input for the location of an event.

## Overview

- **Tag**: `<nylas-event-location>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-event-location></nylas-event-location>
```

### React

```jsx
import { NylasEventLocation } from '@nylas/react';

export default function Example() {
  return <NylasEventLocation />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `conferenceProviders` | `conference-providers` | undefined \| { [x: string]: string; } | - | No | The conference providers where the key is the provider name ('zoom') and the value is the grant id. We currently support same provider ('google', 'microsoft') for all participants and 'zoom' for cross-provider conferencing. |
| `currentUser` | `current-user` | undefined \| { id: string; email: string; name?: string \| undefined; provider?: string \| undefined; } | - | No | The current user |
| `eventConferencing` | `event-conferencing` | Conference \| undefined | - | No | The event conferencing stored in the configuration |
| `eventLocation` | `event-location` | string \| undefined | - | No | The event location stored in the configuration |
| `name` | `name` | string | `'location'` | No | The name of the event location input. |
| `selectedConfiguration` | `selected-configuration` | Configuration \| undefined | - | No |  |
| `selectedLanguage` | `selected-language` | LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \| LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh \| undefined | - | No | The selected language. |
| `themeConfig` | `theme-config` | undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined; '--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined; '--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined; '--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined; '--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined; '--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined; '--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined; '--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined; '--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined; '--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined; '--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined; '--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined; '--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined; '--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined; '--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined; '--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined; '--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \| undefined; '--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \| undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string \| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?: string \| undefined; '--nylas-color-yellow-500'?: string \| undefined; '--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string \| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?: string \| undefined; '--nylas-color-purple-300'?: string \| undefined; '--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \| undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \| undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \| undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \| undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \| undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \| undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \| undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \| undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \| undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \| undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \| undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \| undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?: string \| undefined; } | - | No | The theme configuration. |
| `userProvider` | `user-provider` | string \| undefined | - | No | The users provider |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `valueChanged` | { value: string; name: string; } | This event is fired when the value of the event location changes. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nel` | The event location container |
| `nel__dropdown` | The dropdown container |
| `nel__dropdown-button` | The dropdown button |
| `nel__dropdown-content` | The dropdown content |
| `nel__location` | The event location input |

## Dependencies

This component uses the following child components:

- [`<location-off-icon>`](/docs/reference/ui/location-off-icon/)
- [`<location-icon>`](/docs/reference/ui/location-icon/)
- [`<google-meet-icon>`](/docs/reference/ui/google-meet-icon/)
- [`<microsoft-teams-icon>`](/docs/reference/ui/microsoft-teams-icon/)
- [`<zoom-icon>`](/docs/reference/ui/zoom-icon/)
- [`<tooltip-component>`](/docs/reference/ui/tooltip-component/)
- [`<info-icon>`](/docs/reference/ui/info-icon/)
- [`<select-dropdown>`](/docs/reference/ui/select-dropdown/)

## Used by

This component is used inside:

- [`<nylas-editor-tabs>`](/docs/reference/ui/editor-tabs/)
- [`<nylas-event-calendar>`](/docs/reference/ui/event-calendar/)
- [`<nylas-scheduler-editor>`](/docs/reference/ui/scheduler-editor/)