### File

`packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts`

### Description

This component is used to switch between the languages of the application. Shows the current language, when clicked, opens a language selector.

### Extends

`ECLBaseDirective`

### Implements

`OnInit` `AfterViewInit` `OnDestroy`

### Metadata

HostDirectives | `ECLClickOutsideDirective` Outputs : eclClickOutside
selector | `ecl-site-header-language`
imports | `A11yModule` `TranslateModule` `UpperCasePipe` `EUI_ECL_ICON` `EclSiteHeaderLanguagePopoverComponent`
styles | `:host { display: block; }`
templateUrl | `./ecl-site-header-language.component.html`

### Index

###### Properties
euColumnsCount euLanguages isFull isLanguagesDropdownVisible isPushLeft isPushRight isStack Readonly LANGUAGE_MAX_COLUMNS languageArrowPosition languageCode languageLinkElement languagePopover leftPosition Readonly MOBILE_BREAKPOINT nonEuColumnsCount nonEuLanguages rightPosition
###### Methods
getLanguageLabel Public hasLanguageCodes onClickOutside onEscapeKeydownHandler onLanguageClick onLanguageClosed onLanguageSelected getCssClasses
###### Inputs
class e2eAttr tabindex
###### Outputs
languageClick languageSelected
###### HostBindings
class
###### HostListeners
document:keydown.escape eclClickOutside
###### Accessors
cssClasses

### Inputs

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

languageClick
Type : `EventEmitter`
Thie event is emited, when language link, showing the current language is clicked.

languageSelected
Type : `EventEmitter`
Thie event is emited, when user selects a new language from the dropdown.

### HostBindings

class
Type : `string`

### HostListeners

document:keydown.escape
`document:keydown.escape()`
Close the dropdown, when pressing ESC key.

eclClickOutside
`eclClickOutside()`
Close the dropdown, when clicking outside of the component.

### Methods

getLanguageLabel
`getLanguageLabel()`
Returns : `string`

Public hasLanguageCodes
`hasLanguageCodes()`
Returns : `boolean`

onClickOutside
`onClickOutside()`
Decorators : `@HostListener('eclClickOutside')`
Close the dropdown, when clicking outside of the component. Returns : `void`

onEscapeKeydownHandler
`onEscapeKeydownHandler()`
Decorators : `@HostListener('document:keydown.escape')`
Close the dropdown, when pressing ESC key. Returns : `void`

onLanguageClick
`onLanguageClick(evt: Event)`
Toggle the language dropdown when clicking the link, showing the current language. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onLanguageClosed
`onLanguageClosed(evt: EclSiteHeaderLanguageCloseEvent)`
Parameters :
Name | Type | Optional
evt | `EclSiteHeaderLanguageCloseEvent` | No
Returns : `void`

onLanguageSelected
`onLanguageSelected(evt: EclSiteHeaderLanguageSelectedEvent)`
Parameters :
Name | Type | Optional
evt | `EclSiteHeaderLanguageSelectedEvent` | No
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

euColumnsCount
Type : `number`
Default value : `1`

euLanguages
Type : `Array<EuiLanguage>`
Default value : `[]`
Array of EU languages, that can be selected for the current site.

isFull
Type : `boolean`
This property is used for dropdown positioning on the screen.

isLanguagesDropdownVisible
Type : `unknown`
Default value : `false`

isPushLeft
Type : `boolean`
This property is used for dropdown positioning on the screen.

isPushRight
Type : `boolean`
This property is used for dropdown positioning on the screen.

isStack
Type : `boolean`
This property is used for dropdown positioning on the screen.

Readonly LANGUAGE_MAX_COLUMNS
Type : `number`
Default value : `8`

languageArrowPosition
Type : `string`
This property is used for dropdown positioning on the screen.

languageCode
Type : `string`
Default value : `'en'`

languageLinkElement
Type : `ElementRef<HTMLAnchorElement>`
Decorators : `@ViewChild('languageLink', {read: ElementRef})`
The link to open the popover dialog.

languagePopover
Type : `EclSiteHeaderLanguagePopoverComponent`
Decorators : `@ViewChild(EclSiteHeaderLanguagePopoverComponent)`
The language popover, that shows all available languages (configured in the config file of the current site).

leftPosition
Type : `number`

Readonly MOBILE_BREAKPOINT
Type : `number`
Default value : `768`

nonEuColumnsCount
Type : `number`
Default value : `1`

nonEuLanguages
Type : `Array<EuiLanguage>`
Default value : `[]`
Array of non-EU languages, that can be selected for the current site.

rightPosition
Type : `number`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""