@besaitech/ng-design-system 0.0.39 → 0.0.41

package/fesm2022/besaitech-ng-design-system.mjs

@@ -155,7 +155,7 @@ const VARIANTS$2 = {
     ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
 };
-const SIZES$a = {
+const SIZES$b = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
@@ -215,7 +215,7 @@ class SdsButton {
             BASE,
             this.shape() === 'pill' ? 'rounded-full' : 'rounded-control',
             VARIANTS$2[this.variant()],
-            SIZES$a[size],
+            SIZES$b[size],
             this.iconOnly() ? ICON_ONLY[size] : '',
             this.block() ? 'w-full' : '',
         ]
@@ -267,8 +267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".sds-spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;animation:sds-spin .6s linear infinite}@keyframes sds-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let nextId$b = 0;
-const SIZES$9 = {
+let nextId$c = 0;
+const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -280,7 +280,7 @@ const SIZES$9 = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$b++}`;
+    inputId = `sds-input-${nextId$c++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -357,7 +357,7 @@ class SdsInput {
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$9[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
+        const parts = [SIZES$a[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.filled()) {
@@ -601,6 +601,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
+let nextId$b = 0;
+const SIZES$9 = {
+    sm: 'min-h-9 text-sm',
+    md: 'min-h-10 text-sm',
+    lg: 'min-h-12 text-base',
+};
+/**
+ * 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" />`.
+ */
+class SdsLocalizedInput {
+    inputId = `sds-localized-input-${nextId$b++}`;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** The accepted language codes, in display order (e.g. `['fr','nl','en']`). */
+    languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    /** Language to pre-select; used when it is one of {@link languages}, else the first accepted language. */
+    currentLanguage = input(null, ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
+    multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * 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).
+     */
+    languageSwitcherLabel = input('Langue', ...(ngDevMode ? [{ debugName: "languageSwitcherLabel" }] : []));
+    untranslatedLabel = input('à traduire', ...(ngDevMode ? [{ debugName: "untranslatedLabel" }] : []));
+    valueMap = signal({}, ...(ngDevMode ? [{ debugName: "valueMap" }] : []));
+    /** Language chosen via the switcher; null means "follow currentLanguage / the first language". */
+    manual = signal(null, ...(ngDevMode ? [{ debugName: "manual" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    wrapperClasses = computed(() => {
+        const parts = [SIZES$9[this.size()]];
+        parts.push(this.isDisabled()
+            ? 'border-border opacity-60 cursor-not-allowed'
+            : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    /** The language currently being edited. */
+    activeLang = computed(() => {
+        const langs = this.languages();
+        if (!langs.length) {
+            return '';
+        }
+        const manual = this.manual();
+        if (manual && langs.includes(manual)) {
+            return manual;
+        }
+        const preferred = this.currentLanguage();
+        return preferred && langs.includes(preferred) ? preferred : langs[0];
+    }, ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    current = computed(() => this.valueMap()[this.activeLang()] ?? '', ...(ngDevMode ? [{ debugName: "current" }] : []));
+    filled(lang) {
+        const text = this.valueMap()[lang];
+        return !!text && text.trim().length > 0;
+    }
+    fieldPlaceholder() {
+        const base = this.placeholder();
+        const lang = this.activeLang().toUpperCase();
+        if (base) {
+            return lang ? `${base} (${lang})` : base;
+        }
+        return lang ? `(${lang})` : '';
+    }
+    select(lang) {
+        this.manual.set(lang);
+        this.onTouched();
+    }
+    write(event) {
+        const lang = this.activeLang();
+        if (!lang) {
+            return;
+        }
+        const text = event.target.value;
+        const next = { ...this.valueMap() };
+        if (text) {
+            next[lang] = text;
+        }
+        else {
+            delete next[lang];
+        }
+        this.valueMap.set(next);
+        this.onChange(next);
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.valueMap.set(value ? { ...value } : {});
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLocalizedInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLocalizedInput, isStandalone: true, selector: "sds-localized-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, languageSwitcherLabel: { classPropertyName: "languageSwitcherLabel", publicName: "languageSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, untranslatedLabel: { classPropertyName: "untranslatedLabel", publicName: "untranslatedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsLocalizedInput),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div
+      class="relative flex items-stretch rounded-control border bg-white text-ink transition-colors"
+      [class]="wrapperClasses()"
+    >
+      @if (multiline()) {
+        <textarea
+          [id]="inputId"
+          [rows]="rows()"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 resize-y bg-transparent px-3.5 py-2 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        ></textarea>
+      } @else {
+        <input
+          [id]="inputId"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 bg-transparent px-3.5 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        />
+      }
+
+      @if (languages().length > 1) {
+        <div
+          class="flex shrink-0 items-center gap-0.5 self-start p-1"
+          [class]="multiline() ? '' : 'self-center'"
+          role="tablist"
+          [attr.aria-label]="languageSwitcherLabel()"
+        >
+          @for (lang of languages(); track lang) {
+            <button
+              type="button"
+              role="tab"
+              tabindex="-1"
+              [disabled]="isDisabled()"
+              (click)="select(lang)"
+              [attr.aria-selected]="activeLang() === lang"
+              [attr.title]="lang.toUpperCase() + (filled(lang) ? '' : ' — ' + untranslatedLabel())"
+              class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+              [class]="
+                activeLang() === lang
+                  ? 'bg-brand-50 text-brand-700'
+                  : 'text-ink-faint hover:bg-muted hover:text-ink-soft'
+              "
+            >
+              {{ lang }}
+              <span
+                class="inline-block h-1 w-1 rounded-full"
+                [class]="filled(lang) ? 'bg-success' : 'bg-current/30'"
+              ></span>
+            </button>
+          }
+        </div>
+      }
+    </div>
+
+    @if (hint()) {
+      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLocalizedInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-localized-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsLocalizedInput),
+                            multi: true,
+                        },
+                    ],
+                    host: { class: 'block' },
+                    template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div
+      class="relative flex items-stretch rounded-control border bg-white text-ink transition-colors"
+      [class]="wrapperClasses()"
+    >
+      @if (multiline()) {
+        <textarea
+          [id]="inputId"
+          [rows]="rows()"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 resize-y bg-transparent px-3.5 py-2 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        ></textarea>
+      } @else {
+        <input
+          [id]="inputId"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 bg-transparent px-3.5 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        />
+      }
+
+      @if (languages().length > 1) {
+        <div
+          class="flex shrink-0 items-center gap-0.5 self-start p-1"
+          [class]="multiline() ? '' : 'self-center'"
+          role="tablist"
+          [attr.aria-label]="languageSwitcherLabel()"
+        >
+          @for (lang of languages(); track lang) {
+            <button
+              type="button"
+              role="tab"
+              tabindex="-1"
+              [disabled]="isDisabled()"
+              (click)="select(lang)"
+              [attr.aria-selected]="activeLang() === lang"
+              [attr.title]="lang.toUpperCase() + (filled(lang) ? '' : ' — ' + untranslatedLabel())"
+              class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+              [class]="
+                activeLang() === lang
+                  ? 'bg-brand-50 text-brand-700'
+                  : 'text-ink-faint hover:bg-muted hover:text-ink-soft'
+              "
+            >
+              {{ lang }}
+              <span
+                class="inline-block h-1 w-1 rounded-full"
+                [class]="filled(lang) ? 'bg-success' : 'bg-current/30'"
+              ></span>
+            </button>
+          }
+        </div>
+      }
+    </div>
+
+    @if (hint()) {
+      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }] } });
+
 let nextId$a = 0;
 const SIZES$8 = {
     md: 'h-12 w-11 text-lg',
@@ -7398,6 +7674,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], gridlines: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridlines", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], rowsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageLabel", required: false }] }], paginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLabel", required: false }] }], firstPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstPageLabel", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: false }] }], lastPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastPageLabel", required: false }] }], pageLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkLabel", required: false }] }], globalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilter", required: false }] }], globalFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterPlaceholder", required: false }] }], globalFilterAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterAriaLabel", required: false }] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowUnselect: [{ type: i0.Output, args: ["rowUnselect"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }], colReorder: [{ type: i0.Output, args: ["colReorder"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsTableCell), { isSignal: true }] }], rowExpansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsTableRowExpansion), { isSignal: true }] }] } });
 
+/**
+ * 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 />`.
+ */
+class SdsToastService {
+    seq = 0;
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    /** How long a toast stays, in ms, by kind. Errors linger; success/info are brief. */
+    static TTL = {
+        success: 3500,
+        info: 3500,
+        error: 6000,
+    };
+    success(text) {
+        this.push('success', text);
+    }
+    error(text) {
+        this.push('error', text);
+    }
+    info(text) {
+        this.push('info', text);
+    }
+    dismiss(id) {
+        this.toasts.update((list) => list.filter((t) => t.id !== id));
+    }
+    push(kind, text) {
+        const id = ++this.seq;
+        this.toasts.update((list) => [...list, { id, kind, text }]);
+        setTimeout(() => this.dismiss(id), SdsToastService.TTL[kind]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * 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.
+ */
+class SdsToastHost {
+    toasts = inject(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.
+     */
+    closeLabel = input('Fermer', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
+    errors = computed(() => this.toasts.toasts().filter((t) => t.kind === 'error'), ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    notices = computed(() => this.toasts.toasts().filter((t) => t.kind !== 'error'), ...(ngDevMode ? [{ debugName: "notices" }] : []));
+    icon(kind) {
+        return kind === 'success' ? 'check-circle' : kind === 'error' ? 'alert-circle' : 'info';
+    }
+    tone(kind) {
+        return kind === 'success' ? 'text-success' : kind === 'error' ? 'text-danger' : 'text-accent-blue';
+    }
+    border(kind) {
+        const accent = kind === 'success' ? 'border-l-success' : kind === 'error' ? 'border-l-danger' : 'border-l-accent-blue';
+        return `border-l-4 ${accent} border-y-border border-r-border`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsToastHost, isStandalone: true, selector: "sds-toast-host", inputs: { closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="pointer-events-none fixed inset-x-0 bottom-6 z-[100] flex flex-col items-center gap-2 px-4">
+      <div role="alert" aria-live="assertive" class="flex w-full flex-col items-center gap-2">
+        @for (t of errors(); track t.id) {
+          <ng-container [ngTemplateOutlet]="toast" [ngTemplateOutletContext]="{ t }" />
+        }
+      </div>
+      <div aria-live="polite" class="flex w-full flex-col items-center gap-2">
+        @for (t of notices(); track t.id) {
+          <ng-container [ngTemplateOutlet]="toast" [ngTemplateOutletContext]="{ t }" />
+        }
+      </div>
+    </div>
+
+    <ng-template #toast let-t="t">
+      <div
+        class="pointer-events-auto flex max-w-md items-start gap-2.5 rounded-card border bg-surface px-4 py-3 text-sm shadow-lg"
+        [class]="border(t.kind)"
+      >
+        <sds-icon [name]="icon(t.kind)" [size]="18" class="mt-0.5 shrink-0" [class]="tone(t.kind)" />
+        <span class="text-ink">{{ t.text }}</span>
+        <button
+          type="button"
+          (click)="toasts.dismiss(t.id)"
+          [attr.aria-label]="closeLabel()"
+          class="ml-1 shrink-0 rounded p-0.5 text-ink-faint hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+        >
+          <sds-icon name="x" [size]="15" />
+        </button>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsToastHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-toast-host',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, SdsIcon],
+                    template: `
+    <div class="pointer-events-none fixed inset-x-0 bottom-6 z-[100] flex flex-col items-center gap-2 px-4">
+      <div role="alert" aria-live="assertive" class="flex w-full flex-col items-center gap-2">
+        @for (t of errors(); track t.id) {
+          <ng-container [ngTemplateOutlet]="toast" [ngTemplateOutletContext]="{ t }" />
+        }
+      </div>
+      <div aria-live="polite" class="flex w-full flex-col items-center gap-2">
+        @for (t of notices(); track t.id) {
+          <ng-container [ngTemplateOutlet]="toast" [ngTemplateOutletContext]="{ t }" />
+        }
+      </div>
+    </div>
+
+    <ng-template #toast let-t="t">
+      <div
+        class="pointer-events-auto flex max-w-md items-start gap-2.5 rounded-card border bg-surface px-4 py-3 text-sm shadow-lg"
+        [class]="border(t.kind)"
+      >
+        <sds-icon [name]="icon(t.kind)" [size]="18" class="mt-0.5 shrink-0" [class]="tone(t.kind)" />
+        <span class="text-ink">{{ t.text }}</span>
+        <button
+          type="button"
+          (click)="toasts.dismiss(t.id)"
+          [attr.aria-label]="closeLabel()"
+          class="ml-1 shrink-0 rounded p-0.5 text-ink-faint hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+        >
+          <sds-icon name="x" [size]="15" />
+        </button>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
+
 /**
  * Shared collapse state for the sidebar and its nav items.
  *
@@ -7505,7 +7932,7 @@ class SdsTopbar {
       @if (appearance() === 'brand') {
       <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
       <svg
-        class="pointer-events-none absolute inset-y-0 right-0 h-full w-2/3 min-w-[420px]"
+        class="pointer-events-none absolute inset-y-0 right-0 h-full w-2/3 min-w-105"
         viewBox="0 0 600 64"
         preserveAspectRatio="none"
         fill="none"
@@ -7604,7 +8031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       @if (appearance() === 'brand') {
       <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
       <svg
-        class="pointer-events-none absolute inset-y-0 right-0 h-full w-2/3 min-w-[420px]"
+        class="pointer-events-none absolute inset-y-0 right-0 h-full w-2/3 min-w-105"
         viewBox="0 0 600 64"
         preserveAspectRatio="none"
         fill="none"
@@ -8213,5 +8640,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map