@rt-tools/ui-kit-v2 0.16.0 → 0.18.0

package/fesm2022/rt-tools-ui-kit-v2-date-picker.mjs

@@ -0,0 +1,779 @@
+import * as i0 from '@angular/core';
+import { inject, computed, viewChildren, signal, linkedSignal, input, numberAttribute, booleanAttribute, output, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, forwardRef } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RT_KIT_LOCALE, RT_KIT_LABELS, BreakpointsService } from '@rt-tools/ui-kit-v2/core';
+import { RtBottomSheetComponent } from '@rt-tools/ui-kit-v2/bottom-sheet';
+import { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
+import { ERtCalendarDayState, RtCalendarComponent } from '@rt-tools/ui-kit-v2/calendar';
+import { RtToggleButtonGroupComponent } from '@rt-tools/ui-kit-v2/toggle-button-group';
+
+/**
+ * Чистая логика панели rt-date-picker: чтение и запись значения, месяц, границы, колонки времени
+ * и клавиши сетки. Текущий момент приходит параметром — компонент читает часы на своей границе.
+ *
+ * Значения — строки формы нативного input'а: `YYYY-MM-DD`, `HH:mm`, `YYYY-MM-DDTHH:mm`. Строки
+ * одной формы сравниваются как текст, поэтому границы сравниваются обрезанными до длины значения.
+ */
+const DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+const TIME_RE = /^(\d{2}):(\d{2})$/;
+const DAY_LENGTH_MS = 86_400_000;
+const WEEK = 7;
+const DAY_LEN = 10;
+const MONTH_LEN$1 = 7;
+const TIME_LEN = 5;
+/** Числа строки даты или времени: `2026-09-29` → `[2026, 9, 29]`. */
+function nums(text) {
+    return text.split(/\D/).map(Number);
+}
+/**
+ * Строка формы значения как число: `2026-09-29T10:05` → `202609291005`. Строки одной формы
+ * сравниваются по этому числу так же, как по порядку дат.
+ */
+function rank(text) {
+    return Number(text.replace(/\D/g, ''));
+}
+function pad(value) {
+    return String(value).padStart(2, '0');
+}
+function dayToMs(day) {
+    const [y, m, d] = nums(day);
+    return Date.UTC(y, m - 1, d);
+}
+function msToDay(ms) {
+    const date = new Date(ms);
+    return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
+}
+function daysInMonth(year, month) {
+    return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+function isDay(text) {
+    const match = DAY_RE.exec(text);
+    if (match === null) {
+        return false;
+    }
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    return month >= 1 && month <= 12 && day >= 1 && day <= daysInMonth(Number(match[1]), month);
+}
+function isTime(text) {
+    const match = TIME_RE.exec(text);
+    return match !== null && Number(match[1]) < 24 && Number(match[2]) < 60;
+}
+/** Время `HH:mm` из часа и минуты. */
+function rtDateTime(hour, minute) {
+    return `${pad(hour)}:${pad(minute)}`;
+}
+/** Первый день недели локали: 1 — понедельник … 7 — воскресенье. */
+function rtDateFirstDay(locale) {
+    const info = new Intl.Locale(locale);
+    return (info.getWeekInfo?.() ?? info.weekInfo)?.firstDay ?? 1;
+}
+/** Читает текст формы значения; `null` — текст не значение этого типа. */
+function rtDateRead(text, type) {
+    const value = text.trim();
+    if (type === 'date') {
+        return isDay(value) ? value : null;
+    }
+    if (type === 'time') {
+        return isTime(value) ? value : null;
+    }
+    const parts = value.split('T');
+    return parts.length === 2 && isDay(parts[0]) && isTime(parts[1]) ? value : null;
+}
+/** Собирает значение типа из дня и времени; без нужной части — пустая строка. */
+function rtDateWrite(type, day, time) {
+    if (type === 'date') {
+        return day ?? '';
+    }
+    if (type === 'time') {
+        return time ?? '';
+    }
+    return day !== null && time !== null ? `${day}T${time}` : '';
+}
+/** Разбирает значение на день и время; недостающая часть — `null`. */
+function rtDateSplit(value, type) {
+    if (value === '') {
+        return { day: null, time: null };
+    }
+    if (type === 'time') {
+        return { day: null, time: value };
+    }
+    return { day: value.slice(0, DAY_LEN), time: type === 'date' ? null : value.slice(DAY_LEN + 1) };
+}
+/** Лежит ли значение в границах; граница обрезается до длины значения, `null` — открыта. */
+function rtDateInBounds(value, min, max) {
+    const low = min === null ? null : min.slice(0, value.length);
+    const high = max === null ? null : max.slice(0, value.length);
+    return (low === null || rank(value) >= rank(low)) && (high === null || rank(value) <= rank(high));
+}
+/** Текущий момент: день и время, округлённое вниз до шага минут. */
+function rtDateNow(now, step) {
+    const minute = Math.floor(now.getMinutes() / step) * step;
+    return {
+        day: `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`,
+        time: `${pad(now.getHours())}:${pad(minute)}`,
+    };
+}
+/** Сдвигает месяц `YYYY-MM` на `delta` месяцев. */
+function rtDateAddMonths(month, delta) {
+    const [y, m] = nums(month);
+    const date = new Date(Date.UTC(y, m - 1 + delta, 1));
+    return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}`;
+}
+/** Можно ли листать от месяца на `delta`: соседний месяц не лежит за границей. */
+function rtDateCanPage(month, delta, min, max) {
+    return rtDateInBounds(rtDateAddMonths(month, delta), min, max);
+}
+function monthTitle(month, locale) {
+    const [y, m] = nums(month);
+    const name = new Intl.DateTimeFormat(locale, { month: 'long', timeZone: 'UTC' }).format(Date.UTC(y, m - 1, 1));
+    return `${name.charAt(0).toLocaleUpperCase(locale)}${name.slice(1)} ${y}`;
+}
+function dayCell(day, ctx) {
+    return {
+        key: day,
+        dayOfMonth: Number(day.slice(8)),
+        sublabel: '',
+        state: day === ctx.chosen ? ERtCalendarDayState.Chosen : ERtCalendarDayState.Free,
+        disabled: !rtDateInBounds(day, ctx.min, ctx.max),
+        today: day === ctx.today,
+    };
+}
+/** Месяц `YYYY-MM` для календаря: подпись по локали, пустые ячейки до первого дня, дни. */
+function rtDateMonth(month, ctx) {
+    const [y, m] = nums(month);
+    const first = Date.UTC(y, m - 1, 1);
+    const weekday = new Date(first).getUTCDay() || WEEK;
+    const blanks = (weekday - rtDateFirstDay(ctx.locale) + WEEK) % WEEK;
+    const days = Array.from({ length: daysInMonth(y, m) }, (_, i) => dayCell(msToDay(first + i * DAY_LENGTH_MS), ctx));
+    const leadingBlanks = Array.from({ length: blanks }, (_, i) => i);
+    return { key: month, label: monthTitle(month, ctx.locale), leadingBlanks, days };
+}
+/** Короткие имена дней недели по локали, начиная с её первого дня. */
+function rtDateWeekdays(locale) {
+    const format = new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' });
+    // 2024-01-01 — понедельник.
+    const monday = Date.UTC(2024, 0, 1);
+    const shift = rtDateFirstDay(locale) - 1;
+    return Array.from({ length: WEEK }, (_, i) => format.format(monday + ((i + shift) % WEEK) * DAY_LENGTH_MS));
+}
+/** Двенадцать месяцев года для выбора месяца; месяц за границей выключен. */
+function rtDateMonths(year, locale, min, max) {
+    const format = new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' });
+    return Array.from({ length: 12 }, (_, i) => {
+        const key = `${year}-${pad(i + 1)}`;
+        return { key, label: format.format(Date.UTC(year, i, 1)), disabled: !rtDateInBounds(key, min, max) };
+    });
+}
+/** Граница времени для дня: у даты со временем действует только в день самой границы. */
+function timeBound(bound, day) {
+    if (bound === null || bound.length <= TIME_LEN) {
+        return bound;
+    }
+    return day === bound.slice(0, DAY_LEN) ? bound.slice(DAY_LEN + 1) : null;
+}
+/** Колонки часов и минут: минуты идут с шагом, время за границей выключено. */
+function rtDateTimeColumns(ctx) {
+    const low = timeBound(ctx.min, ctx.day);
+    const high = timeBound(ctx.max, ctx.day);
+    const hours = Array.from({ length: 24 }, (_, h) => ({
+        value: h,
+        label: pad(h),
+        disabled: (low !== null && rank(`${pad(h)}:59`) < rank(low)) || (high !== null && rank(`${pad(h)}:00`) > rank(high)),
+    }));
+    const step = Math.max(1, Math.floor(ctx.step));
+    const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => {
+        const minute = i * step;
+        const time = `${pad(ctx.hour ?? 0)}:${pad(minute)}`;
+        return { value: minute, label: pad(minute), disabled: ctx.hour !== null && !rtDateInBounds(time, low, high) };
+    });
+    return { hours, minutes };
+}
+function shiftMonth(day, delta) {
+    const target = rtDateAddMonths(day.slice(0, MONTH_LEN$1), delta);
+    const [y, m] = nums(target);
+    return `${target}-${pad(Math.min(Number(day.slice(8)), daysInMonth(y, m)))}`;
+}
+/** Клавиши, что двигают фокус на число дней. */
+const DAY_KEYS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -WEEK, ArrowDown: WEEK };
+/** Клавиши, что двигают фокус на месяц. */
+const MONTH_KEYS = { PageUp: -1, PageDown: 1 };
+function keyTarget(key, day, firstDay) {
+    const ms = dayToMs(day);
+    if (key in DAY_KEYS) {
+        return msToDay(ms + DAY_KEYS[key] * DAY_LENGTH_MS);
+    }
+    if (key in MONTH_KEYS) {
+        return shiftMonth(day, MONTH_KEYS[key]);
+    }
+    const offset = ((new Date(ms).getUTCDay() || WEEK) - firstDay + WEEK) % WEEK;
+    if (key === 'Home') {
+        return msToDay(ms - offset * DAY_LENGTH_MS);
+    }
+    return key === 'End' ? msToDay(ms + (WEEK - 1 - offset) * DAY_LENGTH_MS) : null;
+}
+/**
+ * Куда клавиша переводит фокус с дня; `null` — клавиша не сеточная. День за границей не
+ * достаётся: фокус встаёт на ближний день в границах.
+ */
+function rtDateGridKey(key, day, firstDay, min, max) {
+    const target = keyTarget(key, day, firstDay);
+    if (target === null) {
+        return null;
+    }
+    const low = min === null ? null : min.slice(0, DAY_LEN);
+    const high = max === null ? null : max.slice(0, DAY_LEN);
+    if (low !== null && rank(target) < rank(low)) {
+        return low;
+    }
+    return high !== null && rank(target) > rank(high) ? high : target;
+}
+
+const BEM_BLOCK$1 = 'rt-date-panel';
+const MONTH_LEN = 7;
+const YEAR_LEN$1 = 4;
+/**
+ * Панель rt-date-picker: месяц с листанием и выбором месяца и года, колонки часов и минут,
+ * подвал с «Сегодня», «Сейчас», «Готово» или «Применить» — по типу значения.
+ *
+ * Панель не пишет в форму: готовое значение уходит событием `picked`, просьба закрыться —
+ * `closed`. Черновик живёт, пока панель открыта; поле создаёт её заново на каждое открытие.
+ * Вся арифметика дат — в `rt-date-panel.logic`.
+ */
+class RtDatePanelComponent {
+    /** Локаль кита: названия месяцев, дней недели и первый день недели идут по ней. */
+    #locale;
+    /** Минута открытия панели: от неё считается «сегодня», когда вход `now` не задан. */
+    #openedAt;
+    #firstDay;
+    constructor() {
+        /** Локаль кита: названия месяцев, дней недели и первый день недели идут по ней. */
+        this.#locale = inject(RT_KIT_LOCALE);
+        /** Минута открытия панели: от неё считается «сегодня», когда вход `now` не задан. */
+        this.#openedAt = new Date();
+        this.#firstDay = computed(() => rtDateFirstDay(this.#locale()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#firstDay" }] : /* istanbul ignore next */ []));
+        this.t = inject(RT_KIT_LABELS);
+        this.weekdays = computed(() => rtDateWeekdays(this.#locale()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+        this.timeCells = viewChildren('timeCell', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeCells" }] : /* istanbul ignore next */ []));
+        this.view = signal('days', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        this.tab = signal('date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
+        this.activeKey = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+        this.today = computed(() => rtDateNow(this.now() ?? this.#openedAt, 1).day, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        this.draftDay = linkedSignal(() => rtDateSplit(this.value(), this.type()).day, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draftDay" }] : /* istanbul ignore next */ []));
+        this.draftTime = linkedSignal(() => rtDateSplit(this.value(), this.type()).time, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draftTime" }] : /* istanbul ignore next */ []));
+        this.shownMonth = linkedSignal(() => (this.draftDay() ?? this.today()).slice(0, MONTH_LEN), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shownMonth" }] : /* istanbul ignore next */ []));
+        this.year = linkedSignal(() => Number(this.shownMonth().slice(0, YEAR_LEN$1)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
+        this.split = computed(() => this.sheet() && this.type() === 'datetime-local', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "split" }] : /* istanbul ignore next */ []));
+        this.showDate = computed(() => this.type() !== 'time' && !(this.split() && this.tab() === 'time'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showDate" }] : /* istanbul ignore next */ []));
+        this.showTime = computed(() => this.type() !== 'date' && !(this.split() && this.tab() === 'date'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+        this.months = computed(() => [
+            rtDateMonth(this.shownMonth(), {
+                locale: this.#locale(),
+                today: this.today(),
+                chosen: this.draftDay(),
+                min: this.min(),
+                max: this.max(),
+            }),
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+        this.canPrev = computed(() => rtDateCanPage(this.shownMonth(), -1, this.min(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []));
+        this.canNext = computed(() => rtDateCanPage(this.shownMonth(), 1, this.min(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
+        this.monthCells = computed(() => rtDateMonths(this.year(), this.#locale(), this.min(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthCells" }] : /* istanbul ignore next */ []));
+        this.canPrevYear = computed(() => rtDateInBounds(String(this.year() - 1), this.min(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canPrevYear" }] : /* istanbul ignore next */ []));
+        this.canNextYear = computed(() => rtDateInBounds(String(this.year() + 1), this.min(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canNextYear" }] : /* istanbul ignore next */ []));
+        this.draftHour = computed(() => this.#part(0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draftHour" }] : /* istanbul ignore next */ []));
+        this.draftMinute = computed(() => this.#part(1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draftMinute" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => rtDateTimeColumns({ step: this.minuteStep(), hour: this.draftHour(), day: this.draftDay(), min: this.min(), max: this.max() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.todayOff = computed(() => !rtDateInBounds(this.today(), this.min(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayOff" }] : /* istanbul ignore next */ []));
+        /** Черновик собирается в значение и лежит в границах. */
+        this.canApply = computed(() => this.#draftValue() !== '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canApply" }] : /* istanbul ignore next */ []));
+        this.tabs = computed(() => [
+            { value: 'date', label: this.t().uiDate },
+            { value: 'time', label: this.t().uiTime },
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        /** Тип значения: дата, время или дата со временем. */
+        this.type = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Значение поля в форме нативного input'а; пустая строка — пусто. */
+        this.value = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.min = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Шаг колонки минут. */
+        this.minuteStep = input(5, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Раскладка нижней шторки: дни под палец, у даты со временем — переключатель «Дата | Время». */
+        this.sheet = input(false, { ...(ngDevMode ? { debugName: "sheet" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Момент, от которого считаются «сегодня» и «Сейчас». Поле его не задаёт — панель читает часы
+         * сама; задаёт витрина, чтобы кадр не менялся день ото дня.
+         */
+        this.now = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+        /** Готовое значение: панель просит поле его записать. */
+        this.picked = output();
+        /** Панель просит закрыть себя. */
+        this.closed = output();
+        // Колонки времени прокручены так, что выбранный час и минута стоят посередине. Прокрутка
+        // задаётся самой колонке: `scrollIntoView` двигал бы и страницу под поповером.
+        afterRenderEffect(() => {
+            for (const cell of this.timeCells()) {
+                const node = cell.nativeElement;
+                const column = node.parentElement;
+                if (column !== null && node.getAttribute('aria-pressed') === 'true') {
+                    column.scrollTop = node.offsetTop - (column.clientHeight - node.offsetHeight) / 2;
+                }
+            }
+        });
+    }
+    pickDay(day) {
+        this.activeKey.set(day.key);
+        if (this.type() === 'date') {
+            this.#emit(day.key);
+            return;
+        }
+        this.draftDay.set(day.key);
+    }
+    pickToday() {
+        if (!this.todayOff()) {
+            this.#emit(this.today());
+        }
+    }
+    pickNow() {
+        const now = rtDateNow(this.now() ?? new Date(), this.minuteStep());
+        this.draftTime.set(now.time);
+        if (this.type() === 'datetime-local') {
+            this.draftDay.set(now.day);
+        }
+    }
+    pickHour(hour) {
+        this.draftTime.set(rtDateTime(hour, this.draftMinute() ?? 0));
+    }
+    pickMinute(minute) {
+        this.draftTime.set(rtDateTime(this.draftHour() ?? 0, minute));
+    }
+    onGridKey(event) {
+        const next = rtDateGridKey(event.key, event.day.key, this.#firstDay(), this.min(), this.max());
+        if (next !== null) {
+            this.shownMonth.set(next.slice(0, MONTH_LEN));
+            this.activeKey.set(next);
+        }
+    }
+    page(delta) {
+        this.shownMonth.set(rtDateAddMonths(this.shownMonth(), delta));
+    }
+    openMonths() {
+        this.year.set(Number(this.shownMonth().slice(0, YEAR_LEN$1)));
+        this.view.set('months');
+    }
+    pageYear(delta) {
+        this.year.update((year) => year + delta);
+    }
+    pickMonth(cell) {
+        this.shownMonth.set(cell.key);
+        this.view.set('days');
+    }
+    /** «Готово» и «Применить»: черновик уходит значением, панель закрывается. */
+    apply() {
+        const value = this.#draftValue();
+        if (value !== '') {
+            this.#emit(value);
+        }
+    }
+    #emit(value) {
+        this.picked.emit(value);
+        this.closed.emit();
+    }
+    #draftValue() {
+        const value = rtDateWrite(this.type(), this.draftDay(), this.draftTime());
+        return value !== '' && rtDateInBounds(value, this.min(), this.max()) ? value : '';
+    }
+    #part(index) {
+        const time = this.draftTime();
+        return time === null ? null : Number(time.split(':')[index]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDatePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDatePanelComponent, isStandalone: true, selector: "rt-date-panel", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, 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 }, sheet: { classPropertyName: "sheet", publicName: "sheet", isSignal: true, isRequired: false, transformFunction: null }, now: { classPropertyName: "now", publicName: "now", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked", closed: "closed" }, host: { listeners: { "keydown.escape": "closed.emit()" }, properties: { "class.rt-date-panel--sheet": "sheet()", "class.rt-date-panel--with-time": "type() !== 'date'" }, classAttribute: "rt-date-panel" }, viewQueries: [{ propertyName: "timeCells", predicate: ["timeCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-date-panel\">\n    @if (split()) {\n        <rt-toggle-button-group\n            rtElem=\"tabs\"\n            qa-dataid=\"date-panel-tabs\"\n            fullWidth\n            [ariaLabel]=\"t().uiDate + ' | ' + t().uiTime\"\n            [options]=\"tabs()\"\n            [value]=\"tab()\"\n            (valueChange)=\"tab.set($event)\" />\n    }\n\n    <div rtElem=\"body\">\n        @if (showDate()) {\n            @if (view() === 'days') {\n                <rt-calendar\n                    rtElem=\"calendar\"\n                    qa-dataid=\"date-panel-calendar\"\n                    grid\n                    titleAction\n                    headerTitle\n                    [months]=\"months()\"\n                    [weekdayLabels]=\"weekdays()\"\n                    [canPrev]=\"canPrev()\"\n                    [canNext]=\"canNext()\"\n                    [activeKey]=\"activeKey()\"\n                    [prevAriaLabel]=\"t().uiPrevMonth\"\n                    [nextAriaLabel]=\"t().uiNextMonth\"\n                    (prevMonth)=\"page(-1)\"\n                    (nextMonth)=\"page(1)\"\n                    (dayClick)=\"pickDay($event)\"\n                    (gridKey)=\"onGridKey($event)\"\n                    (titleClick)=\"openMonths()\" />\n            } @else {\n                <div rtElem=\"months\" qa-dataid=\"date-panel-months\" role=\"group\" [attr.aria-label]=\"t().uiChooseMonth\">\n                    <div rtElem=\"months-header\">\n                        <rt-icon-button\n                            qa-dataid=\"date-panel-prev-year\"\n                            icon=\"chevron-left\"\n                            variant=\"secondary\"\n                            radius=\"full\"\n                            [ariaLabel]=\"t().uiPrevYear\"\n                            [disabled]=\"!canPrevYear()\"\n                            (clicked)=\"pageYear(-1)\" />\n                        <span rtElem=\"year\" qa-dataid=\"date-panel-year\">{{ year() }}</span>\n                        <rt-icon-button\n                            qa-dataid=\"date-panel-next-year\"\n                            icon=\"chevron-right\"\n                            variant=\"secondary\"\n                            radius=\"full\"\n                            [ariaLabel]=\"t().uiNextYear\"\n                            [disabled]=\"!canNextYear()\"\n                            (clicked)=\"pageYear(1)\" />\n                    </div>\n                    <div rtElem=\"month-grid\">\n                        @for (cell of monthCells(); track cell.key) {\n                            <button\n                                rtElem=\"cell\"\n                                qa-dataid=\"date-panel-month\"\n                                type=\"button\"\n                                [attr.data-key]=\"cell.key\"\n                                [attr.aria-pressed]=\"cell.key === shownMonth()\"\n                                [disabled]=\"cell.disabled\"\n                                (click)=\"pickMonth(cell)\">\n                                {{ cell.label }}\n                            </button>\n                        }\n                    </div>\n                </div>\n            }\n        }\n\n        @if (showTime()) {\n            <div rtElem=\"time\" qa-dataid=\"date-panel-time\">\n                <div rtElem=\"column\" qa-dataid=\"date-panel-hours\" role=\"group\" [attr.aria-label]=\"t().uiHours\">\n                    @for (cell of columns().hours; track cell.value) {\n                        <button\n                            #timeCell\n                            rtElem=\"cell\"\n                            qa-dataid=\"date-panel-hour\"\n                            type=\"button\"\n                            [attr.aria-pressed]=\"cell.value === draftHour()\"\n                            [disabled]=\"cell.disabled\"\n                            (click)=\"pickHour(cell.value)\">\n                            {{ cell.label }}\n                        </button>\n                    }\n                </div>\n                <div rtElem=\"column\" qa-dataid=\"date-panel-minutes\" role=\"group\" [attr.aria-label]=\"t().uiMinutes\">\n                    @for (cell of columns().minutes; track cell.value) {\n                        <button\n                            #timeCell\n                            rtElem=\"cell\"\n                            qa-dataid=\"date-panel-minute\"\n                            type=\"button\"\n                            [attr.aria-pressed]=\"cell.value === draftMinute()\"\n                            [disabled]=\"cell.disabled\"\n                            (click)=\"pickMinute(cell.value)\">\n                            {{ cell.label }}\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <div rtElem=\"footer\">\n        @switch (type()) {\n            @case ('date') {\n                <button\n                    rtButton\n                    qa-dataid=\"date-panel-today\"\n                    theme=\"secondary\"\n                    appearance=\"text\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [label]=\"t().uiToday\"\n                    [attr.aria-label]=\"t().uiToday\"\n                    [disabled]=\"todayOff()\"\n                    (click)=\"pickToday()\"></button>\n            }\n            @case ('time') {\n                <button\n                    rtButton\n                    qa-dataid=\"date-panel-now\"\n                    theme=\"secondary\"\n                    appearance=\"text\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [label]=\"t().uiNow\"\n                    [attr.aria-label]=\"t().uiNow\"\n                    (click)=\"pickNow()\"></button>\n                <button\n                    rtButton\n                    qa-dataid=\"date-panel-done\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [label]=\"t().uiDone\"\n                    [attr.aria-label]=\"t().uiDone\"\n                    [disabled]=\"!canApply()\"\n                    (click)=\"apply()\"></button>\n            }\n            @default {\n                <button\n                    rtButton\n                    qa-dataid=\"date-panel-apply\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [label]=\"t().uiApply\"\n                    [attr.aria-label]=\"t().uiApply\"\n                    [disabled]=\"!canApply()\"\n                    (click)=\"apply()\"></button>\n            }\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-panel{--rt-date-panel-cell-size: var(--rt-control-height-sm);--rt-date-panel-cell-radius: var(--rt-radius-md);--rt-date-panel-divider-width: var(--rt-border-width-thin);--rt-date-panel-column-height: calc(var(--rt-date-panel-cell-size) * 7 + var(--rt-space-0-5) * 6);display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-4)}.rt-date-panel__body{display:flex;align-items:flex-start;gap:var(--rt-space-4)}.rt-date-panel .rt-date-panel__calendar{--rt-calendar-month-count: 1;--rt-calendar-day-justify: center}.rt-date-panel__calendar,.rt-date-panel__months{flex:1 1 auto;min-inline-size:calc(var(--rt-size-10) * 7)}.rt-date-panel__months-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4)}.rt-date-panel__year{color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-date-panel__month-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(3,1fr)}.rt-date-panel__time{display:flex;gap:var(--rt-space-1)}.rt-date-panel__column{position:relative;display:flex;flex-direction:column;gap:var(--rt-space-0-5);max-block-size:var(--rt-date-panel-column-height);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.rt-date-panel__cell{flex:0 0 auto;padding:0 var(--rt-space-2);border:none;border-radius:var(--rt-date-panel-cell-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums;min-block-size:var(--rt-date-panel-cell-size);min-inline-size:var(--rt-control-height-md)}.rt-date-panel__cell:hover:not(:disabled,[aria-pressed=true]){background:var(--rt-color-bg-subtle)}.rt-date-panel__cell:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-date-panel__cell[aria-pressed=true]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-date-panel__cell:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-date-panel__footer{display:flex;justify-content:flex-end;padding-top:var(--rt-space-2);border-top:var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-2)}.rt-date-panel:not(.rt-date-panel--with-time) .rt-date-panel__footer{justify-content:center}.rt-date-panel--sheet{--rt-date-panel-cell-size: calc(var(--rt-size-10) + var(--rt-size-1));padding-inline:0}.rt-date-panel--sheet .rt-date-panel__calendar{--rt-calendar-day-size: var(--rt-date-panel-cell-size)}.rt-date-panel--sheet .rt-date-panel__body{flex-direction:column;align-items:stretch}.rt-date-panel--sheet .rt-date-panel__calendar,.rt-date-panel--sheet .rt-date-panel__months{min-inline-size:0}.rt-date-panel--sheet .rt-date-panel__time{justify-content:center}.rt-date-panel--sheet .rt-date-panel__column{flex:1 1 0}}\n"], dependencies: [{ kind: "directive", type: 
+                // rt-tools
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: 
+                // components
+                RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtCalendarComponent, selector: "rt-calendar", inputs: ["months", "weekdayLabels", "canPrev", "canNext", "prevAriaLabel", "nextAriaLabel", "sublabelsLoading", "grid", "activeKey", "titleAction", "headerTitle"], outputs: ["prevMonth", "nextMonth", "dayClick", "gridKey", "titleClick", "dayHover"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtToggleButtonGroupComponent, selector: "rt-toggle-button-group", inputs: ["options", "value", "multiple", "values", "ariaLabel", "size", "disabled", "fullWidth"], outputs: ["valueChange", "valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDatePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-date-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // rt-tools
+                        BlockDirective,
+                        ElemDirective,
+                        // components
+                        RtButtonDirective,
+                        RtCalendarComponent,
+                        RtIconButtonComponent,
+                        RtToggleButtonGroupComponent,
+                    ], host: {
+                        class: BEM_BLOCK$1,
+                        '[class.rt-date-panel--sheet]': 'sheet()',
+                        '[class.rt-date-panel--with-time]': "type() !== 'date'",
+                        '(keydown.escape)': 'closed.emit()',
+                    }, template: "<ng-container rtBlock=\"rt-date-panel\">\n    @if (split()) {\n        <rt-toggle-button-group\n            rtElem=\"tabs\"\n            qa-dataid=\"date-panel-tabs\"\n            fullWidth\n            [ariaLabel]=\"t().uiDate + ' | ' + t().uiTime\"\n            [options]=\"tabs()\"\n            [value]=\"tab()\"\n            (valueChange)=\"tab.set($event)\" />\n    }\n\n    <div rtElem=\"body\">\n        @if (showDate()) {\n            @if (view() === 'days') {\n                <rt-calendar\n                    rtElem=\"calendar\"\n                    qa-dataid=\"date-panel-calendar\"\n                    grid\n                    titleAction\n                    headerTitle\n                    [months]=\"months()\"\n                    [weekdayLabels]=\"weekdays()\"\n                    [canPrev]=\"canPrev()\"\n                    [canNext]=\"canNext()\"\n                    [activeKey]=\"activeKey()\"\n                    [prevAriaLabel]=\"t().uiPrevMonth\"\n                    [nextAriaLabel]=\"t().uiNextMonth\"\n                    (prevMonth)=\"page(-1)\"\n                    (nextMonth)=\"page(1)\"\n                    (dayClick)=\"pickDay($event)\"\n                    (gridKey)=\"onGridKey($event)\"\n                    (titleClick)=\"openMonths()\" />\n            } @else {\n                <div rtElem=\"months\" qa-dataid=\"date-panel-months\" role=\"group\" [attr.aria-label]=\"t().uiChooseMonth\">\n                    <div rtElem=\"months-header\">\n                        <rt-icon-button\n                            qa-dataid=\"date-panel-prev-year\"\n                            icon=\"chevron-left\"\n                            variant=\"secondary\"\n                            radius=\"full\"\n                            [ariaLabel]=\"t().uiPrevYear\"\n                            [disabled]=\"!canPrevYear()\"\n                            (clicked)=\"pageYear(-1)\" />\n                        <span rtElem=\"year\" qa-dataid=\"date-panel-year\">{{ year() }}</span>\n                        <rt-icon-button\n                            qa-dataid=\"date-panel-next-year\"\n                            icon=\"chevron-right\"\n                            variant=\"secondary\"\n                            radius=\"full\"\n                            [ariaLabel]=\"t().uiNextYear\"\n                            [disabled]=\"!canNextYear()\"\n                            (clicked)=\"pageYear(1)\" />\n                    </div>\n                    <div rtElem=\"month-grid\">\n                        @for (cell of monthCells(); track cell.key) {\n                            <button\n                                rtElem=\"cell\"\n                                qa-dataid=\"date-panel-month\"\n                                type=\"button\"\n                                [attr.data-key]=\"cell.key\"\n                                [attr.aria-pressed]=\"cell.key === shownMonth()\"\n                                [disabled]=\"cell.disabled\"\n                                (click)=\"pickMonth(cell)\">\n                                {{ cell.label }}\n                            </button>\n                        }\n                    </div>\n                </div>\n            }\n        }\n\n        @if (showTime()) {\n            <div rtElem=\"time\" qa-dataid=\"date-panel-time\">\n                <div rtElem=\"column\" qa-dataid=\"date-panel-hours\" role=\"group\" [attr.aria-label]=\"t().uiHours\">\n                    @for (cell of columns().hours; track cell.value) {\n                        <button\n                            #timeCell\n                            rtElem=\"cell\"\n                            qa-dataid=\"date-panel-hour\"\n                            type=\"button\"\n                            [attr.aria-pressed]=\"cell.value === draftHour()\"\n                            [disabled]=\"cell.disabled\"\n                            (click)=\"pickHour(cell.value)\">\n                            {{ cell.label }}\n                        </button>\n                    }\n                </div>\n                <div rtElem=\"column\" qa-dataid=\"date-panel-minutes\" role=\"group\" [attr.aria-label]=\"t().uiMinutes\">\n                    @for (cell of columns().minutes; track cell.value) {\n                        <button\n                            #timeCell\n                            rtElem=\"cell\"\n                            qa-dataid=\"date-panel-minute\"\n                            type=\"button\"\n                            [attr.aria-pressed]=\"cell.value === draftMinute()\"\n                            [disabled]=\"cell.disabled\"\n                            (click)=\"pickMinute(cell.value)\">\n                            {{ cell.label }}\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <div rtElem=\"footer\">\n        @switch (type()) {\n            @case ('date') {\n                <button\n                    rtButton\n                    qa-dataid=\"date-panel-today\"\n                    theme=\"secondary\"\n                    appearance=\"text\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [label]=\"t().uiToday\"\n                    [attr.aria-label]=\"t().uiToday\"\n                    [disabled]=\"todayOff()\"\n                    (click)=\"pickToday()\"></button>\n            }\n            @case ('time') {\n                <button\n                    rtButton\n                    qa-dataid=\"date-panel-now\"\n                    theme=\"secondary\"\n                    appearance=\"text\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [label]=\"t().uiNow\"\n                    [attr.aria-label]=\"t().uiNow\"\n                    (click)=\"pickNow()\"></button>\n                <button\n                    rtButton\n                    qa-dataid=\"date-panel-done\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [label]=\"t().uiDone\"\n                    [attr.aria-label]=\"t().uiDone\"\n                    [disabled]=\"!canApply()\"\n                    (click)=\"apply()\"></button>\n            }\n            @default {\n                <button\n                    rtButton\n                    qa-dataid=\"date-panel-apply\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [label]=\"t().uiApply\"\n                    [attr.aria-label]=\"t().uiApply\"\n                    [disabled]=\"!canApply()\"\n                    (click)=\"apply()\"></button>\n            }\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-panel{--rt-date-panel-cell-size: var(--rt-control-height-sm);--rt-date-panel-cell-radius: var(--rt-radius-md);--rt-date-panel-divider-width: var(--rt-border-width-thin);--rt-date-panel-column-height: calc(var(--rt-date-panel-cell-size) * 7 + var(--rt-space-0-5) * 6);display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-4)}.rt-date-panel__body{display:flex;align-items:flex-start;gap:var(--rt-space-4)}.rt-date-panel .rt-date-panel__calendar{--rt-calendar-month-count: 1;--rt-calendar-day-justify: center}.rt-date-panel__calendar,.rt-date-panel__months{flex:1 1 auto;min-inline-size:calc(var(--rt-size-10) * 7)}.rt-date-panel__months-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4)}.rt-date-panel__year{color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-date-panel__month-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(3,1fr)}.rt-date-panel__time{display:flex;gap:var(--rt-space-1)}.rt-date-panel__column{position:relative;display:flex;flex-direction:column;gap:var(--rt-space-0-5);max-block-size:var(--rt-date-panel-column-height);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.rt-date-panel__cell{flex:0 0 auto;padding:0 var(--rt-space-2);border:none;border-radius:var(--rt-date-panel-cell-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums;min-block-size:var(--rt-date-panel-cell-size);min-inline-size:var(--rt-control-height-md)}.rt-date-panel__cell:hover:not(:disabled,[aria-pressed=true]){background:var(--rt-color-bg-subtle)}.rt-date-panel__cell:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-date-panel__cell[aria-pressed=true]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-date-panel__cell:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-date-panel__footer{display:flex;justify-content:flex-end;padding-top:var(--rt-space-2);border-top:var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-2)}.rt-date-panel:not(.rt-date-panel--with-time) .rt-date-panel__footer{justify-content:center}.rt-date-panel--sheet{--rt-date-panel-cell-size: calc(var(--rt-size-10) + var(--rt-size-1));padding-inline:0}.rt-date-panel--sheet .rt-date-panel__calendar{--rt-calendar-day-size: var(--rt-date-panel-cell-size)}.rt-date-panel--sheet .rt-date-panel__body{flex-direction:column;align-items:stretch}.rt-date-panel--sheet .rt-date-panel__calendar,.rt-date-panel--sheet .rt-date-panel__months{min-inline-size:0}.rt-date-panel--sheet .rt-date-panel__time{justify-content:center}.rt-date-panel--sheet .rt-date-panel__column{flex:1 1 0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { timeCells: [{ type: i0.ViewChildren, args: ['timeCell', { isSignal: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], 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 }] }], sheet: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheet", required: false }] }], now: [{ type: i0.Input, args: [{ isSignal: true, alias: "now", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Чистая логика текста в поле даты: как значение пишется по локали и как набранный текст
+ * читается обратно. Значение формы — строка ISO (`YYYY-MM-DD`, `HH:mm`, `YYYY-MM-DDTHH:mm`);
+ * текст — дата в порядке языка интерфейса (`01.08.2026` под `ru`), время всегда `HH:mm`.
+ */
+/** День, в котором день, месяц и год различимы: по нему `Intl` называет порядок частей. */
+const SAMPLE_DAY = new Date(2026, 0, 31);
+const DEFAULT_LAYOUT = { order: ['day', 'month', 'year'], separator: '.' };
+const YEAR_LEN = 4;
+const PART_MAX_LEN = 2;
+const DAY_GROUPS = 3;
+const TIME_GROUPS = 2;
+/** Знаки, которые встречаются в тексте даты любой локали, кроме цифр. */
+const TEXT_RE = /^[\d\s.,/:\-T]+$/;
+function isDatePart(type) {
+    return type === 'day' || type === 'month' || type === 'year';
+}
+function dayText(day, layout) {
+    const [year, month, date] = day.split('-');
+    const parts = { day: date, month, year };
+    return layout.order.map((part) => parts[part]).join(layout.separator);
+}
+/** День ISO из трёх групп цифр в порядке локали; `null` — группы не складываются в день. */
+function readDay(groups, layout) {
+    const parts = {};
+    layout.order.forEach((part, index) => {
+        parts[part] = groups[index];
+    });
+    const { day, month, year } = parts;
+    if (day === undefined || month === undefined || year?.length !== YEAR_LEN) {
+        return null;
+    }
+    if (day.length > PART_MAX_LEN || month.length > PART_MAX_LEN) {
+        return null;
+    }
+    return `${year}-${month.padStart(PART_MAX_LEN, '0')}-${day.padStart(PART_MAX_LEN, '0')}`;
+}
+/** Время ISO из двух групп цифр: часы в один или два знака, минуты — ровно два. */
+function readTime(groups) {
+    if (groups.length !== TIME_GROUPS) {
+        return null;
+    }
+    const [hour, minute] = groups;
+    if (minute.length !== PART_MAX_LEN || hour.length > PART_MAX_LEN) {
+        return null;
+    }
+    return `${hour.padStart(PART_MAX_LEN, '0')}:${minute}`;
+}
+/** Значение типа из групп цифр текста; `null` — группы не складываются в значение. */
+function readGroups(groups, type, layout) {
+    if (type === 'time') {
+        return readTime(groups);
+    }
+    if (type === 'date') {
+        return groups.length === DAY_GROUPS ? readDay(groups, layout) : null;
+    }
+    if (groups.length !== DAY_GROUPS + TIME_GROUPS) {
+        return null;
+    }
+    const day = readDay(groups.slice(0, DAY_GROUPS), layout);
+    const time = readTime(groups.slice(DAY_GROUPS));
+    return day === null || time === null ? null : `${day}T${time}`;
+}
+/** Порядок дня, месяца и года и знак между ними — по локали. */
+function rtDateLayout(locale) {
+    const parts = new Intl.DateTimeFormat(locale, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    }).formatToParts(SAMPLE_DAY);
+    const order = parts
+        .map((part) => part.type)
+        .filter((type) => isDatePart(type));
+    const separator = parts.find((part) => part.type === 'literal')?.value.trim() ?? '';
+    if (order.length !== DAY_GROUPS || separator === '') {
+        return DEFAULT_LAYOUT;
+    }
+    return { order, separator };
+}
+/**
+ * Текст поля для значения ISO; пустое значение — пустой текст. Строка, которая не читается как
+ * значение этого типа, показывается как есть: она пришла из формы мимо поля и не должна пропасть.
+ */
+function rtDateText(value, type, layout) {
+    if (type === 'time' || rtDateRead(value, type) === null) {
+        return value;
+    }
+    if (type === 'date') {
+        return dayText(value, layout);
+    }
+    const [day, time] = value.split('T');
+    return `${dayText(day, layout)} ${time}`;
+}
+/** Подсказка формы текста в буквах кита: `дд.мм.гггг`, `чч:мм`, `дд.мм.гггг чч:мм`. */
+function rtDateShape(type, layout, letters) {
+    const time = `${letters.hour}:${letters.minute}`;
+    if (type === 'time') {
+        return time;
+    }
+    const day = layout.order.map((part) => letters[part]).join(layout.separator);
+    return type === 'date' ? day : `${day} ${time}`;
+}
+/**
+ * Читает набранный текст в значение ISO; `null` — текст не значение этого типа. Читается и
+ * порядок локали, и сама форма значения: вставленная `2026-08-01` тоже становится значением.
+ */
+function rtDateParse(text, type, layout) {
+    const iso = rtDateRead(text, type);
+    if (iso !== null) {
+        return iso;
+    }
+    const value = text.trim();
+    if (!TEXT_RE.test(value)) {
+        return null;
+    }
+    const candidate = readGroups(value.match(/\d+/g) ?? [], type, layout);
+    // Кандидат проверяется той же формой значения: 31.02.2026 складывается в строку, но не в день.
+    return candidate === null ? null : rtDateRead(candidate, type);
+}
+
+const BEM_BLOCK = 'rt-date-picker';
+/**
+ * Поле даты, времени или даты со временем со своей панелью кита, визуально и по токенам
+ * идентичное rt-input (host — box `--rt-input-*`, input — прозрачный `__field`). Кнопка в конце
+ * поля открывает `rt-date-panel`: на широком экране в поповере, на узком — в нижней шторке.
+ * CVA через общий `RtFormControlBase`: clearable, авто-подсветка invalid, read-only
+ * представление (значение форматируется через Intl).
+ *
+ * `value` — строка формы нативного input'а (`YYYY-MM-DD`, `YYYY-MM-DDTHH:mm`, `HH:mm`). Текст в
+ * поле — дата в порядке языка интерфейса (`01.08.2026` под `ru`), время `HH:mm`; набирается так же,
+ * вставленная форма значения тоже читается. Нечитаемый или лежащий за границами текст оставляет
+ * значение прежним и помечает поле ошибкой.
+ */
+class RtDatePickerComponent extends RtFormControlBase {
+    constructor() {
+        super(...arguments);
+        /** Локаль кита: приложение, меняющее язык на ходу, меняет её, и текст поля пересчитывается. */
+        this.#locale = inject(RT_KIT_LOCALE);
+        /** Порядок дня, месяца и года в тексте поля — по локали кита. */
+        this.#layout = computed(() => rtDateLayout(this.#locale()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#layout" }] : /* istanbul ignore next */ []));
+        this.t = inject(RT_KIT_LABELS);
+        /** Узкий экран: панель открывается в нижней шторке, а не в поповере. */
+        this.narrow = inject(BreakpointsService).narrow;
+        this.fieldEl = viewChild('fieldEl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []));
+        this.popover = viewChild(RtPopoverDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+        /** Набранный текст не читается как значение в границах: поле помечено ошибкой. */
+        this.textInvalid = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textInvalid" }] : /* istanbul ignore next */ []));
+        this.sheetOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sheetOpen" }] : /* istanbul ignore next */ []));
+        /** Подсказка формы текста буквами кита: `дд.мм.гггг` под русскими метками. */
+        this.shape = computed(() => {
+            const labels = this.t();
+            return rtDateShape(this.type(), this.#layout(), {
+                day: labels.uiShapeDay,
+                month: labels.uiShapeMonth,
+                year: labels.uiShapeYear,
+                hour: labels.uiShapeHour,
+                minute: labels.uiShapeMinute,
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+        /**
+         * Текст в поле — значение в порядке языка интерфейса. Не строку форма кладёт мимо контракта
+         * (например `Date`), и поле показывает её пустой, как показывало браузерное.
+         */
+        this.text = computed(() => this.#text(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.openIcon = computed(() => this.type() === 'time' ? 'ico-time' : 'ico-calendar', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openIcon" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.value() !== '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Ширина поля в знаках — по длине формы значения. Без неё текстовое поле берёт от браузера
+         * двадцать знаков и в строке отборов потребителя занимает место вдвое шире значения.
+         */
+        this.fieldSize = computed(() => this.shape().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldSize" }] : /* istanbul ignore next */ []));
+        /** Подсказка обрезается многоточием в узком поле, поэтому шаблон целиком виден при наведении. */
+        this.shapeTitle = computed(() => (this.hasValue() ? null : this.shape()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shapeTitle" }] : /* istanbul ignore next */ []));
+        /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
+        this.appearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.displayText = computed(() => this.#format(this.value(), this.type()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        this.type = input('date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.min = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Шаг колонки минут в панели. */
+        this.minuteStep = input(5, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    }
+    /** Локаль кита: приложение, меняющее язык на ходу, меняет её, и текст поля пересчитывается. */
+    #locale;
+    /** Порядок дня, месяца и года в тексте поля — по локали кита. */
+    #layout;
+    /** Значение из формы снимает ошибку набора: в поле теперь стоит оно. */
+    writeValue(value) {
+        super.writeValue(value);
+        this.textInvalid.set(false);
+    }
+    getEmptyValue() {
+        return '';
+    }
+    focusAfterClear() {
+        this.fieldEl()?.nativeElement.focus();
+    }
+    clearValue() {
+        super.clearValue();
+        this.#accept('');
+    }
+    /** Набор текста: значение меняется, только когда текст читается как значение в границах. */
+    onTyped(event) {
+        const text = event.target.value;
+        if (text.trim() === '') {
+            this.#commit('');
+            return;
+        }
+        const read = rtDateParse(text, this.type(), this.#layout());
+        if (read === null || !rtDateInBounds(read, this.min(), this.max())) {
+            this.textInvalid.set(true);
+            return;
+        }
+        this.#commit(read);
+    }
+    /** Кнопка в конце поля: на узком экране открывает шторку, на широком поповер открывает сам. */
+    openPanel() {
+        if (this.narrow() && !this.isDisabled()) {
+            this.sheetOpen.set(true);
+        }
+    }
+    closePanel() {
+        this.sheetOpen.set(false);
+        this.popover()?.close();
+    }
+    onPicked(value) {
+        this.#commit(value);
+        this.markTouched();
+    }
+    onBlur() {
+        this.markTouched();
+    }
+    #commit(value) {
+        this.value.set(value);
+        this.emitChange(value);
+        this.#accept(value);
+    }
+    /** Текст в поле — принятое значение, ошибки набора нет. */
+    #accept(value) {
+        this.textInvalid.set(false);
+        const node = this.fieldEl()?.nativeElement;
+        if (node !== undefined) {
+            node.value = this.#text(value);
+        }
+    }
+    #text(value) {
+        return typeof value === 'string' ? rtDateText(value, this.type(), this.#layout()) : '';
+    }
+    /**
+     * Форматирует ISO-значение нативного input'а в локализованный текст для
+     * read-only. Для `time` форматируем как сегодняшнюю дату с временем (нужен
+     * валидный Date), показывая только часы/минуты.
+     */
+    #format(value, type) {
+        if (value === '') {
+            return '';
+        }
+        const parsed = Date.parse(type === 'time' ? `1970-01-01T${value}` : value);
+        if (Number.isNaN(parsed)) {
+            return value;
+        }
+        return new Intl.DateTimeFormat(this.#locale(), this.#formatOptions(type)).format(new Date(parsed));
+    }
+    #formatOptions(type) {
+        if (type === 'time') {
+            return { hour: '2-digit', minute: '2-digit' };
+        }
+        if (type === 'datetime-local') {
+            return { dateStyle: 'medium', timeStyle: 'short' };
+        }
+        return { dateStyle: 'medium' };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDatePickerComponent, isStandalone: true, selector: "rt-date-picker", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 } }, host: { properties: { "class.rt-date-picker--disabled": "isDisabled()", "class.rt-date-picker--invalid": "isInvalid() || textInvalid()", "class.rt-date-picker--readonly": "isReadonly()", "class.rt-date-picker--borderless": "!bordered()", "class.rt-date-picker--appearance--fill": "appearance() === 'fill'", "class.rt-date-picker--size--sm": "size() === 'sm'", "class.rt-date-picker--size--lg": "size() === 'lg'" }, classAttribute: "rt-date-picker" }, providers: [
+            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+            { provide: RtFormControlBase, useExisting: forwardRef(() => RtDatePickerComponent) },
+        ], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: RtPopoverDirective, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-date-picker\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"date-picker-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"date-picker-control\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [value]=\"text()\"\n            [disabled]=\"isDisabled()\"\n            [attr.placeholder]=\"shape()\"\n            [attr.title]=\"shapeTitle()\"\n            [attr.size]=\"fieldSize()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || textInvalid() || null\"\n            (input)=\"onTyped($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"date-picker-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"-1\"\n                (clicked)=\"clear($event)\" />\n        }\n        <rt-icon-button\n            rtElem=\"open\"\n            qa-dataid=\"date-picker-open\"\n            size=\"sm\"\n            variant=\"ghost\"\n            iconColor=\"muted\"\n            rtPopoverAlign=\"end\"\n            [icon]=\"openIcon()\"\n            [ariaLabel]=\"t().uiOpenCalendar\"\n            [disabled]=\"isDisabled()\"\n            [rtPopover]=\"panelTpl\"\n            [rtPopoverDisabled]=\"narrow() || isDisabled()\"\n            (clicked)=\"openPanel()\" />\n\n        <ng-template #panelTpl>\n            <div rtElem=\"popup\" qa-dataid=\"date-picker-popup\">\n                <rt-date-panel\n                    [type]=\"type()\"\n                    [value]=\"value()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [minuteStep]=\"minuteStep()\"\n                    (picked)=\"onPicked($event)\"\n                    (closed)=\"closePanel()\" />\n            </div>\n        </ng-template>\n\n        @if (narrow()) {\n            <rt-bottom-sheet qa-dataid=\"date-picker-sheet\" [open]=\"sheetOpen()\" (openChange)=\"sheetOpen.set($event)\">\n                @if (sheetOpen()) {\n                    <rt-date-panel\n                        sheet\n                        [type]=\"type()\"\n                        [value]=\"value()\"\n                        [min]=\"min()\"\n                        [max]=\"max()\"\n                        [minuteStep]=\"minuteStep()\"\n                        (picked)=\"onPicked($event)\"\n                        (closed)=\"closePanel()\" />\n                }\n            </rt-bottom-sheet>\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-picker{--rt-date-picker-radius: var(--rt-input-radius);--rt-date-picker-fill-radius: var(--rt-radius-sm);position:relative;display:inline-flex;width:100%;min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-date-picker-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-date-picker:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-date-picker--borderless{border-color:transparent}.rt-date-picker--appearance--fill{border-color:transparent;border-radius:var(--rt-date-picker-fill-radius) var(--rt-date-picker-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-date-picker--invalid{border-color:var(--rt-input-color-border-error)}.rt-date-picker--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-date-picker--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-date-picker--size--sm{min-height:var(--rt-input-height-sm)}.rt-date-picker--size--lg{min-height:var(--rt-input-height-lg)}.rt-date-picker--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-date-picker__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-date-picker__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-date-picker__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none;text-overflow:ellipsis}.rt-date-picker__field:disabled{cursor:not-allowed}.rt-date-picker__clear,.rt-date-picker__open{flex-shrink:0}.rt-date-picker__popup{border:var(--rt-overlay-select-panel-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-overlay-select-radius);background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-overlay-select-shadow)}.rt-date-picker[data-rt-radius=none]{--rt-date-picker-radius: var(--rt-radius-none)}.rt-date-picker[data-rt-radius=xs]{--rt-date-picker-radius: var(--rt-radius-xs)}.rt-date-picker[data-rt-radius=sm]{--rt-date-picker-radius: var(--rt-radius-sm)}.rt-date-picker[data-rt-radius=ms]{--rt-date-picker-radius: var(--rt-radius-ms)}.rt-date-picker[data-rt-radius=md]{--rt-date-picker-radius: var(--rt-radius-md)}.rt-date-picker[data-rt-radius=lg]{--rt-date-picker-radius: var(--rt-radius-lg)}.rt-date-picker[data-rt-radius=xl]{--rt-date-picker-radius: var(--rt-radius-xl)}.rt-date-picker[data-rt-radius=\"2xl\"]{--rt-date-picker-radius: var(--rt-radius-2xl)}.rt-date-picker[data-rt-radius=full]{--rt-date-picker-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtBottomSheetComponent, selector: "rt-bottom-sheet", inputs: ["open"], outputs: ["openChange"] }, { kind: "component", type: RtDatePanelComponent, selector: "rt-date-panel", inputs: ["type", "value", "min", "max", "minuteStep", "sheet", "now"], outputs: ["picked", "closed"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtBottomSheetComponent,
+                        RtDatePanelComponent,
+                        RtIconButtonComponent,
+                        RtPopoverDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], providers: [
+                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtDatePickerComponent) },
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-date-picker--disabled]': 'isDisabled()',
+                        '[class.rt-date-picker--invalid]': 'isInvalid() || textInvalid()',
+                        '[class.rt-date-picker--readonly]': 'isReadonly()',
+                        '[class.rt-date-picker--borderless]': '!bordered()',
+                        '[class.rt-date-picker--appearance--fill]': "appearance() === 'fill'",
+                        '[class.rt-date-picker--size--sm]': "size() === 'sm'",
+                        '[class.rt-date-picker--size--lg]': "size() === 'lg'",
+                    }, template: "<ng-container rtBlock=\"rt-date-picker\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"date-picker-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"date-picker-control\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [value]=\"text()\"\n            [disabled]=\"isDisabled()\"\n            [attr.placeholder]=\"shape()\"\n            [attr.title]=\"shapeTitle()\"\n            [attr.size]=\"fieldSize()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || textInvalid() || null\"\n            (input)=\"onTyped($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"date-picker-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"-1\"\n                (clicked)=\"clear($event)\" />\n        }\n        <rt-icon-button\n            rtElem=\"open\"\n            qa-dataid=\"date-picker-open\"\n            size=\"sm\"\n            variant=\"ghost\"\n            iconColor=\"muted\"\n            rtPopoverAlign=\"end\"\n            [icon]=\"openIcon()\"\n            [ariaLabel]=\"t().uiOpenCalendar\"\n            [disabled]=\"isDisabled()\"\n            [rtPopover]=\"panelTpl\"\n            [rtPopoverDisabled]=\"narrow() || isDisabled()\"\n            (clicked)=\"openPanel()\" />\n\n        <ng-template #panelTpl>\n            <div rtElem=\"popup\" qa-dataid=\"date-picker-popup\">\n                <rt-date-panel\n                    [type]=\"type()\"\n                    [value]=\"value()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [minuteStep]=\"minuteStep()\"\n                    (picked)=\"onPicked($event)\"\n                    (closed)=\"closePanel()\" />\n            </div>\n        </ng-template>\n\n        @if (narrow()) {\n            <rt-bottom-sheet qa-dataid=\"date-picker-sheet\" [open]=\"sheetOpen()\" (openChange)=\"sheetOpen.set($event)\">\n                @if (sheetOpen()) {\n                    <rt-date-panel\n                        sheet\n                        [type]=\"type()\"\n                        [value]=\"value()\"\n                        [min]=\"min()\"\n                        [max]=\"max()\"\n                        [minuteStep]=\"minuteStep()\"\n                        (picked)=\"onPicked($event)\"\n                        (closed)=\"closePanel()\" />\n                }\n            </rt-bottom-sheet>\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-picker{--rt-date-picker-radius: var(--rt-input-radius);--rt-date-picker-fill-radius: var(--rt-radius-sm);position:relative;display:inline-flex;width:100%;min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-date-picker-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-date-picker:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-date-picker--borderless{border-color:transparent}.rt-date-picker--appearance--fill{border-color:transparent;border-radius:var(--rt-date-picker-fill-radius) var(--rt-date-picker-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-date-picker--invalid{border-color:var(--rt-input-color-border-error)}.rt-date-picker--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-date-picker--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-date-picker--size--sm{min-height:var(--rt-input-height-sm)}.rt-date-picker--size--lg{min-height:var(--rt-input-height-lg)}.rt-date-picker--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-date-picker__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-date-picker__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-date-picker__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none;text-overflow:ellipsis}.rt-date-picker__field:disabled{cursor:not-allowed}.rt-date-picker__clear,.rt-date-picker__open{flex-shrink:0}.rt-date-picker__popup{border:var(--rt-overlay-select-panel-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-overlay-select-radius);background-color:var(--rt-color-bg-surface);box-shadow:var(--rt-overlay-select-shadow)}.rt-date-picker[data-rt-radius=none]{--rt-date-picker-radius: var(--rt-radius-none)}.rt-date-picker[data-rt-radius=xs]{--rt-date-picker-radius: var(--rt-radius-xs)}.rt-date-picker[data-rt-radius=sm]{--rt-date-picker-radius: var(--rt-radius-sm)}.rt-date-picker[data-rt-radius=ms]{--rt-date-picker-radius: var(--rt-radius-ms)}.rt-date-picker[data-rt-radius=md]{--rt-date-picker-radius: var(--rt-radius-md)}.rt-date-picker[data-rt-radius=lg]{--rt-date-picker-radius: var(--rt-radius-lg)}.rt-date-picker[data-rt-radius=xl]{--rt-date-picker-radius: var(--rt-radius-xl)}.rt-date-picker[data-rt-radius=\"2xl\"]{--rt-date-picker-radius: var(--rt-radius-2xl)}.rt-date-picker[data-rt-radius=full]{--rt-date-picker-radius: var(--rt-radius-full)}}\n"] }]
+        }], propDecorators: { fieldEl: [{ type: i0.ViewChild, args: ['fieldEl', { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtDatePickerComponent, rtDateAddMonths, rtDateCanPage, rtDateFirstDay, rtDateGridKey, rtDateInBounds, rtDateLayout, rtDateMonth, rtDateMonths, rtDateNow, rtDateParse, rtDateRead, rtDateShape, rtDateSplit, rtDateText, rtDateTime, rtDateTimeColumns, rtDateWeekdays, rtDateWrite };
+//# sourceMappingURL=rt-tools-ui-kit-v2-date-picker.mjs.map