@besaitech/ng-design-system 0.0.60 → 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';
@@ -4817,5 +4850,36 @@ declare class SdsLanguageSwitcher implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLanguageSwitcher, "sds-language-switcher", never, { "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; "openChange": "openChange"; }, never, never, true, never>;
 }
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSdsThemeMode, isoDay, pad2, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
-export type { SdsAccordionActive, SdsAccordionValue, SdsAddressAutocompleteAppearance, SdsAddressAutocompleteShape, SdsAddressAutocompleteSize, SdsAddressExtraContext, SdsAddressExtraPosition, SdsAddressLocateFn, SdsAddressSearchFn, SdsAddressSuggestion, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeMode, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUiPrefs, SdsUserMenuAlign, SdsUserMenuAppearance };
+/** Build environment a marker is shown for. Only `dev` and `test` render; `prod` (or anything else) shows nothing. */
+type SdsEnvBannerEnv = 'dev' | 'test' | 'prod' | (string & {});
+interface Marker {
+    label: 'DEV' | 'TEST';
+    /** Tailwind classes for the 3px rule and the tab — one fixed hue each, identical in light & dark. */
+    bar: string;
+    tab: string;
+    variant: 'dev' | 'test';
+}
+/**
+ * Non-production environment marker: a 3px rule pinned across the very top of the viewport with a small tab
+ * hanging from its centre — sky **DEV** or amber **TEST**, nothing in production. Fixed and click-through,
+ * above all app chrome, so a dev or test environment is never mistaken for the live one.
+ *
+ * Presentation only, no i18n or environment dependency: the host app supplies the resolved `[env]` (from its
+ * `environment.env`, or — for an SSR app — from the request host) and, optionally, the translated
+ * screen-reader sentences. Render it once from the app's root component.
+ */
+declare class SdsEnvBanner {
+    /** The resolved build environment. Only `dev` and `test` show a marker; `prod`/anything else shows nothing. */
+    readonly env: _angular_core.InputSignal<SdsEnvBannerEnv | undefined>;
+    /** Screen-reader sentence for the DEV marker (pass a translated string; English default). */
+    readonly devSrLabel: _angular_core.InputSignal<string>;
+    /** Screen-reader sentence for the TEST marker (pass a translated string; English default). */
+    readonly testSrLabel: _angular_core.InputSignal<string>;
+    protected readonly marker: _angular_core.Signal<Marker | null>;
+    protected readonly srLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsEnvBanner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsEnvBanner, "sds-env-banner", never, { "env": { "alias": "env"; "required": false; "isSignal": true; }; "devSrLabel": { "alias": "devSrLabel"; "required": false; "isSignal": true; }; "testSrLabel": { "alias": "testSrLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsEnvBanner, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSdsThemeMode, isoDay, pad2, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
+export type { SdsAccordionActive, SdsAccordionValue, SdsAddressAutocompleteAppearance, SdsAddressAutocompleteShape, SdsAddressAutocompleteSize, SdsAddressExtraContext, SdsAddressExtraPosition, SdsAddressLocateFn, SdsAddressSearchFn, SdsAddressSuggestion, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsEnvBannerEnv, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeMode, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUiPrefs, SdsUserMenuAlign, SdsUserMenuAppearance };

package/package.json

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