@besaitech/ng-design-system 0.0.33 → 0.0.35

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, afterRenderEffect, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, numberAttribute, viewChildren, afterRenderEffect, viewChild, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -27,6 +27,7 @@ const SDS_ICONS = {
     'user-round': '<circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/>',
     home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
     'user-plus': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/>',
+    'user-check': '<path d="m16 11 2 2 4-4"/><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>',
     hand: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-icon lucide-hand"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>',
     users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
     // Couriers. The back-office and the courier-facing screens both name a rider, and every Belvigo
@@ -152,7 +153,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$9 = {
+const SIZES$a = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
@@ -212,7 +213,7 @@ class SdsButton {
             BASE,
             this.shape() === 'pill' ? 'rounded-full' : 'rounded-control',
             VARIANTS$2[this.variant()],
-            SIZES$9[size],
+            SIZES$a[size],
             this.iconOnly() ? ICON_ONLY[size] : '',
             this.block() ? 'w-full' : '',
         ]
@@ -264,8 +265,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$a = 0;
-const SIZES$8 = {
+let nextId$b = 0;
+const SIZES$9 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -277,7 +278,7 @@ const SIZES$8 = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$a++}`;
+    inputId = `sds-input-${nextId$b++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -354,7 +355,7 @@ class SdsInput {
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$8[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
+        const parts = [SIZES$9[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.filled()) {
@@ -598,6 +599,323 @@ 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$a = 0;
+const SIZES$8 = {
+    md: 'h-12 w-11 text-lg',
+    lg: 'h-14 w-12 text-xl',
+};
+/**
+ * A segmented one-time-code field: one box per character, for the short numeric codes emailed or
+ * texted for sign-in and verification. Implements ControlValueAccessor — bind
+ * `formControlName`/`[(ngModel)]`; the value is the concatenated string (e.g. `"483920"`), and
+ * {@link completed} fires the moment every box is filled.
+ *
+ * <p>Only digits are accepted (`inputMode` is `numeric` by default). Typing auto-advances,
+ * Backspace steps back and clears, the arrow keys move between boxes, and pasting a whole code
+ * distributes it across the boxes from the focused one — so a user can paste `483920` into the
+ * first box and have it land correctly.
+ */
+class SdsOtpInput {
+    groupId = `sds-otp-${nextId$a++}`;
+    /** How many boxes / characters the code has. */
+    length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name for the whole group when no visible [label] is provided. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** `numeric` for digit codes (the default); `text` for alphanumeric codes. */
+    inputMode = input('numeric', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Focus the first box on first render. */
+    autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Accessible name for an individual box, suffixed with its 1-based position ("Digit 1", "Digit
+     * 2", …). French default so existing consumers are unchanged; translate it in an app serving more
+     * than one language, since each box is an icon-less control whose only name this is.
+     */
+    cellLabel = input('Chiffre', ...(ngDevMode ? [{ debugName: "cellLabel" }] : []));
+    /** Emitted with the full value the moment the last box is filled. */
+    completed = output();
+    cells = viewChildren('cell', ...(ngDevMode ? [{ debugName: "cells" }] : []));
+    /** One entry per box; the source of truth, kept exactly {@link length} long. */
+    chars = signal([], ...(ngDevMode ? [{ debugName: "chars" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    indexes = computed(() => Array.from({ length: this.length() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "indexes" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    describedBy = computed(() => {
+        if (this.error())
+            return `${this.groupId}-err`;
+        if (this.hint())
+            return `${this.groupId}-hint`;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    cellClasses = computed(() => {
+        const parts = ['rounded-control border', SIZES$8[this.size()]];
+        parts.push(this.error()
+            ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
+            : 'border-border text-ink focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
+        if (this.isDisabled())
+            parts.push('opacity-60');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "cellClasses" }] : []));
+    constructor() {
+        // Autofocus once the boxes are in the DOM. afterRenderEffect re-runs on signal reads, but the
+        // guard keeps it to the first paint — refocusing on every value change would fight the user.
+        let focused = false;
+        afterRenderEffect(() => {
+            if (this.autoFocus() && !focused && !this.isDisabled()) {
+                this.cells()[0]?.nativeElement.focus();
+                focused = true;
+            }
+        });
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        // Programmatic set never emits — CVA writeValue must not call onChange.
+        this.chars.set(this.spread(value ?? ''));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- events ---------------------------------------------------------------
+    charAt(index) {
+        return this.chars()[index] ?? '';
+    }
+    onInput(event, index) {
+        const el = event.target;
+        const raw = el.value;
+        const digits = this.sanitize(raw);
+        if (digits.length === 0) {
+            if (raw.length === 0) {
+                // Genuinely emptied (cut, or a deletion the keydown handler did not catch) — clear the box.
+                this.setChar(index, '');
+            }
+            else {
+                // A rejected character (letter, symbol) — reassert the box's real content, since the
+                // [value] binding will not repaint an unchanged signal.
+                el.value = this.charAt(index);
+            }
+            return;
+        }
+        if (digits.length > 1) {
+            // Fast typing or an autofill dropped several characters into one box — spread them.
+            this.fill(digits, index);
+            return;
+        }
+        this.setChar(index, digits);
+        this.focusIndex(index + 1);
+    }
+    onKeydown(event, index) {
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (this.charAt(index)) {
+                    this.setChar(index, '');
+                }
+                else if (index > 0) {
+                    this.setChar(index - 1, '');
+                    this.focusIndex(index - 1);
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusIndex(index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusIndex(index + 1);
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this.setChar(index, '');
+                break;
+            default:
+                break;
+        }
+    }
+    onPaste(event, index) {
+        const digits = this.sanitize(event.clipboardData?.getData('text') ?? '');
+        if (!digits)
+            return;
+        event.preventDefault();
+        this.fill(digits, index);
+    }
+    onFocus(event) {
+        // Select the box's content so a keystroke overwrites rather than being rejected by maxlength.
+        event.target.select();
+    }
+    // --- internals ------------------------------------------------------------
+    sanitize(raw) {
+        return this.inputMode() === 'numeric'
+            ? raw.replace(/\D/g, '')
+            : raw.replace(/[^A-Za-z0-9]/g, '');
+    }
+    /** Normalize any input string into an array exactly {@link length} long. */
+    spread(raw) {
+        const cleaned = this.sanitize(raw).slice(0, this.length());
+        return Array.from({ length: this.length() }, (_, i) => cleaned[i] ?? '');
+    }
+    setChar(index, value) {
+        const next = this.normalized();
+        next[index] = value;
+        this.commit(next);
+    }
+    /** Write `digits` across the boxes starting at `start`, then focus the next empty box. */
+    fill(digits, start) {
+        const next = this.normalized();
+        let cursor = start;
+        for (const ch of digits) {
+            if (cursor >= this.length())
+                break;
+            next[cursor] = ch;
+            cursor += 1;
+        }
+        this.commit(next);
+        this.focusIndex(Math.min(cursor, this.length() - 1));
+    }
+    commit(next) {
+        this.chars.set(next);
+        const value = next.join('');
+        this.onChange(value);
+        if (next.every((c) => c !== '')) {
+            this.completed.emit(value);
+        }
+    }
+    /** The current boxes as a fresh, correctly-sized array to mutate. */
+    normalized() {
+        const current = this.chars();
+        return Array.from({ length: this.length() }, (_, i) => current[i] ?? '');
+    }
+    focusIndex(index) {
+        const clamped = Math.max(0, Math.min(index, this.length() - 1));
+        const cell = this.cells()[clamped]?.nativeElement;
+        if (cell) {
+            cell.focus();
+            cell.select();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsOtpInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsOtpInput, isStandalone: true, selector: "sds-otp-input", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, cellLabel: { classPropertyName: "cellLabel", publicName: "cellLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsOtpInput),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "cells", predicate: ["cell"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label [id]="groupId + '-label'" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+      </label>
+    }
+
+    <div
+      class="flex items-center gap-2"
+      role="group"
+      [attr.aria-labelledby]="label() ? groupId + '-label' : null"
+      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+    >
+      @for (i of indexes(); track i) {
+        <input
+          #cell
+          type="text"
+          [attr.data-index]="i"
+          [inputMode]="inputMode()"
+          autocomplete="one-time-code"
+          maxlength="1"
+          [value]="charAt(i)"
+          [disabled]="isDisabled()"
+          [attr.aria-label]="cellLabel() + ' ' + (i + 1)"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          class="bg-white text-center font-semibold tabular-nums outline-none transition-colors
+                 disabled:cursor-not-allowed"
+          [class]="cellClasses()"
+          (input)="onInput($event, i)"
+          (keydown)="onKeydown($event, i)"
+          (paste)="onPaste($event, i)"
+          (focus)="onFocus($event)"
+          (blur)="onTouched()"
+        />
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="groupId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="groupId + '-hint'" 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: SdsOtpInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-otp-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsOtpInput),
+                            multi: true,
+                        },
+                    ],
+                    host: { class: 'block' },
+                    template: `
+    @if (label()) {
+      <label [id]="groupId + '-label'" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+      </label>
+    }
+
+    <div
+      class="flex items-center gap-2"
+      role="group"
+      [attr.aria-labelledby]="label() ? groupId + '-label' : null"
+      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+    >
+      @for (i of indexes(); track i) {
+        <input
+          #cell
+          type="text"
+          [attr.data-index]="i"
+          [inputMode]="inputMode()"
+          autocomplete="one-time-code"
+          maxlength="1"
+          [value]="charAt(i)"
+          [disabled]="isDisabled()"
+          [attr.aria-label]="cellLabel() + ' ' + (i + 1)"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          class="bg-white text-center font-semibold tabular-nums outline-none transition-colors
+                 disabled:cursor-not-allowed"
+          [class]="cellClasses()"
+          (input)="onInput($event, i)"
+          (keydown)="onKeydown($event, i)"
+          (paste)="onPaste($event, i)"
+          (focus)="onFocus($event)"
+          (blur)="onTouched()"
+        />
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="groupId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="groupId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `,
+                }]
+        }], 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;
 const SIZES$7 = {
     sm: 'text-sm px-3 py-2',
@@ -7467,5 +7785,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, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, 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, 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, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map