@mesgflow/ui-kit 0.6.0 → 0.8.0

package/fesm2022/mesgflow-ui-kit-date-picker.mjs

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
-import { model, input, output, inject, computed, signal, viewChild, effect, untracked, afterRenderEffect, Component, forwardRef } from '@angular/core';
+import { model, input, output, inject, computed, signal, viewChild, effect, untracked, afterRenderEffect, Component, forwardRef, booleanAttribute } from '@angular/core';
 import { startOfDay, startOfMonth, subDays, startOfWeek, endOfWeek, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay as isSameDay$1, isWithinInterval, addMonths, subMonths, addYears, subYears, format, parse, isValid, addDays } from 'date-fns';
 import { Button } from '@mesgflow/ui-kit/button';
 import { Icon } from '@mesgflow/ui-kit/icon';
-import { MF_DATE_LOCALE, MF_DATE_PICKER_LABELS, cn, ValueAccessorBase } from '@mesgflow/ui-kit/core';
+import { MF_DATE_LOCALE, MF_DATE_PICKER_LABELS, cn, focusRecipe, ValueAccessorBase } from '@mesgflow/ui-kit/core';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Input, InputGroup, InputPrefix, InputSuffix } from '@mesgflow/ui-kit/input';
 import { Popover } from '@mesgflow/ui-kit/popover';
+import { TimePicker } from '@mesgflow/ui-kit/time-picker';
 
 /**
  * Hazır tarih aralıkları — kurumsal panellerde tarih filtresinin %90'ı bunlar
@@ -216,15 +217,16 @@ class Calendar {
         const inRange = isRangeMode && isWithinRange(day, this.rangeStart(), effectiveEnd);
         const isSelectedSingle = !isRangeMode && isSameDay(day, this.selected());
         return cn('relative flex h-9 w-9 shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent text-sm tabular-nums text-fg transition-colors duration-fast ease-emphasis ' +
-            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +
-            'disabled:pointer-events-none disabled:opacity-40', outside && 'text-fg-subtle', !isSelectedSingle && !isEdge && 'hover:bg-surface-alt', inRange && 'rounded-none bg-primary-tint', inRange && isStart && 'rounded-s-sm', inRange && isEnd && 'rounded-e-sm', (isSelectedSingle || isEdge) &&
+            focusRecipe +
+            ' ' +
+            'disabled:pointer-events-none disabled:opacity-40', outside && 'text-fg-subtle', !isSelectedSingle && !isEdge && 'hover:bg-state-hover', inRange && 'rounded-none bg-primary-tint', inRange && isStart && 'rounded-s-sm', inRange && isEnd && 'rounded-e-sm', (isSelectedSingle || isEdge) &&
             'rounded-sm bg-primary-tint font-semibold text-primary-tint-fg', today &&
             !isSelectedSingle &&
             !isEdge &&
             "after:absolute after:bottom-1 after:h-1 after:w-1 after:rounded-full after:bg-accent after:content-['']");
     }
     cellClasses(active) {
-        return cn('rounded-sm px-2 py-2.5 text-sm text-fg capitalize transition-colors duration-fast ease-emphasis', active ? 'bg-primary-tint font-semibold text-primary-tint-fg' : 'hover:bg-surface-alt');
+        return cn('rounded-sm px-2 py-2.5 text-sm text-fg capitalize transition-colors duration-fast ease-emphasis', active ? 'bg-primary-tint font-semibold text-primary-tint-fg' : 'hover:bg-state-hover');
     }
     monthLabel(m) {
         return format(m, 'LLL', { locale: this.effectiveLocale() });
@@ -305,10 +307,10 @@ class Calendar {
         if (!isCurrentMonth(day, this.month()))
             this.month.set(startOfMonth(day));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Calendar, isStandalone: true, selector: "mf-calendar", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, hoverEnd: { classPropertyName: "hoverEnd", publicName: "hoverEnd", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { month: "monthChange", dayPick: "dayPick", dayHover: "dayHover" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "gridEl", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex w-64 flex-col gap-2\">\r\n  @switch (view()) {\r\n    @case ('day') {\r\n      <div class=\"flex items-center justify-between\">\r\n        @if (navigable()) {\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().previousMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), -1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm text-fg capitalize transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n            [attr.aria-label]=\"effectiveLabels().chooseMonth\"\r\n            (click)=\"openMonthView()\"\r\n          >\r\n            {{ monthYearLabel() }}\r\n            <span mfIcon [size]=\"16\">expand_more</span>\r\n          </button>\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().nextMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), 1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n          </button>\r\n        } @else {\r\n          <span class=\"px-1 font-display text-title-sm text-fg capitalize\">{{\r\n            monthYearLabel()\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-7\">\r\n        @for (label of weekdayLabels(); track $index) {\r\n          <span class=\"text-eyebrow flex h-6 items-center justify-center text-fg-subtle\">{{\r\n            label\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!--\r\n        `role=\"grid\"` kapsay\u0131c\u0131s\u0131 odaklanabilir DE\u011E\u0130L \u2014 h\u00FCcreler (`role=\"gridcell\"`)\r\n        ger\u00E7ek `<button>` elemanlar\u0131, roving tabindex ile kendi odaklar\u0131n\u0131 ta\u015F\u0131r;\r\n        bu `(keydown)` yaln\u0131zca ok tu\u015Fu gezinmesini merkezi y\u00F6netmek i\u00E7in.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        #grid\r\n        role=\"grid\"\r\n        [attr.aria-label]=\"monthYearLabel()\"\r\n        class=\"grid grid-cols-7 gap-y-1\"\r\n        (keydown)=\"onGridKeydown($event)\"\r\n        (mouseleave)=\"dayHover.emit(null)\"\r\n      >\r\n        @for (week of weeks(); track $index) {\r\n          <div role=\"row\" class=\"contents\">\r\n            @for (day of week; track day.getTime()) {\r\n              <button\r\n                type=\"button\"\r\n                role=\"gridcell\"\r\n                [attr.data-day-key]=\"dayKey(day)\"\r\n                [attr.aria-selected]=\"isSameDaySafe(day)\"\r\n                [tabindex]=\"tabIndexFor(day)\"\r\n                [disabled]=\"isDisabled(day)\"\r\n                [class]=\"dayClasses(day)\"\r\n                (click)=\"pick(day)\"\r\n                (mouseenter)=\"onDayMouseEnter(day)\"\r\n              >\r\n                {{ day.getDate() }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('month') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"month.set(shiftYear(month(), -1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm tabular-nums text-fg transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n          [attr.aria-label]=\"effectiveLabels().chooseYear\"\r\n          (click)=\"openYearView()\"\r\n        >\r\n          {{ month().getFullYear() }}\r\n          <span mfIcon [size]=\"16\">expand_more</span>\r\n        </button>\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"month.set(shiftYear(month(), 1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (m of monthGrid(); track m.getMonth()) {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(m.getMonth() === month().getMonth())\"\r\n            (click)=\"pickMonth(m)\"\r\n          >\r\n            {{ monthLabel(m) }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('year') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"shiftYearPage(-1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <span class=\"font-display text-title-sm tabular-nums text-fg\"\r\n          >{{ yearGrid()[0] }}\u2013{{ yearGrid()[11] }}</span\r\n        >\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"shiftYearPage(1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (y of yearGrid(); track y) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"tabular-nums\"\r\n            [class]=\"cellClasses(y === month().getFullYear())\"\r\n            (click)=\"pickYear(y)\"\r\n          >\r\n            {{ y }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Calendar, isStandalone: true, selector: "mf-calendar", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, hoverEnd: { classPropertyName: "hoverEnd", publicName: "hoverEnd", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { month: "monthChange", dayPick: "dayPick", dayHover: "dayHover" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "gridEl", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex w-64 flex-col gap-2\">\r\n  @switch (view()) {\r\n    @case ('day') {\r\n      <div class=\"flex items-center justify-between\">\r\n        @if (navigable()) {\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().previousMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), -1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm text-fg capitalize transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n            [attr.aria-label]=\"effectiveLabels().chooseMonth\"\r\n            (click)=\"openMonthView()\"\r\n          >\r\n            {{ monthYearLabel() }}\r\n            <span mfIcon [size]=\"16\">expand_more</span>\r\n          </button>\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().nextMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), 1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n          </button>\r\n        } @else {\r\n          <span class=\"px-1 font-display text-title-sm text-fg capitalize\">{{\r\n            monthYearLabel()\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-7\">\r\n        @for (label of weekdayLabels(); track $index) {\r\n          <span class=\"text-eyebrow flex h-6 items-center justify-center text-fg-subtle\">{{\r\n            label\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!--\r\n        `role=\"grid\"` kapsay\u0131c\u0131s\u0131 odaklanabilir DE\u011E\u0130L \u2014 h\u00FCcreler (`role=\"gridcell\"`)\r\n        ger\u00E7ek `<button>` elemanlar\u0131, roving tabindex ile kendi odaklar\u0131n\u0131 ta\u015F\u0131r;\r\n        bu `(keydown)` yaln\u0131zca ok tu\u015Fu gezinmesini merkezi y\u00F6netmek i\u00E7in.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        #grid\r\n        role=\"grid\"\r\n        [attr.aria-label]=\"monthYearLabel()\"\r\n        class=\"grid grid-cols-7 gap-y-1\"\r\n        (keydown)=\"onGridKeydown($event)\"\r\n        (mouseleave)=\"dayHover.emit(null)\"\r\n      >\r\n        @for (week of weeks(); track $index) {\r\n          <div role=\"row\" class=\"contents\">\r\n            @for (day of week; track day.getTime()) {\r\n              <button\r\n                type=\"button\"\r\n                role=\"gridcell\"\r\n                [attr.data-day-key]=\"dayKey(day)\"\r\n                [attr.aria-selected]=\"isSameDaySafe(day)\"\r\n                [tabindex]=\"tabIndexFor(day)\"\r\n                [disabled]=\"isDisabled(day)\"\r\n                [class]=\"dayClasses(day)\"\r\n                (click)=\"pick(day)\"\r\n                (mouseenter)=\"onDayMouseEnter(day)\"\r\n              >\r\n                {{ day.getDate() }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('month') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"month.set(shiftYear(month(), -1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm tabular-nums text-fg transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n          [attr.aria-label]=\"effectiveLabels().chooseYear\"\r\n          (click)=\"openYearView()\"\r\n        >\r\n          {{ month().getFullYear() }}\r\n          <span mfIcon [size]=\"16\">expand_more</span>\r\n        </button>\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"month.set(shiftYear(month(), 1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (m of monthGrid(); track m.getMonth()) {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(m.getMonth() === month().getMonth())\"\r\n            (click)=\"pickMonth(m)\"\r\n          >\r\n            {{ monthLabel(m) }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('year') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"shiftYearPage(-1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <span class=\"font-display text-title-sm tabular-nums text-fg\"\r\n          >{{ yearGrid()[0] }}\u2013{{ yearGrid()[11] }}</span\r\n        >\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"shiftYearPage(1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (y of yearGrid(); track y) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"tabular-nums\"\r\n            [class]=\"cellClasses(y === month().getFullYear())\"\r\n            (click)=\"pickYear(y)\"\r\n          >\r\n            {{ y }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Calendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'mf-calendar', imports: [Button, Icon], host: { class: 'block' }, template: "<div class=\"flex w-64 flex-col gap-2\">\r\n  @switch (view()) {\r\n    @case ('day') {\r\n      <div class=\"flex items-center justify-between\">\r\n        @if (navigable()) {\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().previousMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), -1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm text-fg capitalize transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n            [attr.aria-label]=\"effectiveLabels().chooseMonth\"\r\n            (click)=\"openMonthView()\"\r\n          >\r\n            {{ monthYearLabel() }}\r\n            <span mfIcon [size]=\"16\">expand_more</span>\r\n          </button>\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().nextMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), 1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n          </button>\r\n        } @else {\r\n          <span class=\"px-1 font-display text-title-sm text-fg capitalize\">{{\r\n            monthYearLabel()\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-7\">\r\n        @for (label of weekdayLabels(); track $index) {\r\n          <span class=\"text-eyebrow flex h-6 items-center justify-center text-fg-subtle\">{{\r\n            label\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!--\r\n        `role=\"grid\"` kapsay\u0131c\u0131s\u0131 odaklanabilir DE\u011E\u0130L \u2014 h\u00FCcreler (`role=\"gridcell\"`)\r\n        ger\u00E7ek `<button>` elemanlar\u0131, roving tabindex ile kendi odaklar\u0131n\u0131 ta\u015F\u0131r;\r\n        bu `(keydown)` yaln\u0131zca ok tu\u015Fu gezinmesini merkezi y\u00F6netmek i\u00E7in.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        #grid\r\n        role=\"grid\"\r\n        [attr.aria-label]=\"monthYearLabel()\"\r\n        class=\"grid grid-cols-7 gap-y-1\"\r\n        (keydown)=\"onGridKeydown($event)\"\r\n        (mouseleave)=\"dayHover.emit(null)\"\r\n      >\r\n        @for (week of weeks(); track $index) {\r\n          <div role=\"row\" class=\"contents\">\r\n            @for (day of week; track day.getTime()) {\r\n              <button\r\n                type=\"button\"\r\n                role=\"gridcell\"\r\n                [attr.data-day-key]=\"dayKey(day)\"\r\n                [attr.aria-selected]=\"isSameDaySafe(day)\"\r\n                [tabindex]=\"tabIndexFor(day)\"\r\n                [disabled]=\"isDisabled(day)\"\r\n                [class]=\"dayClasses(day)\"\r\n                (click)=\"pick(day)\"\r\n                (mouseenter)=\"onDayMouseEnter(day)\"\r\n              >\r\n                {{ day.getDate() }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('month') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"month.set(shiftYear(month(), -1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm tabular-nums text-fg transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n          [attr.aria-label]=\"effectiveLabels().chooseYear\"\r\n          (click)=\"openYearView()\"\r\n        >\r\n          {{ month().getFullYear() }}\r\n          <span mfIcon [size]=\"16\">expand_more</span>\r\n        </button>\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"month.set(shiftYear(month(), 1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (m of monthGrid(); track m.getMonth()) {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(m.getMonth() === month().getMonth())\"\r\n            (click)=\"pickMonth(m)\"\r\n          >\r\n            {{ monthLabel(m) }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('year') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"shiftYearPage(-1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <span class=\"font-display text-title-sm tabular-nums text-fg\"\r\n          >{{ yearGrid()[0] }}\u2013{{ yearGrid()[11] }}</span\r\n        >\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"shiftYearPage(1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (y of yearGrid(); track y) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"tabular-nums\"\r\n            [class]=\"cellClasses(y === month().getFullYear())\"\r\n            (click)=\"pickYear(y)\"\r\n          >\r\n            {{ y }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }, { type: i0.Output, args: ["monthChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], hoverEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverEnd", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], dayPick: [{ type: i0.Output, args: ["dayPick"] }], dayHover: [{ type: i0.Output, args: ["dayHover"] }], gridEl: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
@@ -420,16 +422,16 @@ class DatePicker extends ValueAccessorBase {
         this.draft.set(v ? formatDateInput(v, this.effectiveLocale()) : '');
         this.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DatePicker, isStandalone: true, selector: "mf-date-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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DatePicker, isStandalone: true, selector: "mf-date-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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePicker), multi: true },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["mfDatePicker"], usesInheritance: true, ngImport: i0, template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 start-2.5 -translate-y-1/2 text-fg-subtle\"\r\n    >calendar_today</span\r\n  >\r\n  <input\r\n    mfInput\r\n    #inputEl\r\n    type=\"text\"\r\n    class=\"ps-9\"\r\n    [class.pr-8]=\"!!value()\"\r\n    [hasError]=\"hasError()\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"effectiveLabels().placeholder\"\r\n    [value]=\"draft()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (input)=\"onInput($any($event.target).value)\"\r\n    (focus)=\"open.set(true)\"\r\n    (keydown.enter)=\"commitDraft()\"\r\n    (keydown.escape)=\"onEscape()\"\r\n  />\r\n  @if (value()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"absolute top-1/2 end-2.5 -translate-y-1/2 appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveLabels().clear\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  }\r\n\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"open()\"\r\n    placement=\"bottom-start\"\r\n    padding=\"lg\"\r\n    panelClass=\"w-auto\"\r\n    (closed)=\"onEscape()\"\r\n  >\r\n    <mf-calendar\r\n      [(month)]=\"month\"\r\n      [selected]=\"value()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [locale]=\"effectiveLocale()\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (dayPick)=\"onDayPick($event)\"\r\n    />\r\n    <div class=\"mt-2 flex items-center justify-between border-t border-border pt-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-accent transition-colors duration-fast ease-emphasis hover:text-accent-strong\"\r\n        (click)=\"pickToday()\"\r\n      >\r\n        {{ effectiveLabels().today }}\r\n      </button>\r\n      @if (value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          (click)=\"clear()\"\r\n        >\r\n          {{ effectiveLabels().clear }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </mf-popover>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["mfDatePicker"], usesInheritance: true, ngImport: i0, template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 start-2.5 -translate-y-1/2 text-fg-subtle\"\r\n    >calendar_today</span\r\n  >\r\n  <input\r\n    mfInput\r\n    #inputEl\r\n    type=\"text\"\r\n    class=\"ps-9\"\r\n    [class.pr-8]=\"!!value()\"\r\n    [hasError]=\"hasError()\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"effectiveLabels().placeholder\"\r\n    [value]=\"draft()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (input)=\"onInput($any($event.target).value)\"\r\n    (focus)=\"open.set(true)\"\r\n    (keydown.enter)=\"commitDraft()\"\r\n    (keydown.escape)=\"onEscape()\"\r\n  />\r\n  @if (value()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex items-center justify-center absolute top-1/2 end-2.5 -translate-y-1/2 appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveLabels().clear\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  }\r\n\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"open()\"\r\n    placement=\"bottom-start\"\r\n    padding=\"lg\"\r\n    panelClass=\"w-auto\"\r\n    (closed)=\"onEscape()\"\r\n  >\r\n    <mf-calendar\r\n      [(month)]=\"month\"\r\n      [selected]=\"value()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [locale]=\"effectiveLocale()\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (dayPick)=\"onDayPick($event)\"\r\n    />\r\n    <div class=\"mt-2 flex items-center justify-between border-t border-border pt-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-accent transition-colors duration-fast ease-emphasis hover:text-accent-strong\"\r\n        (click)=\"pickToday()\"\r\n      >\r\n        {{ effectiveLabels().today }}\r\n      </button>\r\n      @if (value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          (click)=\"clear()\"\r\n        >\r\n          {{ effectiveLabels().clear }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </mf-popover>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DatePicker, decorators: [{
             type: Component,
             args: [{ selector: 'mf-date-picker', exportAs: 'mfDatePicker', imports: [OverlayModule, Icon, Input, Calendar, Popover], host: { class: 'block' }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePicker), multi: true },
-                    ], template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 start-2.5 -translate-y-1/2 text-fg-subtle\"\r\n    >calendar_today</span\r\n  >\r\n  <input\r\n    mfInput\r\n    #inputEl\r\n    type=\"text\"\r\n    class=\"ps-9\"\r\n    [class.pr-8]=\"!!value()\"\r\n    [hasError]=\"hasError()\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"effectiveLabels().placeholder\"\r\n    [value]=\"draft()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (input)=\"onInput($any($event.target).value)\"\r\n    (focus)=\"open.set(true)\"\r\n    (keydown.enter)=\"commitDraft()\"\r\n    (keydown.escape)=\"onEscape()\"\r\n  />\r\n  @if (value()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"absolute top-1/2 end-2.5 -translate-y-1/2 appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveLabels().clear\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  }\r\n\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"open()\"\r\n    placement=\"bottom-start\"\r\n    padding=\"lg\"\r\n    panelClass=\"w-auto\"\r\n    (closed)=\"onEscape()\"\r\n  >\r\n    <mf-calendar\r\n      [(month)]=\"month\"\r\n      [selected]=\"value()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [locale]=\"effectiveLocale()\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (dayPick)=\"onDayPick($event)\"\r\n    />\r\n    <div class=\"mt-2 flex items-center justify-between border-t border-border pt-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-accent transition-colors duration-fast ease-emphasis hover:text-accent-strong\"\r\n        (click)=\"pickToday()\"\r\n      >\r\n        {{ effectiveLabels().today }}\r\n      </button>\r\n      @if (value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          (click)=\"clear()\"\r\n        >\r\n          {{ effectiveLabels().clear }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </mf-popover>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 start-2.5 -translate-y-1/2 text-fg-subtle\"\r\n    >calendar_today</span\r\n  >\r\n  <input\r\n    mfInput\r\n    #inputEl\r\n    type=\"text\"\r\n    class=\"ps-9\"\r\n    [class.pr-8]=\"!!value()\"\r\n    [hasError]=\"hasError()\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"effectiveLabels().placeholder\"\r\n    [value]=\"draft()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (input)=\"onInput($any($event.target).value)\"\r\n    (focus)=\"open.set(true)\"\r\n    (keydown.enter)=\"commitDraft()\"\r\n    (keydown.escape)=\"onEscape()\"\r\n  />\r\n  @if (value()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex items-center justify-center absolute top-1/2 end-2.5 -translate-y-1/2 appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveLabels().clear\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  }\r\n\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"open()\"\r\n    placement=\"bottom-start\"\r\n    padding=\"lg\"\r\n    panelClass=\"w-auto\"\r\n    (closed)=\"onEscape()\"\r\n  >\r\n    <mf-calendar\r\n      [(month)]=\"month\"\r\n      [selected]=\"value()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [locale]=\"effectiveLocale()\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (dayPick)=\"onDayPick($event)\"\r\n    />\r\n    <div class=\"mt-2 flex items-center justify-between border-t border-border pt-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-accent transition-colors duration-fast ease-emphasis hover:text-accent-strong\"\r\n        (click)=\"pickToday()\"\r\n      >\r\n        {{ effectiveLabels().today }}\r\n      </button>\r\n      @if (value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          (click)=\"clear()\"\r\n        >\r\n          {{ effectiveLabels().clear }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </mf-popover>\r\n</div>\r\n" }]
         }], 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 }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
 
 const PRESETS = ['today', 'last7', 'last30', 'thisMonth'];
@@ -623,21 +625,140 @@ class DateRangePicker extends ValueAccessorBase {
         this.endDraft.set(v.end ? formatDateInput(v.end, this.effectiveLocale()) : '');
         this.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateRangePicker, isStandalone: true, selector: "mf-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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DateRangePicker, isStandalone: true, selector: "mf-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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePicker), multi: true },
-        ], viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startEl"], descendants: true, isSignal: true }], exportAs: ["mfDateRangePicker"], usesInheritance: true, ngImport: i0, template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <mf-input-group [hasError]=\"hasError()\" [disabled]=\"disabled()\">\r\n    <span mfInputPrefix><span mfIcon [size]=\"18\">calendar_today</span></span>\r\n    <input\r\n      #startEl\r\n      type=\"text\"\r\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\r\n      [placeholder]=\"effectiveLabels().startDate\"\r\n      [value]=\"startDraft()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"effectiveLabels().startDate\"\r\n      (input)=\"onStartInput($any($event.target).value)\"\r\n      (focus)=\"open.set(true)\"\r\n      (keydown.enter)=\"commitStartDraft()\"\r\n      (keydown.escape)=\"onEscape()\"\r\n    />\r\n    <span class=\"shrink-0 text-fg-subtle\" aria-hidden=\"true\">\u2013</span>\r\n    <input\r\n      type=\"text\"\r\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\r\n      [placeholder]=\"effectiveLabels().endDate\"\r\n      [value]=\"endDraft()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"effectiveLabels().endDate\"\r\n      (input)=\"onEndInput($any($event.target).value)\"\r\n      (focus)=\"open.set(true)\"\r\n      (keydown.enter)=\"commitEndDraft()\"\r\n      (keydown.escape)=\"onEscape()\"\r\n    />\r\n    @if (value().start || value().end) {\r\n      <button\r\n        mfInputSuffix\r\n        type=\"button\"\r\n        class=\"appearance-none border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n        [attr.aria-label]=\"effectiveLabels().clear\"\r\n        (click)=\"clear()\"\r\n      >\r\n        <span mfIcon [size]=\"16\">close</span>\r\n      </button>\r\n    }\r\n  </mf-input-group>\r\n\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"open()\"\r\n    placement=\"bottom-start\"\r\n    padding=\"none\"\r\n    panelClass=\"flex w-auto\"\r\n    (closed)=\"onEscape()\"\r\n  >\r\n    <div class=\"flex flex-col gap-0.5 border-e border-border p-2\">\r\n      @for (preset of presets; track preset) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none whitespace-nowrap rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n          (click)=\"applyPreset(preset)\"\r\n        >\r\n          {{ presetLabel(preset) }}\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-2 p-3\">\r\n      <div class=\"flex gap-4\">\r\n        <mf-calendar\r\n          mode=\"range\"\r\n          [(month)]=\"monthLeft\"\r\n          [rangeStart]=\"draftRange().start\"\r\n          [rangeEnd]=\"draftRange().end\"\r\n          [hoverEnd]=\"hoverEnd()\"\r\n          [min]=\"min()\"\r\n          [max]=\"max()\"\r\n          [locale]=\"effectiveLocale()\"\r\n          [labels]=\"effectiveLabels()\"\r\n          (dayPick)=\"onDayPick($event)\"\r\n          (dayHover)=\"onDayHover($event)\"\r\n        />\r\n        <div class=\"hidden sm:block\">\r\n          <mf-calendar\r\n            mode=\"range\"\r\n            [month]=\"monthRight()\"\r\n            [navigable]=\"false\"\r\n            [rangeStart]=\"draftRange().start\"\r\n            [rangeEnd]=\"draftRange().end\"\r\n            [hoverEnd]=\"hoverEnd()\"\r\n            [min]=\"min()\"\r\n            [max]=\"max()\"\r\n            [locale]=\"effectiveLocale()\"\r\n            [labels]=\"effectiveLabels()\"\r\n            (dayPick)=\"onDayPick($event)\"\r\n            (dayHover)=\"onDayHover($event)\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"flex items-center justify-end gap-2 border-t border-border pt-2\">\r\n        <button mfButton tone=\"neutral\" appearance=\"text\" size=\"sm\" type=\"button\" (click)=\"clear()\">\r\n          {{ effectiveLabels().clear }}\r\n        </button>\r\n        <button\r\n          mfButton\r\n          tone=\"primary\"\r\n          appearance=\"filled\"\r\n          size=\"sm\"\r\n          type=\"button\"\r\n          [disabled]=\"!draftRange().start\"\r\n          (click)=\"apply()\"\r\n        >\r\n          {{ effectiveLabels().apply }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mf-popover>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: InputGroup, selector: "mf-input-group", inputs: ["size", "disabled", "hasError", "padded", "wrap"], exportAs: ["mfInputGroup"] }, { kind: "directive", type: InputPrefix, selector: "[mfInputPrefix]", inputs: ["addon"] }, { kind: "directive", type: InputSuffix, selector: "[mfInputSuffix]", inputs: ["addon"] }] });
+        ], viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startEl"], descendants: true, isSignal: true }], exportAs: ["mfDateRangePicker"], usesInheritance: true, ngImport: i0, template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <mf-input-group [hasError]=\"hasError()\" [disabled]=\"disabled()\">\n    <span mfInputPrefix><span mfIcon [size]=\"18\">calendar_today</span></span>\n    <input\n      #startEl\n      type=\"text\"\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\n      [placeholder]=\"effectiveLabels().startDate\"\n      [value]=\"startDraft()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"effectiveLabels().startDate\"\n      (input)=\"onStartInput($any($event.target).value)\"\n      (focus)=\"open.set(true)\"\n      (keydown.enter)=\"commitStartDraft()\"\n      (keydown.escape)=\"onEscape()\"\n    />\n    <span class=\"shrink-0 text-fg-subtle\" aria-hidden=\"true\">\u2013</span>\n    <input\n      type=\"text\"\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\n      [placeholder]=\"effectiveLabels().endDate\"\n      [value]=\"endDraft()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"effectiveLabels().endDate\"\n      (input)=\"onEndInput($any($event.target).value)\"\n      (focus)=\"open.set(true)\"\n      (keydown.enter)=\"commitEndDraft()\"\n      (keydown.escape)=\"onEscape()\"\n    />\n    @if (value().start || value().end) {\n      <button\n        mfInputSuffix\n        type=\"button\"\n        class=\"appearance-none border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg\"\n        [attr.aria-label]=\"effectiveLabels().clear\"\n        (click)=\"clear()\"\n      >\n        <span mfIcon [size]=\"16\">close</span>\n      </button>\n    }\n  </mf-input-group>\n\n  <mf-popover\n    [origin]=\"origin\"\n    [open]=\"open()\"\n    placement=\"bottom-start\"\n    padding=\"none\"\n    panelClass=\"flex w-auto\"\n    (closed)=\"onEscape()\"\n  >\n    <div class=\"flex flex-col gap-0.5 border-e border-border p-2\">\n      @for (preset of presets; track preset) {\n        <button\n          type=\"button\"\n          class=\"appearance-none whitespace-nowrap rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\n          (click)=\"applyPreset(preset)\"\n        >\n          {{ presetLabel(preset) }}\n        </button>\n      }\n    </div>\n\n    <div class=\"flex flex-col gap-2 p-3\">\n      <div class=\"flex gap-4\">\n        <mf-calendar\n          mode=\"range\"\n          [(month)]=\"monthLeft\"\n          [rangeStart]=\"draftRange().start\"\n          [rangeEnd]=\"draftRange().end\"\n          [hoverEnd]=\"hoverEnd()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [locale]=\"effectiveLocale()\"\n          [labels]=\"effectiveLabels()\"\n          (dayPick)=\"onDayPick($event)\"\n          (dayHover)=\"onDayHover($event)\"\n        />\n        <div class=\"hidden sm:block\">\n          <mf-calendar\n            mode=\"range\"\n            [month]=\"monthRight()\"\n            [navigable]=\"false\"\n            [rangeStart]=\"draftRange().start\"\n            [rangeEnd]=\"draftRange().end\"\n            [hoverEnd]=\"hoverEnd()\"\n            [min]=\"min()\"\n            [max]=\"max()\"\n            [locale]=\"effectiveLocale()\"\n            [labels]=\"effectiveLabels()\"\n            (dayPick)=\"onDayPick($event)\"\n            (dayHover)=\"onDayHover($event)\"\n          />\n        </div>\n      </div>\n      <div class=\"flex items-center justify-end gap-2 border-t border-border pt-2\">\n        <button mfButton tone=\"neutral\" appearance=\"text\" size=\"sm\" type=\"button\" (click)=\"clear()\">\n          {{ effectiveLabels().clear }}\n        </button>\n        <button\n          mfButton\n          tone=\"primary\"\n          appearance=\"filled\"\n          size=\"sm\"\n          type=\"button\"\n          [disabled]=\"!draftRange().start\"\n          (click)=\"apply()\"\n        >\n          {{ effectiveLabels().apply }}\n        </button>\n      </div>\n    </div>\n  </mf-popover>\n</div>\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: InputGroup, selector: "mf-input-group", inputs: ["size", "disabled", "hasError", "padded", "wrap"], exportAs: ["mfInputGroup"] }, { kind: "directive", type: InputPrefix, selector: "[mfInputPrefix]", inputs: ["addon"] }, { kind: "directive", type: InputSuffix, selector: "[mfInputSuffix]", inputs: ["addon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateRangePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateRangePicker, decorators: [{
             type: Component,
             args: [{ selector: 'mf-date-range-picker', exportAs: 'mfDateRangePicker', imports: [OverlayModule, Icon, Button, Calendar, Popover, InputGroup, InputPrefix, InputSuffix], host: { class: 'block' }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePicker), multi: true },
-                    ], template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <mf-input-group [hasError]=\"hasError()\" [disabled]=\"disabled()\">\r\n    <span mfInputPrefix><span mfIcon [size]=\"18\">calendar_today</span></span>\r\n    <input\r\n      #startEl\r\n      type=\"text\"\r\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\r\n      [placeholder]=\"effectiveLabels().startDate\"\r\n      [value]=\"startDraft()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"effectiveLabels().startDate\"\r\n      (input)=\"onStartInput($any($event.target).value)\"\r\n      (focus)=\"open.set(true)\"\r\n      (keydown.enter)=\"commitStartDraft()\"\r\n      (keydown.escape)=\"onEscape()\"\r\n    />\r\n    <span class=\"shrink-0 text-fg-subtle\" aria-hidden=\"true\">\u2013</span>\r\n    <input\r\n      type=\"text\"\r\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\r\n      [placeholder]=\"effectiveLabels().endDate\"\r\n      [value]=\"endDraft()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"effectiveLabels().endDate\"\r\n      (input)=\"onEndInput($any($event.target).value)\"\r\n      (focus)=\"open.set(true)\"\r\n      (keydown.enter)=\"commitEndDraft()\"\r\n      (keydown.escape)=\"onEscape()\"\r\n    />\r\n    @if (value().start || value().end) {\r\n      <button\r\n        mfInputSuffix\r\n        type=\"button\"\r\n        class=\"appearance-none border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n        [attr.aria-label]=\"effectiveLabels().clear\"\r\n        (click)=\"clear()\"\r\n      >\r\n        <span mfIcon [size]=\"16\">close</span>\r\n      </button>\r\n    }\r\n  </mf-input-group>\r\n\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"open()\"\r\n    placement=\"bottom-start\"\r\n    padding=\"none\"\r\n    panelClass=\"flex w-auto\"\r\n    (closed)=\"onEscape()\"\r\n  >\r\n    <div class=\"flex flex-col gap-0.5 border-e border-border p-2\">\r\n      @for (preset of presets; track preset) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none whitespace-nowrap rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-surface-alt\"\r\n          (click)=\"applyPreset(preset)\"\r\n        >\r\n          {{ presetLabel(preset) }}\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-2 p-3\">\r\n      <div class=\"flex gap-4\">\r\n        <mf-calendar\r\n          mode=\"range\"\r\n          [(month)]=\"monthLeft\"\r\n          [rangeStart]=\"draftRange().start\"\r\n          [rangeEnd]=\"draftRange().end\"\r\n          [hoverEnd]=\"hoverEnd()\"\r\n          [min]=\"min()\"\r\n          [max]=\"max()\"\r\n          [locale]=\"effectiveLocale()\"\r\n          [labels]=\"effectiveLabels()\"\r\n          (dayPick)=\"onDayPick($event)\"\r\n          (dayHover)=\"onDayHover($event)\"\r\n        />\r\n        <div class=\"hidden sm:block\">\r\n          <mf-calendar\r\n            mode=\"range\"\r\n            [month]=\"monthRight()\"\r\n            [navigable]=\"false\"\r\n            [rangeStart]=\"draftRange().start\"\r\n            [rangeEnd]=\"draftRange().end\"\r\n            [hoverEnd]=\"hoverEnd()\"\r\n            [min]=\"min()\"\r\n            [max]=\"max()\"\r\n            [locale]=\"effectiveLocale()\"\r\n            [labels]=\"effectiveLabels()\"\r\n            (dayPick)=\"onDayPick($event)\"\r\n            (dayHover)=\"onDayHover($event)\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"flex items-center justify-end gap-2 border-t border-border pt-2\">\r\n        <button mfButton tone=\"neutral\" appearance=\"text\" size=\"sm\" type=\"button\" (click)=\"clear()\">\r\n          {{ effectiveLabels().clear }}\r\n        </button>\r\n        <button\r\n          mfButton\r\n          tone=\"primary\"\r\n          appearance=\"filled\"\r\n          size=\"sm\"\r\n          type=\"button\"\r\n          [disabled]=\"!draftRange().start\"\r\n          (click)=\"apply()\"\r\n        >\r\n          {{ effectiveLabels().apply }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mf-popover>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <mf-input-group [hasError]=\"hasError()\" [disabled]=\"disabled()\">\n    <span mfInputPrefix><span mfIcon [size]=\"18\">calendar_today</span></span>\n    <input\n      #startEl\n      type=\"text\"\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\n      [placeholder]=\"effectiveLabels().startDate\"\n      [value]=\"startDraft()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"effectiveLabels().startDate\"\n      (input)=\"onStartInput($any($event.target).value)\"\n      (focus)=\"open.set(true)\"\n      (keydown.enter)=\"commitStartDraft()\"\n      (keydown.escape)=\"onEscape()\"\n    />\n    <span class=\"shrink-0 text-fg-subtle\" aria-hidden=\"true\">\u2013</span>\n    <input\n      type=\"text\"\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\n      [placeholder]=\"effectiveLabels().endDate\"\n      [value]=\"endDraft()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"effectiveLabels().endDate\"\n      (input)=\"onEndInput($any($event.target).value)\"\n      (focus)=\"open.set(true)\"\n      (keydown.enter)=\"commitEndDraft()\"\n      (keydown.escape)=\"onEscape()\"\n    />\n    @if (value().start || value().end) {\n      <button\n        mfInputSuffix\n        type=\"button\"\n        class=\"appearance-none border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg\"\n        [attr.aria-label]=\"effectiveLabels().clear\"\n        (click)=\"clear()\"\n      >\n        <span mfIcon [size]=\"16\">close</span>\n      </button>\n    }\n  </mf-input-group>\n\n  <mf-popover\n    [origin]=\"origin\"\n    [open]=\"open()\"\n    placement=\"bottom-start\"\n    padding=\"none\"\n    panelClass=\"flex w-auto\"\n    (closed)=\"onEscape()\"\n  >\n    <div class=\"flex flex-col gap-0.5 border-e border-border p-2\">\n      @for (preset of presets; track preset) {\n        <button\n          type=\"button\"\n          class=\"appearance-none whitespace-nowrap rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\n          (click)=\"applyPreset(preset)\"\n        >\n          {{ presetLabel(preset) }}\n        </button>\n      }\n    </div>\n\n    <div class=\"flex flex-col gap-2 p-3\">\n      <div class=\"flex gap-4\">\n        <mf-calendar\n          mode=\"range\"\n          [(month)]=\"monthLeft\"\n          [rangeStart]=\"draftRange().start\"\n          [rangeEnd]=\"draftRange().end\"\n          [hoverEnd]=\"hoverEnd()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [locale]=\"effectiveLocale()\"\n          [labels]=\"effectiveLabels()\"\n          (dayPick)=\"onDayPick($event)\"\n          (dayHover)=\"onDayHover($event)\"\n        />\n        <div class=\"hidden sm:block\">\n          <mf-calendar\n            mode=\"range\"\n            [month]=\"monthRight()\"\n            [navigable]=\"false\"\n            [rangeStart]=\"draftRange().start\"\n            [rangeEnd]=\"draftRange().end\"\n            [hoverEnd]=\"hoverEnd()\"\n            [min]=\"min()\"\n            [max]=\"max()\"\n            [locale]=\"effectiveLocale()\"\n            [labels]=\"effectiveLabels()\"\n            (dayPick)=\"onDayPick($event)\"\n            (dayHover)=\"onDayHover($event)\"\n          />\n        </div>\n      </div>\n      <div class=\"flex items-center justify-end gap-2 border-t border-border pt-2\">\n        <button mfButton tone=\"neutral\" appearance=\"text\" size=\"sm\" type=\"button\" (click)=\"clear()\">\n          {{ effectiveLabels().clear }}\n        </button>\n        <button\n          mfButton\n          tone=\"primary\"\n          appearance=\"filled\"\n          size=\"sm\"\n          type=\"button\"\n          [disabled]=\"!draftRange().start\"\n          (click)=\"apply()\"\n        >\n          {{ effectiveLabels().apply }}\n        </button>\n      </div>\n    </div>\n  </mf-popover>\n</div>\n" }]
         }], 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 }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], startEl: [{ type: i0.ViewChild, args: ['startEl', { isSignal: true }] }] } });
 
+/**
+ * `<mf-date-time-picker [(value)]="publishAt" [min]="now" ariaLabel="Yayın zamanı" />`
+ *
+ * Tarih + saat — TEK bir `Date` değeri. Mevcut `mf-date-picker` ve
+ * `mf-time-picker`'ın kompozisyonu (aynı klavye/erişilebilirlik davranışı):
+ * - Tarih değişince saat korunur; saat önce seçilirse tarih bugüne yerleşir.
+ * - İki alan `role="group"` altında tek bir ad paylaşır.
+ * - Reactive Forms / Signal Forms ile `value` üzerinden çalışır.
+ */
+class DateTimePicker extends ValueAccessorBase {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    minuteStep = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hasError = input(false, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    labels = inject(MF_DATE_PICKER_LABELS);
+    dateLabel = computed(() => [this.ariaLabel(), this.labels().date].filter(Boolean).join(' — '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateLabel" }] : /* istanbul ignore next */ []));
+    timeLabel = computed(() => [this.ariaLabel(), this.labels().time].filter(Boolean).join(' — '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeLabel" }] : /* istanbul ignore next */ []));
+    time = computed(() => {
+        const v = this.value();
+        return v ? { hour: v.getHours(), minute: v.getMinutes() } : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.value.set(value);
+    }
+    onDate(date) {
+        if (!date)
+            return this.commit(null);
+        const next = new Date(date);
+        const time = this.time();
+        next.setHours(time?.hour ?? 0, time?.minute ?? 0, 0, 0);
+        this.commit(next);
+    }
+    onTime(time) {
+        const base = this.value() ? new Date(this.value()) : new Date();
+        if (time)
+            base.setHours(time.hour, time.minute, 0, 0);
+        else
+            base.setHours(0, 0, 0, 0);
+        this.commit(base);
+    }
+    commit(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: DateTimePicker, isStandalone: true, selector: "mf-date-time-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 }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "inline-flex flex-wrap items-center gap-2" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePicker), multi: true },
+        ], exportAs: ["mfDateTimePicker"], usesInheritance: true, ngImport: i0, template: `
+    <mf-date-picker
+      class="min-w-40 flex-1"
+      [value]="value()"
+      (valueChange)="onDate($event)"
+      [min]="min()"
+      [max]="max()"
+      [disabled]="disabled()"
+      [hasError]="hasError()"
+      [ariaLabel]="dateLabel()"
+    />
+    <mf-time-picker
+      class="w-32"
+      [value]="time()"
+      (valueChange)="onTime($event)"
+      [minuteStep]="minuteStep()"
+      [disabled]="disabled()"
+      [hasError]="hasError()"
+      [ariaLabel]="timeLabel()"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: DatePicker, selector: "mf-date-picker", inputs: ["value", "min", "max", "locale", "labels", "disabled", "hasError", "ariaLabel"], outputs: ["valueChange"], exportAs: ["mfDatePicker"] }, { kind: "component", type: TimePicker, selector: "mf-time-picker", inputs: ["value", "minuteStep", "placeholder", "disabled", "hasError", "ariaLabel", "clearLabel"], outputs: ["valueChange"], exportAs: ["mfTimePicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateTimePicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-date-time-picker',
+                    exportAs: 'mfDateTimePicker',
+                    imports: [DatePicker, TimePicker],
+                    host: {
+                        role: 'group',
+                        class: 'inline-flex flex-wrap items-center gap-2',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                    },
+                    template: `
+    <mf-date-picker
+      class="min-w-40 flex-1"
+      [value]="value()"
+      (valueChange)="onDate($event)"
+      [min]="min()"
+      [max]="max()"
+      [disabled]="disabled()"
+      [hasError]="hasError()"
+      [ariaLabel]="dateLabel()"
+    />
+    <mf-time-picker
+      class="w-32"
+      [value]="time()"
+      (valueChange)="onTime($event)"
+      [minuteStep]="minuteStep()"
+      [disabled]="disabled()"
+      [hasError]="hasError()"
+      [ariaLabel]="timeLabel()"
+    />
+  `,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePicker), multi: true },
+                    ],
+                }]
+        }], 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 }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Calendar, DatePicker, DateRangePicker, buildMonthMatrix, dateRangeForPreset, formatDateInput, isCurrentMonth, isDayDisabled, isSameDay, isWithinRange, parseDateInput, shiftMonth, shiftYear };
+export { Calendar, DatePicker, DateRangePicker, DateTimePicker, buildMonthMatrix, dateRangeForPreset, formatDateInput, isCurrentMonth, isDayDisabled, isSameDay, isWithinRange, parseDateInput, shiftMonth, shiftYear };
 //# sourceMappingURL=mesgflow-ui-kit-date-picker.mjs.map