@besaitech/ng-design-system 0.0.45 → 0.0.47

package/index.d.ts

@@ -2703,5 +2703,111 @@ declare class SdsSearchCommand {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSearchCommand, "sds-search-command", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showTrigger": { "alias": "showTrigger"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "triggerMinWidth": { "alias": "triggerMinWidth"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "selectHint": { "alias": "selectHint"; "required": false; "isSignal": true; }; "navigateHint": { "alias": "navigateHint"; "required": false; "isSignal": true; }; "closeHint": { "alias": "closeHint"; "required": false; "isSignal": true; }; }, { "select": "select"; "openChange": "openChange"; }, never, never, true, never>;
 }
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
-export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuItemTone, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSearchAppearance, SdsSearchItem, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsUserMenuAlign, SdsUserMenuAppearance };
+type SdsLanguageSwitcherAppearance = 'surface' | 'on-brand';
+type SdsLanguageSwitcherAlign = 'start' | 'end';
+type SdsLanguageSwitcherDirection = 'down' | 'up';
+/**
+ * One selectable language. Pass either this shape or a bare code string in [languages].
+ */
+interface SdsLanguageOption {
+    /** Language code, e.g. 'fr', 'de', 'en'. Shown uppercased in the trigger. */
+    code: string;
+    /** Human-readable name shown in the list, e.g. 'Français'. Defaults to `code.toUpperCase()`. */
+    label?: string;
+}
+/**
+ * The language picker for the top bar: a compact pill (globe icon + the active code) that opens a panel
+ * listing exactly the languages the app supports, each row marked selected for the current one.
+ *
+ * The library owns no i18n engine — every app uses a different one (ngx-translate, Transloco, per-locale
+ * URLs). So this is a pure, controlled control: the app passes the supported [languages] and the [current]
+ * code, and reacts to the choice. `current` is a two-way `model`, so bind `[(current)]="lang"` for optimistic
+ * echo, or just listen to `(currentChange)` and call your own `translate.use($event)`. Rows show each
+ * language's human label (pass it in the option, or let it default to the uppercased code).
+ *
+ * It is a sibling of sds-user-menu / sds-theme-toggle / sds-search-command and shares their chrome: the same
+ * two appearances (`surface` default for a light/glass bar, `on-brand` for the dark brand bar), the same
+ * disclosure mechanics (closes on outside click, on Escape, and on selection, restoring focus to the trigger),
+ * and the same panel styling and open animation — so the three top-bar controls read as one set.
+ *
+ * The panel is appended to `document.body` while open and positioned against the trigger (like sds-select),
+ * so a clipping ancestor — a bar with `overflow:hidden`, or a `glass` bar whose `backdrop-filter` is a
+ * containing block — can never cut it off or paint over it. It repositions on scroll/resize and is removed
+ * on close. Accessibility follows the APG select-only combobox: focus stays on the trigger, and Arrow/Home/
+ * End/Enter/Escape drive a highlighted option surfaced via `aria-activedescendant` (works even though the
+ * listbox lives in `<body>`).
+ *
+ * @example
+ * <sds-language-switcher
+ *   [languages]="[{ code: 'fr', label: 'Français' }, { code: 'de', label: 'Deutsch' }, { code: 'en', label: 'English' }]"
+ *   [current]="lang()"
+ *   menuLabel="Changer de langue"
+ *   (currentChange)="translate.use($event)"
+ * />
+ *
+ * @example
+ * <!-- Bare codes are fine; rows fall back to the uppercased code. -->
+ * <sds-language-switcher [languages]="['fr', 'de', 'en']" [(current)]="lang" />
+ */
+declare class SdsLanguageSwitcher implements OnDestroy {
+    private readonly el;
+    private readonly injector;
+    private readonly trigger;
+    protected readonly panelId: string;
+    /** The supported languages — either `{ code, label }` options or bare code strings. */
+    readonly languages: _angular_core.InputSignal<readonly (string | SdsLanguageOption)[]>;
+    /** The active language code. Two-way: `[(current)]` echoes the choice, or listen to `(currentChange)`. */
+    readonly current: _angular_core.ModelSignal<string>;
+    /** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
+    readonly appearance: _angular_core.InputSignal<SdsLanguageSwitcherAppearance>;
+    /** Which edge the panel aligns to. `end` (default) hangs it from the right of the trigger. */
+    readonly align: _angular_core.InputSignal<SdsLanguageSwitcherAlign>;
+    /** `up` prefers opening the panel above the trigger — for a switcher near the bottom of the page. */
+    readonly direction: _angular_core.InputSignal<SdsLanguageSwitcherDirection>;
+    /** Accessible name for the trigger and panel. */
+    readonly menuLabel: _angular_core.InputSignal<string>;
+    /** Optional visible header above the list (e.g. "Langue"). Omitted when empty. */
+    readonly heading: _angular_core.InputSignal<string>;
+    readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly highlightedIndex: _angular_core.WritableSignal<number>;
+    private panelEl;
+    /** Normalise the mixed `languages` input to `{ code, label }`, defaulting the label to the code. */
+    protected readonly options: _angular_core.Signal<SdsLanguageOption[]>;
+    /**
+     * The code treated as active everywhere — trigger label AND the selected row. Falls back to the first
+     * option when `current` is unset, so the pill and the checked row can never disagree.
+     */
+    protected readonly effectiveCode: _angular_core.Signal<string>;
+    /** Uppercased code shown in the trigger. */
+    protected readonly currentCode: _angular_core.Signal<string>;
+    protected readonly activeOptionId: _angular_core.Signal<string | null>;
+    protected optionId(i: number): string;
+    protected toggle(): void;
+    protected openPanel(): void;
+    protected close(returnFocus?: boolean): void;
+    protected choose(code: string): void;
+    protected onDocumentClick(event: MouseEvent): void;
+    protected onEscape(): void;
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    private initHighlight;
+    private move;
+    private highlight;
+    private chooseHighlighted;
+    private scrollHighlightedIntoView;
+    private readonly reflow;
+    private listening;
+    private addReflowListeners;
+    private removeReflowListeners;
+    private positionPanel;
+    ngOnDestroy(): void;
+    private readonly onBrand;
+    protected readonly triggerClass: _angular_core.Signal<"text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40" | "bg-muted text-ink-soft hover:bg-brand-50 hover:text-brand-600 focus-visible:ring-brand-500/40">;
+    protected readonly chevronClass: _angular_core.Signal<"text-ink-faint" | "text-white/70">;
+    protected rowClass(index: number, selected: boolean): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsLanguageSwitcher, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLanguageSwitcher, "sds-language-switcher", never, { "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; "openChange": "openChange"; }, never, never, true, never>;
+}
+
+export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuItemTone, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSearchAppearance, SdsSearchItem, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsUserMenuAlign, SdsUserMenuAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/themes/base.css

@@ -141,3 +141,35 @@ html.dark {
     --sds-sidebar-w-collapsed: 76px;
   }
 }
+
+/* Thin, rounded scrollbars, painted from the theme tokens so they flip with light/dark like everything
+   else (instead of the raw UA bar that `color-scheme` alone leaves). Standard properties first for
+   Firefox, then the WebKit/Chromium pseudo-elements. Kept in @layer base so an app can still override a
+   specific scroll container with an ordinary utility class if it ever needs to. */
+@layer base {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-ink-faint) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-ink-faint);
+    border-radius: 9999px;
+    /* A transparent border + padding-box clip insets the thumb into a thin rounded pill with breathing
+       room, rather than a bar that fills the whole gutter. */
+    border: 3px solid transparent;
+    background-clip: padding-box;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-ink-soft);
+  }
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}