tycho-components 0.29.2 → 0.29.4

package/dist/configs/localization/CommentsTexts.js

@@ -31,24 +31,24 @@ export const CommentsTexts = {
         'label.edited': 'edited',
     },
     'pt-BR': {
-        'label.title.comments': 'Comentários',
-        'placeholder.comment.text': 'Seu comentário',
+        'label.title.comments': 'Observações',
+        'placeholder.comment.text': 'Sua observação',
         'placeholder.comment.title': 'Título (opcional)',
         'placeholder.comment.person': 'Selecione a pessoa',
-        'label.button.add': 'Adicionar comentário',
-        'label.button.update': 'Atualizar comentário',
+        'label.button.add': 'Adicionar observação',
+        'label.button.update': 'Atualizar observação',
         'label.requested.to': 'Enviado para:',
         'label.posted.on': 'Postado em:',
-        'placeholder.comments.empty': 'Nenhum comentário disponível.',
-        'tooltip.edit': 'Editar commentário',
-        'tooltip.delete': 'Remover commentário',
+        'placeholder.comments.empty': 'Nenhuma observação disponível.',
+        'tooltip.edit': 'Editar observação',
+        'tooltip.delete': 'Remover observação',
         'tooltip.read': 'Marcar como lido',
         'tooltip.reply': 'Responder',
         'modal.title.footnote': 'Editar nota de rodapé',
         'placeholder.footnote.text': 'Entre o texto da nota de rodapé',
         'modal.title.footnote.remove': 'Confirmação de exclusão de nota de rodapé',
         'modal.text.footnote.remove': 'Tem certeza de que deseja remover esta nota de rodapé? Esta ação é irreversível.',
-        'button.add': 'Adicionar comentário',
+        'button.add': 'Adicionar observação',
         'input.value': 'Comentário',
         'input.title': 'Título',
         'input.user': 'Enviar para usuários',
@@ -58,7 +58,7 @@ export const CommentsTexts = {
         'notification.unread': 'Não lidas',
         'notification.all': 'Lidas',
         'notification.empty': 'Não há notificações',
-        'notification.text': '{{user}} adicionou um novo comentário.',
+        'notification.text': '{{user}} adicionou uma nova observação.',
         'label.edited': 'editado',
     },
     it: {

package/dist/configs/localization/HeaderTexts.d.ts

@@ -17,6 +17,7 @@ export declare const HeaderTexts: {
         'profile.label.help': string;
         'profile.label.logout': string;
         'profile.label.home': string;
+        'profile.label.language': string;
         'button.sign.in': string;
         'button.close': string;
     };
@@ -38,6 +39,7 @@ export declare const HeaderTexts: {
         'profile.label.help': string;
         'profile.label.logout': string;
         'profile.label.home': string;
+        'profile.label.language': string;
         'button.sign.in': string;
         'button.close': string;
     };
@@ -59,6 +61,7 @@ export declare const HeaderTexts: {
         'profile.label.help': string;
         'profile.label.logout': string;
         'profile.label.home': string;
+        'profile.label.language': string;
         'button.sign.in': string;
         'button.close': string;
     };

package/dist/configs/localization/HeaderTexts.js

@@ -17,6 +17,7 @@ export const HeaderTexts = {
         'profile.label.help': 'Help Center',
         'profile.label.logout': 'Logout',
         'profile.label.home': 'My profile',
+        'profile.label.language': 'Language',
         'button.sign.in': 'Sign In',
         'button.close': 'Close',
     },
@@ -38,6 +39,7 @@ export const HeaderTexts = {
         'profile.label.help': 'Central de Ajuda',
         'profile.label.logout': 'Sair da conta',
         'profile.label.home': 'Meu perfil',
+        'profile.label.language': 'Idioma',
         'button.sign.in': 'Entrar',
         'button.close': 'Fechar',
     },
@@ -59,6 +61,7 @@ export const HeaderTexts = {
         'profile.label.help': 'Centro assistenza',
         'profile.label.logout': 'Disconnetti',
         'profile.label.home': 'Il mio profilo',
+        'profile.label.language': 'Lingua',
         'button.sign.in': 'Accedi',
         'button.close': 'Chiudi',
     },

package/dist/configs/useMessageUtils.d.ts

@@ -9,6 +9,7 @@ type ErrorDispatcher = {
     t?: TFunction;
     key?: string;
 };
+export declare const getErrorMessageValue: ({ err, t, key }: ErrorDispatcher) => string;
 export declare const useMessageUtils: () => {
     dispatchLoading: (val: boolean, text?: string) => void;
     dispatchError: ({ err, t, key }: ErrorDispatcher) => void;

package/dist/configs/useMessageUtils.js

@@ -1,6 +1,37 @@
 import { useContext } from "react";
 import { message, silentLoading, toastLoading } from "../configs/store/actions";
 import CommonContext from "./CommonContext";
+const translateErrorValue = (t, namespace, rawValue) => {
+    const entry = `${namespace}:${rawValue}`;
+    const translatedValue = t(entry);
+    return translatedValue === entry ? rawValue : translatedValue;
+};
+export const getErrorMessageValue = ({ err, t, key }) => {
+    if (!t) {
+        return err;
+    }
+    if (!err.response) {
+        return translateErrorValue(t, key ?? "message", String(err));
+    }
+    if (err.response.status === 403) {
+        return t("error.access.authorization");
+    }
+    let errorKey = "";
+    if (err.response.data?.message) {
+        errorKey = err.response.data.message;
+    }
+    else if (err.response.data?.description) {
+        errorKey = err.response.data.description;
+    }
+    else if (err.response.data?.errors?.length > 0) {
+        errorKey = err.response.data.errors[0].description;
+    }
+    else {
+        key = "common";
+        errorKey = "internal.server.error";
+    }
+    return translateErrorValue(t, key ?? "message", errorKey);
+};
 export const useMessageUtils = () => {
     const { state, dispatch } = useContext(CommonContext);
     const isSilentLoading = () => {
@@ -18,34 +49,7 @@ export const useMessageUtils = () => {
             : toastLoading(val));
     };
     const dispatchError = ({ err, t, key }) => {
-        if (!t) {
-            dispatch(message({ value: err, type: "error" }));
-            return;
-        }
-        if (!err.response) {
-            const value = t(`${key ?? "message"}:${err}`);
-            dispatch(message({ value, type: "error" }));
-            return;
-        }
-        if (err.response.status === 403) {
-            dispatch(message({ value: t("error.access.authorization"), type: "error" }));
-            return;
-        }
-        let errorKey = "";
-        if (err.response.data?.message) {
-            errorKey = err.response.data.message;
-        }
-        else if (err.response.data?.description) {
-            errorKey = err.response.data.description;
-        }
-        else if (err.response.data?.errors?.length > 0) {
-            errorKey = err.response.data.errors[0].description;
-        }
-        else {
-            key = "common";
-            errorKey = "internal.server.error";
-        }
-        const value = t(`${key ?? "message"}:${errorKey}`);
+        const value = getErrorMessageValue({ err, t, key });
         dispatch(message({ value, type: "error" }));
     };
     const dispatchMessage = ({ key, ns, t }) => {

package/dist/shell/Header/Header.d.ts

@@ -18,6 +18,10 @@ type Props = {
     navigateNotLogged?: () => void;
     helpActions?: HelpAction[];
     useOpenCorpora?: boolean;
+    hideCorpora?: boolean;
+    hideNotifications?: boolean;
+    hideLanguageSelector?: boolean;
+    hideHelpButton?: boolean;
 };
-export default function Header({ tool, redirect, autoload, hideKeyboard, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged, helpActions, useOpenCorpora, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Header({ tool, redirect, autoload, hideKeyboard, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged, helpActions, useOpenCorpora, hideCorpora, hideNotifications, hideLanguageSelector, hideHelpButton, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shell/Header/Header.js

@@ -8,10 +8,10 @@ import HeaderUser from './HeaderUser';
 import './styles.scss';
 export default function Header({ tool, redirect, autoload, hideKeyboard, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged = () => {
     location.href = '/auth';
-}, helpActions, useOpenCorpora = true, }) {
+}, helpActions, useOpenCorpora = true, hideCorpora = false, hideNotifications = false, hideLanguageSelector = false, hideHelpButton = false, }) {
     const { t } = useTranslation('header');
     const homeTextsClass = cx('app-title', {
         pointer: navigateHome !== undefined,
     });
-    return (_jsxs("div", { className: "ds-header", children: [_jsxs("div", { className: "header-left", children: [_jsx(HeaderApps, { navigateLogout: navigateLogout, navigateNotLogged: navigateNotLogged, hideKeyboard: hideKeyboard, notifications: notifications, keyboardLayout: keyboardLayout, helpActions: helpActions }), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.platform') }), _jsx("span", { className: "subtitle", children: tool })] }), _jsx("div", { className: "header-corpus", children: customHeader ? (customHeader) : (_jsx(HeaderCorpora, { redirect: redirect, autoload: autoload, navigateCorpora: navigateCorpora, useOpenCorpora: useOpenCorpora })) })] }), _jsxs("div", { className: "header-right", children: [_jsx(HeaderButtons, { hideKeyboard: hideKeyboard, notifications: notifications, keyboardLayout: keyboardLayout, helpActions: helpActions }), _jsx(HeaderUser, { navigateLogout: navigateLogout, navigateNotLogged: navigateNotLogged })] })] }));
+    return (_jsxs("div", { className: "ds-header", children: [_jsxs("div", { className: "header-left", children: [_jsx(HeaderApps, { navigateLogout: navigateLogout, navigateNotLogged: navigateNotLogged, hideKeyboard: hideKeyboard, notifications: notifications, keyboardLayout: keyboardLayout, helpActions: helpActions }), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.platform') }), _jsx("span", { className: "subtitle", children: tool })] }), _jsxs("div", { className: "header-corpus", children: [!hideCorpora && (_jsx(HeaderCorpora, { redirect: redirect, autoload: autoload, navigateCorpora: navigateCorpora, useOpenCorpora: useOpenCorpora })), customHeader && customHeader] })] }), _jsxs("div", { className: "header-right", children: [_jsx(HeaderButtons, { hideKeyboard: hideKeyboard, notifications: notifications, keyboardLayout: keyboardLayout, helpActions: helpActions, hideNotifications: hideNotifications, hideLanguageSelector: hideLanguageSelector, hideHelpButton: hideHelpButton }), _jsx(HeaderUser, { navigateLogout: navigateLogout, navigateNotLogged: navigateNotLogged })] })] }));
 }

package/dist/shell/Header/HeaderButtons/HeaderButtons.d.ts

@@ -11,6 +11,9 @@ type Props = {
     navigateCorpora?: (uid: string) => void;
     helpActions?: HelpAction[];
     mobile?: boolean;
+    hideNotifications?: boolean;
+    hideLanguageSelector?: boolean;
+    hideHelpButton?: boolean;
 };
-export default function HeaderButtons({ hideKeyboard, notifications, keyboardLayout, helpActions, mobile, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function HeaderButtons({ hideKeyboard, notifications, keyboardLayout, helpActions, mobile, hideNotifications, hideLanguageSelector, hideHelpButton, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shell/Header/HeaderButtons/HeaderButtons.js

@@ -9,10 +9,10 @@ import { useLoggedUtils } from '../../../configs/useLoggedUtils';
 import HelpButton from '../HelpButton';
 import './styles.scss';
 const HeaderNotifications = lazy(() => import('../../../features/Comments/HeaderNotifications'));
-export default function HeaderButtons({ hideKeyboard, notifications, keyboardLayout, helpActions, mobile, }) {
+export default function HeaderButtons({ hideKeyboard, notifications, keyboardLayout, helpActions, mobile, hideNotifications = false, hideLanguageSelector = false, hideHelpButton = false, }) {
     const { t } = useTranslation('header');
     const { getCorpus } = useCorpusUtils();
     const { isLogged } = useLoggedUtils();
     const [openKeyboard, setOpenKeyboard] = useState(false);
-    return (_jsxs("div", { className: "header-buttons", children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "large", title: t('tooltip.keyboard'), mode: mobile ? 'outlined' : 'filled' })), _jsx(HelpButton, { helpActions: helpActions, mobile: mobile }), notifications && isLogged() && (_jsx(Suspense, { fallback: null, children: _jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode, mobile: mobile }) })), _jsx(LanguageSelector, { openToTop: mobile ? true : false, mobile: mobile }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
+    return (_jsxs("div", { className: "header-buttons", children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "large", title: t('tooltip.keyboard'), mode: mobile ? 'outlined' : 'filled' })), !hideHelpButton && (_jsx(HelpButton, { helpActions: helpActions, mobile: mobile })), !hideNotifications && notifications && isLogged() && (_jsx(Suspense, { fallback: null, children: _jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode, mobile: mobile }) })), !hideLanguageSelector && (_jsx(LanguageSelector, { openToTop: mobile ? true : false, mobile: mobile })), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
 }

package/dist/shell/Header/HeaderUser/HeaderUser.d.ts

@@ -1,7 +1,9 @@
 import './style.scss';
+import { HelpAction } from '../HelpButton/HelpButton';
 type Props = {
     navigateLogout?: () => void;
     navigateNotLogged: () => void;
+    helpActions?: HelpAction[];
 };
-export default function HeaderUser({ navigateLogout, navigateNotLogged, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function HeaderUser({ navigateLogout, navigateNotLogged, helpActions, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shell/Header/HeaderUser/HeaderUser.js

@@ -3,17 +3,20 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Avatar, Button, Icon } from 'tycho-storybook';
 import { useLoggedUtils } from '../../../configs/useLoggedUtils';
+import LanguageSelector from '../../LanguageSelector';
 import './style.scss';
-export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
+import HelpModal from '../HelpButton/HelpModal';
+export default function HeaderUser({ navigateLogout, navigateNotLogged, helpActions, }) {
     const { t } = useTranslation('header');
     const { isLogged, getLogged } = useLoggedUtils();
     const [open, setOpen] = useState(false);
+    const [openHelp, setOpenHelp] = useState(false);
     const handleProfile = () => {
         setOpen(false);
         window.open(import.meta.env.VITE_APP_RESERVED_URL, '_blank');
     };
-    return (_jsxs("div", { className: "profile-container", "data-tour": "header-user", children: [isLogged() ? (_jsx("div", { onClick: () => setOpen(!open), children: _jsx(Avatar, { size: "small", src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub }) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
+    return (_jsxs("div", { className: "profile-container", "data-tour": "header-user", children: [isLogged() ? (_jsx("div", { onClick: () => setOpen(!open), children: _jsx(Avatar, { size: "small", src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub }) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsx(LanguageSelector, { renderMode: "profile-menu", itemLabel: t('profile.label.language') }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => setOpenHelp(true), children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
                             setOpen(false);
                             navigateLogout && navigateLogout();
-                        }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));
+                        }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] })), openHelp && (_jsx(HelpModal, { onClose: () => setOpenHelp(false), helpActions: helpActions }))] }));
 }

package/dist/shell/Header/styles.scss

@@ -37,6 +37,12 @@
     padding-right: var(--spacing-150);
     gap: 8px;
   }
+
+  .header-corpus {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
 }
 
 @media (max-width: 768px) {

package/dist/shell/LanguageSelector/LanguageSelector.d.ts

@@ -13,10 +13,12 @@ export type Props = {
     /** When true, the option list opens above the trigger instead of below. */
     openToTop?: boolean;
     mobile?: boolean;
+    renderMode?: 'dropdown' | 'profile-menu';
+    itemLabel?: string;
 };
 export type AvailableLanguage = {
     value: string;
     name: string;
 };
 export declare const AvailableLanguages: AvailableLanguage[];
-export default function LanguageSelector({ className, color, size, showFullLanguageLabel, openToTop, mobile, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default function LanguageSelector({ className, color, size, showFullLanguageLabel, openToTop, mobile, renderMode, itemLabel, }: Props): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/LanguageSelector/LanguageSelector.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cx from 'classnames';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from 'tycho-storybook';
 import './styles.scss';
@@ -25,28 +25,30 @@ export const AvailableLanguages = [
         name: 'Italiano',
     },
 ];
-export default function LanguageSelector({ className, color = 'primary', size = 'medium', showFullLanguageLabel = false, openToTop = false, mobile = false, }) {
+const getSelectedLanguage = (languageCode) => AvailableLanguages.find((item) => item.value === languageCode) ||
+    AvailableLanguages[0];
+export default function LanguageSelector({ className, color = 'primary', size = 'medium', showFullLanguageLabel = false, openToTop = false, mobile = false, renderMode = 'dropdown', itemLabel, }) {
+    const isProfileMenu = renderMode === 'profile-menu';
     const getClassNames = cx('language-container', className, openToTop && 'language-container--open-top');
-    const getClassNamesDropdown = cx('ds-dropdown-button', (color = mobile ? 'tertiary' : color), size);
+    const getClassNamesDropdown = cx('ds-dropdown-button', mobile ? 'tertiary' : color, size);
     const { i18n } = useTranslation();
     const [open, setOpen] = useState(false);
-    const [language, setLanguage] = useState();
+    const language = getSelectedLanguage(i18n.resolvedLanguage || i18n.language);
     const changeLanguageHandler = (lang) => {
-        setLanguage(lang);
         setOpen(false);
         i18n.changeLanguage(lang.value);
-        document.body.click();
-    };
-    useEffect(() => {
-        if (i18n.language &&
-            AvailableLanguages.filter((t) => t.value === i18n.language).length > 0) {
-            setLanguage(AvailableLanguages.filter((t) => t.value === i18n.language)[0]);
-        }
-        else {
-            setLanguage(AvailableLanguages[0]);
+        if (!isProfileMenu) {
+            document.body.click();
         }
-    }, []);
+    };
     if (!language)
         return null;
-    return (_jsx("div", { className: getClassNames, "data-tour": "language-selector", children: _jsxs("div", { className: "ds-dropdown-container", children: [_jsxs("div", { className: getClassNamesDropdown, onClick: () => setOpen(!open), children: [_jsx("span", { className: "label", children: showFullLanguageLabel ? language.name : language.value }), _jsx(Icon, { name: "arrow_drop_down", className: "icon-arrow" })] }), open && (_jsx("div", { className: "ds-dropdown-list", children: AvailableLanguages.map((item, idx) => (_jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => changeLanguageHandler(item), children: [_jsx("span", { className: "label", children: item.name }), _jsx("span", { className: "sublabel", children: item.value }), item.value === language.value && (_jsx(Icon, { name: "check", size: "x-small", className: "icon-check" }))] }, idx.valueOf()))) }))] }) }));
+    if (isProfileMenu) {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cx('ds-dropdown-itemlist', 'ds-dropdown-itemlist--language-toggle', open && 'ds-dropdown-itemlist--language-toggle-open'), onClick: () => setOpen(!open), children: [_jsx("span", { className: "label", children: itemLabel || language.name }), _jsx("span", { className: "sublabel", children: showFullLanguageLabel ? language.name : language.value }), _jsx(Icon, { name: "arrow_drop_down", className: "icon-arrow" })] }), open &&
+                    AvailableLanguages.map((item) => (_jsxs("div", { className: cx('ds-dropdown-itemlist', 'ds-dropdown-itemlist--language-option'), onClick: (event) => {
+                            event.stopPropagation();
+                            changeLanguageHandler(item);
+                        }, children: [_jsx("span", { className: "label", children: item.name }), _jsx("span", { className: "sublabel", children: item.value }), item.value === language.value && (_jsx(Icon, { name: "check", size: "x-small", className: "icon-check" }))] }, item.value)))] }));
+    }
+    return (_jsx("div", { className: getClassNames, "data-tour": "language-selector", children: _jsxs("div", { className: "ds-dropdown-container", children: [_jsxs("div", { className: getClassNamesDropdown, onClick: () => setOpen(!open), children: [_jsx("span", { className: "label", children: showFullLanguageLabel ? language.name : language.value }), _jsx(Icon, { name: "arrow_drop_down", className: "icon-arrow" })] }), open && (_jsx("div", { className: "ds-dropdown-list", children: AvailableLanguages.map((item) => (_jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => changeLanguageHandler(item), children: [_jsx("span", { className: "label", children: item.name }), _jsx("span", { className: "sublabel", children: item.value }), item.value === language.value && (_jsx(Icon, { name: "check", size: "x-small", className: "icon-check" }))] }, item.value))) }))] }) }));
 }

package/dist/shell/LanguageSelector/styles.scss

@@ -22,6 +22,40 @@
           margin-left: var(--spacing-100);
         }
       }
+
+      .ds-dropdown-itemlist--language-toggle {
+        display: flex;
+        align-items: center;
+
+        .sublabel {
+          margin-left: auto;
+        }
+
+        .icon-arrow {
+          margin-left: var(--spacing-100);
+          transition: transform 0.2s ease;
+        }
+
+        &.ds-dropdown-itemlist--language-toggle-open {
+          .icon-arrow {
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      .ds-dropdown-itemlist--language-option {
+        display: flex;
+        align-items: center;
+        padding-left: calc(var(--spacing-200) + var(--spacing-100));
+
+        .sublabel {
+          margin-left: var(--spacing-100);
+        }
+
+        .icon-check {
+          margin-left: auto;
+        }
+      }
     }
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.29.2",
+  "version": "0.29.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {