@besaitech/ng-design-system 0.0.45 → 0.0.46

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

@@ -278,7 +278,7 @@ 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$d = 0;
+let nextId$e = 0;
 const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -291,7 +291,7 @@ const SIZES$a = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$d++}`;
+    inputId = `sds-input-${nextId$e++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -612,7 +612,7 @@ 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$c = 0;
+let nextId$d = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -635,7 +635,7 @@ const TEXT = {
  * {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$c++}`;
+    inputId = `sds-input-number-${nextId$d++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1342,7 +1342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
 
-let nextId$b = 0;
+let nextId$c = 0;
 const SIZES$9 = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
@@ -1362,7 +1362,7 @@ const SIZES$9 = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$b++}`;
+    inputId = `sds-localized-input-${nextId$c++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -1618,7 +1618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], 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;
+let nextId$b = 0;
 const SIZES$8 = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
@@ -1635,7 +1635,7 @@ const SIZES$8 = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$a++}`;
+    groupId = `sds-otp-${nextId$b++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -1935,7 +1935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], cellLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
 
-let nextId$9 = 0;
+let nextId$a = 0;
 const SIZES$7 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
@@ -1947,7 +1947,7 @@ const SIZES$7 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$9++}`;
+    fieldId = `sds-textarea-${nextId$a++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -2185,7 +2185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$8 = 0;
+let nextId$9 = 0;
 const SIZES$6 = {
     sm: { track: 'h-5 w-9', knob: 'h-4 w-4', on: 'translate-x-4', icon: 11 },
     md: { track: 'h-6 w-11', knob: 'h-5 w-5', on: 'translate-x-5', icon: 13 },
@@ -2198,7 +2198,7 @@ const SIZES$6 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$8++}`;
+    fieldId = `sds-toggle-switch-${nextId$9++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2435,7 +2435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
 
-let nextId$7 = 0;
+let nextId$8 = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -2445,7 +2445,7 @@ let nextId$7 = 0;
  * <sds-checkbox label="Fusion automatique" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$7++}`;
+    id = `sds-checkbox-${nextId$8++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3619,7 +3619,7 @@ const SIZES$5 = {
 class SdsDatePicker {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-date-${nextId$6++}`;
+    fieldId = `sds-date-${nextId$7++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     placeholder = input('jj/mm/aaaa', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -4134,7 +4134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `,
                 }]
         }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], closeCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
-let nextId$6 = 0;
+let nextId$7 = 0;
 
 /**
  * Supplies a custom template for each option row (and the selected value shown
@@ -4218,7 +4218,7 @@ const SIZES$4 = {
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$5 = 0;
+let nextId$6 = 0;
 /**
  * Single-select dropdown. Options may be primitives or objects (configure via
  * [optionLabel]/[optionValue]/[optionDisabled]). The overlay is appended to
@@ -4252,7 +4252,7 @@ let nextId$5 = 0;
 class SdsSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-select-${nextId$5++}`;
+    selectId = `sds-select-${nextId$6++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -4935,7 +4935,7 @@ const SIZES$3 = {
     md: 'min-h-10 text-sm',
     lg: 'min-h-12 text-base',
 };
-let nextId$4 = 0;
+let nextId$5 = 0;
 /**
  * Multi-select dropdown (value is an array). Options may be primitives or
  * objects (configure via [optionLabel]/[optionValue]/[optionDisabled]). The
@@ -4968,7 +4968,7 @@ let nextId$4 = 0;
 class SdsMultiSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-multiselect-${nextId$4++}`;
+    selectId = `sds-multiselect-${nextId$5++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -5830,7 +5830,7 @@ const SIZES$2 = {
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$3 = 0;
+let nextId$4 = 0;
 /**
  * International phone number input: a country selector (ISO chip + dial code)
  * with a searchable, body-appended dropdown, plus a formatted national-number
@@ -5845,7 +5845,7 @@ let nextId$3 = 0;
 class SdsPhoneInput {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-phone-${nextId$3++}`;
+    fieldId = `sds-phone-${nextId$4++}`;
     listId = `${this.fieldId}-list`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
@@ -6927,7 +6927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], pageLinkSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkSize", required: false }] }], showFirstLastIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastIcon", required: false }] }], showPageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageLinks", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], showJumpToPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageInput", required: false }] }], rowsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageLabel", required: false }] }], jumpToPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageLabel", 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 }] }], jumpToPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageAriaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
-let nextId$2 = 0;
+let nextId$3 = 0;
 /**
  * Coordinates a single <sds-tabs> instance: holds the active value (shared from
  * the host's two-way model), tracks registered tabs for default selection and
@@ -6937,7 +6937,7 @@ let nextId$2 = 0;
  */
 class SdsTabsStore {
     /** Unique base id used to link tabs and panels via ARIA. */
-    id = `sds-tabs-${nextId$2++}`;
+    id = `sds-tabs-${nextId$3++}`;
     /** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
     scrollable = signal(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
     value;
@@ -7219,7 +7219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
-let nextId$1 = 0;
+let nextId$2 = 0;
 /**
  * Coordinates a single <sds-accordion>: holds the open value(s) (shared from the
  * host's two-way model), the multiple-open flag, and generates the ARIA ids that
@@ -7229,7 +7229,7 @@ let nextId$1 = 0;
  */
 class SdsAccordionStore {
     /** Unique base id used to link headers and content regions via ARIA. */
-    id = `sds-accordion-${nextId$1++}`;
+    id = `sds-accordion-${nextId$2++}`;
     /** Whether more than one panel may be open at a time (mirrors [multiple]). */
     multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
     value;
@@ -7567,7 +7567,7 @@ const ALIGN = {
     center: 'text-center',
     right: 'text-right',
 };
-let nextId = 0;
+let nextId$1 = 0;
 /**
  * Client-side data table mirroring PrimeNG's table, scoped to a strong local
  * feature set: sorting, pagination (reuses {@link SdsPaginator}), global filter,
@@ -7596,7 +7596,7 @@ let nextId = 0;
  * </sds-table>
  */
 class SdsTable {
-    tableId = `sds-table-${nextId++}`;
+    tableId = `sds-table-${nextId$1++}`;
     // --- inputs ---------------------------------------------------------------
     value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
@@ -10805,6 +10805,413 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".animate-sds-cmd{animation:sds-cmd-in .16s ease-out}@keyframes sds-cmd-in{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.animate-sds-cmd{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], overlay: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], triggerMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMinWidth", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], selectHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectHint", required: false }] }], navigateHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateHint", required: false }] }], closeHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeHint", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
+let nextId = 0;
+/**
+ * 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" />
+ */
+class SdsLanguageSwitcher {
+    el = inject(ElementRef);
+    injector = inject(Injector);
+    trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    panelId = `sds-language-panel-${nextId++}`;
+    /** The supported languages — either `{ code, label }` options or bare code strings. */
+    languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    /** The active language code. Two-way: `[(current)]` echoes the choice, or listen to `(currentChange)`. */
+    current = model('', ...(ngDevMode ? [{ debugName: "current" }] : []));
+    /** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
+    appearance = input('surface', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Which edge the panel aligns to. `end` (default) hangs it from the right of the trigger. */
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** `up` prefers opening the panel above the trigger — for a switcher near the bottom of the page. */
+    direction = input('down', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    /** Accessible name for the trigger and panel. */
+    menuLabel = input('Choisir la langue', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
+    /** Optional visible header above the list (e.g. "Langue"). Omitted when empty. */
+    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    openChange = output();
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+    panelEl = null;
+    /** Normalise the mixed `languages` input to `{ code, label }`, defaulting the label to the code. */
+    options = computed(() => this.languages().map((l) => typeof l === 'string'
+        ? { code: l, label: l.toUpperCase() }
+        : { code: l.code, label: l.label ?? l.code.toUpperCase() }), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * 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.
+     */
+    effectiveCode = computed(() => this.current() || this.options()[0]?.code || '', ...(ngDevMode ? [{ debugName: "effectiveCode" }] : []));
+    /** Uppercased code shown in the trigger. */
+    currentCode = computed(() => this.effectiveCode().toUpperCase(), ...(ngDevMode ? [{ debugName: "currentCode" }] : []));
+    activeOptionId = computed(() => this.highlightedIndex() >= 0 ? this.optionId(this.highlightedIndex()) : null, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
+    optionId(i) {
+        return `${this.panelId}-opt-${i}`;
+    }
+    toggle() {
+        this.open() ? this.close(true) : this.openPanel();
+    }
+    openPanel() {
+        this.open.set(true);
+        this.openChange.emit(true);
+        this.initHighlight();
+        // After the panel renders inside the host, portal it to <body> and anchor it to the trigger, so no
+        // clipping/stacking ancestor (an overflow:hidden bar, a backdrop-filter glass bar) can cut it off.
+        // Focus stays on the trigger (combobox model); the active row is surfaced via aria-activedescendant.
+        afterNextRender(() => {
+            this.panelEl = this.el.nativeElement.querySelector('[data-sds-language-panel]');
+            this.positionPanel();
+            this.addReflowListeners();
+            this.trigger()?.nativeElement.focus();
+            this.scrollHighlightedIntoView();
+        }, { injector: this.injector });
+    }
+    close(returnFocus = false) {
+        if (!this.open())
+            return;
+        this.removeReflowListeners();
+        // Remove the portalled node ourselves before Angular tears the view down (it lives in <body> now).
+        this.panelEl?.remove();
+        this.panelEl = null;
+        this.open.set(false);
+        this.openChange.emit(false);
+        if (returnFocus)
+            this.trigger()?.nativeElement.focus();
+    }
+    choose(code) {
+        this.current.set(code);
+        // Pointer/keyboard selection returns focus to the trigger, like the other top-bar disclosures.
+        this.close(true);
+    }
+    onDocumentClick(event) {
+        if (!this.open())
+            return;
+        const target = event.target;
+        const inHost = this.el.nativeElement.contains(target);
+        const inPanel = !!this.panelEl && this.panelEl.contains(target);
+        if (!inHost && !inPanel)
+            this.close();
+    }
+    onEscape() {
+        if (!this.open())
+            return;
+        this.close(true);
+    }
+    // --- keyboard (APG select-only combobox: focus stays on the trigger) ---
+    onTriggerKeydown(event) {
+        if (!this.open()) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
+                event.preventDefault();
+                this.openPanel();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.move(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.move(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.highlight(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.highlight(this.options().length - 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.chooseHighlighted();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close(true);
+                break;
+            case 'Tab':
+                this.close(false);
+                break;
+            default: break;
+        }
+    }
+    initHighlight() {
+        const idx = this.options().findIndex((o) => o.code === this.effectiveCode());
+        this.highlightedIndex.set(idx >= 0 ? idx : this.options().length ? 0 : -1);
+    }
+    move(delta) {
+        const n = this.options().length;
+        if (!n)
+            return;
+        const from = this.highlightedIndex();
+        this.highlight(((from < 0 ? 0 : from) + delta + n) % n);
+    }
+    highlight(i) {
+        if (i < 0 || i >= this.options().length)
+            return;
+        this.highlightedIndex.set(i);
+        this.scrollHighlightedIntoView();
+    }
+    chooseHighlighted() {
+        const opt = this.options()[this.highlightedIndex()];
+        if (opt)
+            this.choose(opt.code);
+    }
+    scrollHighlightedIntoView() {
+        setTimeout(() => {
+            this.panelEl
+                ?.querySelector(`[data-index="${this.highlightedIndex()}"]`)
+                ?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    // --- body-appended overlay positioning (mirrors sds-select / sds-date-picker) ---
+    reflow = () => this.positionPanel();
+    listening = false;
+    addReflowListeners() {
+        if (this.listening)
+            return;
+        window.addEventListener('scroll', this.reflow, true);
+        window.addEventListener('resize', this.reflow);
+        this.listening = true;
+    }
+    removeReflowListeners() {
+        if (!this.listening)
+            return;
+        window.removeEventListener('scroll', this.reflow, true);
+        window.removeEventListener('resize', this.reflow);
+        this.listening = false;
+    }
+    positionPanel() {
+        const triggerEl = this.trigger()?.nativeElement;
+        const panelEl = this.panelEl;
+        if (!triggerEl || !panelEl)
+            return;
+        if (panelEl.parentElement !== document.body)
+            document.body.appendChild(panelEl);
+        const r = triggerEl.getBoundingClientRect();
+        const gap = 8;
+        const margin = 8;
+        const pw = panelEl.offsetWidth || 176;
+        const ph = panelEl.offsetHeight || 200;
+        // Vertical: below by default; open above when asked (direction='up') and there is room, or when there
+        // isn't room below but there is above. The panel height is bounded by the list's max-h, but clamp
+        // defensively so top can never be pushed off the top edge.
+        const roomBelow = window.innerHeight - r.bottom - gap;
+        const roomAbove = r.top - gap;
+        let top = (this.direction() === 'up' && roomAbove >= ph) || (roomBelow < ph && roomAbove > roomBelow)
+            ? r.top - gap - ph
+            : r.bottom + gap;
+        if (top + ph > window.innerHeight - margin)
+            top = window.innerHeight - margin - ph;
+        if (top < margin)
+            top = margin;
+        // Horizontal: align the panel's end (right) or start (left) edge to the trigger, then clamp.
+        let left = this.align() === 'end' ? r.right - pw : r.left;
+        left = Math.min(left, window.innerWidth - margin - pw);
+        left = Math.max(margin, left);
+        panelEl.style.top = `${Math.round(top)}px`;
+        panelEl.style.left = `${Math.round(left)}px`;
+    }
+    ngOnDestroy() {
+        this.removeReflowListeners();
+        this.panelEl?.remove();
+    }
+    onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
+    triggerClass = computed(() => this.onBrand()
+        ? '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', ...(ngDevMode ? [{ debugName: "triggerClass" }] : []));
+    chevronClass = computed(() => (this.onBrand() ? 'text-white/70' : 'text-ink-faint'), ...(ngDevMode ? [{ debugName: "chevronClass" }] : []));
+    rowClass(index, selected) {
+        const base = 'flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors';
+        const highlighted = this.highlightedIndex() === index;
+        let state;
+        if (selected) {
+            state = highlighted ? 'bg-brand-500/25 text-ink' : 'bg-brand-500/15 text-ink';
+        }
+        else {
+            state = highlighted ? 'bg-muted text-ink' : 'text-ink-soft';
+        }
+        return `${base} ${state}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLanguageSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLanguageSwitcher, isStandalone: true, selector: "sds-language-switcher", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", openChange: "openChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "relative inline-block" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #trigger
+      type="button"
+      role="combobox"
+      class="flex h-10 items-center gap-1.5 rounded-control px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2"
+      [class]="triggerClass()"
+      [attr.aria-label]="menuLabel()"
+      aria-haspopup="listbox"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="open() ? panelId : null"
+      [attr.aria-activedescendant]="open() ? activeOptionId() : null"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <sds-icon name="languages" [size]="16" class="shrink-0" />
+      <span>{{ currentCode() }}</span>
+      <sds-icon
+        name="chevron-down"
+        [size]="14"
+        class="shrink-0 transition-transform"
+        [class]="chevronClass()"
+        [class.rotate-180]="open()"
+      />
+    </button>
+
+    @if (open()) {
+      <!-- Appended to document.body on open (see positionPanel) so no ancestor can clip it. -->
+      <div
+        data-sds-language-panel
+        [id]="panelId"
+        role="listbox"
+        [attr.aria-label]="menuLabel()"
+        class="fixed z-[1000] min-w-44 overflow-hidden rounded-card border border-border bg-surface shadow-xl animate-sds-menu"
+      >
+        @if (heading(); as h) {
+          <p class="border-b border-border px-4 pb-2 pt-3 text-[0.68rem] font-semibold uppercase tracking-wider text-ink-faint">
+            {{ h }}
+          </p>
+        }
+        <div class="max-h-[60vh] overflow-auto py-1.5">
+          @for (opt of options(); track opt.code; let i = $index) {
+            <div
+              [id]="optionId(i)"
+              role="option"
+              [attr.data-index]="i"
+              [attr.aria-selected]="opt.code === effectiveCode()"
+              [class]="rowClass(i, opt.code === effectiveCode())"
+              (click)="choose(opt.code)"
+              (mouseenter)="highlightedIndex.set(i)"
+            >
+              <span class="flex-1 truncate text-left">{{ opt.label }}</span>
+              <span
+                class="shrink-0 text-[0.7rem] font-semibold uppercase tracking-wide"
+                [class]="opt.code === effectiveCode() ? 'text-brand-600' : 'text-ink-faint'"
+                >{{ opt.code }}</span
+              >
+              @if (opt.code === effectiveCode()) {
+                <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
+              } @else {
+                <span class="w-4 shrink-0" aria-hidden="true"></span>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ 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: SdsLanguageSwitcher, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], host: {
+                        class: 'relative inline-block',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(document:keydown.escape)': 'onEscape()',
+                    }, template: `
+    <button
+      #trigger
+      type="button"
+      role="combobox"
+      class="flex h-10 items-center gap-1.5 rounded-control px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2"
+      [class]="triggerClass()"
+      [attr.aria-label]="menuLabel()"
+      aria-haspopup="listbox"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="open() ? panelId : null"
+      [attr.aria-activedescendant]="open() ? activeOptionId() : null"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <sds-icon name="languages" [size]="16" class="shrink-0" />
+      <span>{{ currentCode() }}</span>
+      <sds-icon
+        name="chevron-down"
+        [size]="14"
+        class="shrink-0 transition-transform"
+        [class]="chevronClass()"
+        [class.rotate-180]="open()"
+      />
+    </button>
+
+    @if (open()) {
+      <!-- Appended to document.body on open (see positionPanel) so no ancestor can clip it. -->
+      <div
+        data-sds-language-panel
+        [id]="panelId"
+        role="listbox"
+        [attr.aria-label]="menuLabel()"
+        class="fixed z-[1000] min-w-44 overflow-hidden rounded-card border border-border bg-surface shadow-xl animate-sds-menu"
+      >
+        @if (heading(); as h) {
+          <p class="border-b border-border px-4 pb-2 pt-3 text-[0.68rem] font-semibold uppercase tracking-wider text-ink-faint">
+            {{ h }}
+          </p>
+        }
+        <div class="max-h-[60vh] overflow-auto py-1.5">
+          @for (opt of options(); track opt.code; let i = $index) {
+            <div
+              [id]="optionId(i)"
+              role="option"
+              [attr.data-index]="i"
+              [attr.aria-selected]="opt.code === effectiveCode()"
+              [class]="rowClass(i, opt.code === effectiveCode())"
+              (click)="choose(opt.code)"
+              (mouseenter)="highlightedIndex.set(i)"
+            >
+              <span class="flex-1 truncate text-left">{{ opt.label }}</span>
+              <span
+                class="shrink-0 text-[0.7rem] font-semibold uppercase tracking-wide"
+                [class]="opt.code === effectiveCode() ? 'text-brand-600' : 'text-ink-faint'"
+                >{{ opt.code }}</span
+              >
+              @if (opt.code === effectiveCode()) {
+                <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
+              } @else {
+                <span class="w-4 shrink-0" aria-hidden="true"></span>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"] }]
+        }], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+
 /*
  * Public API Surface of saitech-design-system — the Saitech / App design system.
  */
@@ -10814,5 +11221,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, 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 { 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 };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map