wiki-language-selector

The wiki-language-selector component allows users to select a language from a list of languages.

Attributes

• data-languages (optional): An object containing language codes and their corresponding names. The format should match the API result of wikipedia languageinfo API. If not provided, the component will fetch the list of languages from the wikipedia API.
• data-languages (optional): The set of language codes valid for the context. If not provided, the component will use all language codes from data-languages.

Events

• select: Emitted when a language is selected. The event detail contains the following keys and values:
  • value: The language code of the selected language.
  • name: The name of the selected language.
  • autonym: The autonym of the selected language.

Examples

                    <wiki-language-selector></wiki-language-selector>
                

Customization

All components under wiki-elements supports Declarative shadow DOM. You can customize the component by adding a template element with shadowrootmode="open" attribute. The template should contain the shadow DOM structure of the component.

To illustrate, the following example shows a customized version of the wiki-language-selector component with a custom header and an button in popover.

                    
                        <wiki-language-selector>
                            <template shadowrootmode="open">
                                <section class="container">
                                     <!-- Add a header, allow more customization by marking it as a slot -->
                                    <slot name="wiki-languageselector-header">
                                        <p>Choose a language - Default header</p>
                                    </slot>
                                    <div class="wrapper" part="wrapper">
                                        <input id="wikilanguageselector-search" type="search" part="input" autocomplete="off" />
                                    </form>
                                </section>
                                <div class="suggestions-popover" popover part="popover">
                                    <p class="suggestions-header">Suggestions</p>
                                    <ul part="suggestions" class="suggestions"></ul>
                                    <!-- Add an actions section at the end of menu -->
                                    <section class="actions">
                                        <button class="example-btn" onclick="clickHander()">Example</button>
                                    </section>
                                </div>
                                <!-- Customize the styles -->
                                <style>
                                    .container {
                                        display: flex;
                                        flex-direction: column;
                                        padding: 1em;
                                        border-bottom: 1px solid CanvasText;
                                        width: 30ch;
                                    }

                                    .suggestions-header {
                                        padding: 0.5em;
                                        font-weight: bold;
                                    }
                                    .actions {
                                        border-top: 1px solid CanvasText;
                                        display: flex;
                                        justify-content: flex-end;
                                        padding: 0.5em;
                                    }
                                </style>
                                <script>
                                    function clickHander() {
                                        alert('Example button clicked');
                                    };
                                </script>
                            </template>
                            <!-- Customize the slot -->
                            <p slot="wiki-langaugeselector-header">Choose a language</p>
                        </wiki-language-selector>
                    
                

And it will render as below:

Additionally, the WikiLanguageSelector class can be extended and methods can be overridden to customize the behavior.