@besaitech/ng-design-system 0.0.61 → 0.0.62

package/index.d.ts

@@ -596,14 +596,41 @@ type SdsLocalizedInputSize = 'sm' | 'md' | 'lg';
  * 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.
  *
+ * Mark a must-fill language (a store's main language) with `[requiredLanguages]`, show a per-language
+ * `[maxLength]` counter, and an `[error]` like `sds-input`.
+ *
  * Implements ControlValueAccessor over the map — use with reactive forms or `[(ngModel)]`:
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 declare class SdsLocalizedInput implements ControlValueAccessor {
-    readonly inputId: string;
+    private readonly autoId;
+    /** The native field's id; a generated one when empty (set it to pair an external `<label for>`). */
+    readonly inputId: _angular_core.InputSignal<string>;
+    /** The native field's id: {@link inputId} or the generated one. */
+    protected readonly fieldId: _angular_core.Signal<string>;
     readonly label: _angular_core.InputSignal<string>;
+    /** Accessible name when there is no visible {@link label} (a dense row in a table or list). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
+    /** Error message under the field (danger frame + `aria-invalid`); replaces the hint. */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Mark the field required: an asterisk after the [label] and `aria-required`. It does not validate — keep your
+     * own validator (e.g. "the main language is filled").
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Languages that must be filled (e.g. a store's main language): while empty, their switcher dot shows in the
+     * danger colour and its title says {@link requiredLanguageLabel}. Display only — validate in the form.
+     */
+    readonly requiredLanguages: _angular_core.InputSignal<string[]>;
     readonly placeholder: _angular_core.InputSignal<string>;
+    /** Maximum characters per language (native `maxlength` on the field). 0 = no limit. */
+    readonly maxLength: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Show a character counter (of the language being edited) under the field; implied by {@link maxLength}. */
+    readonly showCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** The accepted language codes, in display order (e.g. `['fr','nl','en']`). */
     readonly languages: _angular_core.InputSignal<string[]>;
     /** Language to pre-select; used when it is one of {@link languages}, else the first accepted language. */
@@ -619,16 +646,22 @@ declare class SdsLocalizedInput implements ControlValueAccessor {
      */
     readonly languageSwitcherLabel: _angular_core.InputSignal<string>;
     readonly untranslatedLabel: _angular_core.InputSignal<string>;
+    /** Title suffix of a required language that is still empty (see {@link requiredLanguages}). */
+    readonly requiredLanguageLabel: _angular_core.InputSignal<string>;
     private readonly valueMap;
     /** Language chosen via the switcher; null means "follow currentLanguage / the first language". */
     private readonly manual;
     private readonly cvaDisabled;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly wrapperClasses: _angular_core.Signal<string>;
+    protected readonly hasCounter: _angular_core.Signal<boolean>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
     /** The language currently being edited. */
     protected readonly activeLang: _angular_core.Signal<string>;
     protected readonly current: _angular_core.Signal<string>;
     protected filled(lang: string): boolean;
+    /** A required language (see {@link requiredLanguages}) that is still empty. */
+    protected mustFill(lang: string): boolean;
     protected fieldPlaceholder(): string;
     protected select(lang: string): void;
     protected write(event: Event): void;
@@ -639,7 +672,7 @@ declare class SdsLocalizedInput implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsLocalizedInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLocalizedInput, "sds-localized-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "currentLanguage": { "alias": "currentLanguage"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "languageSwitcherLabel": { "alias": "languageSwitcherLabel"; "required": false; "isSignal": true; }; "untranslatedLabel": { "alias": "untranslatedLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLocalizedInput, "sds-localized-input", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "requiredLanguages": { "alias": "requiredLanguages"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "currentLanguage": { "alias": "currentLanguage"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "languageSwitcherLabel": { "alias": "languageSwitcherLabel"; "required": false; "isSignal": true; }; "untranslatedLabel": { "alias": "untranslatedLabel"; "required": false; "isSignal": true; }; "requiredLanguageLabel": { "alias": "requiredLanguageLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type SdsOtpInputSize = 'md' | 'lg';

package/package.json

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