@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-core.mjs

@@ -1,5 +1,559 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, NgZone, model, input, booleanAttribute, signal, computed, output, Directive, TemplateRef, Injectable } from '@angular/core';
+import { InjectionToken, inject, signal, computed, DestroyRef, Injectable, makeEnvironmentProviders, ElementRef, NgZone, model, input, booleanAttribute, output, Directive, TemplateRef } from '@angular/core';
+import { NXE_ID_SEPARATORS, NXE_EN_US_SEPARATORS, NXE_NUMBER_SEPARATORS } from '@nexterajs/ui/intl';
+import { Settings } from 'luxon';
+
+/**
+ * Every user-visible string the library renders, in English.
+ *
+ * Flat keys, namespaced by component (`grid.pager.info`). `{0}`, `{1}`... are positional
+ * arguments filled by `NxeMessageService.t(key, ...args)`. English is the default bundle and
+ * the fallback for any key a custom bundle leaves out, so the library renders exactly what it
+ * always did until an application opts into another locale.
+ *
+ * The key set is the type: `NxeMessageKey` is derived from it and the Indonesian bundle is
+ * checked against it, so a key added here without a translation fails to compile.
+ */
+const NXE_MESSAGES_EN = {
+    // Shared by several components.
+    'common.search': 'Search',
+    'common.clear': 'Clear',
+    'common.close': 'Close',
+    'common.ok': 'OK',
+    'common.cancel': 'Cancel',
+    'common.confirm': 'Confirm',
+    'common.yes': 'Yes',
+    'common.no': 'No',
+    'common.all': '(All)',
+    'common.selectAll': 'Select All',
+    'common.blanks': '(Blanks)',
+    // nxe-data-grid.
+    'grid.noData': 'No data',
+    'grid.groupPanel': 'Drag a column header here to group by that column',
+    'grid.edit': 'Edit',
+    'grid.save': 'Save',
+    'grid.cancel': 'Cancel',
+    'grid.expand': 'Expand',
+    'grid.collapse': 'Collapse',
+    'grid.expandedRow': 'Expanded row',
+    'grid.collapsedRow': 'Collapsed row',
+    'grid.editableCell': 'Editable',
+    'grid.filterRow.operation': 'Filter operation',
+    'grid.filterRow.reset': 'Reset',
+    'grid.filterRow.true': 'true',
+    'grid.filterRow.false': 'false',
+    'grid.op.contains': 'Contains',
+    'grid.op.notContains': 'Does not contain',
+    'grid.op.startsWith': 'Starts with',
+    'grid.op.endsWith': 'Ends with',
+    'grid.op.equals': 'Equals',
+    'grid.op.notEquals': 'Does not equal',
+    'grid.op.lessThan': 'Less than',
+    'grid.op.greaterThan': 'Greater than',
+    'grid.op.lessThanOrEqual': 'Less than or equal to',
+    'grid.op.greaterThanOrEqual': 'Greater than or equal to',
+    'grid.op.between': 'Between',
+    // Pager (inside nxe-data-grid).
+    'grid.pager.info': 'Page {0} of {1} ({2} items)',
+    'grid.pager.navigation': 'Page navigation',
+    'grid.pager.pageSize': 'Page size',
+    'grid.pager.itemsPerPage': 'Items per page: {0}',
+    'grid.pager.previous': 'Previous page',
+    'grid.pager.next': 'Next page',
+    'grid.pager.page': 'Page {0}',
+    'grid.pager.first': 'First page',
+    'grid.pager.last': 'Last page',
+    'grid.pager.total': '{0} items',
+    // Server-side data (NxeRemoteDataSource) in nxe-data-grid.
+    'grid.remote.loading': 'Loading',
+    'grid.remote.error': 'The data could not be loaded.',
+    'grid.remote.retry': 'Retry',
+    // nxe-file-uploader.
+    'uploader.selectFile': 'Select File',
+    'uploader.dropHere': 'or Drop here',
+    'uploader.cancel': 'Cancel',
+    'uploader.sizeB': '{0} b',
+    'uploader.sizeKb': '{0} Kb',
+    'uploader.sizeMb': '{0} Mb',
+    // nxe-validator rules without a message of their own.
+    'validation.rule.required': 'Required',
+    'validation.rule.email': 'Email is invalid',
+    'validation.rule.pattern': 'Value does not match pattern',
+    'validation.rule.range': 'Value is out of range',
+    'validation.rule.compare': 'Values do not match',
+    'validation.rule.custom': 'Value is invalid',
+    // nxe-form-field, for Angular's built-in validators.
+    'validation.field.required': 'This field is required.',
+    'validation.field.email': 'Enter a valid email address.',
+    'validation.field.minlength': 'Enter at least {0} characters.',
+    'validation.field.maxlength': 'Enter no more than {0} characters.',
+    'validation.field.min': 'Must be at least {0}.',
+    'validation.field.max': 'Must be at most {0}.',
+    'validation.field.pattern': 'Enter a value in the expected format.',
+    'validation.field.invalid': 'This value is not valid.',
+    // nxe-date-box calendar. Month and weekday names come from Luxon for the active locale.
+    'date.now': 'Now',
+    'date.done': 'Done',
+    'date.hour': 'Hour',
+    'date.minute': 'Minute',
+    // nxe-date-range-box.
+    'dateRange.start': 'Start date',
+    'dateRange.end': 'End date',
+    'dateRange.startPlaceholder': 'Start date',
+    'dateRange.endPlaceholder': 'End date',
+    'dateRange.dialog': 'Choose a date range',
+    'dateRange.previousMonth': 'Previous month',
+    'dateRange.nextMonth': 'Next month',
+    'dateRange.presets': 'Quick ranges',
+    'dateRange.pickStart': 'Select the start date',
+    'dateRange.pickEnd': 'Select the end date',
+    'dateRange.preset.today': 'Today',
+    'dateRange.preset.yesterday': 'Yesterday',
+    'dateRange.preset.last7Days': 'Last 7 days',
+    'dateRange.preset.last30Days': 'Last 30 days',
+    'dateRange.preset.thisMonth': 'This month',
+    'dateRange.preset.lastMonth': 'Last month',
+    'dateRange.preset.thisYear': 'This year',
+    // Drop-downs (nxe-select-box, nxe-tag-box).
+    'dropdown.noData': 'No data to display',
+    'dropdown.selectAll': 'Select All',
+    // nxe-file-input, and its errors in nxe-form-field.
+    'uploader.selectFiles': 'Select files',
+    'uploader.dropFiles': 'or drop files here',
+    'uploader.listLabel': 'Attached files',
+    'uploader.acceptHint': 'Accepted: {0}',
+    'uploader.maxSizeHint': 'Up to {0} each',
+    'uploader.maxFilesHint': 'Up to {0} files',
+    'uploader.statusPending': 'Waiting to upload',
+    'uploader.statusUploading': 'Uploading {0}%',
+    'uploader.statusUploaded': 'Uploaded',
+    'uploader.statusFailed': 'Upload failed',
+    'uploader.uploadingFile': 'Uploading {0}',
+    'uploader.uploadFailed': 'The upload failed.',
+    'uploader.cancelled': 'Upload cancelled.',
+    'uploader.cancelFile': 'Cancel upload of {0}',
+    'uploader.retryFile': 'Retry upload of {0}',
+    'uploader.removeFile': 'Remove {0}',
+    'uploader.retry': 'Retry',
+    'uploader.remove': 'Remove',
+    'uploader.rejectType': '{0} is not an accepted file type.',
+    'uploader.rejectSize': '{0} is larger than {1}.',
+    'uploader.rejectCount': '{0} is over the limit of {1} files.',
+    'uploader.announceAdded': '{0} added',
+    'uploader.announceRemoved': '{0} removed',
+    'validation.field.fileType': 'Only these file types are accepted: {0}.',
+    'validation.field.fileSize': 'Each file must be {0} or smaller.',
+    'validation.field.maxFiles': 'Attach at most {0} files.',
+    'validation.field.uploading': 'Wait for the uploads to finish.',
+    'validation.field.uploadFailed': 'Retry or remove the files that failed to upload.',
+    // nxe-timeline.
+    'timeline.pending': 'Pending',
+    // nxe-stepper.
+    'stepper.listLabel': 'Steps',
+    'stepper.stepOf': 'Step {0} of {1}: {2}',
+    'stepper.completed': 'Completed',
+    'stepper.error': 'Has errors',
+    'stepper.optional': 'Optional',
+    'stepper.blocked': 'Step {0} is not complete. Fix the highlighted fields to continue.',
+    // nxe-notify toasts.
+    'notify.close': 'Close notification',
+    // nxe-shell, nxe-sidenav, nxe-topbar.
+    'shell.skipToContent': 'Skip to content',
+    'shell.mainNavigation': 'Main navigation',
+    'shell.toggleNavigation': 'Toggle navigation',
+    'shell.closeNavigation': 'Close navigation',
+    'shell.collapseSidebar': 'Collapse sidebar',
+    'shell.expandSidebar': 'Expand sidebar',
+    // nxe-pivot-grid.
+    'pivot.grandTotal': 'Grand Total',
+    'pivot.total': '{0} Total',
+    'pivot.noData': 'No data',
+    'pivot.showFieldChooser': 'Show Field Chooser',
+    'pivot.chooser.title': 'Field Chooser',
+    'pivot.chooser.allFields': 'All Fields',
+    'pivot.chooser.rowFields': 'Row Fields',
+    'pivot.chooser.columnFields': 'Column Fields',
+    'pivot.chooser.filterFields': 'Filter Fields',
+    'pivot.chooser.dataFields': 'Data Fields',
+    'pivot.chooser.checkState': 'Check state',
+    'pivot.panel.dropFilter': 'Drop Filter Fields Here',
+    'pivot.panel.dropData': 'Drop Data Fields Here',
+    'pivot.panel.dropColumn': 'Drop Column Fields Here',
+    'pivot.panel.dropRow': 'Drop Row Fields Here',
+    // nxe-text-box password reveal and nxe-text-area counter.
+    'forms.password.show': 'Show password',
+    'forms.password.hide': 'Hide password',
+    'forms.textArea.charactersLeft': '{0} characters left',
+    'forms.textArea.charactersOver': '{0} characters over the limit',
+    'forms.numberBox.increase': 'Increase',
+    'forms.numberBox.decrease': 'Decrease',
+    // nxe-description-list: read in place of the empty-value glyph.
+    'display.noValue': 'No value',
+    // @nexterajs/ui/charts: nxe-line-chart, nxe-area-chart, nxe-donut-chart.
+    'charts.other': 'Other',
+    'charts.total': 'Total',
+    'charts.empty': 'No data to chart',
+    'charts.legend': 'Legend',
+    'charts.viewAsTable': 'View as table',
+    'charts.viewAsChart': 'View as chart',
+    'charts.navigate': 'Chart data. Use the arrow keys to move between points, Escape to leave.',
+    'charts.navigateSegments': 'Chart segments. Use the arrow keys to move between segments, Escape to leave.',
+    'charts.summary.line': 'Line chart, {0} series, {1} points from {2} to {3}.',
+    'charts.summary.area': 'Area chart, {0} series, {1} points from {2} to {3}.',
+    'charts.summary.stackedArea': 'Stacked area chart, {0} series, {1} points from {2} to {3}.',
+    'charts.summary.series': '{0}: from {1} to {2}, lowest {3}, highest {4}.',
+    'charts.summary.donut': 'Donut chart, {0} segments, total {1}.',
+    'charts.summary.segment': '{0}: {1}, {2}.',
+    'charts.table.category': 'Category',
+    'charts.table.segment': 'Segment',
+    'charts.table.value': 'Value',
+    'charts.table.share': 'Share',
+    // nxe-avatar status dot, and the "+N" chip of nxe-avatar-group.
+    'avatar.status.online': 'Online',
+    'avatar.status.away': 'Away',
+    'avatar.status.busy': 'Busy',
+    'avatar.status.offline': 'Offline',
+    'avatar.more': '{0} more',
+    // nxe-breadcrumb.
+    'breadcrumb.label': 'Breadcrumb',
+    'breadcrumb.more': 'Show hidden levels',
+};
+
+/** Indonesian bundle (Bahasa Indonesia), checked against the English key set. */
+const NXE_MESSAGES_ID = {
+    'common.search': 'Cari',
+    'common.clear': 'Hapus',
+    'common.close': 'Tutup',
+    'common.ok': 'OK',
+    'common.cancel': 'Batal',
+    'common.confirm': 'Konfirmasi',
+    'common.yes': 'Ya',
+    'common.no': 'Tidak',
+    'common.all': '(Semua)',
+    'common.selectAll': 'Pilih Semua',
+    'common.blanks': '(Kosong)',
+    'grid.noData': 'Tidak ada data',
+    'grid.groupPanel': 'Seret header kolom ke sini untuk mengelompokkan berdasarkan kolom tersebut',
+    'grid.edit': 'Ubah',
+    'grid.save': 'Simpan',
+    'grid.cancel': 'Batal',
+    'grid.expand': 'Perluas',
+    'grid.collapse': 'Ciutkan',
+    'grid.expandedRow': 'Baris diperluas',
+    'grid.collapsedRow': 'Baris diciutkan',
+    'grid.editableCell': 'Dapat diubah',
+    'grid.filterRow.operation': 'Operasi filter',
+    'grid.filterRow.reset': 'Atur ulang',
+    'grid.filterRow.true': 'Ya',
+    'grid.filterRow.false': 'Tidak',
+    'grid.op.contains': 'Mengandung',
+    'grid.op.notContains': 'Tidak mengandung',
+    'grid.op.startsWith': 'Diawali dengan',
+    'grid.op.endsWith': 'Diakhiri dengan',
+    'grid.op.equals': 'Sama dengan',
+    'grid.op.notEquals': 'Tidak sama dengan',
+    'grid.op.lessThan': 'Kurang dari',
+    'grid.op.greaterThan': 'Lebih dari',
+    'grid.op.lessThanOrEqual': 'Kurang dari atau sama dengan',
+    'grid.op.greaterThanOrEqual': 'Lebih dari atau sama dengan',
+    'grid.op.between': 'Di antara',
+    'grid.pager.info': 'Halaman {0} dari {1} ({2} item)',
+    'grid.pager.navigation': 'Navigasi halaman',
+    'grid.pager.pageSize': 'Ukuran halaman',
+    'grid.pager.itemsPerPage': 'Item per halaman: {0}',
+    'grid.pager.previous': 'Halaman sebelumnya',
+    'grid.pager.next': 'Halaman berikutnya',
+    'grid.pager.page': 'Halaman {0}',
+    'grid.pager.first': 'Halaman pertama',
+    'grid.pager.last': 'Halaman terakhir',
+    'grid.pager.total': '{0} item',
+    'grid.remote.loading': 'Memuat',
+    'grid.remote.error': 'Data tidak dapat dimuat.',
+    'grid.remote.retry': 'Coba lagi',
+    'uploader.selectFile': 'Pilih File',
+    'uploader.dropHere': 'atau seret ke sini',
+    'uploader.cancel': 'Batal',
+    'uploader.sizeB': '{0} B',
+    'uploader.sizeKb': '{0} KB',
+    'uploader.sizeMb': '{0} MB',
+    'validation.rule.required': 'Wajib diisi',
+    'validation.rule.email': 'Email tidak valid',
+    'validation.rule.pattern': 'Nilai tidak sesuai pola',
+    'validation.rule.range': 'Nilai di luar rentang',
+    'validation.rule.compare': 'Nilai tidak sama',
+    'validation.rule.custom': 'Nilai tidak valid',
+    'validation.field.required': 'Kolom ini wajib diisi.',
+    'validation.field.email': 'Masukkan alamat email yang valid.',
+    'validation.field.minlength': 'Masukkan minimal {0} karakter.',
+    'validation.field.maxlength': 'Masukkan maksimal {0} karakter.',
+    'validation.field.min': 'Minimal {0}.',
+    'validation.field.max': 'Maksimal {0}.',
+    'validation.field.pattern': 'Masukkan nilai dengan format yang sesuai.',
+    'validation.field.invalid': 'Nilai ini tidak valid.',
+    'date.now': 'Sekarang',
+    'date.done': 'Selesai',
+    'date.hour': 'Jam',
+    'date.minute': 'Menit',
+    'dateRange.start': 'Tanggal mulai',
+    'dateRange.end': 'Tanggal akhir',
+    'dateRange.startPlaceholder': 'Tanggal mulai',
+    'dateRange.endPlaceholder': 'Tanggal akhir',
+    'dateRange.dialog': 'Pilih rentang tanggal',
+    'dateRange.previousMonth': 'Bulan sebelumnya',
+    'dateRange.nextMonth': 'Bulan berikutnya',
+    'dateRange.presets': 'Rentang cepat',
+    'dateRange.pickStart': 'Pilih tanggal mulai',
+    'dateRange.pickEnd': 'Pilih tanggal akhir',
+    'dateRange.preset.today': 'Hari ini',
+    'dateRange.preset.yesterday': 'Kemarin',
+    'dateRange.preset.last7Days': '7 hari terakhir',
+    'dateRange.preset.last30Days': '30 hari terakhir',
+    'dateRange.preset.thisMonth': 'Bulan ini',
+    'dateRange.preset.lastMonth': 'Bulan lalu',
+    'dateRange.preset.thisYear': 'Tahun ini',
+    'dropdown.noData': 'Tidak ada data',
+    'dropdown.selectAll': 'Pilih Semua',
+    // nxe-file-input, and its errors in nxe-form-field.
+    'uploader.selectFiles': 'Pilih file',
+    'uploader.dropFiles': 'atau seret file ke sini',
+    'uploader.listLabel': 'File terlampir',
+    'uploader.acceptHint': 'Diterima: {0}',
+    'uploader.maxSizeHint': 'Maksimal {0} per file',
+    'uploader.maxFilesHint': 'Maksimal {0} file',
+    'uploader.statusPending': 'Menunggu diunggah',
+    'uploader.statusUploading': 'Mengunggah {0}%',
+    'uploader.statusUploaded': 'Terunggah',
+    'uploader.statusFailed': 'Gagal diunggah',
+    'uploader.uploadingFile': 'Mengunggah {0}',
+    'uploader.uploadFailed': 'Pengunggahan gagal.',
+    'uploader.cancelled': 'Pengunggahan dibatalkan.',
+    'uploader.cancelFile': 'Batalkan pengunggahan {0}',
+    'uploader.retryFile': 'Coba lagi mengunggah {0}',
+    'uploader.removeFile': 'Hapus {0}',
+    'uploader.retry': 'Coba lagi',
+    'uploader.remove': 'Hapus',
+    'uploader.rejectType': '{0} bukan jenis file yang diterima.',
+    'uploader.rejectSize': '{0} lebih besar dari {1}.',
+    'uploader.rejectCount': '{0} melebihi batas {1} file.',
+    'uploader.announceAdded': '{0} ditambahkan',
+    'uploader.announceRemoved': '{0} dihapus',
+    'validation.field.fileType': 'Hanya jenis file berikut yang diterima: {0}.',
+    'validation.field.fileSize': 'Setiap file maksimal {0}.',
+    'validation.field.maxFiles': 'Lampirkan paling banyak {0} file.',
+    'validation.field.uploading': 'Tunggu hingga pengunggahan selesai.',
+    'validation.field.uploadFailed': 'Coba lagi atau hapus file yang gagal diunggah.',
+    // nxe-timeline.
+    'timeline.pending': 'Menunggu',
+    // nxe-stepper.
+    'stepper.listLabel': 'Langkah',
+    'stepper.stepOf': 'Langkah {0} dari {1}: {2}',
+    'stepper.completed': 'Selesai',
+    'stepper.error': 'Ada kesalahan',
+    'stepper.optional': 'Opsional',
+    'stepper.blocked': 'Langkah {0} belum lengkap. Perbaiki kolom yang ditandai untuk melanjutkan.',
+    'notify.close': 'Tutup notifikasi',
+    'shell.skipToContent': 'Lewati ke konten',
+    'shell.mainNavigation': 'Navigasi utama',
+    'shell.toggleNavigation': 'Buka atau tutup navigasi',
+    'shell.closeNavigation': 'Tutup navigasi',
+    'shell.collapseSidebar': 'Ciutkan bilah samping',
+    'shell.expandSidebar': 'Perluas bilah samping',
+    'pivot.grandTotal': 'Total Keseluruhan',
+    'pivot.total': 'Total {0}',
+    'pivot.noData': 'Tidak ada data',
+    'pivot.showFieldChooser': 'Tampilkan Pemilih Field',
+    'pivot.chooser.title': 'Pemilih Field',
+    'pivot.chooser.allFields': 'Semua Field',
+    'pivot.chooser.rowFields': 'Field Baris',
+    'pivot.chooser.columnFields': 'Field Kolom',
+    'pivot.chooser.filterFields': 'Field Filter',
+    'pivot.chooser.dataFields': 'Field Data',
+    'pivot.chooser.checkState': 'Status centang',
+    'pivot.panel.dropFilter': 'Letakkan Field Filter di Sini',
+    'pivot.panel.dropData': 'Letakkan Field Data di Sini',
+    'pivot.panel.dropColumn': 'Letakkan Field Kolom di Sini',
+    'pivot.panel.dropRow': 'Letakkan Field Baris di Sini',
+    'forms.password.show': 'Tampilkan kata sandi',
+    'forms.password.hide': 'Sembunyikan kata sandi',
+    'forms.textArea.charactersLeft': 'Sisa {0} karakter',
+    'forms.textArea.charactersOver': 'Kelebihan {0} karakter dari batas',
+    'forms.numberBox.increase': 'Tambah',
+    'forms.numberBox.decrease': 'Kurangi',
+    'display.noValue': 'Tidak ada nilai',
+    'charts.other': 'Lainnya',
+    'charts.total': 'Total',
+    'charts.empty': 'Tidak ada data untuk ditampilkan',
+    'charts.legend': 'Legenda',
+    'charts.viewAsTable': 'Lihat sebagai tabel',
+    'charts.viewAsChart': 'Lihat sebagai grafik',
+    'charts.navigate': 'Data grafik. Gunakan tombol panah untuk berpindah antar titik, Escape untuk keluar.',
+    'charts.navigateSegments': 'Segmen grafik. Gunakan tombol panah untuk berpindah antar segmen, Escape untuk keluar.',
+    'charts.summary.line': 'Grafik garis, {0} seri, {1} titik dari {2} sampai {3}.',
+    'charts.summary.area': 'Grafik area, {0} seri, {1} titik dari {2} sampai {3}.',
+    'charts.summary.stackedArea': 'Grafik area bertumpuk, {0} seri, {1} titik dari {2} sampai {3}.',
+    'charts.summary.series': '{0}: dari {1} ke {2}, terendah {3}, tertinggi {4}.',
+    'charts.summary.donut': 'Grafik donat, {0} segmen, total {1}.',
+    'charts.summary.segment': '{0}: {1}, {2}.',
+    'charts.table.category': 'Kategori',
+    'charts.table.segment': 'Segmen',
+    'charts.table.value': 'Nilai',
+    'charts.table.share': 'Porsi',
+    'avatar.status.online': 'Aktif',
+    'avatar.status.away': 'Tidak di tempat',
+    'avatar.status.busy': 'Sibuk',
+    'avatar.status.offline': 'Luring',
+    'avatar.more': '{0} lainnya',
+    'breadcrumb.label': 'Jalur navigasi',
+    'breadcrumb.more': 'Tampilkan level tersembunyi',
+};
+
+/**
+ * The library's initial message configuration, provided by {@link provideNxeMessages}. Absent,
+ * the service starts in English with nothing overridden.
+ */
+const NXE_MESSAGES = new InjectionToken('NXE_MESSAGES', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+const BUILT_IN = { en: NXE_MESSAGES_EN, id: NXE_MESSAGES_ID };
+const BUILT_IN_SEPARATORS = {
+    en: NXE_EN_US_SEPARATORS,
+    id: NXE_ID_SEPARATORS,
+};
+/** `'id-ID'` and `'id_ID'` to `'id'`. */
+function languageOf(locale) {
+    return locale.split(/[-_]/)[0].toLowerCase();
+}
+/**
+ * Runtime-switchable messages for every `nxe-*` component.
+ *
+ * State is signals, so a component that reads {@link t} (or {@link messages}) inside a template or
+ * a `computed` re-renders when the language changes: no reload, no recreation. That is also what
+ * makes it safe under zoneless OnPush, because the template's reactive consumer tracks the read.
+ *
+ * ```ts
+ * const messages = inject(NxeMessageService);
+ * messages.use('id');
+ * messages.t('grid.pager.info', 1, 5, 42); // 'Halaman 1 dari 5 (42 item)'
+ * ```
+ */
+class NxeMessageService {
+    config = inject(NXE_MESSAGES);
+    localeState = signal(this.config.locale ?? 'en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localeState" }] : /* istanbul ignore next */ []));
+    customBundle = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customBundle" }] : /* istanbul ignore next */ []));
+    overrideState = signal(this.config.overrides ?? {}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overrideState" }] : /* istanbul ignore next */ []));
+    /** The active locale as the application stated it (`'id'`, `'en-US'`...). */
+    locale = this.localeState.asReadonly();
+    /** The active language (`'id'` for `'id-ID'`); what picks the bundle. */
+    language = computed(() => languageOf(this.localeState()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    /** The bundle in force: English, under the language's bundle, under the overrides. */
+    messages = computed(() => ({
+        ...NXE_MESSAGES_EN,
+        ...(this.customBundle() ?? this.config.bundles?.[this.language()] ?? BUILT_IN[this.language()]),
+        ...this.overrideState(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Separators for the active locale; en-US for a language with none. */
+    separators = computed(() => {
+        const map = typeof this.config.separators === 'object' ? this.config.separators : BUILT_IN_SEPARATORS;
+        return map[this.language()] ?? NXE_EN_US_SEPARATORS;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []));
+    luxonSync = this.config.luxon !== false;
+    luxonBefore = Settings.defaultLocale;
+    constructor() {
+        if (this.luxonSync && this.config.locale) {
+            Settings.defaultLocale = this.config.locale;
+        }
+        inject(DestroyRef).onDestroy(() => {
+            if (this.luxonSync) {
+                Settings.defaultLocale = this.luxonBefore;
+            }
+        });
+    }
+    use(localeOrBundle, locale) {
+        if (typeof localeOrBundle === 'string') {
+            this.customBundle.set(null);
+            this.setLocale(localeOrBundle);
+        }
+        else {
+            this.customBundle.set(localeOrBundle);
+            if (locale) {
+                this.setLocale(locale);
+            }
+        }
+    }
+    /** Layer messages over the active bundle. They merge with earlier overrides and survive {@link use}. */
+    override(messages) {
+        this.overrideState.update((current) => ({ ...current, ...messages }));
+    }
+    /** Drop every override added since bootstrap; the ones in the configuration stay. */
+    clearOverrides() {
+        this.overrideState.set(this.config.overrides ?? {});
+    }
+    /**
+     * One message, with `{0}`, `{1}`... replaced by `args`. Reactive: reading it in a template or a
+     * `computed` subscribes that consumer to the language.
+     */
+    t(key, ...args) {
+        return NxeMessageService.format(this.messages()[key], args);
+    }
+    /** Fill `{n}` placeholders; one without an argument is left as written. */
+    static format(template, args) {
+        return args.length
+            ? template.replace(/\{(\d+)\}/g, (match, index) => Number(index) < args.length ? String(args[Number(index)]) : match)
+            : template;
+    }
+    setLocale(locale) {
+        this.localeState.set(locale);
+        if (this.luxonSync) {
+            Settings.defaultLocale = locale;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMessageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMessageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Registers the library's messages for the application:
+ *
+ * ```ts
+ * provideNxeMessages({ locale: 'id', overrides: { 'grid.noData': 'Belum ada data' } })
+ * ```
+ *
+ * With `separators` set it also provides {@link NXE_NUMBER_SEPARATORS} as a live view of the active
+ * locale's separators, so grids and number boxes go from `1,234.5` to `1.234,5` with the language.
+ */
+function provideNxeMessages(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: NXE_MESSAGES, useValue: config },
+        ...(config.separators
+            ? [
+                {
+                    provide: NXE_NUMBER_SEPARATORS,
+                    useFactory: () => {
+                        const service = inject(NxeMessageService);
+                        return {
+                            get group() {
+                                return service.separators().group;
+                            },
+                            get decimal() {
+                                return service.separators().decimal;
+                            },
+                        };
+                    },
+                },
+            ]
+            : []),
+    ]);
+}
 
 /**
  * Application-wide component defaults.
@@ -70,6 +624,8 @@ class NxeFormControlBase {
     ngZone = inject(NgZone);
     /** Application-wide defaults; each editor resolves `binding ?? this ?? literal`. */
     nxeDefaults = inject(NXE_DEFAULT_OPTIONS);
+    /** The library's runtime-switchable messages; read them in a template or a computed. */
+    nxeMessages = inject(NxeMessageService);
     /**
      * The current value — single source of truth. Two-way bindable as `[(value)]` (DevExtreme
      * parity) and also driven by `writeValue` for `ngModel`/`formControlName`.
@@ -84,7 +640,28 @@ class NxeFormControlBase {
     disabled = computed(() => this.disabledInput() || this.disabledByForm(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Read-only state (DevExtreme `[readOnly]`). */
-    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readOnlyInput = input(false, { ...(ngDevMode ? { debugName: "readOnlyInput" } : /* istanbul ignore next */ {}), alias: 'readOnly', transform: booleanAttribute });
+    /**
+     * Lower-case spelling of {@link readOnlyInput}: it is the name Signal Forms (`[formField]`)
+     * binds a `readonly()` rule to, and the HTML attribute name.
+     */
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly', transform: booleanAttribute });
+    /** Effective read-only state: `readOnly` OR `readonly`. */
+    readOnly = computed(() => this.readOnlyInput() || this.readonlyInput(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    /**
+     * Signal Forms hides a field with `hidden()` and binds it by this name; also usable on its own.
+     * Hides the host, like `visible=false`.
+     */
+    hiddenInput = input(false, { ...(ngDevMode ? { debugName: "hiddenInput" } : /* istanbul ignore next */ {}), alias: 'hidden', transform: booleanAttribute });
+    /**
+     * Signal Forms state, bound by name when the editor carries `[formField]` (and settable by hand).
+     * `invalid` and `errors` put the editor in its invalid state (`nxe-invalid`, `aria-invalid`) once
+     * it is {@link touched}; the message text is `nxe-form-field`'s job.
+     */
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'invalid', transform: booleanAttribute });
+    errorsInput = input(undefined, { ...(ngDevMode ? { debugName: "errorsInput" } : /* istanbul ignore next */ {}), alias: 'errors' });
+    touchedInput = input(false, { ...(ngDevMode ? { debugName: "touchedInput" } : /* istanbul ignore next */ {}), alias: 'touched', transform: booleanAttribute });
     /** Validation group this editor belongs to (its nested `nxe-validator` registers here). */
     validationGroupInput = input(undefined, { ...(ngDevMode ? { debugName: "validationGroupInput" } : /* istanbul ignore next */ {}), alias: 'validationGroup' });
     /**
@@ -120,17 +697,33 @@ class NxeFormControlBase {
      * Set by the validator rather than declared on the editor: the rule is where the requirement
      * is actually stated, and duplicating it as an input would let the two disagree.
      */
-    required = signal(false, /* @ts-ignore */
+    requiredByRule = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "requiredByRule" }] : /* istanbul ignore next */ []));
+    /**
+     * A `required` input, which is what Signal Forms binds a `required()` rule to, so a form that
+     * is not driven by `nxe-validator` can state it too.
+     */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required', transform: booleanAttribute });
+    /** Whether the editor is required: the `required` input OR a nested validator's `required` rule. */
+    required = computed(() => this.requiredInput() || this.requiredByRule(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     setRequired(value) {
-        this.required.set(value);
+        this.requiredByRule.set(value);
     }
     /** The current validation error message (set by a nested `nxe-validator`), or null. */
     validationError = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []));
-    /** Whether the control has been blurred at least once. */
-    touched = signal(false, /* @ts-ignore */
+    touchedByUser = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touchedByUser" }] : /* istanbul ignore next */ []));
+    /** Whether the control has been blurred at least once, or a form says the field was touched. */
+    touched = computed(() => this.touchedByUser() || this.touchedInput(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the editor shows its invalid look: a nested validator's message, or a form's
+     * `invalid`/`errors` once the field is touched (so an untouched, empty required field is not red).
+     */
+    invalidState = computed(() => !!this.validationError() || ((this.invalidInput() || !!this.errorsInput()?.length) && this.touched()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
     /** Whether the value has been changed by the user at least once. */
     dirty = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
@@ -228,6 +821,30 @@ class NxeFormControlBase {
             element: this.element,
         });
     }
+    /**
+     * Commit whatever the user has typed but not yet committed, now and synchronously.
+     *
+     * With the default `valueChangeEvent` a typed value commits on blur, so a programmatic submit
+     * (or anything else that reads the model while the field still has focus) would see the old
+     * value. Call this first. It is a no-op when nothing is pending, so it never emits
+     * `onValueChanged` twice for one change, and it does not blur the field or mark it touched.
+     */
+    commit() {
+        this.commitPending(null);
+    }
+    /** Alias of {@link commit}. */
+    flush() {
+        this.commit();
+    }
+    /**
+     * Editors with text that can be typed but not yet committed override this to commit it through
+     * {@link commitValue}. The default is for editors that commit on every interaction.
+     */
+    commitPending(_event) { }
+    /** Whether Enter in this editor commits the pending text. Multi-line editors narrow it. */
+    commitsOnEnter(_event) {
+        return true;
+    }
     /**
      * Re-emit a native event in dx's shape.
      *
@@ -238,6 +855,14 @@ class NxeFormControlBase {
         const payload = { event, component: this, element: this.element };
         switch (kind) {
             case 'keydown':
+                // Enter is the key that submits an enclosing <form>, and the browser does that as the
+                // default action of this very event. Committing here, before the handlers below and
+                // before the default action runs, is what lets `(ngSubmit)` read the typed value.
+                if (event.key === 'Enter' &&
+                    !event.isComposing &&
+                    this.commitsOnEnter(event)) {
+                    this.commitPending(event);
+                }
                 this.onKeyDown.emit(payload);
                 if (event.key === 'Enter') {
                     this.onEnterKey.emit(payload);
@@ -273,14 +898,14 @@ class NxeFormControlBase {
     }
     /** Mark the control as touched (e.g. on blur), notifying Angular forms exactly once. */
     markAsTouched() {
-        if (this.touched()) {
+        if (this.touchedByUser()) {
             return;
         }
-        this.touched.set(true);
+        this.touchedByUser.set(true);
         this.ngZone.run(() => this._onTouched());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFormControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeFormControlBase, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, validationGroupInput: { classPropertyName: "validationGroupInput", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, valueChangeEvent: { classPropertyName: "valueChangeEvent", publicName: "valueChangeEvent", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, elementAttr: { classPropertyName: "elementAttr", publicName: "elementAttr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChanged: "onValueChanged", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onEnterKey: "onEnterKey", onInput: "onInput", onChange: "onChange", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut" }, host: { listeners: { "keydown": "emitEditorEvent(\"keydown\", $event)", "keyup": "emitEditorEvent(\"keyup\", $event)", "input": "emitEditorEvent(\"input\", $event)", "change": "emitEditorEvent(\"change\", $event)", "focusin": "emitEditorEvent(\"focusin\", $event)", "focusout": "emitEditorEvent(\"focusout\", $event)" }, properties: { "attr.title": "hint() || null", "attr.id": "elementAttrId()", "class": "elementAttrClass()", "style.width": "widthStyle()", "style.display": "visible() ? null : \"none\"", "class.nxe-disabled": "disabled()", "class.nxe-readonly": "readOnly()", "class.nxe-state-readonly": "readOnly()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeFormControlBase, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnlyInput: { classPropertyName: "readOnlyInput", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hiddenInput: { classPropertyName: "hiddenInput", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorsInput: { classPropertyName: "errorsInput", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touchedInput: { classPropertyName: "touchedInput", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, validationGroupInput: { classPropertyName: "validationGroupInput", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, valueChangeEvent: { classPropertyName: "valueChangeEvent", publicName: "valueChangeEvent", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, elementAttr: { classPropertyName: "elementAttr", publicName: "elementAttr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChanged: "onValueChanged", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onEnterKey: "onEnterKey", onInput: "onInput", onChange: "onChange", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut" }, host: { listeners: { "keydown": "emitEditorEvent(\"keydown\", $event)", "keyup": "emitEditorEvent(\"keyup\", $event)", "input": "emitEditorEvent(\"input\", $event)", "change": "emitEditorEvent(\"change\", $event)", "focusin": "emitEditorEvent(\"focusin\", $event)", "focusout": "emitEditorEvent(\"focusout\", $event)" }, properties: { "attr.title": "hint() || null", "attr.id": "elementAttrId()", "class": "elementAttrClass()", "style.width": "widthStyle()", "style.display": "visible() && !hiddenInput() ? null : \"none\"", "class.nxe-disabled": "disabled()", "class.nxe-readonly": "readOnly()", "class.nxe-state-readonly": "readOnly()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFormControlBase, decorators: [{
             type: Directive,
@@ -290,7 +915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         '[attr.id]': 'elementAttrId()',
                         '[class]': 'elementAttrClass()',
                         '[style.width]': 'widthStyle()',
-                        '[style.display]': 'visible() ? null : "none"',
+                        '[style.display]': 'visible() && !hiddenInput() ? null : "none"',
                         // Listened for on the HOST, not on each inner control: these all bubble, so one place
                         // covers every editor and cannot collide with the handlers an editor already binds on
                         // its own input.
@@ -309,7 +934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         '[class.nxe-state-readonly]': 'readOnly()',
                     },
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], validationGroupInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationGroup", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onKeyDown: [{ type: i0.Output, args: ["onKeyDown"] }], onKeyUp: [{ type: i0.Output, args: ["onKeyUp"] }], onEnterKey: [{ type: i0.Output, args: ["onEnterKey"] }], onInput: [{ type: i0.Output, args: ["onInput"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFocusIn: [{ type: i0.Output, args: ["onFocusIn"] }], onFocusOut: [{ type: i0.Output, args: ["onFocusOut"] }], valueChangeEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueChangeEvent", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], elementAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementAttr", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hiddenInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touchedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], validationGroupInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationGroup", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onKeyDown: [{ type: i0.Output, args: ["onKeyDown"] }], onKeyUp: [{ type: i0.Output, args: ["onKeyUp"] }], onEnterKey: [{ type: i0.Output, args: ["onEnterKey"] }], onInput: [{ type: i0.Output, args: ["onInput"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFocusIn: [{ type: i0.Output, args: ["onFocusIn"] }], onFocusOut: [{ type: i0.Output, args: ["onFocusOut"] }], valueChangeEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueChangeEvent", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], elementAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementAttr", required: false }] }] } });
 
 /**
  * Base for no-template nested-option components (see {@link NxeConfigOption}).
@@ -498,6 +1123,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * A byte count as the library writes it in the active language: "512 b", "1.5 Kb", "2.0 Mb" in English,
+ * "512 B", "1,5 KB" in Indonesian (the `uploader.size*` messages). Used by the file input and by the
+ * file-size message of `nxe-form-field`.
+ */
+function nxeFormatFileSize(bytes, messages) {
+    if (bytes < 1024) {
+        return messages.t('uploader.sizeB', bytes);
+    }
+    if (bytes < 1024 * 1024) {
+        return messages.t('uploader.sizeKb', (bytes / 1024).toFixed(1));
+    }
+    return messages.t('uploader.sizeMb', (bytes / 1024 / 1024).toFixed(1));
+}
+
 // @nexterajs/ui — core abstractions shared by every component.
 
 // @nexterajs/ui/core — public API.
@@ -506,5 +1146,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NXE_DEFAULT_OPTIONS, NXE_OPTION, NXE_VALIDATION_GROUP, NXE_VALIDATION_TARGET, NxeConfigOptionBase, NxeFormControlBase, NxeTemplateDirective, NxeValidationGroupRegistry, coerceArray, nxeOptionalBoolean, nxeResolveExpr, nxeResolveText };
+export { NXE_DEFAULT_OPTIONS, NXE_MESSAGES, NXE_MESSAGES_EN, NXE_MESSAGES_ID, NXE_OPTION, NXE_VALIDATION_GROUP, NXE_VALIDATION_TARGET, NxeConfigOptionBase, NxeFormControlBase, NxeMessageService, NxeTemplateDirective, NxeValidationGroupRegistry, coerceArray, nxeFormatFileSize, nxeOptionalBoolean, nxeResolveExpr, nxeResolveText, provideNxeMessages };
 //# sourceMappingURL=nexterajs-ui-core.mjs.map