@muxima-ui/core 1.0.0 → 1.2.0

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

@@ -24,8 +24,12 @@ function addMonths(d, n) {
  *
  * ```html
  * <mx-calendar [(value)]="data" [min]="hoje" />
+ * <mx-calendar mode="range" [(range)]="periodo" />
  * ```
  *
+ * Em `mode="range"` o primeiro clique marca o início e o segundo o fim (se for anterior,
+ * os dois trocam). Entre os dois cliques o intervalo é pré-visualizado com o rato ou o teclado.
+ *
  * Teclas: setas (dia e semana), Home/End (início e fim da semana), Page Up/Down (mês),
  * Shift + Page Up/Down (ano), Enter ou Espaço para escolher.
  */
@@ -39,12 +43,37 @@ class MxCalendar {
     /** Primeiro dia da semana: 1 = segunda-feira. */
     firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
     selected = output();
+    /** `single` escolhe um dia; `range` escolhe um intervalo em [(range)]. */
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    range = model(null, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Emite quando o intervalo fica completo (início e fim). */
+    rangeSelected = output();
     host = inject(ElementRef).nativeElement;
     injector = inject(Injector);
     titleId = mxUniqueId('mx-calendar-title');
     /** Dia com foco na grelha. */
     focusDate = signal(mxStartOfDay(new Date()), ...(ngDevMode ? [{ debugName: "focusDate" }] : /* istanbul ignore next */ []));
     initialised = false;
+    /** Dia sob o rato ou o foco enquanto falta o fim do intervalo. */
+    preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+    awaitingEnd = computed(() => this.mode() === 'range' && !!this.range()?.start && !this.range()?.end, ...(ngDevMode ? [{ debugName: "awaitingEnd" }] : /* istanbul ignore next */ []));
+    rangeHint = computed(() => {
+        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.`;
+    }, ...(ngDevMode ? [{ debugName: "rangeHint" }] : /* istanbul ignore next */ []));
+    /** Início e fim efectivos (com pré-visualização), ordenados. */
+    bounds = computed(() => {
+        if (this.mode() !== 'range')
+            return null;
+        const r = this.range();
+        if (!r?.start)
+            return null;
+        const end = r.end ?? (this.awaitingEnd() ? this.preview() : null) ?? r.start;
+        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' });
@@ -61,18 +90,29 @@ class MxCalendar {
         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 bounds = this.bounds();
+        const isRange = this.mode() === 'range';
         const weeks = [];
         for (let w = 0; w < 6; w++) {
             const row = [];
             for (let i = 0; i < 7; i++) {
                 const date = addDays(start, w * 7 + i);
+                const rangeStart = !!bounds && mxSameDay(date, bounds[0]);
+                const rangeEnd = !!bounds && mxSameDay(date, bounds[1]);
+                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' : '');
                 row.push({
                     date,
                     key: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
-                    label: fmt.format(date),
+                    label,
                     outside: date.getMonth() !== focus.getMonth(),
                     today: mxSameDay(date, today),
-                    selected: mxSameDay(date, this.value()),
+                    rangeStart,
+                    rangeEnd,
+                    inRange,
+                    selected: isRange ? rangeStart || rangeEnd || inRange : mxSameDay(date, this.value()),
                     focus: mxSameDay(date, focus),
                     disabled: this.isDisabled(date),
                 });
@@ -84,7 +124,7 @@ class MxCalendar {
     constructor() {
         afterNextRender(() => {
             if (!this.initialised) {
-                const v = this.value();
+                const v = this.mode() === 'range' ? this.range()?.start : this.value();
                 if (v)
                     this.focusDate.set(mxStartOfDay(v));
                 this.initialised = true;
@@ -93,7 +133,7 @@ class MxCalendar {
     }
     /** Põe o foco no dia activo (seleccionado ou hoje). */
     focus() {
-        const v = this.value();
+        const v = this.mode() === 'range' ? this.range()?.start : this.value();
         if (v)
             this.focusDate.set(mxStartOfDay(v));
         this.focusActiveDay();
@@ -106,9 +146,27 @@ class MxCalendar {
     moveMonth(delta) {
         this.focusDate.set(addMonths(this.focusDate(), delta));
     }
+    hover(date) {
+        if (this.awaitingEnd())
+            this.preview.set(date);
+    }
     select(date) {
         if (this.isDisabled(date))
             return;
+        if (this.mode() === 'range') {
+            const r = this.range();
+            if (r?.start && !r.end) {
+                const [start, end] = date < r.start ? [date, r.start] : [r.start, date];
+                this.range.set({ start, end });
+                this.rangeSelected.emit({ start, end });
+            }
+            else {
+                this.range.set({ start: date, end: null });
+            }
+            this.preview.set(null);
+            this.focusDate.set(date);
+            return;
+        }
         this.value.set(date);
         this.focusDate.set(date);
         this.selected.emit(date);
@@ -126,10 +184,17 @@ class MxCalendar {
             PageUp: () => addMonths(f, event.shiftKey ? -12 : -1),
             PageDown: () => addMonths(f, event.shiftKey ? 12 : 1),
         };
+        if (event.key === 'Enter' || event.key === ' ') {
+            // escolhe o dia activo, mesmo que o foco ainda não tenha chegado ao botão
+            event.preventDefault();
+            this.select(this.focusDate());
+            return;
+        }
         const move = moves[event.key];
         if (move) {
             event.preventDefault();
             this.focusDate.set(this.clamp(move()));
+            this.hover(this.focusDate());
             this.focusActiveDay();
         }
     }
@@ -155,7 +220,7 @@ class MxCalendar {
         }, { injector: this.injector });
     }
     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 } }, outputs: { value: "valueChange", selected: "selected" }, host: { classAttribute: "mx-calendar" }, exportAs: ["mxCalendar"], ngImport: i0, template: `
+    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)">
         <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>
@@ -177,7 +242,13 @@ class MxCalendar {
         @for (week of weeks(); track $index) {
           <tr>
             @for (day of week; track day.date.getTime()) {
-              <td [attr.aria-selected]="day.selected" role="gridcell">
+              <td
+                role="gridcell"
+                [attr.aria-selected]="day.selected"
+                [attr.data-range-start]="day.rangeStart ? '' : null"
+                [attr.data-range-end]="day.rangeEnd ? '' : null"
+                [attr.data-in-range]="day.inRange ? '' : null"
+              >
                 <button
                   type="button"
                   class="mx-calendar-day"
@@ -189,6 +260,7 @@ class MxCalendar {
                   [tabIndex]="day.focus ? 0 : -1"
                   [attr.aria-disabled]="day.disabled ? 'true' : null"
                   (click)="select(day.date)"
+                  (mouseenter)="hover(day.date)"
                 >
                   {{ day.date.getDate() }}
                 </button>
@@ -198,6 +270,9 @@ class MxCalendar {
         }
       </tbody>
     </table>
+    @if (mode() === 'range') {
+      <p class="mx-visually-hidden" aria-live="polite">{{ rangeHint() }}</p>
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxCalendar, decorators: [{
@@ -230,7 +305,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
         @for (week of weeks(); track $index) {
           <tr>
             @for (day of week; track day.date.getTime()) {
-              <td [attr.aria-selected]="day.selected" role="gridcell">
+              <td
+                role="gridcell"
+                [attr.aria-selected]="day.selected"
+                [attr.data-range-start]="day.rangeStart ? '' : null"
+                [attr.data-range-end]="day.rangeEnd ? '' : null"
+                [attr.data-in-range]="day.inRange ? '' : null"
+              >
                 <button
                   type="button"
                   class="mx-calendar-day"
@@ -242,6 +323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                   [tabIndex]="day.focus ? 0 : -1"
                   [attr.aria-disabled]="day.disabled ? 'true' : null"
                   (click)="select(day.date)"
+                  (mouseenter)="hover(day.date)"
                 >
                   {{ day.date.getDate() }}
                 </button>
@@ -251,11 +333,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
         }
       </tbody>
     </table>
+    @if (mode() === 'range') {
+      <p class="mx-visually-hidden" aria-live="polite">{{ rangeHint() }}</p>
+    }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], rangeSelected: [{ type: i0.Output, args: ["rangeSelected"] }] } });
 
-const POSITIONS = [
+const POSITIONS$1 = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
     { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
 ];
@@ -306,7 +391,7 @@ class MxDatePicker {
     host = inject(ElementRef).nativeElement;
     calendar = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
     toggleButton = viewChild.required('toggleButton');
-    positions = POSITIONS;
+    positions = POSITIONS$1;
     generatedId = mxUniqueId('mx-date');
     controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
@@ -465,7 +550,7 @@ class MxDatePicker {
         />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: MxCalendar, selector: "mx-calendar", inputs: ["value", "min", "max", "dateDisabled", "locale", "firstDayOfWeek"], outputs: ["valueChange", "selected"], exportAs: ["mxCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: MxCalendar, selector: "mx-calendar", inputs: ["value", "min", "max", "dateDisabled", "locale", "firstDayOfWeek", "mode", "range"], outputs: ["valueChange", "selected", "rangeChange", "rangeSelected"], exportAs: ["mxCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxDatePicker, decorators: [{
             type: Component,
@@ -540,9 +625,406 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], calendar: [{ type: i0.ViewChild, args: ['calendar', { isSignal: true }] }], toggleButton: [{ type: i0.ViewChild, args: ['toggleButton', { isSignal: true }] }] } });
 
+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() {
+    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: 'Este mês',
+            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',
+            range: () => {
+                const t = today();
+                return { start: new Date(t.getFullYear(), t.getMonth() - 1, 1), end: new Date(t.getFullYear(), t.getMonth(), 0) };
+            },
+        },
+    ];
+}
+/**
+ * Campo de intervalo de datas: dois campos (início e fim) que se escrevem em "dd/mm/aaaa"
+ * ou se escolhem num calendário, com atalhos opcionais.
+ *
+ * ```html
+ * <mx-form-field>
+ *   <label mxLabel>Período</label>
+ *   <mx-date-range-picker formControlName="periodo" [presets]="atalhos" />
+ * </mx-form-field>
+ * ```
+ *
+ * O valor é `{ start, end }` (datas sem horas) ou null. Cada campo é anunciado com o rótulo
+ * do campo e "início" ou "fim". Fim anterior ao início deixa o campo com erro.
+ */
+class MxDateRangePicker {
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    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 */ []));
+    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 });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Nome do campo quando não há mxLabel. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    field = inject(MxFormField, { optional: true });
+    ngControl = inject(NgControl, { self: true, optional: true });
+    host = inject(ElementRef).nativeElement;
+    calendar = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+    toggleButton = viewChild.required('toggleButton');
+    positions = POSITIONS;
+    generatedId = mxUniqueId('mx-date-range');
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    startLabelId = mxUniqueId('mx-date-range-start');
+    endLabelId = mxUniqueId('mx-date-range-end');
+    nameId = mxUniqueId('mx-date-range-name');
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Intervalo a ser escolhido no calendário aberto. */
+    draftRange = signal(null, ...(ngDevMode ? [{ debugName: "draftRange" }] : /* istanbul ignore next */ []));
+    /** Texto escrito que ainda não é uma data válida, por campo. */
+    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 */ []));
+    /** 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);
+    }, ...(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)}`;
+    }, ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    /** aria-labelledby: rótulo do form field (ou aria-label) + "início"/"fim". */
+    labelledBy(partId) {
+        const label = this.field?.labelId();
+        return `${label ?? this.nameId} ${partId}`;
+    }
+    // nome escondido quando se usa aria-label em vez de mxLabel
+    nameText = computed(() => this.ariaLabel() ?? '', ...(ngDevMode ? [{ debugName: "nameText" }] : /* istanbul ignore next */ []));
+    open() {
+        if (this.isDisabled())
+            return;
+        const v = this.value();
+        this.draftRange.set(v?.start ? { start: v.start, end: v.end } : null);
+        this.isOpen.set(true);
+    }
+    toggle() {
+        if (this.isOpen())
+            this.close();
+        else
+            this.open();
+    }
+    close(restoreFocus = true) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        if (restoreFocus)
+            this.toggleButton().nativeElement.focus();
+    }
+    onAttach() {
+        queueMicrotask(() => this.calendar()?.focus());
+    }
+    onOverlayKey(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    onOutside(event) {
+        if (!this.host.contains(event.target))
+            this.close(false);
+    }
+    choose(range) {
+        this.draftText.set({ start: null, end: null });
+        this.setValue({ start: mxStartOfDay(range.start), end: mxStartOfDay(range.end) });
+        this.close();
+    }
+    applyPreset(p) {
+        this.choose(p.range());
+    }
+    onInput(part, event) {
+        const text = event.target.value;
+        const parsed = mxParseDate(text);
+        this.draftText.update((d) => ({ ...d, [part]: parsed || !text ? null : text }));
+        const current = this.value() ?? { start: null, end: null };
+        const next = { ...current, [part]: parsed };
+        this.setValue(next.start || next.end ? next : null);
+    }
+    setValue(v) {
+        const prev = this.value();
+        const same = (a, b) => (a?.getTime() ?? null) === (b?.getTime() ?? null);
+        if (same(prev?.start, v?.start) && same(prev?.end, v?.end))
+            return;
+        this.value.set(v);
+        this.onChange(v);
+    }
+    // ---- MxFormFieldControl ----
+    errorState() {
+        if (this.invalid() || this.badFormat())
+            return true;
+        const c = this.ngControl;
+        return !!c && !!c.invalid && !!(c.touched || c.dirty);
+    }
+    isRequired() {
+        return this.required() || !!this.ngControl?.control?.hasValidator?.(Validators.required);
+    }
+    // ---- ControlValueAccessor ----
+    writeValue(value) {
+        this.value.set(value ? { start: value.start ? mxStartOfDay(value.start) : null, end: value.end ? mxStartOfDay(value.end) : null } : null);
+        this.draftText.set({ start: null, end: null });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxDateRangePicker, isStandalone: true, selector: "mx-date-range-picker", 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 }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.aria-label": "null" }, classAttribute: "mx-date-range-picker" }, providers: [{ provide: MX_FORM_FIELD_CONTROL, useExisting: MxDateRangePicker }], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, isSignal: true }], exportAs: ["mxDateRangePicker"], ngImport: i0, template: `
+    <div
+      class="mx-date-range-field"
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      [attr.data-size]="size() === 'md' ? null : size()"
+      [attr.data-invalid]="errorState() ? '' : null"
+      [attr.data-disabled]="isDisabled() ? '' : null"
+    >
+      <input
+        class="mx-date-range-input"
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        [id]="controlId()"
+        [placeholder]="placeholder()"
+        [value]="startText()"
+        [disabled]="isDisabled()"
+        [attr.aria-labelledby]="labelledBy(startLabelId)"
+        [attr.aria-invalid]="errorState() ? 'true' : null"
+        [attr.aria-required]="isRequired() ? 'true' : null"
+        [attr.aria-describedby]="field?.describedBy() ?? null"
+        (input)="onInput('start', $event)"
+        (blur)="onTouched()"
+        (keydown.alt.arrowdown)="$event.preventDefault(); open()"
+      />
+      <span class="mx-date-range-sep" aria-hidden="true">–</span>
+      <input
+        class="mx-date-range-input"
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        [placeholder]="placeholder()"
+        [value]="endText()"
+        [disabled]="isDisabled()"
+        [attr.aria-labelledby]="labelledBy(endLabelId)"
+        [attr.aria-invalid]="errorState() ? 'true' : null"
+        [attr.aria-required]="isRequired() ? 'true' : null"
+        [attr.aria-describedby]="field?.describedBy() ?? null"
+        (input)="onInput('end', $event)"
+        (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>
+      @if (!field?.labelId()) {
+        <span class="mx-visually-hidden" [id]="nameId">{{ nameText() }}</span>
+      }
+      <button
+        #toggleButton
+        type="button"
+        class="mx-date-picker-toggle"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-label]="toggleLabel()"
+        [disabled]="isDisabled()"
+        (click)="toggle()"
+      >
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <rect x="2.5" y="3.5" width="11" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3" />
+          <path d="M2.5 6.5h11M5.5 2v3M10.5 2v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
+        </svg>
+      </button>
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutside($event)"
+      (overlayKeydown)="onOverlayKey($event)"
+      (attach)="onAttach()"
+      (detach)="close(false)"
+    >
+      <div class="mx-date-picker-panel mx-date-range-panel" role="dialog" aria-modal="false" aria-label="Escolher intervalo">
+        @if (presets().length) {
+          <ul class="mx-date-range-presets" aria-label="Atalhos">
+            @for (p of presets(); track p.label) {
+              <li><button type="button" class="mx-date-range-preset" (click)="applyPreset(p)">{{ p.label }}</button></li>
+            }
+          </ul>
+        }
+        <mx-calendar
+          #calendar
+          mode="range"
+          [(range)]="draftRange"
+          [min]="min()"
+          [max]="max()"
+          [dateDisabled]="dateDisabled()"
+          [locale]="locale()"
+          (rangeSelected)="choose($event)"
+        />
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: MxCalendar, selector: "mx-calendar", inputs: ["value", "min", "max", "dateDisabled", "locale", "firstDayOfWeek", "mode", "range"], outputs: ["valueChange", "selected", "rangeChange", "rangeSelected"], exportAs: ["mxCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxDateRangePicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mx-date-range-picker',
+                    exportAs: 'mxDateRangePicker',
+                    imports: [CdkOverlayOrigin, CdkConnectedOverlay, MxCalendar],
+                    providers: [{ provide: MX_FORM_FIELD_CONTROL, useExisting: MxDateRangePicker }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'mx-date-range-picker', '[attr.aria-label]': 'null' },
+                    template: `
+    <div
+      class="mx-date-range-field"
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      [attr.data-size]="size() === 'md' ? null : size()"
+      [attr.data-invalid]="errorState() ? '' : null"
+      [attr.data-disabled]="isDisabled() ? '' : null"
+    >
+      <input
+        class="mx-date-range-input"
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        [id]="controlId()"
+        [placeholder]="placeholder()"
+        [value]="startText()"
+        [disabled]="isDisabled()"
+        [attr.aria-labelledby]="labelledBy(startLabelId)"
+        [attr.aria-invalid]="errorState() ? 'true' : null"
+        [attr.aria-required]="isRequired() ? 'true' : null"
+        [attr.aria-describedby]="field?.describedBy() ?? null"
+        (input)="onInput('start', $event)"
+        (blur)="onTouched()"
+        (keydown.alt.arrowdown)="$event.preventDefault(); open()"
+      />
+      <span class="mx-date-range-sep" aria-hidden="true">–</span>
+      <input
+        class="mx-date-range-input"
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        [placeholder]="placeholder()"
+        [value]="endText()"
+        [disabled]="isDisabled()"
+        [attr.aria-labelledby]="labelledBy(endLabelId)"
+        [attr.aria-invalid]="errorState() ? 'true' : null"
+        [attr.aria-required]="isRequired() ? 'true' : null"
+        [attr.aria-describedby]="field?.describedBy() ?? null"
+        (input)="onInput('end', $event)"
+        (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>
+      @if (!field?.labelId()) {
+        <span class="mx-visually-hidden" [id]="nameId">{{ nameText() }}</span>
+      }
+      <button
+        #toggleButton
+        type="button"
+        class="mx-date-picker-toggle"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-label]="toggleLabel()"
+        [disabled]="isDisabled()"
+        (click)="toggle()"
+      >
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <rect x="2.5" y="3.5" width="11" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3" />
+          <path d="M2.5 6.5h11M5.5 2v3M10.5 2v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
+        </svg>
+      </button>
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutside($event)"
+      (overlayKeydown)="onOverlayKey($event)"
+      (attach)="onAttach()"
+      (detach)="close(false)"
+    >
+      <div class="mx-date-picker-panel mx-date-range-panel" role="dialog" aria-modal="false" aria-label="Escolher intervalo">
+        @if (presets().length) {
+          <ul class="mx-date-range-presets" aria-label="Atalhos">
+            @for (p of presets(); track p.label) {
+              <li><button type="button" class="mx-date-range-preset" (click)="applyPreset(p)">{{ p.label }}</button></li>
+            }
+          </ul>
+        }
+        <mx-calendar
+          #calendar
+          mode="range"
+          [(range)]="draftRange"
+          [min]="min()"
+          [max]="max()"
+          [dateDisabled]="dateDisabled()"
+          [locale]="locale()"
+          (rangeSelected)="choose($event)"
+        />
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], calendar: [{ type: i0.ViewChild, args: ['calendar', { isSignal: true }] }], toggleButton: [{ type: i0.ViewChild, args: ['toggleButton', { isSignal: true }] }] } });
+/** Validador: exige início e fim. Usa com `Validators.required` não chega, porque {start, end: null} não é vazio. */
+function mxDateRangeComplete(control) {
+    const v = control.value;
+    return v && (!v.start || !v.end) ? { rangeIncomplete: true } : null;
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MxCalendar, MxDatePicker, mxFormatDate, mxParseDate, mxSameDay, mxStartOfDay };
+export { MxCalendar, MxDatePicker, MxDateRangePicker, mxDateRangeComplete, mxDefaultRangePresets, mxFormatDate, mxParseDate, mxSameDay, mxStartOfDay };
 //# sourceMappingURL=muxima-ui-core-date-picker.mjs.map