@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,643 @@
+import * as i0 from '@angular/core';
+import { model, input, output, inject, computed, signal, viewChild, effect, untracked, afterRenderEffect, Component, forwardRef } 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 * 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';
+
+/**
+ * Hazır tarih aralıkları — kurumsal panellerde tarih filtresinin %90'ı bunlar
+ * (bkz. eski `table-filter.model.ts` `dateRangeFor`, ISO metin üreten
+ * kardeşi — burada `Date` nesneleri üretiyor, ISO'ya çevirme çağıranın işi,
+ * bkz. `date-picker.model.ts` kullanan `table-filter.model.ts`'teki
+ * `dateToIso`). `date-picker`'ın kendi paketi TEK KAYNAK — Table bunu import
+ * eder, tersi değil.
+ */
+function dateRangeForPreset(preset) {
+    const today = startOfDay(new Date());
+    if (preset === 'today')
+        return { start: today, end: today };
+    if (preset === 'thisMonth')
+        return { start: startOfMonth(today), end: today };
+    const days = preset === 'last7' ? 6 : 29;
+    return { start: subDays(today, days), end: today };
+}
+/**
+ * Bir ay ızgarası — 6 satır × 7 sütun, komşu ay günleri dahil (haftanın ilk
+ * günü `locale`'e göre — tr Pazartesi, en-US Pazar; `date-fns/locale`'in
+ * `weekStartsOn`'undan otomatik gelir, elle YAZILMAZ).
+ */
+function buildMonthMatrix(month, locale) {
+    const gridStart = startOfWeek(startOfMonth(month), { locale });
+    const gridEnd = endOfWeek(endOfMonth(month), { locale });
+    const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
+    const weeks = [];
+    for (let i = 0; i < days.length; i += 7)
+        weeks.push(days.slice(i, i + 7));
+    return weeks;
+}
+function isCurrentMonth(day, month) {
+    return isSameMonth(day, month);
+}
+function isSameDay(a, b) {
+    if (!a || !b)
+        return false;
+    return isSameDay$1(a, b);
+}
+function isWithinRange(day, start, end) {
+    if (!start || !end)
+        return false;
+    return isWithinInterval(day, { start, end });
+}
+function isDayDisabled(day, min, max) {
+    const time = startOfDay(day).getTime();
+    if (min && time < startOfDay(min).getTime())
+        return true;
+    if (max && time > startOfDay(max).getTime())
+        return true;
+    return false;
+}
+function shiftMonth(month, delta) {
+    return delta >= 0 ? addMonths(month, delta) : subMonths(month, -delta);
+}
+function shiftYear(month, delta) {
+    return delta >= 0 ? addYears(month, delta) : subYears(month, -delta);
+}
+/** `date-fns`'in `formatLong.date({width:'short'})`'u — `'P'` token'ının ARKASINDAKİ gerçek örüntü (tr: `dd.MM.yyyy`, en-US: `MM/dd/yyyy`). `parse()` `'P'`'yi DOĞRUDAN kabul etmiyor (yalnızca `format()` yerelleştirilmiş token'ları çözer) — yazarak girişi geri okumak için bu örüntü gerekiyor. */
+function shortDatePattern(locale) {
+    return locale.formatLong?.date({ width: 'short' }) ?? 'P';
+}
+function formatDateInput(date, locale) {
+    return format(date, shortDatePattern(locale), { locale });
+}
+/** Kullanıcının yazdığı metni çözer; geçersizse `null` (çağıran son geçerli değere geri döner). Sonuç HER ZAMAN gün sınırına (`startOfDay`) normalize edilir. */
+function parseDateInput(text, locale) {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return null;
+    const parsed = parse(trimmed, shortDatePattern(locale), new Date(), { locale });
+    return isValid(parsed) ? startOfDay(parsed) : null;
+}
+
+/**
+ * `<mf-calendar [(month)]="visibleMonth" [selected]="value()" (dayPick)="onPick($event)" />`
+ *
+ * Takvim ızgarasının gövdesi — hem `DatePicker`/`DateRangePicker`'ın overlay
+ * paneli İÇİNDE hem inline (overlay'siz) kullanılabilir. `@angular/aria/grid`
+ * KULLANILMADI (bkz. plan): sağ ok ayın son gününden sonraki ayın ilk gününe
+ * ATLAMALI, `PageUp`/`PageDown` ±1 ay/±1 yıl yapmalı — grid pattern'i
+ * render edilmiş satır/sütun sınırlarıyla kapalı, bu ikisini karşılamıyor.
+ * Roving tabindex elle kuruldu (emsal: `table-pagination.ts`'in
+ * `afterRenderEffect` + `viewChild(ElementRef)` deseni).
+ *
+ * Üç görünüm (`view`) — gün ızgarası, ay ızgarası, yıl ızgarası — klasik
+ * drill-up/down: başlıktaki "Eylül 2026" ay/yıl görünümüne, oradaki yıl
+ * yıl ızgarasına götürür; seçim tersine iner.
+ */
+class Calendar {
+    month = model(startOfMonth(new Date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    selected = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    rangeStart = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    rangeEnd = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    /** Fare aralığın ikinci ucunun üzerinde gezinirken önizleme — `rangeEnd()` doluysa yok sayılır. */
+    hoverEnd = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverEnd" }] : /* 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 */ []));
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    /**
+     * `false` → başlık ok/ay-yıl drill-down kontrolleri GİZLENİR, sadece ay/yıl
+     * ETİKETİ (statik metin) kalır. `DateRangePicker`'ın İKİNCİ (takipçi)
+     * takvimi için — "ikinci ay = birincinin bir fazlası" değişmezini korumak
+     * amacıyla o takvim kendi başına gezilemez (bkz. date-range-picker.ts).
+     * Gün ızgarası yine TAM etkileşimli kalır — sadece ay/yıl DEĞİŞTİRME devre
+     * dışı.
+     */
+    navigable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigable" }] : /* istanbul ignore next */ []));
+    dayPick = output();
+    dayHover = output();
+    dateLocaleToken = inject(MF_DATE_LOCALE);
+    datePickerLabels = inject(MF_DATE_PICKER_LABELS);
+    effectiveLocale = computed(() => this.locale() ?? this.dateLocaleToken(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []));
+    effectiveLabels = computed(() => this.labels() ?? this.datePickerLabels(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabels" }] : /* istanbul ignore next */ []));
+    view = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    focusedDay = signal(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDay" }] : /* istanbul ignore next */ []));
+    yearPageStart = signal(Math.floor(new Date().getFullYear() / 12) * 12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearPageStart" }] : /* istanbul ignore next */ []));
+    weeks = computed(() => buildMonthMatrix(this.month(), this.effectiveLocale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    monthGrid = computed(() => {
+        const year = this.month().getFullYear();
+        return Array.from({ length: 12 }, (_, i) => new Date(year, i, 1));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthGrid" }] : /* istanbul ignore next */ []));
+    yearGrid = computed(() => Array.from({ length: 12 }, (_, i) => this.yearPageStart() + i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearGrid" }] : /* istanbul ignore next */ []));
+    weekdayLabels = computed(() => {
+        const locale = this.effectiveLocale();
+        const start = startOfWeek(new Date(), { locale });
+        return Array.from({ length: 7 }, (_, i) => format(addDays(start, i), 'EEEEEE', { locale }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+    monthYearLabel = computed(() => format(this.month(), 'LLLL yyyy', { locale: this.effectiveLocale() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
+    gridEl = viewChild('grid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridEl" }] : /* istanbul ignore next */ []));
+    focusPending = false;
+    shiftMonth = shiftMonth;
+    shiftYear = shiftYear;
+    constructor() {
+        // `month()` dışarıdan (ok butonu, klavye, ya da tüketicinin kendi
+        // `[(month)]` bağlaması) değiştiğinde odaklı gün YENİ ayın dışında
+        // kalmışsa içeri çekilir — `selected()` yeni ayın içindeyse ona, değilse
+        // ayın 1'ine.
+        effect(() => {
+            const month = this.month();
+            untracked(() => {
+                if (!isCurrentMonth(this.focusedDay(), month)) {
+                    const preferred = this.selected() ?? new Date();
+                    this.focusedDay.set(isCurrentMonth(preferred, month) ? preferred : startOfMonth(month));
+                }
+            });
+        });
+        afterRenderEffect(() => {
+            this.focusedDay();
+            if (!this.focusPending)
+                return;
+            this.focusPending = false;
+            const key = this.dayKey(this.focusedDay());
+            this.gridEl()?.nativeElement.querySelector(`[data-day-key="${key}"]`)?.focus();
+        });
+    }
+    dayKey(day) {
+        return format(day, 'yyyy-MM-dd');
+    }
+    tabIndexFor(day) {
+        return isSameDay(day, this.focusedDay()) ? 0 : -1;
+    }
+    isDisabled(day) {
+        return isDayDisabled(day, this.min(), this.max());
+    }
+    isSameDaySafe(day) {
+        if (this.mode() === 'single')
+            return isSameDay(day, this.selected());
+        return isSameDay(day, this.rangeStart()) || isSameDay(day, this.rangeEnd());
+    }
+    dayClasses(day) {
+        const outside = !isCurrentMonth(day, this.month());
+        const today = isSameDay(day, new Date());
+        const isRangeMode = this.mode() === 'range';
+        const effectiveEnd = this.rangeEnd() ?? this.hoverEnd();
+        const isStart = isRangeMode && isSameDay(day, this.rangeStart());
+        const isEnd = isRangeMode &&
+            (isSameDay(day, this.rangeEnd()) || (!this.rangeEnd() && isSameDay(day, this.hoverEnd())));
+        const isEdge = isStart || isEnd;
+        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) &&
+            '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');
+    }
+    monthLabel(m) {
+        return format(m, 'LLL', { locale: this.effectiveLocale() });
+    }
+    openMonthView() {
+        this.view.set('month');
+    }
+    openYearView() {
+        this.yearPageStart.set(Math.floor(this.month().getFullYear() / 12) * 12);
+        this.view.set('year');
+    }
+    shiftYearPage(delta) {
+        this.yearPageStart.update((y) => y + delta * 12);
+    }
+    pickMonth(m) {
+        this.month.set(new Date(this.month().getFullYear(), m.getMonth(), 1));
+        this.view.set('day');
+    }
+    pickYear(y) {
+        this.month.set(new Date(y, this.month().getMonth(), 1));
+        this.view.set('month');
+    }
+    pick(day) {
+        if (this.isDisabled(day))
+            return;
+        this.focusedDay.set(day);
+        this.dayPick.emit(day);
+    }
+    onDayMouseEnter(day) {
+        if (this.mode() === 'range')
+            this.dayHover.emit(day);
+    }
+    onGridKeydown(event) {
+        const current = this.focusedDay();
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.moveFocus(addDays(current, -1));
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.moveFocus(addDays(current, 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveFocus(addDays(current, -7));
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveFocus(addDays(current, 7));
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.moveFocus(startOfWeek(current, { locale: this.effectiveLocale() }));
+                break;
+            case 'End':
+                event.preventDefault();
+                this.moveFocus(endOfWeek(current, { locale: this.effectiveLocale() }));
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this.moveFocus(event.shiftKey ? shiftYear(current, -1) : shiftMonth(current, -1));
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.moveFocus(event.shiftKey ? shiftYear(current, 1) : shiftMonth(current, 1));
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.pick(current);
+                break;
+        }
+    }
+    moveFocus(day) {
+        this.focusPending = true;
+        this.focusedDay.set(day);
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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 }] }] } });
+
+/**
+ * `<mf-date-picker [(value)]="date" [min]="minDate()" />`
+ *
+ * Tetikleyici GERÇEK bir `<input mfInput>` — ikon+temizle butonu üstüne
+ * bindirilmiş (emsal: `search-input.html`, ayrı bir bordürlü kutuyla
+ * SARMALAMIYORUZ, `Input`'un kendi border/shadow/focus'u tek kaynak kalıyor,
+ * "çift kenarlık" görünümü olmasın diye). Yazarak giriş + takvimden seçim
+ * AYNI `value` model'ine yazıyor.
+ *
+ * Panel `select.html`'deki CDK overlay bloğunun birebir aynısı (şeffaf
+ * backdrop, `(backdropClick)`/`(detach)` → kapat, bottom-start + flip
+ * pozisyon). Panel kabuğu sabit formül: `rounded-lg bg-overlay p-3 shadow-2
+ * dark:border dark:border-border-subtle` (bkz. table-filter-menu.html).
+ */
+class DatePicker 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 */ []));
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hasError = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    dateLocaleToken = inject(MF_DATE_LOCALE);
+    datePickerLabels = inject(MF_DATE_PICKER_LABELS);
+    effectiveLocale = computed(() => this.locale() ?? this.dateLocaleToken(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []));
+    effectiveLabels = computed(() => this.labels() ?? this.datePickerLabels(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabels" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    draft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    month = signal(startOfMonth(new Date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild('inputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // `value()`/`locale()` değişince taslak metin ve görünen ay yeniden
+        // hesaplanır — `locale()` BİLEREK izlenen bağımlılıklardan biri (dil
+        // değişince mevcut değer YENİ yerel kısa biçimde gösterilsin).
+        effect(() => {
+            const v = this.value();
+            const locale = this.effectiveLocale();
+            untracked(() => {
+                this.draft.set(v ? formatDateInput(v, locale) : '');
+                this.month.set(startOfMonth(v ?? new Date()));
+            });
+        });
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    setValue(next) {
+        this.value.set(next);
+        this.onChange(next);
+        this.onTouched();
+    }
+    onInput(raw) {
+        this.draft.set(raw);
+        this.onTouched();
+    }
+    commitDraft() {
+        const text = this.draft().trim();
+        if (!text) {
+            this.setValue(null);
+            return;
+        }
+        const parsed = parseDateInput(text, this.effectiveLocale());
+        if (parsed && !isDayDisabled(parsed, this.min(), this.max())) {
+            this.setValue(parsed);
+        }
+        else {
+            const v = this.value();
+            this.draft.set(v ? formatDateInput(v, this.effectiveLocale()) : '');
+        }
+    }
+    onDayPick(day) {
+        this.setValue(day);
+        this.close();
+    }
+    pickToday() {
+        this.onDayPick(startOfDay(new Date()));
+    }
+    clear() {
+        this.setValue(null);
+        this.inputEl()?.nativeElement.focus();
+    }
+    close() {
+        this.open.set(false);
+    }
+    onEscape() {
+        if (!this.open())
+            return;
+        const v = this.value();
+        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: [
+            { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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" }]
+        }], 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'];
+/**
+ * `<mf-date-range-picker [(value)]="range" />` — `value` şekli
+ * `{ start: Date | null; end: Date | null }` (bkz. `DateRange`).
+ *
+ * Tetikleyici tek kutu içinde İKİ metin input'u (başlangıç/bitiş) —
+ * `DatePicker`'ın aksine burada `mfInput`'un KENDİ border/shadow'unu
+ * KULLANMIYORUZ (iki input yan yana, "çift kenarlık" olmasın diye border/
+ * shadow/focus DIŞ kutuya taşındı, iç input'lar çıplak — tek gerekçeli
+ * istisna).
+ *
+ * Panelde solda ön ayar sütunu + sağda iki takvim (ikincisi
+ * `[navigable]="false"` — bkz. `calendar.ts`, "birincinin bir fazlası"
+ * değişmezini koruyor). Onay YALNIZCA "Uygula"da dışarı çıkar — takvimde
+ * gezinme/seçim kendi `draftRange` sinyalinde kalır, `value()` her tık ile
+ * DEĞİŞMEZ (emsal: `table-page-jump.ts` — her tuş vuruşunda backend'e istek
+ * atmama notu). "Temizle" bunun istisnası — anında commit eder.
+ */
+class DateRangePicker extends ValueAccessorBase {
+    value = model({ start: null, end: 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 */ []));
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hasError = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    dateLocaleToken = inject(MF_DATE_LOCALE);
+    datePickerLabels = inject(MF_DATE_PICKER_LABELS);
+    effectiveLocale = computed(() => this.locale() ?? this.dateLocaleToken(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []));
+    effectiveLabels = computed(() => this.labels() ?? this.datePickerLabels(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabels" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    startDraft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startDraft" }] : /* istanbul ignore next */ []));
+    endDraft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endDraft" }] : /* istanbul ignore next */ []));
+    draftRange = signal({ start: null, end: null }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftRange" }] : /* istanbul ignore next */ []));
+    pickStage = signal('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pickStage" }] : /* istanbul ignore next */ []));
+    hoverEnd = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverEnd" }] : /* istanbul ignore next */ []));
+    monthLeft = signal(startOfMonth(new Date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthLeft" }] : /* istanbul ignore next */ []));
+    monthRight = signal(addMonths(startOfMonth(new Date()), 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthRight" }] : /* istanbul ignore next */ []));
+    presets = PRESETS;
+    startEl = viewChild('startEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startEl" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // `value()`/`locale()` değişince iki taslak metin yeniden hesaplanır.
+        effect(() => {
+            const v = this.value();
+            const locale = this.effectiveLocale();
+            untracked(() => {
+                this.startDraft.set(v.start ? formatDateInput(v.start, locale) : '');
+                this.endDraft.set(v.end ? formatDateInput(v.end, locale) : '');
+            });
+        });
+        // Sol takvim değişince sağ takvim HER ZAMAN bir fazlası — kendi başına
+        // gezilemiyor (bkz. `Calendar.navigable`), tek yönlü senkron yeterli.
+        effect(() => {
+            const left = this.monthLeft();
+            untracked(() => this.monthRight.set(addMonths(left, 1)));
+        });
+        // Panel her açılışta `value()`'dan taze bir taslakla başlar.
+        effect(() => {
+            if (!this.open())
+                return;
+            untracked(() => {
+                const v = this.value();
+                this.draftRange.set(v);
+                this.pickStage.set(v.start && !v.end ? 'end' : 'start');
+                this.hoverEnd.set(null);
+                this.monthLeft.set(startOfMonth(v.start ?? new Date()));
+            });
+        });
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    setValue(next) {
+        this.value.set(next);
+        this.onChange(next);
+        this.onTouched();
+    }
+    presetLabel(preset) {
+        const labels = this.effectiveLabels();
+        if (preset === 'today')
+            return labels.presetToday;
+        if (preset === 'last7')
+            return labels.presetLast7;
+        if (preset === 'last30')
+            return labels.presetLast30;
+        return labels.presetThisMonth;
+    }
+    applyPreset(preset) {
+        const range = dateRangeForPreset(preset);
+        this.setValue(range);
+        this.close();
+    }
+    onStartInput(raw) {
+        this.startDraft.set(raw);
+        this.onTouched();
+    }
+    onEndInput(raw) {
+        this.endDraft.set(raw);
+        this.onTouched();
+    }
+    commitStartDraft() {
+        const text = this.startDraft().trim();
+        const current = this.value();
+        if (!text) {
+            this.setValue({ ...current, start: null });
+            return;
+        }
+        const parsed = parseDateInput(text, this.effectiveLocale());
+        if (parsed && !isDayDisabled(parsed, this.min(), this.max())) {
+            const end = current.end && parsed > current.end ? null : current.end;
+            this.setValue({ start: parsed, end });
+        }
+        else {
+            this.startDraft.set(current.start ? formatDateInput(current.start, this.effectiveLocale()) : '');
+        }
+    }
+    commitEndDraft() {
+        const text = this.endDraft().trim();
+        const current = this.value();
+        if (!text) {
+            this.setValue({ ...current, end: null });
+            return;
+        }
+        const parsed = parseDateInput(text, this.effectiveLocale());
+        const validOrder = !current.start || (parsed && parsed >= current.start);
+        if (parsed && validOrder && !isDayDisabled(parsed, this.min(), this.max())) {
+            this.setValue({ ...current, end: parsed });
+        }
+        else {
+            this.endDraft.set(current.end ? formatDateInput(current.end, this.effectiveLocale()) : '');
+        }
+    }
+    onDayHover(day) {
+        this.hoverEnd.set(day);
+    }
+    onDayPick(day) {
+        const draft = this.draftRange();
+        if (this.pickStage() === 'start' || (draft.start && draft.end)) {
+            this.draftRange.set({ start: day, end: null });
+            this.pickStage.set('end');
+            this.hoverEnd.set(null);
+            return;
+        }
+        const start = draft.start;
+        this.draftRange.set(day < start ? { start: day, end: start } : { start, end: day });
+        this.pickStage.set('start');
+        this.hoverEnd.set(null);
+    }
+    apply() {
+        const draft = this.draftRange();
+        if (!draft.start)
+            return;
+        this.setValue({ start: draft.start, end: draft.end ?? draft.start });
+        this.close();
+    }
+    clear() {
+        this.setValue({ start: null, end: null });
+        this.draftRange.set({ start: null, end: null });
+        this.pickStage.set('start');
+        this.startEl()?.nativeElement.focus();
+    }
+    close() {
+        this.open.set(false);
+    }
+    onEscape() {
+        if (!this.open())
+            return;
+        const v = this.value();
+        this.startDraft.set(v.start ? formatDateInput(v.start, this.effectiveLocale()) : '');
+        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: [
+            { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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" }]
+        }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Calendar, DatePicker, DateRangePicker, buildMonthMatrix, dateRangeForPreset, formatDateInput, isCurrentMonth, isDayDisabled, isSameDay, isWithinRange, parseDateInput, shiftMonth, shiftYear };
+//# sourceMappingURL=mesgflow-ui-kit-date-picker.mjs.map