@muxima-ui/core 1.4.0 → 1.5.0

package/fesm2022/muxima-ui-core-date-picker.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { model, input, output, inject, ElementRef, Injector, signal, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, viewChild } from '@angular/core';
+import { model, input, computed, output, inject, ElementRef, Injector, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, viewChild } from '@angular/core';
+import { injectMxMessages, MX_MESSAGES_PT } from '@muxima-ui/core/i18n';
 import { mxUniqueId, MxFormField, MX_FORM_FIELD_CONTROL } from '@muxima-ui/core/form-field';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgControl, Validators } from '@angular/forms';
@@ -39,9 +40,14 @@ class MxCalendar {
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     /** Dias que não se podem escolher (ex.: fins-de-semana). */
     dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : /* istanbul ignore next */ []));
-    locale = input('pt-AO', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    /** Primeiro dia da semana: 1 = segunda-feira. */
-    firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /** Locale dos nomes dos meses e dos dias; por omissão o do idioma activo. */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Primeiro dia da semana: 0 = domingo, 1 = segunda-feira. Por omissão o do idioma activo. */
+    firstDayOfWeek = input(...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    i18n = injectMxMessages();
+    msg = computed(() => this.i18n().calendar, ...(ngDevMode ? [{ debugName: "msg" }] : /* istanbul ignore next */ []));
+    loc = computed(() => this.locale() ?? this.i18n().intlLocale, ...(ngDevMode ? [{ debugName: "loc" }] : /* istanbul ignore next */ []));
+    firstDay = computed(() => this.firstDayOfWeek() ?? this.i18n().firstDayOfWeek, ...(ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []));
     selected = output();
     /** `single` escolhe um dia; `range` escolhe um intervalo em [(range)]. */
     mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
@@ -61,8 +67,8 @@ class MxCalendar {
         const r = this.range();
         if (!r?.start)
             return '';
-        const f = new Intl.DateTimeFormat(this.locale(), { day: 'numeric', month: 'long', year: 'numeric' });
-        return r.end ? `Intervalo de ${f.format(r.start)} a ${f.format(r.end)}.` : `Início ${f.format(r.start)}. Escolhe a data de fim.`;
+        const f = new Intl.DateTimeFormat(this.loc(), { day: 'numeric', month: 'long', year: 'numeric' });
+        return r.end ? this.msg().rangeHint(f.format(r.start), f.format(r.end)) : this.msg().rangeStartHint(f.format(r.start));
     }, ...(ngDevMode ? [{ debugName: "rangeHint" }] : /* istanbul ignore next */ []));
     /** Início e fim efectivos (com pré-visualização), ordenados. */
     bounds = computed(() => {
@@ -75,21 +81,21 @@ class MxCalendar {
         return r.start <= end ? [r.start, end] : [end, r.start];
     }, ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
     weekdays = computed(() => {
-        const short = new Intl.DateTimeFormat(this.locale(), { weekday: 'narrow' });
-        const long = new Intl.DateTimeFormat(this.locale(), { weekday: 'long' });
+        const short = new Intl.DateTimeFormat(this.loc(), { weekday: 'narrow' });
+        const long = new Intl.DateTimeFormat(this.loc(), { weekday: 'long' });
         // 2024-01-01 foi segunda-feira
         return Array.from({ length: 7 }, (_, i) => {
-            const d = new Date(2024, 0, 1 + ((this.firstDayOfWeek() - 1 + i + 7) % 7));
+            const d = new Date(2024, 0, 1 + ((this.firstDay() - 1 + i + 7) % 7));
             return { short: short.format(d).toUpperCase(), long: long.format(d) };
         });
     }, ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
     weeks = computed(() => {
         const focus = this.focusDate();
         const first = new Date(focus.getFullYear(), focus.getMonth(), 1);
-        const offset = (first.getDay() - this.firstDayOfWeek() + 7) % 7;
+        const offset = (first.getDay() - this.firstDay() + 7) % 7;
         const start = addDays(first, -offset);
         const today = mxStartOfDay(new Date());
-        const fmt = new Intl.DateTimeFormat(this.locale(), { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
+        const fmt = new Intl.DateTimeFormat(this.loc(), { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
         const bounds = this.bounds();
         const isRange = this.mode() === 'range';
         const weeks = [];
@@ -102,7 +108,8 @@ class MxCalendar {
                 const inRange = !!bounds && date > bounds[0] && date < bounds[1];
                 const isStart = isRange && mxSameDay(date, this.range()?.start);
                 const isEnd = isRange && mxSameDay(date, this.range()?.end);
-                const label = fmt.format(date) + (isStart && isEnd ? ', início e fim do intervalo' : isStart ? ', início do intervalo' : isEnd ? ', fim do intervalo' : '');
+                const t = this.msg();
+                const label = fmt.format(date) + (isStart && isEnd ? `, ${t.rangeStartEnd}` : isStart ? `, ${t.rangeStart}` : isEnd ? `, ${t.rangeEnd}` : '');
                 row.push({
                     date,
                     key: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
@@ -140,7 +147,7 @@ class MxCalendar {
     }
     monthLabel(delta) {
         const d = addMonths(this.focusDate(), delta);
-        const s = new Intl.DateTimeFormat(this.locale(), { month: 'long', year: 'numeric' }).format(d);
+        const s = new Intl.DateTimeFormat(this.loc(), { month: 'long', year: 'numeric' }).format(d);
         return s.charAt(0).toUpperCase() + s.slice(1);
     }
     moveMonth(delta) {
@@ -173,7 +180,7 @@ class MxCalendar {
     }
     onKeydown(event) {
         const f = this.focusDate();
-        const dow = (f.getDay() - this.firstDayOfWeek() + 7) % 7;
+        const dow = (f.getDay() - this.firstDay() + 7) % 7;
         const moves = {
             ArrowLeft: () => addDays(f, -1),
             ArrowRight: () => addDays(f, 1),
@@ -222,11 +229,11 @@ class MxCalendar {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxCalendar, isStandalone: true, selector: "mx-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selected: "selected", range: "rangeChange", rangeSelected: "rangeSelected" }, host: { classAttribute: "mx-calendar" }, exportAs: ["mxCalendar"], ngImport: i0, template: `
     <div class="mx-calendar-header">
-      <button type="button" class="mx-calendar-nav" (click)="moveMonth(-1)" [attr.aria-label]="'Mês anterior, ' + monthLabel(-1)">
+      <button type="button" class="mx-calendar-nav" (click)="moveMonth(-1)" [attr.aria-label]="msg().previousMonth(monthLabel(-1))">
         <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 4L6 8l4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
       </button>
       <p class="mx-calendar-title" [id]="titleId" aria-live="polite">{{ monthLabel(0) }}</p>
-      <button type="button" class="mx-calendar-nav" (click)="moveMonth(1)" [attr.aria-label]="'Mês seguinte, ' + monthLabel(1)">
+      <button type="button" class="mx-calendar-nav" (click)="moveMonth(1)" [attr.aria-label]="msg().nextMonth(monthLabel(1))">
         <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
       </button>
     </div>
@@ -285,11 +292,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                     host: { class: 'mx-calendar' },
                     template: `
     <div class="mx-calendar-header">
-      <button type="button" class="mx-calendar-nav" (click)="moveMonth(-1)" [attr.aria-label]="'Mês anterior, ' + monthLabel(-1)">
+      <button type="button" class="mx-calendar-nav" (click)="moveMonth(-1)" [attr.aria-label]="msg().previousMonth(monthLabel(-1))">
         <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 4L6 8l4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
       </button>
       <p class="mx-calendar-title" [id]="titleId" aria-live="polite">{{ monthLabel(0) }}</p>
-      <button type="button" class="mx-calendar-nav" (click)="moveMonth(1)" [attr.aria-label]="'Mês seguinte, ' + monthLabel(1)">
+      <button type="button" class="mx-calendar-nav" (click)="moveMonth(1)" [attr.aria-label]="msg().nextMonth(monthLabel(1))">
         <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
       </button>
     </div>
@@ -344,20 +351,26 @@ const POSITIONS$1 = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
     { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
 ];
-/** Converte "dd/mm/aaaa" numa data. Aceita também "-" e "." como separadores. */
-function mxParseDate(text) {
-    const m = text.trim().match(/^(\d{1,2})[/.-](\d{1,2})[/.-](\d{4})$/);
+function mxParseDate(text, order = 'dmy') {
+    const t = text.trim();
+    const m = order === 'ymd'
+        ? t.match(/^(\d{4})[/.-](\d{1,2})[/.-](\d{1,2})$/)
+        : t.match(/^(\d{1,2})[/.-](\d{1,2})[/.-](\d{4})$/);
     if (!m)
         return null;
-    const [d, mo, y] = [Number(m[1]), Number(m[2]) - 1, Number(m[3])];
+    const n = [Number(m[1]), Number(m[2]), Number(m[3])];
+    const [d, mo, y] = order === 'ymd' ? [n[2], n[1] - 1, n[0]] : order === 'mdy' ? [n[1], n[0] - 1, n[2]] : [n[0], n[1] - 1, n[2]];
     const date = new Date(y, mo, d);
     return date.getFullYear() === y && date.getMonth() === mo && date.getDate() === d ? date : null;
 }
-function mxFormatDate(d) {
+function mxFormatDate(d, order = 'dmy') {
     if (!d)
         return '';
     const pad = (n) => String(n).padStart(2, '0');
-    return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`;
+    const [day, month, year] = [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()];
+    if (order === 'ymd')
+        return `${year}-${month}-${day}`;
+    return order === 'mdy' ? `${month}/${day}/${year}` : `${day}/${month}/${year}`;
 }
 /**
  * Campo de data: escreve-se "dd/mm/aaaa" ou escolhe-se no calendário.
@@ -378,8 +391,13 @@ class MxDatePicker {
     min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : /* istanbul ignore next */ []));
-    locale = input('pt-AO', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    placeholder = input('dd/mm/aaaa', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Locale dos nomes dos meses e dos dias; por omissão o do idioma activo. */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Por omissão "dd/mm/aaaa" em português e "mm/dd/yyyy" em inglês. */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    i18n = injectMxMessages();
+    msg = computed(() => this.i18n().datePicker, ...(ngDevMode ? [{ debugName: "msg" }] : /* istanbul ignore next */ []));
+    loc = computed(() => this.locale() ?? this.i18n().intlLocale, ...(ngDevMode ? [{ debugName: "loc" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -399,10 +417,10 @@ class MxDatePicker {
     draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    text = computed(() => this.draft() ?? mxFormatDate(this.value()), ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    longLabel = computed(() => this.value() ? new Intl.DateTimeFormat(this.locale(), { dateStyle: 'full' }).format(this.value()) : '', ...(ngDevMode ? [{ debugName: "longLabel" }] : /* istanbul ignore next */ []));
+    text = computed(() => this.draft() ?? mxFormatDate(this.value(), this.i18n().dateOrder), ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    longLabel = computed(() => this.value() ? new Intl.DateTimeFormat(this.loc(), { dateStyle: 'full' }).format(this.value()) : '', ...(ngDevMode ? [{ debugName: "longLabel" }] : /* istanbul ignore next */ []));
     /** true quando há texto que não é uma data válida. */
-    badFormat = computed(() => !!this.draft() && !mxParseDate(this.draft()), ...(ngDevMode ? [{ debugName: "badFormat" }] : /* istanbul ignore next */ []));
+    badFormat = computed(() => !!this.draft() && !mxParseDate(this.draft(), this.i18n().dateOrder), ...(ngDevMode ? [{ debugName: "badFormat" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     constructor() {
@@ -446,7 +464,7 @@ class MxDatePicker {
     }
     onInput(event) {
         const text = event.target.value;
-        const parsed = mxParseDate(text);
+        const parsed = mxParseDate(text, this.i18n().dateOrder);
         if (parsed) {
             this.draft.set(null);
             this.setValue(parsed);
@@ -499,7 +517,7 @@ class MxDatePicker {
         inputmode="numeric"
         autocomplete="off"
         [id]="controlId()"
-        [placeholder]="placeholder()"
+        [placeholder]="placeholder() ?? msg().placeholder"
         [value]="text()"
         [disabled]="isDisabled()"
         [attr.data-size]="size() === 'md' ? null : size()"
@@ -517,7 +535,7 @@ class MxDatePicker {
         class="mx-date-picker-toggle"
         aria-haspopup="dialog"
         [attr.aria-expanded]="isOpen()"
-        [attr.aria-label]="value() ? 'Mudar data, ' + longLabel() : 'Escolher data'"
+        [attr.aria-label]="value() ? msg().change(longLabel()) : msg().choose"
         [disabled]="isDisabled()"
         (click)="toggle()"
       >
@@ -538,14 +556,14 @@ class MxDatePicker {
       (attach)="onAttach()"
       (detach)="close(false)"
     >
-      <div class="mx-date-picker-panel" role="dialog" aria-modal="false" [attr.aria-label]="'Escolher data'">
+      <div class="mx-date-picker-panel" role="dialog" aria-modal="false" [attr.aria-label]="msg().choose">
         <mx-calendar
           #calendar
           [value]="value()"
           [min]="min()"
           [max]="max()"
           [dateDisabled]="dateDisabled()"
-          [locale]="locale()"
+          [locale]="loc()"
           (selected)="choose($event)"
         />
       </div>
@@ -570,7 +588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
         inputmode="numeric"
         autocomplete="off"
         [id]="controlId()"
-        [placeholder]="placeholder()"
+        [placeholder]="placeholder() ?? msg().placeholder"
         [value]="text()"
         [disabled]="isDisabled()"
         [attr.data-size]="size() === 'md' ? null : size()"
@@ -588,7 +606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
         class="mx-date-picker-toggle"
         aria-haspopup="dialog"
         [attr.aria-expanded]="isOpen()"
-        [attr.aria-label]="value() ? 'Mudar data, ' + longLabel() : 'Escolher data'"
+        [attr.aria-label]="value() ? msg().change(longLabel()) : msg().choose"
         [disabled]="isDisabled()"
         (click)="toggle()"
       >
@@ -609,14 +627,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
       (attach)="onAttach()"
       (detach)="close(false)"
     >
-      <div class="mx-date-picker-panel" role="dialog" aria-modal="false" [attr.aria-label]="'Escolher data'">
+      <div class="mx-date-picker-panel" role="dialog" aria-modal="false" [attr.aria-label]="msg().choose">
         <mx-calendar
           #calendar
           [value]="value()"
           [min]="min()"
           [max]="max()"
           [dateDisabled]="dateDisabled()"
-          [locale]="locale()"
+          [locale]="loc()"
           (selected)="choose($event)"
         />
       </div>
@@ -629,22 +647,26 @@ const POSITIONS = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
     { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
 ];
-/** Atalhos comuns: últimos 7 e 30 dias, este mês e o mês passado. */
-function mxDefaultRangePresets() {
+/**
+ * Atalhos comuns: últimos 7 e 30 dias, este mês e o mês passado.
+ * Os nomes vêm de `labels` (por omissão em português); para o idioma activo,
+ * usa `mxDefaultRangePresets(inject(MxI18n).messages().dateRangePicker)`.
+ */
+function mxDefaultRangePresets(labels = MX_MESSAGES_PT.dateRangePicker) {
     const today = () => mxStartOfDay(new Date());
     const shift = (d, days) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + days);
     return [
-        { label: 'Últimos 7 dias', range: () => ({ start: shift(today(), -6), end: today() }) },
-        { label: 'Últimos 30 dias', range: () => ({ start: shift(today(), -29), end: today() }) },
+        { label: labels.last7Days, range: () => ({ start: shift(today(), -6), end: today() }) },
+        { label: labels.last30Days, range: () => ({ start: shift(today(), -29), end: today() }) },
         {
-            label: 'Este mês',
+            label: labels.thisMonth,
             range: () => {
                 const t = today();
                 return { start: new Date(t.getFullYear(), t.getMonth(), 1), end: new Date(t.getFullYear(), t.getMonth() + 1, 0) };
             },
         },
         {
-            label: 'Mês passado',
+            label: labels.lastMonth,
             range: () => {
                 const t = today();
                 return { start: new Date(t.getFullYear(), t.getMonth() - 1, 1), end: new Date(t.getFullYear(), t.getMonth(), 0) };
@@ -672,10 +694,16 @@ class MxDateRangePicker {
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : /* istanbul ignore next */ []));
     presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
-    locale = input('pt-AO', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    placeholder = input('dd/mm/aaaa', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    startLabel = input('início', ...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
-    endLabel = input('fim', ...(ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []));
+    /** Locale dos nomes dos meses e dos dias; por omissão o do idioma activo. */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Por omissão "dd/mm/aaaa" em português e "mm/dd/yyyy" em inglês. */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    startLabel = input(...(ngDevMode ? [undefined, { debugName: "startLabel" }] : /* istanbul ignore next */ []));
+    endLabel = input(...(ngDevMode ? [undefined, { debugName: "endLabel" }] : /* istanbul ignore next */ []));
+    i18n = injectMxMessages();
+    msg = computed(() => this.i18n().dateRangePicker, ...(ngDevMode ? [{ debugName: "msg" }] : /* istanbul ignore next */ []));
+    loc = computed(() => this.locale() ?? this.i18n().intlLocale, ...(ngDevMode ? [{ debugName: "loc" }] : /* istanbul ignore next */ []));
+    placeholderText = computed(() => this.placeholder() ?? this.i18n().datePicker.placeholder, ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -701,20 +729,20 @@ class MxDateRangePicker {
     draftText = signal({ start: null, end: null }, ...(ngDevMode ? [{ debugName: "draftText" }] : /* istanbul ignore next */ []));
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    startText = computed(() => this.draftText().start ?? mxFormatDate(this.value()?.start ?? null), ...(ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []));
-    endText = computed(() => this.draftText().end ?? mxFormatDate(this.value()?.end ?? null), ...(ngDevMode ? [{ debugName: "endText" }] : /* istanbul ignore next */ []));
+    startText = computed(() => this.draftText().start ?? mxFormatDate(this.value()?.start ?? null, this.i18n().dateOrder), ...(ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []));
+    endText = computed(() => this.draftText().end ?? mxFormatDate(this.value()?.end ?? null, this.i18n().dateOrder), ...(ngDevMode ? [{ debugName: "endText" }] : /* istanbul ignore next */ []));
     /** true quando há texto que não é data, ou o fim é anterior ao início. */
     badFormat = computed(() => {
         const d = this.draftText();
         const v = this.value();
-        return (!!d.start && !mxParseDate(d.start)) || (!!d.end && !mxParseDate(d.end)) || (!!v?.start && !!v?.end && v.end < v.start);
+        return (!!d.start && !mxParseDate(d.start, this.i18n().dateOrder)) || (!!d.end && !mxParseDate(d.end, this.i18n().dateOrder)) || (!!v?.start && !!v?.end && v.end < v.start);
     }, ...(ngDevMode ? [{ debugName: "badFormat" }] : /* istanbul ignore next */ []));
     toggleLabel = computed(() => {
         const v = this.value();
         if (!v?.start || !v?.end)
-            return 'Escolher intervalo';
-        const f = new Intl.DateTimeFormat(this.locale(), { day: 'numeric', month: 'long', year: 'numeric' });
-        return `Mudar intervalo, ${f.format(v.start)} a ${f.format(v.end)}`;
+            return this.msg().choose;
+        const f = new Intl.DateTimeFormat(this.loc(), { day: 'numeric', month: 'long', year: 'numeric' });
+        return this.msg().change(f.format(v.start), f.format(v.end));
     }, ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
@@ -772,7 +800,7 @@ class MxDateRangePicker {
     }
     onInput(part, event) {
         const text = event.target.value;
-        const parsed = mxParseDate(text);
+        const parsed = mxParseDate(text, this.i18n().dateOrder);
         this.draftText.update((d) => ({ ...d, [part]: parsed || !text ? null : text }));
         const current = this.value() ?? { start: null, end: null };
         const next = { ...current, [part]: parsed };
@@ -826,7 +854,7 @@ class MxDateRangePicker {
         inputmode="numeric"
         autocomplete="off"
         [id]="controlId()"
-        [placeholder]="placeholder()"
+        [placeholder]="placeholderText()"
         [value]="startText()"
         [disabled]="isDisabled()"
         [attr.aria-labelledby]="labelledBy(startLabelId)"
@@ -843,7 +871,7 @@ class MxDateRangePicker {
         type="text"
         inputmode="numeric"
         autocomplete="off"
-        [placeholder]="placeholder()"
+        [placeholder]="placeholderText()"
         [value]="endText()"
         [disabled]="isDisabled()"
         [attr.aria-labelledby]="labelledBy(endLabelId)"
@@ -854,8 +882,8 @@ class MxDateRangePicker {
         (blur)="onTouched()"
         (keydown.alt.arrowdown)="$event.preventDefault(); open()"
       />
-      <span class="mx-visually-hidden" [id]="startLabelId">{{ startLabel() }}</span>
-      <span class="mx-visually-hidden" [id]="endLabelId">{{ endLabel() }}</span>
+      <span class="mx-visually-hidden" [id]="startLabelId">{{ startLabel() ?? msg().start }}</span>
+      <span class="mx-visually-hidden" [id]="endLabelId">{{ endLabel() ?? msg().end }}</span>
       @if (!field?.labelId()) {
         <span class="mx-visually-hidden" [id]="nameId">{{ nameText() }}</span>
       }
@@ -886,9 +914,9 @@ class MxDateRangePicker {
       (attach)="onAttach()"
       (detach)="close(false)"
     >
-      <div class="mx-date-picker-panel mx-date-range-panel" role="dialog" aria-modal="false" aria-label="Escolher intervalo">
+      <div class="mx-date-picker-panel mx-date-range-panel" role="dialog" aria-modal="false" [attr.aria-label]="msg().choose">
         @if (presets().length) {
-          <ul class="mx-date-range-presets" aria-label="Atalhos">
+          <ul class="mx-date-range-presets" [attr.aria-label]="msg().presets">
             @for (p of presets(); track p.label) {
               <li><button type="button" class="mx-date-range-preset" (click)="applyPreset(p)">{{ p.label }}</button></li>
             }
@@ -901,7 +929,7 @@ class MxDateRangePicker {
           [min]="min()"
           [max]="max()"
           [dateDisabled]="dateDisabled()"
-          [locale]="locale()"
+          [locale]="loc()"
           (rangeSelected)="choose($event)"
         />
       </div>
@@ -933,7 +961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
         inputmode="numeric"
         autocomplete="off"
         [id]="controlId()"
-        [placeholder]="placeholder()"
+        [placeholder]="placeholderText()"
         [value]="startText()"
         [disabled]="isDisabled()"
         [attr.aria-labelledby]="labelledBy(startLabelId)"
@@ -950,7 +978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
         type="text"
         inputmode="numeric"
         autocomplete="off"
-        [placeholder]="placeholder()"
+        [placeholder]="placeholderText()"
         [value]="endText()"
         [disabled]="isDisabled()"
         [attr.aria-labelledby]="labelledBy(endLabelId)"
@@ -961,8 +989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
         (blur)="onTouched()"
         (keydown.alt.arrowdown)="$event.preventDefault(); open()"
       />
-      <span class="mx-visually-hidden" [id]="startLabelId">{{ startLabel() }}</span>
-      <span class="mx-visually-hidden" [id]="endLabelId">{{ endLabel() }}</span>
+      <span class="mx-visually-hidden" [id]="startLabelId">{{ startLabel() ?? msg().start }}</span>
+      <span class="mx-visually-hidden" [id]="endLabelId">{{ endLabel() ?? msg().end }}</span>
       @if (!field?.labelId()) {
         <span class="mx-visually-hidden" [id]="nameId">{{ nameText() }}</span>
       }
@@ -993,9 +1021,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
       (attach)="onAttach()"
       (detach)="close(false)"
     >
-      <div class="mx-date-picker-panel mx-date-range-panel" role="dialog" aria-modal="false" aria-label="Escolher intervalo">
+      <div class="mx-date-picker-panel mx-date-range-panel" role="dialog" aria-modal="false" [attr.aria-label]="msg().choose">
         @if (presets().length) {
-          <ul class="mx-date-range-presets" aria-label="Atalhos">
+          <ul class="mx-date-range-presets" [attr.aria-label]="msg().presets">
             @for (p of presets(); track p.label) {
               <li><button type="button" class="mx-date-range-preset" (click)="applyPreset(p)">{{ p.label }}</button></li>
             }
@@ -1008,7 +1036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
           [min]="min()"
           [max]="max()"
           [dateDisabled]="dateDisabled()"
-          [locale]="locale()"
+          [locale]="loc()"
           (rangeSelected)="choose($event)"
         />
       </div>