TwoSky.WebComponents.LanguageBanner 1.0.1

LanguageBanner

A language selection banner web component that detects when the user's preferred language differs from the current page language. It offers to persist the current language as the user's preference or dismiss the banner for the session.

This plugin is only compatible with the Web3 Vidyano client.

Installation

After installing the NuGet package, add the following import to your app.ts:

import "../language-banner/language-banner";

Then add the component to your app's HTML template (e.g., in the navigation bar):

<ts-language-banner display-mode="dropdown"></ts-language-banner>

Rebuild the frontend code after making these changes.

Display Modes

The component supports two display modes via the display-mode attribute:

Dropdown (default)

Shows a globe icon with the current language code. Clicking opens a dropdown menu with available languages.

<ts-language-banner display-mode="dropdown"></ts-language-banner>

Buttons

Shows all available languages as side-by-side buttons, with the active language highlighted.

<ts-language-banner display-mode="buttons"></ts-language-banner>

Language Mismatch Banner

When the user's preferred language (stored in a PreferredLanguage cookie, set by CronosCore) differs from the current page language, a banner appears with two options:

• "Use {language} everywhere" - Calls the CronosWeb.UpdateApplicationLanguage endpoint to persist the current language as the user's Person.ApplicationLanguage
• "Dismiss for now" - Hides the banner until the next page load

Events

The component fires the following custom events:

Translatable Messages

The plugin registers the following client-side messages (en, nl, fr):

• LanguageBanner_Message - The mismatch banner message
• LanguageBanner_UseEverywhere - The persist button label
• LanguageBanner_Dismiss - The dismiss button label
• LanguageBanner_LanguageName_en - Language name for English
• LanguageBanner_LanguageName_nl - Language name for Dutch
• LanguageBanner_LanguageName_fr - Language name for French

Styling

The component uses Shadow DOM. You can customize its appearance via CSS custom properties and ::part() selectors.

CSS Custom Properties

Override these on the host element or any ancestor:

Example:

ts-language-banner {
  --language-banner-primary-bg: var(--theme-color);
  --language-banner-primary-hover-bg: var(--theme-color-lighter);
  --language-banner-bg: var(--theme-color-faint);
}

CSS ::part() Selectors

For full styling control, target individual elements:

Example:

ts-language-banner::part(banner) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

ts-language-banner::part(btn-primary) {
  background-color: white;
  color: #764ba2;
}

Dependencies

• CronosCore (CronosCore#742) - Provides:
  1. PreferredLanguage cookie set on login from Person.ApplicationLanguage (opt-in via PreferredLanguageCookie.Enabled)
  2. CronosWeb.UpdateApplicationLanguage() — endpoint that forwards to CronosCentral via ClientInvoker and refreshes the cookie on success

Consuming App Setup

Enable the preferred language cookie in your authenticator service constructor:

public MyAuthenticatorService()
    : base(..., preferredLanguageCookie: PreferredLanguageCookie.Enabled)
{ }

No additional wiring is needed — CronosWeb.UpdateApplicationLanguage() handles the CronosCentral API call and cookie refresh automatically. Requires services.AddCronosCore() to be registered.