@besaitech/ng-design-system 0.0.39 → 0.0.41

package/index.d.ts

@@ -227,6 +227,65 @@ declare class SdsInput implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingAction": { "alias": "trailingAction"; "required": false; "isSignal": true; }; "trailingActionLabel": { "alias": "trailingActionLabel"; "required": false; "isSignal": true; }; "trailingActionPressed": { "alias": "trailingActionPressed"; "required": false; "isSignal": true; }; }, { "trailingActionClick": "trailingActionClick"; }, never, never, true, never>;
 }
 
+/** A translatable string held per language code — e.g. `{ fr: 'Titre', nl: 'Titel' }`. */
+type SdsLocalizedValue = Record<string, string>;
+type SdsLocalizedInputSize = 'sm' | 'md' | 'lg';
+/**
+ * One language-aware text field for editing a translated value (a {@link SdsLocalizedValue} — a title,
+ * label or description in several languages). Only one language is edited at a time; a compact switcher
+ * sitting **inside the field** flips which translation you are editing, and a dot marks the languages that
+ * already have content, so a partially-translated value is obvious at a glance.
+ *
+ * The active language defaults to {@link currentLanguage} when it is one of {@link languages}, otherwise the
+ * first accepted language — so the field "opens on the language you are working in". Empty translations are
+ * pruned from the emitted value, keeping the stored map clean.
+ *
+ * Implements ControlValueAccessor over the map — use with reactive forms or `[(ngModel)]`:
+ * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
+ */
+declare class SdsLocalizedInput implements ControlValueAccessor {
+    readonly inputId: string;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** The accepted language codes, in display order (e.g. `['fr','nl','en']`). */
+    readonly languages: _angular_core.InputSignal<string[]>;
+    /** Language to pre-select; used when it is one of {@link languages}, else the first accepted language. */
+    readonly currentLanguage: _angular_core.InputSignal<string | null>;
+    readonly multiline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly rows: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly size: _angular_core.InputSignal<SdsLocalizedInputSize>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Accessible name for the in-field language switcher, and the "no translation yet" title suffix on each
+     * language button. French defaults so existing consumers are unchanged; translate them in a multi-language
+     * app (the buttons are letter-only, so the title carries their meaning).
+     */
+    readonly languageSwitcherLabel: _angular_core.InputSignal<string>;
+    readonly untranslatedLabel: _angular_core.InputSignal<string>;
+    private readonly valueMap;
+    /** Language chosen via the switcher; null means "follow currentLanguage / the first language". */
+    private readonly manual;
+    private readonly cvaDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly wrapperClasses: _angular_core.Signal<string>;
+    /** The language currently being edited. */
+    protected readonly activeLang: _angular_core.Signal<string>;
+    protected readonly current: _angular_core.Signal<string>;
+    protected filled(lang: string): boolean;
+    protected fieldPlaceholder(): string;
+    protected select(lang: string): void;
+    protected write(event: Event): void;
+    private onChange;
+    protected onTouched: () => void;
+    writeValue(value: SdsLocalizedValue | null): void;
+    registerOnChange(fn: (value: SdsLocalizedValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsLocalizedInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLocalizedInput, "sds-localized-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "currentLanguage": { "alias": "currentLanguage"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "languageSwitcherLabel": { "alias": "languageSwitcherLabel"; "required": false; "isSignal": true; }; "untranslatedLabel": { "alias": "untranslatedLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type SdsOtpInputSize = 'md' | 'lg';
 /**
  * A segmented one-time-code field: one box per character, for the short numeric codes emailed or
@@ -1736,6 +1795,65 @@ declare class SdsTableRowExpansion {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableRowExpansion, "ng-template[sdsRowExpansion]", never, {}, {}, never, never, true, never>;
 }
 
+type SdsToastKind = 'success' | 'error' | 'info';
+interface SdsToast {
+    id: number;
+    kind: SdsToastKind;
+    text: string;
+}
+/**
+ * A tiny transient-notification bus. Application code calls {@link success} / {@link error} / {@link info}
+ * after an action; a single {@link SdsToastHost} mounted in the app shell renders the queue and each toast
+ * auto-dismisses. Deliberately minimal — no positions, no actions-in-toast — because it exists to confirm
+ * an action, not to be a notification centre.
+ *
+ * `providedIn: 'root'`, so injecting it anywhere shares one queue:
+ *
+ * ```ts
+ * private readonly toasts = inject(SdsToastService);
+ * this.toasts.success('Enregistré.');
+ * ```
+ *
+ * Mount the host once (e.g. in the shell): `<sds-toast-host />`.
+ */
+declare class SdsToastService {
+    private seq;
+    readonly toasts: _angular_core.WritableSignal<SdsToast[]>;
+    /** How long a toast stays, in ms, by kind. Errors linger; success/info are brief. */
+    private static readonly TTL;
+    success(text: string): void;
+    error(text: string): void;
+    info(text: string): void;
+    dismiss(id: number): void;
+    private push;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsToastService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SdsToastService>;
+}
+
+/**
+ * Renders the {@link SdsToastService} queue, fixed bottom-centre. Mount it once, in the app shell:
+ * `<sds-toast-host />`. Application code pushes toasts through the injected service.
+ *
+ * Accessibility: the two live regions are ALWAYS in the DOM (even when empty), because a live region must
+ * pre-exist for its later content changes to be announced. Errors go to an assertive `role="alert"` region
+ * so a failure interrupts; success/info go to a polite region so they queue.
+ */
+declare class SdsToastHost {
+    readonly toasts: SdsToastService;
+    /**
+     * Accessible name for each toast's close button. French default so existing consumers are unchanged; the
+     * button is icon-only, so an app serving more than one language MUST translate it.
+     */
+    readonly closeLabel: _angular_core.InputSignal<string>;
+    protected readonly errors: _angular_core.Signal<SdsToast[]>;
+    protected readonly notices: _angular_core.Signal<SdsToast[]>;
+    protected icon(kind: SdsToastKind): SdsIconName;
+    protected tone(kind: SdsToastKind): string;
+    protected border(kind: SdsToast['kind']): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsToastHost, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsToastHost, "sds-toast-host", never, { "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Shared collapse state for the sidebar and its nav items.
  *
@@ -1957,5 +2075,5 @@ declare class SdsNavItem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
 }
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, 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, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectAppearance, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };
+export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsLocalizedInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, 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, SdsInputShape, SdsInputSize, SdsInputType, SdsLocalizedInputSize, SdsLocalizedValue, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectAppearance, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance };

package/package.json

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

package/themes/saitech.css

@@ -14,15 +14,15 @@
  */
 @theme {
   /* Brand blues */
-  --color-brand-50: #eef3fb;
-  --color-brand-100: #d7e3f6;
-  --color-brand-200: #aec6ee;
-  --color-brand-300: #7ba3e2;
-  --color-brand-400: #4f81d6;
-  --color-brand-500: #2f6bd4; /* active nav highlight */
-  --color-brand-600: #2456a6; /* primary button */
-  --color-brand-700: #1b4498; /* top bar base */
-  --color-brand-800: #14387f;
-  --color-brand-900: #0f2452; /* sidebar background */
-  --color-brand-950: #0a1a3d;
+  --color-brand-50: #fafafa;
+  --color-brand-100: #f4f4f5;
+  --color-brand-200: #e4e4e7;
+  --color-brand-300: #d4d4d8;
+  --color-brand-400: #a1a1aa;
+  --color-brand-500: #52525b; /* active nav highlight */
+  --color-brand-600: #27272a; /* primary button */
+  --color-brand-700: #18181b; /* top bar base */
+  --color-brand-800: #131316;
+  --color-brand-900: #0a0a0b; /* sidebar background */
+  --color-brand-950: #000000;
 }