@devjuliovilla/jv-ui 1.8.0 → 1.10.0

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -18717,9 +18717,135 @@ const JV_UI_DEFAULT_CONFIG = {
     density: 'normal',
     language: 'es-MX',
     locale: 'es',
+    messagesLocale: 'es',
+    formatLocale: 'es-MX',
+    formats: {
+        date: { day: '2-digit', month: '2-digit', year: 'numeric' },
+        time: { hour: '2-digit', minute: '2-digit' },
+        datetime: { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' },
+        integer: { maximumFractionDigits: 0 },
+        number: { minimumFractionDigits: 0, maximumFractionDigits: 2 },
+        currency: { style: 'currency', currency: 'MXN', minimumFractionDigits: 2, maximumFractionDigits: 2 },
+        percent: { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 2 },
+    },
     toastPosition: 'bottom-right',
 };
 
+class JvFormatService {
+    config = inject(JvUiConfigService);
+    formatLocale = signal(this.config.snapshot.formatLocale || this.config.snapshot.language || 'es-MX', ...(ngDevMode ? [{ debugName: "formatLocale" }] : /* istanbul ignore next */ []));
+    formats = signal(this.resolveFormats(this.config.snapshot.formats), ...(ngDevMode ? [{ debugName: "formats" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = computed(() => this.resolveFirstDayOfWeek(this.formatLocale()), ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    initialize() {
+        this.formatLocale.set(this.config.snapshot.formatLocale || this.config.snapshot.language || 'es-MX');
+        this.formats.set(this.resolveFormats(this.config.snapshot.formats));
+    }
+    setFormatLocale(locale) {
+        this.formatLocale.set(locale);
+    }
+    setFormats(formats) {
+        this.formats.update((current) => this.resolveFormats({ ...current, ...formats }));
+    }
+    format(kind, value, overrides) {
+        if (value == null || value === '')
+            return '';
+        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
+            const date = this.toDate(value);
+            if (!date)
+                return String(value);
+            return new Intl.DateTimeFormat(this.formatLocale(), this.resolveDateOptions(kind, overrides)).format(date);
+        }
+        const number = this.toNumber(value);
+        if (number === null)
+            return String(value);
+        return new Intl.NumberFormat(this.formatLocale(), this.resolveNumberOptions(kind, overrides)).format(number);
+    }
+    toComparable(kind, value) {
+        if (value == null || value === '')
+            return null;
+        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
+            const date = this.toDate(value);
+            return date ? date.getTime() : String(value);
+        }
+        if (kind === 'integer' || kind === 'number' || kind === 'currency' || kind === 'percent') {
+            const number = this.toNumber(value);
+            return number ?? String(value);
+        }
+        return String(value);
+    }
+    toDate(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        if (typeof value === 'number' || typeof value === 'string') {
+            const date = new Date(value);
+            return Number.isNaN(date.getTime()) ? null : date;
+        }
+        return null;
+    }
+    toNumber(value) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : null;
+        }
+        if (typeof value === 'string') {
+            const normalized = value.trim().replace(/[%,$\s]/g, '').replace(/,/g, '');
+            if (!normalized)
+                return null;
+            const parsed = Number(normalized);
+            return Number.isFinite(parsed) ? parsed : null;
+        }
+        return null;
+    }
+    toSearchValue(kind, value) {
+        if (value == null)
+            return '';
+        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
+            const date = this.toDate(value);
+            if (!date)
+                return String(value).toLowerCase();
+            return date.toISOString().toLowerCase();
+        }
+        return String(value).toLowerCase();
+    }
+    resolveFormats(formats) {
+        const defaults = this.config.snapshot.formats;
+        return {
+            date: { ...defaults.date, ...formats?.date },
+            time: { ...defaults.time, ...formats?.time },
+            datetime: { ...defaults.datetime, ...formats?.datetime },
+            integer: { ...defaults.integer, ...formats?.integer },
+            number: { ...defaults.number, ...formats?.number },
+            currency: { ...defaults.currency, ...formats?.currency },
+            percent: { ...defaults.percent, ...formats?.percent },
+        };
+    }
+    resolveDateOptions(kind, overrides) {
+        return { ...this.formats()[kind], ...overrides };
+    }
+    resolveNumberOptions(kind, overrides) {
+        return { ...this.formats()[kind], ...overrides };
+    }
+    resolveFirstDayOfWeek(locale) {
+        try {
+            const intlLocale = new Intl.Locale(locale);
+            const firstDay = intlLocale.weekInfo?.firstDay;
+            if (typeof firstDay === 'number') {
+                return firstDay % 7;
+            }
+        }
+        catch {
+            // Ignore unsupported Intl.Locale implementations.
+        }
+        return 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class JvThemeService {
     document = inject(DOCUMENT);
     config = inject(JvUiConfigService);
@@ -18810,6 +18936,7 @@ function provideJvUi(config = {}) {
             useValue: () => {
                 inject(JvThemeService).initialize();
                 inject(JvTranslationService).initialize();
+                inject(JvFormatService).initialize();
             },
         },
     ]);
@@ -18817,9 +18944,19 @@ function provideJvUi(config = {}) {
 
 class JvUiConfigService {
     defaults = inject(JV_UI_CONFIG_DEFAULTS);
-    configLayers = inject(JV_UI_CONFIG, { optional: true }) ?? [];
+    configLayers = (inject(JV_UI_CONFIG, { optional: true }) ?? []);
     get snapshot() {
-        return this.configLayers.reduce((merged, layer) => ({ ...merged, ...layer }), { ...this.defaults });
+        return this.configLayers.reduce((merged, layer) => ({
+            ...merged,
+            ...layer,
+            formats: {
+                ...merged.formats,
+                ...(layer.formats ?? {}),
+            },
+        }), {
+            ...this.defaults,
+            formats: { ...this.defaults.formats },
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, providedIn: 'root' });
@@ -18878,6 +19015,15 @@ const ES = {
     'modalSelector.results': '{count} resultados',
     'modalSelector.selected': '{label} seleccionado',
     'modalSelector.selectionCleared': 'Seleccion limpiada',
+    'fileInput.dropLabel': 'Arrastre archivos aqui o haga clic para seleccionarlos',
+    'fileInput.helperText': 'Compatible con seleccion multiple y arrastrar y soltar',
+    'fileInput.selectionSummary': '{count} de {max} archivos seleccionados',
+    'fileInput.invalidFiles': '{count} archivos no coinciden con el tipo permitido',
+    'fileInput.tooManyFiles': 'Solo se permiten hasta {max} archivos',
+    'fileInput.removeFile': 'Quitar archivo {name}',
+    'dialog.confirmTitle': 'Confirmar',
+    'dialog.confirm': 'Aceptar',
+    'dialog.cancel': 'Cancelar',
     'common.expanded': 'Expandido',
     'common.collapsed': 'Colapsado',
 };
@@ -18931,6 +19077,15 @@ const EN = {
     'modalSelector.results': '{count} results',
     'modalSelector.selected': '{label} selected',
     'modalSelector.selectionCleared': 'Selection cleared',
+    'fileInput.dropLabel': 'Drag files here or click to choose them',
+    'fileInput.helperText': 'Supports multiple selection and drag and drop',
+    'fileInput.selectionSummary': '{count} of {max} files selected',
+    'fileInput.invalidFiles': '{count} files do not match the allowed type',
+    'fileInput.tooManyFiles': 'Only up to {max} files are allowed',
+    'fileInput.removeFile': 'Remove file {name}',
+    'dialog.confirmTitle': 'Confirm',
+    'dialog.confirm': 'Confirm',
+    'dialog.cancel': 'Cancel',
     'common.expanded': 'Expanded',
     'common.collapsed': 'Collapsed',
 };
@@ -18943,14 +19098,17 @@ const JV_DEFAULT_LOCALE = 'es';
 
 class JvTranslationService {
     config = inject(JvUiConfigService);
-    locale = signal(this.config.snapshot.locale, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    locale = signal(this.resolveLocale(this.config.snapshot.messagesLocale ?? this.config.snapshot.locale), ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     initialize() {
-        const locale = this.resolveLocale(this.config.snapshot.locale);
+        const locale = this.resolveLocale(this.config.snapshot.messagesLocale ?? this.config.snapshot.locale);
         this.locale.set(locale);
     }
     setLocale(locale) {
         this.locale.set(locale);
     }
+    setMessagesLocale(locale) {
+        this.setLocale(locale);
+    }
     translate(key, params) {
         const dict = JV_LOCALE_DICTIONARIES[this.locale()] ?? JV_LOCALE_DICTIONARIES[JV_DEFAULT_LOCALE];
         let value = dict[key];
@@ -18965,6 +19123,8 @@ class JvTranslationService {
         return value;
     }
     resolveLocale(locale) {
+        if (!locale)
+            return JV_DEFAULT_LOCALE;
         if (locale === 'es' || locale === 'en')
             return locale;
         return locale.startsWith('es') ? 'es' : 'en';
@@ -19312,7 +19472,7 @@ class JvLoaderComponent {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);color:var(--jv-color-foreground)}.spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] });
+  `, isInline: true, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);width:min(35vw,calc(100vw - 2rem));height:min(35vh,calc(100vh - 2rem));max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);justify-content:center;border:1px solid #d6dce5;border-radius:var(--jv-radius-lg);background:#f8fafc;box-shadow:var(--jv-shadow-lg);color:#111827;text-align:center;forced-color-adjust:none}.spinner{width:1.25rem;height:1.25rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@media(forced-colors:active){.jv-loader-panel{border-color:#d6dce5;background:#f8fafc;color:#111827}}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderComponent, decorators: [{
             type: Component,
@@ -19325,7 +19485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       </div>
     }
-  `, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);color:var(--jv-color-foreground)}.spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] }]
+  `, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);width:min(35vw,calc(100vw - 2rem));height:min(35vh,calc(100vh - 2rem));max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);justify-content:center;border:1px solid #d6dce5;border-radius:var(--jv-radius-lg);background:#f8fafc;box-shadow:var(--jv-shadow-lg);color:#111827;text-align:center;forced-color-adjust:none}.spinner{width:1.25rem;height:1.25rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@media(forced-colors:active){.jv-loader-panel{border-color:#d6dce5;background:#f8fafc;color:#111827}}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { handleWheel: [{
                 type: HostListener,
                 args: ['document:wheel', ['$event']]
@@ -19420,6 +19580,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [".jv-toast-viewport{position:fixed;z-index:1100;display:grid;gap:var(--jv-spacing-sm);width:min(360px,calc(100vw - 2rem))}.is-top-left{top:1rem;left:1rem}.is-top-center{top:1rem;left:50%;transform:translate(-50%)}.is-top-right{top:1rem;right:1rem}.is-bottom-left{bottom:1rem;left:1rem}.is-bottom-center{bottom:1rem;left:50%;transform:translate(-50%)}.is-bottom-right{bottom:1rem;right:1rem}.jv-toast-item{display:grid;grid-template-columns:1fr auto;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-toast-copy strong,.jv-toast-copy p{margin:0}.jv-toast-copy{display:grid;gap:.25rem}.jv-toast-copy p{color:var(--jv-color-foreground-muted)}.jv-toast-close{display:inline-grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:999px;background:transparent;color:inherit}.jv-toast--success{border-color:color-mix(in srgb,var(--jv-color-success) 35%,var(--jv-color-border))}.jv-toast--warning{border-color:color-mix(in srgb,var(--jv-color-warning) 35%,var(--jv-color-border))}.jv-toast--danger{border-color:color-mix(in srgb,var(--jv-color-danger) 35%,var(--jv-color-border))}.jv-toast--info,.jv-toast--primary{border-color:color-mix(in srgb,var(--jv-color-primary) 35%,var(--jv-color-border))}\n"] }]
         }] });
 
+class JvCodeComponent {
+    code = input.required(...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    language = input('', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    font = input('jetbrains-mono', ...(ngDevMode ? [{ debugName: "font" }] : /* istanbul ignore next */ []));
+    editable = input(false, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input('auto', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    codeChange = output();
+    fontFamily = computed(() => {
+        switch (this.font()) {
+            case 'fira-code':
+                return `'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace`;
+            case 'cascadia':
+                return `'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace`;
+            case 'consolas':
+                return `'Consolas', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', monospace`;
+            case 'system':
+                return `ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace`;
+            default:
+                return `'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "fontFamily" }] : /* istanbul ignore next */ []));
+    languageLabel() {
+        return this.language().trim();
+    }
+    handleInput(event) {
+        this.codeChange.emit(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvCodeComponent, isStandalone: true, selector: "jv-code", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { codeChange: "codeChange" }, ngImport: i0, template: `
+    <section
+      class="jv-code"
+      [style.--jv-code-font-family]="fontFamily()"
+      [style.width]="width()"
+      role="region"
+      [attr.aria-label]="title() || languageLabel() || 'Code block'"
+    >
+      @if (title() || languageLabel()) {
+        <header class="jv-code-header">
+          @if (title()) {
+            <span class="jv-code-title">{{ title() }}</span>
+          }
+
+          @if (languageLabel()) {
+            <span class="jv-code-language">{{ languageLabel() }}</span>
+          }
+        </header>
+      }
+
+      @if (editable()) {
+        <div class="jv-code-body">
+          <textarea
+            class="jv-code-editor"
+            [value]="code()"
+            [style.height]="height()"
+            spellcheck="false"
+            (input)="handleInput($event)"
+          ></textarea>
+        </div>
+      } @else {
+        <div class="jv-code-scroll">
+          <pre class="jv-code-pre" [style.min-height]="height() === 'auto' ? null : height()"><code>{{ code() }}</code></pre>
+        </div>
+      }
+    </section>
+  `, isInline: true, styles: [".jv-code{display:grid;gap:0;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:color-mix(in srgb,var(--jv-color-surface-muted) 60%,#0f172a 40%);color:#e5eefb;overflow:hidden}.jv-code-body{min-width:0}.jv-code-header{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-sm) var(--jv-spacing-md);border-bottom:1px solid rgba(148,163,184,.22);background:#0f172ae0}.jv-code-title{font-size:.875rem;font-weight:600;color:#f8fafc}.jv-code-language{display:inline-flex;align-items:center;min-height:1.75rem;padding:0 .65rem;border:1px solid rgba(125,211,252,.28);border-radius:999px;background:#0ea5e924;color:#c4f1ff;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.jv-code-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.jv-code-scroll:hover,.jv-code-scroll:focus-within{scrollbar-color:rgba(148,163,184,.7) transparent}.jv-code-scroll::-webkit-scrollbar{height:.45rem}.jv-code-scroll::-webkit-scrollbar-track{background:transparent}.jv-code-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:transparent}.jv-code-scroll:hover::-webkit-scrollbar-thumb,.jv-code-scroll:focus-within::-webkit-scrollbar-thumb{background:#94a3b8b8}.jv-code-pre{margin:0;min-width:max-content;padding:var(--jv-spacing-md);font-family:var(--jv-code-font-family, \"JetBrains Mono\", \"Fira Code\", \"Cascadia Code\", \"Consolas\", monospace);font-size:.875rem;line-height:1.6;white-space:pre}.jv-code-editor{display:block;width:100%;min-width:100%;min-height:12rem;padding:var(--jv-spacing-md);border:0;background:transparent;color:inherit;font-family:var(--jv-code-font-family, \"JetBrains Mono\", \"Fira Code\", \"Cascadia Code\", \"Consolas\", monospace);font-size:.875rem;line-height:1.6;white-space:pre;overflow:auto;resize:both;box-sizing:border-box}.jv-code-editor:focus{outline:2px solid color-mix(in srgb,#7dd3fc 70%,transparent);outline-offset:-2px}code{font:inherit}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-code', standalone: true, template: `
+    <section
+      class="jv-code"
+      [style.--jv-code-font-family]="fontFamily()"
+      [style.width]="width()"
+      role="region"
+      [attr.aria-label]="title() || languageLabel() || 'Code block'"
+    >
+      @if (title() || languageLabel()) {
+        <header class="jv-code-header">
+          @if (title()) {
+            <span class="jv-code-title">{{ title() }}</span>
+          }
+
+          @if (languageLabel()) {
+            <span class="jv-code-language">{{ languageLabel() }}</span>
+          }
+        </header>
+      }
+
+      @if (editable()) {
+        <div class="jv-code-body">
+          <textarea
+            class="jv-code-editor"
+            [value]="code()"
+            [style.height]="height()"
+            spellcheck="false"
+            (input)="handleInput($event)"
+          ></textarea>
+        </div>
+      } @else {
+        <div class="jv-code-scroll">
+          <pre class="jv-code-pre" [style.min-height]="height() === 'auto' ? null : height()"><code>{{ code() }}</code></pre>
+        </div>
+      }
+    </section>
+  `, styles: [".jv-code{display:grid;gap:0;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:color-mix(in srgb,var(--jv-color-surface-muted) 60%,#0f172a 40%);color:#e5eefb;overflow:hidden}.jv-code-body{min-width:0}.jv-code-header{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-sm) var(--jv-spacing-md);border-bottom:1px solid rgba(148,163,184,.22);background:#0f172ae0}.jv-code-title{font-size:.875rem;font-weight:600;color:#f8fafc}.jv-code-language{display:inline-flex;align-items:center;min-height:1.75rem;padding:0 .65rem;border:1px solid rgba(125,211,252,.28);border-radius:999px;background:#0ea5e924;color:#c4f1ff;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.jv-code-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.jv-code-scroll:hover,.jv-code-scroll:focus-within{scrollbar-color:rgba(148,163,184,.7) transparent}.jv-code-scroll::-webkit-scrollbar{height:.45rem}.jv-code-scroll::-webkit-scrollbar-track{background:transparent}.jv-code-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:transparent}.jv-code-scroll:hover::-webkit-scrollbar-thumb,.jv-code-scroll:focus-within::-webkit-scrollbar-thumb{background:#94a3b8b8}.jv-code-pre{margin:0;min-width:max-content;padding:var(--jv-spacing-md);font-family:var(--jv-code-font-family, \"JetBrains Mono\", \"Fira Code\", \"Cascadia Code\", \"Consolas\", monospace);font-size:.875rem;line-height:1.6;white-space:pre}.jv-code-editor{display:block;width:100%;min-width:100%;min-height:12rem;padding:var(--jv-spacing-md);border:0;background:transparent;color:inherit;font-family:var(--jv-code-font-family, \"JetBrains Mono\", \"Fira Code\", \"Cascadia Code\", \"Consolas\", monospace);font-size:.875rem;line-height:1.6;white-space:pre;overflow:auto;resize:both;box-sizing:border-box}.jv-code-editor:focus{outline:2px solid color-mix(in srgb,#7dd3fc 70%,transparent);outline-offset:-2px}code{font:inherit}\n"] }]
+        }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], font: [{ type: i0.Input, args: [{ isSignal: true, alias: "font", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], codeChange: [{ type: i0.Output, args: ["codeChange"] }] } });
+
 class JvDialogComponent {
     document = inject(DOCUMENT);
     panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
@@ -19634,6 +19903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 let datePickerIdSequence = 0;
 class JvDatePickerComponent {
     translation = inject(JvTranslationService);
+    formatService = inject(JvFormatService);
     announcementService = inject(JvAnnouncementService);
     instanceId = ++datePickerIdSequence;
     calendarRootRef = viewChild('calendarRoot', ...(ngDevMode ? [{ debugName: "calendarRootRef" }] : /* istanbul ignore next */ []));
@@ -19666,14 +19936,10 @@ class JvDatePickerComponent {
         if (!value) {
             return this.placeholder() || this.translation.translate('datePicker.placeholder');
         }
-        return new Intl.DateTimeFormat(this.translation.locale(), {
-            day: '2-digit',
-            month: '2-digit',
-            year: 'numeric',
-        }).format(value);
+        return this.formatService.format('date', value);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     monthOptions = computed(() => {
-        const formatter = new Intl.DateTimeFormat(this.translation.locale(), { month: 'long' });
+        const formatter = new Intl.DateTimeFormat(this.formatService.formatLocale(), { month: 'long' });
         return Array.from({ length: 12 }, (_, month) => ({
             label: capitalize(formatter.format(new Date(2026, month, 1))),
             value: String(month),
@@ -19687,7 +19953,7 @@ class JvDatePickerComponent {
     }, ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
     weekdayLabels = computed(() => {
         const startDay = this.firstDayOfWeek();
-        const formatter = new Intl.DateTimeFormat(this.translation.locale(), { weekday: 'short' });
+        const formatter = new Intl.DateTimeFormat(this.formatService.formatLocale(), { weekday: 'short' });
         return Array.from({ length: 7 }, (_, index) => capitalize(formatter.format(addDays(new Date(2026, 5, 7), startDay + index))));
     }, ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
     calendarCells = computed(() => {
@@ -19829,10 +20095,10 @@ class JvDatePickerComponent {
         root?.querySelector(`[data-jv-date="${this.isoDate(date)}"]`)?.focus();
     }
     firstDayOfWeek() {
-        return this.translation.locale() === 'es' ? 1 : 0;
+        return this.formatService.firstDayOfWeek();
     }
     displayDateForAnnouncement(date) {
-        return new Intl.DateTimeFormat(this.translation.locale(), {
+        return new Intl.DateTimeFormat(this.formatService.formatLocale(), {
             weekday: 'long',
             day: 'numeric',
             month: 'long',
@@ -19846,83 +20112,83 @@ class JvDatePickerComponent {
                 useExisting: forwardRef(() => JvDatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "calendarRootRef", first: true, predicate: ["calendarRoot"], descendants: true, isSignal: true }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <jv-form-container
-      [label]="label()"
-      [inputId]="inputId()"
-      [required]="required()"
-      [invalid]="invalid()"
-      [hint]="hint()"
-      [error]="error()"
-    >
-      <button
-        #triggerButton
-        type="button"
-        class="jv-date-picker-trigger"
-        [class.is-invalid]="invalid()"
-        [id]="inputId()"
-        [disabled]="disabled"
-        [attr.aria-haspopup]="'dialog'"
-        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
-        [attr.aria-controls]="dialogId"
-        [attr.aria-invalid]="invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy() || null"
-        [attr.aria-label]="triggerAriaLabel()"
-        [attr.title]="displayValue()"
-        (click)="openDialog()"
-        (blur)="handleBlur()"
-      >
-        <span [class.jv-date-picker-placeholder]="!currentValue()">{{ displayValue() }}</span>
-        <jv-icon name="calendar-days" [size]="18" />
-      </button>
-    </jv-form-container>
-
-    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
-      <div #calendarRoot [id]="dialogId" class="jv-date-picker-dialog">
-        <div class="jv-date-picker-toolbar">
-          <jv-icon-button icon="chevron-left" variant="ghost" [ariaLabel]="translation.translate('datePicker.prevMonth')" (click)="shiftMonth(-1)" />
-
-          <div class="jv-date-picker-selects">
-            <jv-select [options]="monthOptions()" [modelValue]="visibleMonth().getMonth().toString()" (selectionChange)="handleMonthChange($event)" />
-            <jv-select [options]="yearOptions()" [modelValue]="visibleMonth().getFullYear().toString()" (selectionChange)="handleYearChange($event)" />
-          </div>
-
-          <jv-icon-button icon="chevron-right" variant="ghost" [ariaLabel]="translation.translate('datePicker.nextMonth')" (click)="shiftMonth(1)" />
-        </div>
-
-        <div class="jv-date-picker-weekdays" aria-hidden="true">
-          @for (weekday of weekdayLabels(); track weekday) {
-            <span>{{ weekday }}</span>
-          }
-        </div>
-
-        <div class="jv-date-picker-grid" role="grid" [attr.aria-label]="resolvedDialogTitle()">
-          @for (cell of calendarCells(); track isoDate(cell.date)) {
-            <button
-              type="button"
-              class="jv-date-picker-day"
-              [class.jv-date-picker-day--outside]="!cell.currentMonth"
-              [class.jv-date-picker-day--today]="cell.isToday"
-              [class.jv-date-picker-day--selected]="isSelected(cell.date)"
-              [attr.data-jv-date]="isoDate(cell.date)"
-              [attr.tabindex]="isFocusedDate(cell.date) ? 0 : -1"
-              [attr.aria-selected]="isSelected(cell.date) ? 'true' : 'false'"
-              (click)="selectDate(cell.date)"
-              (keydown)="handleDayKeydown($event, cell.date)"
-            >
-              {{ cell.date.getDate() }}
-            </button>
-          }
-        </div>
-      </div>
-
-      <div dialog-actions class="jv-date-picker-actions">
-        @if (currentValue()) {
-          <jv-button variant="ghost" (click)="clearSelection()">{{ translation.translate('datePicker.clear') }}</jv-button>
-        }
-        <jv-button variant="outline" (click)="closeDialog()">{{ translation.translate('datePicker.close') }}</jv-button>
-      </div>
-    </jv-dialog>
+        ], viewQueries: [{ propertyName: "calendarRootRef", first: true, predicate: ["calendarRoot"], descendants: true, isSignal: true }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <button
+        #triggerButton
+        type="button"
+        class="jv-date-picker-trigger"
+        [class.is-invalid]="invalid()"
+        [id]="inputId()"
+        [disabled]="disabled"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-label]="triggerAriaLabel()"
+        [attr.title]="displayValue()"
+        (click)="openDialog()"
+        (blur)="handleBlur()"
+      >
+        <span [class.jv-date-picker-placeholder]="!currentValue()">{{ displayValue() }}</span>
+        <jv-icon name="calendar-days" [size]="18" />
+      </button>
+    </jv-form-container>
+
+    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+      <div #calendarRoot [id]="dialogId" class="jv-date-picker-dialog">
+        <div class="jv-date-picker-toolbar">
+          <jv-icon-button icon="chevron-left" variant="ghost" [ariaLabel]="translation.translate('datePicker.prevMonth')" (click)="shiftMonth(-1)" />
+
+          <div class="jv-date-picker-selects">
+            <jv-select [options]="monthOptions()" [modelValue]="visibleMonth().getMonth().toString()" (selectionChange)="handleMonthChange($event)" />
+            <jv-select [options]="yearOptions()" [modelValue]="visibleMonth().getFullYear().toString()" (selectionChange)="handleYearChange($event)" />
+          </div>
+
+          <jv-icon-button icon="chevron-right" variant="ghost" [ariaLabel]="translation.translate('datePicker.nextMonth')" (click)="shiftMonth(1)" />
+        </div>
+
+        <div class="jv-date-picker-weekdays" aria-hidden="true">
+          @for (weekday of weekdayLabels(); track weekday) {
+            <span>{{ weekday }}</span>
+          }
+        </div>
+
+        <div class="jv-date-picker-grid" role="grid" [attr.aria-label]="resolvedDialogTitle()">
+          @for (cell of calendarCells(); track isoDate(cell.date)) {
+            <button
+              type="button"
+              class="jv-date-picker-day"
+              [class.jv-date-picker-day--outside]="!cell.currentMonth"
+              [class.jv-date-picker-day--today]="cell.isToday"
+              [class.jv-date-picker-day--selected]="isSelected(cell.date)"
+              [attr.data-jv-date]="isoDate(cell.date)"
+              [attr.tabindex]="isFocusedDate(cell.date) ? 0 : -1"
+              [attr.aria-selected]="isSelected(cell.date) ? 'true' : 'false'"
+              (click)="selectDate(cell.date)"
+              (keydown)="handleDayKeydown($event, cell.date)"
+            >
+              {{ cell.date.getDate() }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <div dialog-actions class="jv-date-picker-actions">
+        @if (currentValue()) {
+          <jv-button variant="ghost" (click)="clearSelection()">{{ translation.translate('datePicker.clear') }}</jv-button>
+        }
+        <jv-button variant="outline" (click)="closeDialog()">{{ translation.translate('datePicker.close') }}</jv-button>
+      </div>
+    </jv-dialog>
   `, isInline: true, styles: [".jv-date-picker-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-date-picker-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-date-picker-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-date-picker-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-placeholder{color:var(--jv-color-foreground-muted)}.jv-date-picker-dialog,.jv-date-picker-actions{display:grid;gap:var(--jv-spacing-md)}.jv-date-picker-toolbar,.jv-date-picker-selects,.jv-date-picker-weekdays,.jv-date-picker-grid{display:grid;gap:var(--jv-spacing-sm)}.jv-date-picker-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-date-picker-selects{grid-template-columns:1fr 1fr}.jv-date-picker-weekdays,.jv-date-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-date-picker-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-date-picker-day{min-height:2.5rem;border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-date-picker-day:hover,.jv-date-picker-day:focus-visible{background:var(--jv-color-surface-muted)}.jv-date-picker-day:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-day--outside{color:var(--jv-color-foreground-muted)}.jv-date-picker-day--today{border-color:var(--jv-color-primary)}.jv-date-picker-day--selected{background:var(--jv-color-primary);color:#fff}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvIconButtonComponent, selector: "jv-icon-button", inputs: ["icon", "ariaLabel", "variant", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDatePickerComponent, decorators: [{
@@ -19933,83 +20199,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => JvDatePickerComponent),
                             multi: true,
                         },
-                    ], template: `
-    <jv-form-container
-      [label]="label()"
-      [inputId]="inputId()"
-      [required]="required()"
-      [invalid]="invalid()"
-      [hint]="hint()"
-      [error]="error()"
-    >
-      <button
-        #triggerButton
-        type="button"
-        class="jv-date-picker-trigger"
-        [class.is-invalid]="invalid()"
-        [id]="inputId()"
-        [disabled]="disabled"
-        [attr.aria-haspopup]="'dialog'"
-        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
-        [attr.aria-controls]="dialogId"
-        [attr.aria-invalid]="invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy() || null"
-        [attr.aria-label]="triggerAriaLabel()"
-        [attr.title]="displayValue()"
-        (click)="openDialog()"
-        (blur)="handleBlur()"
-      >
-        <span [class.jv-date-picker-placeholder]="!currentValue()">{{ displayValue() }}</span>
-        <jv-icon name="calendar-days" [size]="18" />
-      </button>
-    </jv-form-container>
-
-    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
-      <div #calendarRoot [id]="dialogId" class="jv-date-picker-dialog">
-        <div class="jv-date-picker-toolbar">
-          <jv-icon-button icon="chevron-left" variant="ghost" [ariaLabel]="translation.translate('datePicker.prevMonth')" (click)="shiftMonth(-1)" />
-
-          <div class="jv-date-picker-selects">
-            <jv-select [options]="monthOptions()" [modelValue]="visibleMonth().getMonth().toString()" (selectionChange)="handleMonthChange($event)" />
-            <jv-select [options]="yearOptions()" [modelValue]="visibleMonth().getFullYear().toString()" (selectionChange)="handleYearChange($event)" />
-          </div>
-
-          <jv-icon-button icon="chevron-right" variant="ghost" [ariaLabel]="translation.translate('datePicker.nextMonth')" (click)="shiftMonth(1)" />
-        </div>
-
-        <div class="jv-date-picker-weekdays" aria-hidden="true">
-          @for (weekday of weekdayLabels(); track weekday) {
-            <span>{{ weekday }}</span>
-          }
-        </div>
-
-        <div class="jv-date-picker-grid" role="grid" [attr.aria-label]="resolvedDialogTitle()">
-          @for (cell of calendarCells(); track isoDate(cell.date)) {
-            <button
-              type="button"
-              class="jv-date-picker-day"
-              [class.jv-date-picker-day--outside]="!cell.currentMonth"
-              [class.jv-date-picker-day--today]="cell.isToday"
-              [class.jv-date-picker-day--selected]="isSelected(cell.date)"
-              [attr.data-jv-date]="isoDate(cell.date)"
-              [attr.tabindex]="isFocusedDate(cell.date) ? 0 : -1"
-              [attr.aria-selected]="isSelected(cell.date) ? 'true' : 'false'"
-              (click)="selectDate(cell.date)"
-              (keydown)="handleDayKeydown($event, cell.date)"
-            >
-              {{ cell.date.getDate() }}
-            </button>
-          }
-        </div>
-      </div>
-
-      <div dialog-actions class="jv-date-picker-actions">
-        @if (currentValue()) {
-          <jv-button variant="ghost" (click)="clearSelection()">{{ translation.translate('datePicker.clear') }}</jv-button>
-        }
-        <jv-button variant="outline" (click)="closeDialog()">{{ translation.translate('datePicker.close') }}</jv-button>
-      </div>
-    </jv-dialog>
+                    ], template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <button
+        #triggerButton
+        type="button"
+        class="jv-date-picker-trigger"
+        [class.is-invalid]="invalid()"
+        [id]="inputId()"
+        [disabled]="disabled"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-label]="triggerAriaLabel()"
+        [attr.title]="displayValue()"
+        (click)="openDialog()"
+        (blur)="handleBlur()"
+      >
+        <span [class.jv-date-picker-placeholder]="!currentValue()">{{ displayValue() }}</span>
+        <jv-icon name="calendar-days" [size]="18" />
+      </button>
+    </jv-form-container>
+
+    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+      <div #calendarRoot [id]="dialogId" class="jv-date-picker-dialog">
+        <div class="jv-date-picker-toolbar">
+          <jv-icon-button icon="chevron-left" variant="ghost" [ariaLabel]="translation.translate('datePicker.prevMonth')" (click)="shiftMonth(-1)" />
+
+          <div class="jv-date-picker-selects">
+            <jv-select [options]="monthOptions()" [modelValue]="visibleMonth().getMonth().toString()" (selectionChange)="handleMonthChange($event)" />
+            <jv-select [options]="yearOptions()" [modelValue]="visibleMonth().getFullYear().toString()" (selectionChange)="handleYearChange($event)" />
+          </div>
+
+          <jv-icon-button icon="chevron-right" variant="ghost" [ariaLabel]="translation.translate('datePicker.nextMonth')" (click)="shiftMonth(1)" />
+        </div>
+
+        <div class="jv-date-picker-weekdays" aria-hidden="true">
+          @for (weekday of weekdayLabels(); track weekday) {
+            <span>{{ weekday }}</span>
+          }
+        </div>
+
+        <div class="jv-date-picker-grid" role="grid" [attr.aria-label]="resolvedDialogTitle()">
+          @for (cell of calendarCells(); track isoDate(cell.date)) {
+            <button
+              type="button"
+              class="jv-date-picker-day"
+              [class.jv-date-picker-day--outside]="!cell.currentMonth"
+              [class.jv-date-picker-day--today]="cell.isToday"
+              [class.jv-date-picker-day--selected]="isSelected(cell.date)"
+              [attr.data-jv-date]="isoDate(cell.date)"
+              [attr.tabindex]="isFocusedDate(cell.date) ? 0 : -1"
+              [attr.aria-selected]="isSelected(cell.date) ? 'true' : 'false'"
+              (click)="selectDate(cell.date)"
+              (keydown)="handleDayKeydown($event, cell.date)"
+            >
+              {{ cell.date.getDate() }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <div dialog-actions class="jv-date-picker-actions">
+        @if (currentValue()) {
+          <jv-button variant="ghost" (click)="clearSelection()">{{ translation.translate('datePicker.clear') }}</jv-button>
+        }
+        <jv-button variant="outline" (click)="closeDialog()">{{ translation.translate('datePicker.close') }}</jv-button>
+      </div>
+    </jv-dialog>
   `, styles: [".jv-date-picker-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-date-picker-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-date-picker-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-date-picker-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-placeholder{color:var(--jv-color-foreground-muted)}.jv-date-picker-dialog,.jv-date-picker-actions{display:grid;gap:var(--jv-spacing-md)}.jv-date-picker-toolbar,.jv-date-picker-selects,.jv-date-picker-weekdays,.jv-date-picker-grid{display:grid;gap:var(--jv-spacing-sm)}.jv-date-picker-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-date-picker-selects{grid-template-columns:1fr 1fr}.jv-date-picker-weekdays,.jv-date-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-date-picker-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-date-picker-day{min-height:2.5rem;border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-date-picker-day:hover,.jv-date-picker-day:focus-visible{background:var(--jv-color-surface-muted)}.jv-date-picker-day:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-day--outside{color:var(--jv-color-foreground-muted)}.jv-date-picker-day--today{border-color:var(--jv-color-primary)}.jv-date-picker-day--selected{background:var(--jv-color-primary);color:#fff}\n"] }]
         }], propDecorators: { calendarRootRef: [{ type: i0.ViewChild, args: ['calendarRoot', { isSignal: true }] }], triggerButtonRef: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 function daysInMonth(year, month) {
@@ -20034,6 +20300,297 @@ function capitalize(value) {
     return value.charAt(0).toUpperCase() + value.slice(1);
 }
 
+let fileInputIdSequence = 0;
+class JvFileInputComponent {
+    translation = inject(JvTranslationService);
+    instanceId = ++fileInputIdSequence;
+    nativeInputRef = viewChild('nativeInput', ...(ngDevMode ? [{ debugName: "nativeInputRef" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    describedBy = input('', ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    inputId = input(`jv-file-input-${this.instanceId}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    maxFiles = input(10, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    filesInput = input(undefined, { ...(ngDevMode ? { debugName: "filesInput" } : /* istanbul ignore next */ {}), alias: 'files' });
+    filesChange = output();
+    filesRejected = output();
+    dragActive = signal(false, ...(ngDevMode ? [{ debugName: "dragActive" }] : /* istanbul ignore next */ []));
+    rejectionMessage = signal('', ...(ngDevMode ? [{ debugName: "rejectionMessage" }] : /* istanbul ignore next */ []));
+    internalFiles = signal([], ...(ngDevMode ? [{ debugName: "internalFiles" }] : /* istanbul ignore next */ []));
+    currentFiles = computed(() => {
+        const externalFiles = this.filesInput();
+        return externalFiles !== undefined ? [...(externalFiles ?? [])] : this.internalFiles();
+    }, ...(ngDevMode ? [{ debugName: "currentFiles" }] : /* istanbul ignore next */ []));
+    selectionSummary = computed(() => this.translation.translate('fileInput.selectionSummary', { count: this.currentFiles().length, max: this.maxFiles() }), ...(ngDevMode ? [{ debugName: "selectionSummary" }] : /* istanbul ignore next */ []));
+    dropzoneAriaLabel = computed(() => `${this.label() || this.translation.translate('fileInput.dropLabel')}. ${this.selectionSummary()}`, ...(ngDevMode ? [{ debugName: "dropzoneAriaLabel" }] : /* istanbul ignore next */ []));
+    openFileDialog() {
+        if (this.disabled())
+            return;
+        this.nativeInputRef()?.nativeElement.click();
+    }
+    handleDropzoneKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openFileDialog();
+        }
+    }
+    onNativeInputChange(fileList) {
+        this.consumeFiles(fileList ? Array.from(fileList) : []);
+        const input = this.nativeInputRef()?.nativeElement;
+        if (input) {
+            input.value = '';
+        }
+    }
+    onDragEnter(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragActive.set(true);
+    }
+    onDragOver(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragActive.set(true);
+    }
+    onDragLeave(event) {
+        if (event.currentTarget?.contains(event.relatedTarget)) {
+            return;
+        }
+        this.dragActive.set(false);
+    }
+    onDrop(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragActive.set(false);
+        this.consumeFiles(Array.from(event.dataTransfer?.files ?? []));
+    }
+    removeFile(index) {
+        if (this.disabled())
+            return;
+        const nextFiles = [...this.currentFiles()];
+        nextFiles.splice(index, 1);
+        this.updateFiles(nextFiles);
+    }
+    trackFile(index, file) {
+        return `${file.name}-${file.size}-${file.lastModified}-${index}`;
+    }
+    formatBytes(size) {
+        if (size < 1024)
+            return `${size} B`;
+        if (size < 1024 * 1024)
+            return `${(size / 1024).toFixed(1)} KB`;
+        return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    consumeFiles(files) {
+        if (files.length === 0)
+            return;
+        const accepted = [];
+        const rejectedByAccept = [];
+        const currentFiles = this.currentFiles();
+        const remainingSlots = this.multiple() ? Math.max(this.maxFiles() - currentFiles.length, 0) : 1;
+        for (const file of files) {
+            if (!this.matchesAccept(file)) {
+                rejectedByAccept.push(file);
+                continue;
+            }
+            accepted.push(file);
+        }
+        const nextAccepted = this.multiple() ? accepted.slice(0, remainingSlots) : accepted.slice(0, 1);
+        const rejectedByCount = this.multiple() ? accepted.slice(remainingSlots) : accepted.slice(1);
+        const nextFiles = this.multiple() ? [...currentFiles, ...nextAccepted] : nextAccepted;
+        this.rejectionMessage.set('');
+        if (rejectedByAccept.length > 0) {
+            this.rejectionMessage.set(this.translation.translate('fileInput.invalidFiles', { count: rejectedByAccept.length }));
+            this.filesRejected.emit({ files: rejectedByAccept, reason: 'accept' });
+        }
+        if (rejectedByCount.length > 0) {
+            this.rejectionMessage.set(this.translation.translate('fileInput.tooManyFiles', { max: this.maxFiles() }));
+            this.filesRejected.emit({ files: rejectedByCount, reason: 'maxFiles' });
+        }
+        this.updateFiles(nextFiles);
+    }
+    updateFiles(files) {
+        if (this.filesInput() === undefined) {
+            this.internalFiles.set(files);
+        }
+        this.filesChange.emit(files);
+    }
+    matchesAccept(file) {
+        const accept = this.accept().trim();
+        if (!accept)
+            return true;
+        const type = file.type.toLowerCase();
+        const name = file.name.toLowerCase();
+        return accept
+            .split(',')
+            .map((entry) => entry.trim().toLowerCase())
+            .some((rule) => {
+            if (!rule)
+                return false;
+            if (rule.startsWith('.'))
+                return name.endsWith(rule);
+            if (rule.endsWith('/*'))
+                return type.startsWith(`${rule.slice(0, -1)}`);
+            return type === rule;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvFileInputComponent, isStandalone: true, selector: "jv-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, filesInput: { classPropertyName: "filesInput", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "filesChange", filesRejected: "filesRejected" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <input
+        #nativeInput
+        class="jv-file-input-native"
+        type="file"
+        [id]="inputId()"
+        [attr.accept]="accept() || null"
+        [attr.multiple]="multiple() ? '' : null"
+        [disabled]="disabled()"
+        [attr.aria-describedby]="describedBy() || null"
+        (change)="onNativeInputChange($any($event.target).files)"
+      />
+
+      <div
+        class="jv-file-input-dropzone"
+        [class.jv-file-input-dropzone--disabled]="disabled()"
+        [class.jv-file-input-dropzone--dragover]="dragActive()"
+        [class.jv-file-input-dropzone--invalid]="invalid()"
+        role="button"
+        tabindex="0"
+        [attr.aria-disabled]="disabled() ? 'true' : 'false'"
+        [attr.aria-label]="dropzoneAriaLabel()"
+        (click)="openFileDialog()"
+        (keydown)="handleDropzoneKeydown($event)"
+        (dragenter)="onDragEnter($event)"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
+      >
+        <jv-icon name="upload-cloud" [size]="24" />
+        <div class="jv-file-input-copy">
+          <strong>{{ translation.translate('fileInput.dropLabel') }}</strong>
+          <span>{{ translation.translate('fileInput.helperText') }}</span>
+          <span class="jv-file-input-meta">{{ selectionSummary() }}</span>
+        </div>
+      </div>
+
+      @if (rejectionMessage()) {
+        <p class="jv-file-input-rejection" aria-live="polite">{{ rejectionMessage() }}</p>
+      }
+
+      @if (currentFiles().length > 0) {
+        <ul class="jv-file-input-list">
+          @for (file of currentFiles(); track trackFile($index, file); let index = $index) {
+            <li class="jv-file-input-item">
+              <div class="jv-file-input-item-copy">
+                <span class="jv-file-input-item-name">{{ file.name }}</span>
+                <span class="jv-file-input-item-meta">{{ formatBytes(file.size) }}</span>
+              </div>
+              <button
+                type="button"
+                class="jv-file-input-remove"
+                [disabled]="disabled()"
+                [attr.aria-label]="translation.translate('fileInput.removeFile', { name: file.name })"
+                (click)="removeFile(index)"
+              >
+                <jv-icon name="x" [size]="16" />
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </jv-form-container>
+  `, isInline: true, styles: [".jv-file-input-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.jv-file-input-dropzone{display:grid;grid-template-columns:auto 1fr;gap:var(--jv-spacing-md);align-items:center;padding:var(--jv-spacing-lg);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;outline:none}.jv-file-input-dropzone:hover,.jv-file-input-dropzone:focus-visible,.jv-file-input-dropzone--dragover{border-color:var(--jv-color-primary);background:var(--jv-color-surface-muted);box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-file-input-dropzone--invalid{border-color:var(--jv-color-danger)}.jv-file-input-dropzone--disabled{opacity:.65;cursor:not-allowed}.jv-file-input-copy{display:grid;gap:.25rem;min-width:0}.jv-file-input-copy span,.jv-file-input-meta,.jv-file-input-item-meta,.jv-file-input-rejection{color:var(--jv-color-foreground-muted)}.jv-file-input-rejection{margin:var(--jv-spacing-sm) 0 0;font-size:.875rem}.jv-file-input-list{list-style:none;padding:0;margin:var(--jv-spacing-md) 0 0;display:grid;gap:var(--jv-spacing-sm)}.jv-file-input-item{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-sm) var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface)}.jv-file-input-item-copy{min-width:0;display:grid;gap:.125rem}.jv-file-input-item-name{font-weight:600;color:var(--jv-color-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jv-file-input-remove{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:999px;background:transparent;color:var(--jv-color-foreground-muted);cursor:pointer}.jv-file-input-remove:hover,.jv-file-input-remove:focus-visible{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);outline:none}.jv-file-input-remove:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-file-input', standalone: true, imports: [JvFormContainerComponent, JvIconComponent], template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <input
+        #nativeInput
+        class="jv-file-input-native"
+        type="file"
+        [id]="inputId()"
+        [attr.accept]="accept() || null"
+        [attr.multiple]="multiple() ? '' : null"
+        [disabled]="disabled()"
+        [attr.aria-describedby]="describedBy() || null"
+        (change)="onNativeInputChange($any($event.target).files)"
+      />
+
+      <div
+        class="jv-file-input-dropzone"
+        [class.jv-file-input-dropzone--disabled]="disabled()"
+        [class.jv-file-input-dropzone--dragover]="dragActive()"
+        [class.jv-file-input-dropzone--invalid]="invalid()"
+        role="button"
+        tabindex="0"
+        [attr.aria-disabled]="disabled() ? 'true' : 'false'"
+        [attr.aria-label]="dropzoneAriaLabel()"
+        (click)="openFileDialog()"
+        (keydown)="handleDropzoneKeydown($event)"
+        (dragenter)="onDragEnter($event)"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
+      >
+        <jv-icon name="upload-cloud" [size]="24" />
+        <div class="jv-file-input-copy">
+          <strong>{{ translation.translate('fileInput.dropLabel') }}</strong>
+          <span>{{ translation.translate('fileInput.helperText') }}</span>
+          <span class="jv-file-input-meta">{{ selectionSummary() }}</span>
+        </div>
+      </div>
+
+      @if (rejectionMessage()) {
+        <p class="jv-file-input-rejection" aria-live="polite">{{ rejectionMessage() }}</p>
+      }
+
+      @if (currentFiles().length > 0) {
+        <ul class="jv-file-input-list">
+          @for (file of currentFiles(); track trackFile($index, file); let index = $index) {
+            <li class="jv-file-input-item">
+              <div class="jv-file-input-item-copy">
+                <span class="jv-file-input-item-name">{{ file.name }}</span>
+                <span class="jv-file-input-item-meta">{{ formatBytes(file.size) }}</span>
+              </div>
+              <button
+                type="button"
+                class="jv-file-input-remove"
+                [disabled]="disabled()"
+                [attr.aria-label]="translation.translate('fileInput.removeFile', { name: file.name })"
+                (click)="removeFile(index)"
+              >
+                <jv-icon name="x" [size]="16" />
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </jv-form-container>
+  `, styles: [".jv-file-input-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.jv-file-input-dropzone{display:grid;grid-template-columns:auto 1fr;gap:var(--jv-spacing-md);align-items:center;padding:var(--jv-spacing-lg);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;outline:none}.jv-file-input-dropzone:hover,.jv-file-input-dropzone:focus-visible,.jv-file-input-dropzone--dragover{border-color:var(--jv-color-primary);background:var(--jv-color-surface-muted);box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-file-input-dropzone--invalid{border-color:var(--jv-color-danger)}.jv-file-input-dropzone--disabled{opacity:.65;cursor:not-allowed}.jv-file-input-copy{display:grid;gap:.25rem;min-width:0}.jv-file-input-copy span,.jv-file-input-meta,.jv-file-input-item-meta,.jv-file-input-rejection{color:var(--jv-color-foreground-muted)}.jv-file-input-rejection{margin:var(--jv-spacing-sm) 0 0;font-size:.875rem}.jv-file-input-list{list-style:none;padding:0;margin:var(--jv-spacing-md) 0 0;display:grid;gap:var(--jv-spacing-sm)}.jv-file-input-item{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-sm) var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface)}.jv-file-input-item-copy{min-width:0;display:grid;gap:.125rem}.jv-file-input-item-name{font-weight:600;color:var(--jv-color-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jv-file-input-remove{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:999px;background:transparent;color:var(--jv-color-foreground-muted);cursor:pointer}.jv-file-input-remove:hover,.jv-file-input-remove:focus-visible{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);outline:none}.jv-file-input-remove:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], propDecorators: { nativeInputRef: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], filesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], filesRejected: [{ type: i0.Output, args: ["filesRejected"] }] } });
+
 class JvListComponent {
     role = input('list', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     ariaRole = input(null, ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
@@ -20687,6 +21244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class JvDialogService {
     announcementService = inject(JvAnnouncementService);
+    translation = inject(JvTranslationService);
     document = inject(DOCUMENT);
     activeDialogSignal = signal(null, ...(ngDevMode ? [{ debugName: "activeDialogSignal" }] : /* istanbul ignore next */ []));
     nextId = 0;
@@ -20696,15 +21254,16 @@ class JvDialogService {
     confirm(options) {
         const id = ++this.nextId;
         this.restoreTarget = this.document.activeElement instanceof HTMLElement ? this.document.activeElement : null;
+        const title = options.title ?? this.translation.translate('dialog.confirmTitle');
         this.activeDialogSignal.set({
             id,
-            title: options.title,
+            title,
             message: options.message,
-            confirmLabel: options.confirmLabel ?? 'Confirm',
-            cancelLabel: options.cancelLabel ?? 'Cancel',
+            confirmLabel: options.confirmLabel ?? this.translation.translate('dialog.confirm'),
+            cancelLabel: options.cancelLabel ?? this.translation.translate('dialog.cancel'),
             tone: options.tone ?? 'primary',
         });
-        this.announcementService.announce(`${options.title}. ${options.message}`, 'assertive');
+        this.announcementService.announce(`${title}. ${options.message}`, 'assertive');
         return new Promise((resolve) => {
             this.resolver = resolve;
         });
@@ -20726,12 +21285,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class JvConfirmDialogComponent {
     dialogService = inject(JvDialogService);
+    translation = inject(JvTranslationService);
     activeDialog = this.dialogService.activeDialog;
     isOpen = computed(() => this.activeDialog() !== null, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    dialogTitle = computed(() => this.activeDialog()?.title ?? 'Confirm', ...(ngDevMode ? [{ debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
+    dialogTitle = computed(() => this.activeDialog()?.title ?? this.translation.translate('dialog.confirmTitle'), ...(ngDevMode ? [{ debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
     dialogMessage = computed(() => this.activeDialog()?.message ?? '', ...(ngDevMode ? [{ debugName: "dialogMessage" }] : /* istanbul ignore next */ []));
-    cancelLabel = computed(() => this.activeDialog()?.cancelLabel ?? 'Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
-    confirmLabel = computed(() => this.activeDialog()?.confirmLabel ?? 'Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = computed(() => this.activeDialog()?.cancelLabel ?? this.translation.translate('dialog.cancel'), ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    confirmLabel = computed(() => this.activeDialog()?.confirmLabel ?? this.translation.translate('dialog.confirm'), ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
     confirmVariant = computed(() => {
         const tone = this.activeDialog()?.tone ?? 'primary';
         return tone === 'info' ? 'primary' : tone;
@@ -20746,8 +21306,8 @@ class JvConfirmDialogComponent {
       <p>{{ dialogMessage() }}</p>
 
       <div dialog-actions class="actions">
-        <jv-button variant="ghost" (click)="dialogService.resolve(false)">{{ cancelLabel() }}</jv-button>
         <jv-button [variant]="confirmVariant()" (click)="dialogService.resolve(true)">{{ confirmLabel() }}</jv-button>
+        <jv-button variant="ghost" (click)="dialogService.resolve(false)">{{ cancelLabel() }}</jv-button>
       </div>
     </jv-dialog>
   `, isInline: true, styles: [".actions{display:flex;justify-content:flex-end;gap:var(--jv-spacing-sm);flex-wrap:wrap}p{margin:0;color:var(--jv-color-foreground-muted)}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }] });
@@ -20763,8 +21323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       <p>{{ dialogMessage() }}</p>
 
       <div dialog-actions class="actions">
-        <jv-button variant="ghost" (click)="dialogService.resolve(false)">{{ cancelLabel() }}</jv-button>
         <jv-button [variant]="confirmVariant()" (click)="dialogService.resolve(true)">{{ confirmLabel() }}</jv-button>
+        <jv-button variant="ghost" (click)="dialogService.resolve(false)">{{ cancelLabel() }}</jv-button>
       </div>
     </jv-dialog>
   `, styles: [".actions{display:flex;justify-content:flex-end;gap:var(--jv-spacing-sm);flex-wrap:wrap}p{margin:0;color:var(--jv-color-foreground-muted)}\n"] }]
@@ -21035,7 +21595,7 @@ class JvSidebarComponent {
         </div>
       </div>
     </aside>
-  `, isInline: true, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+  `, isInline: true, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary);flex:0 0 auto}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:calc(var(--jv-density-control-height) - .25rem);font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, decorators: [{
             type: Component,
@@ -21194,7 +21754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       </div>
     </aside>
-  `, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"] }]
+  `, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary);flex:0 0 auto}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:calc(var(--jv-density-control-height) - .25rem);font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], collapseToggle: [{ type: i0.Output, args: ["collapseToggle"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
 class JvTopbarComponent {
@@ -22036,6 +22596,7 @@ const JV_GRID_DEFAULT_OPTIONS = {
 let gridIdSequence = 0;
 class JvGridComponent {
     gridId = `jv-grid-${++gridIdSequence}`;
+    formatService = inject(JvFormatService);
     translationService = inject(JvTranslationService);
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -22104,7 +22665,7 @@ class JvGridComponent {
                     const value = this.getRawCellValue(row, col);
                     if (value == null)
                         return false;
-                    return String(value).toLowerCase().includes(term);
+                    return this.getSearchValue(value, col).includes(term);
                 });
             });
         }
@@ -22118,7 +22679,7 @@ class JvGridComponent {
                     const col = this.columns().find(c => this.colKey(c) === key);
                     if (!col || col.filterable === false)
                         return true;
-                    const value = String(this.getRawCellValue(row, col) ?? '').toLowerCase();
+                    const value = this.getSearchValue(this.getRawCellValue(row, col), col);
                     const fv = filter.value.toLowerCase();
                     switch (filter.operator) {
                         case 'contains': return value.includes(fv);
@@ -22140,8 +22701,9 @@ class JvGridComponent {
         if (!columnKey || !direction)
             return items;
         return [...items].sort((a, b) => {
-            const va = this.getRawCellValue(a, this.findColumn(columnKey));
-            const vb = this.getRawCellValue(b, this.findColumn(columnKey));
+            const col = this.findColumn(columnKey);
+            const va = this.getComparableValue(this.getRawCellValue(a, col), col);
+            const vb = this.getComparableValue(this.getRawCellValue(b, col), col);
             if (va == null)
                 return 1;
             if (vb == null)
@@ -22245,14 +22807,56 @@ class JvGridComponent {
         const val = this.getCellValue(row, col);
         return val == null ? '' : String(val);
     }
-    formatValue(value, col) {
+    formatValue(value, col, _row) {
+        if (value == null)
+            return '';
+        const type = this.resolveColumnType(col);
+        if (type === 'text' || type === 'boolean') {
+            return String(value);
+        }
+        return this.formatService.format(type, value, this.getFormatOverrides(col));
+    }
+    getComparableValue(value, col) {
+        const type = this.resolveColumnType(col);
+        if (value == null || value === '')
+            return null;
+        if (type === 'text') {
+            return String(value).toLowerCase();
+        }
+        if (type === 'boolean') {
+            return Boolean(value);
+        }
+        return this.formatService.toComparable(type, value);
+    }
+    getSearchValue(value, col) {
+        const type = this.resolveColumnType(col);
+        if (type === 'text' || type === 'boolean') {
+            return String(value ?? '').toLowerCase();
+        }
+        return this.formatService.toSearchValue(type, value);
+    }
+    getExportValue(value, col) {
         if (value == null)
             return '';
-        if (col.type === 'date' && value instanceof Date) {
-            return value.toLocaleDateString();
+        const type = this.resolveColumnType(col);
+        if (type === 'date' || type === 'time' || type === 'datetime') {
+            const date = this.formatService.toDate(value);
+            if (!date)
+                return String(value);
+            if (type === 'date')
+                return date.toISOString().slice(0, 10);
+            if (type === 'time')
+                return date.toISOString().slice(11, 19);
+            return date.toISOString();
         }
         return String(value);
     }
+    resolveColumnType(col) {
+        return col.type ?? 'text';
+    }
+    getFormatOverrides(col) {
+        return col.formatOptions;
+    }
     getAriaSort(col) {
         if (col.sortable === false || !this.resolvedOptions().sortable)
             return null;
@@ -22500,14 +23104,14 @@ class JvGridComponent {
     }
     // Export
     exportCsv() {
-        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header }));
+        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header, column: c }));
         const allData = this.effectiveOptions().serverSide ? this.data() : this.sortedData();
         const headerRow = cols.map(c => `"${c.header}"`).join(',');
         const dataRows = allData.map(row => cols.map(col => {
             const val = row[col.key];
             if (val == null)
                 return '';
-            return `"${String(val).replace(/"/g, '""')}"`;
+            return `"${this.getExportValue(val, col.column).replace(/"/g, '""')}"`;
         }).join(','));
         const csv = [headerRow, ...dataRows].join('\r\n');
         const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
@@ -22519,13 +23123,13 @@ class JvGridComponent {
         URL.revokeObjectURL(url);
     }
     exportExcel() {
-        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header }));
+        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header, column: c }));
         const allData = this.effectiveOptions().serverSide ? this.data() : this.sortedData();
         let html = '<table>';
         html += '<thead><tr>' + cols.map(c => `<th>${c.header}</th>`).join('') + '</tr></thead>';
         html += '<tbody>';
         for (const row of allData) {
-            html += '<tr>' + cols.map(col => `<td>${row[col.key] ?? ''}</td>`).join('') + '</tr>';
+            html += '<tr>' + cols.map(col => `<td>${this.getExportValue(row[col.key], col.column)}</td>`).join('') + '</tr>';
         }
         html += '</tbody></table>';
         const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
@@ -22806,7 +23410,7 @@ class JvGridComponent {
                           } @else if (col.format) {
                             {{ col.format(value, row) }}
                           } @else {
-                            {{ formatValue(value, col) }}
+                            {{ formatValue(value, col, row) }}
                           }
                         }
                       </td>
@@ -23157,7 +23761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                           } @else if (col.format) {
                             {{ col.format(value, row) }}
                           } @else {
-                            {{ formatValue(value, col) }}
+                            {{ formatValue(value, col, row) }}
                           }
                         }
                       </td>
@@ -23406,5 +24010,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTranslationService, provideJvUi };
+export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCodeComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvFileInputComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvFormatService, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTranslationService, provideJvUi };
 //# sourceMappingURL=devjuliovilla-jv-ui.mjs.map