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

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

@@ -0,0 +1,573 @@
+import * as i0 from '@angular/core';
+import { inject, computed, linkedSignal, signal, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, forwardRef } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RT_KIT_LOCALE, RT_KIT_LABELS, rtKitLabel, BreakpointsService } from '@rt-tools/ui-kit-v2/core';
+import { RtBottomSheetComponent } from '@rt-tools/ui-kit-v2/bottom-sheet';
+import { rtDateAddMonths, rtDateRead, rtDateInBounds, rtDateMonth, rtDateText, rtDateShape, rtDateParse, rtDateFirstDay, rtDateWeekdays, rtDateNow, rtDateCanPage, rtDateGridKey, rtDateLayout } from '@rt-tools/ui-kit-v2/date-picker';
+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';
+
+/** Быстрый вариант диапазона в панели поля. */
+var ERtDateRangePreset;
+(function (ERtDateRangePreset) {
+    ERtDateRangePreset["Today"] = "today";
+    ERtDateRangePreset["Yesterday"] = "yesterday";
+    ERtDateRangePreset["Last7"] = "last-7";
+    ERtDateRangePreset["Last30"] = "last-30";
+    ERtDateRangePreset["ThisMonth"] = "this-month";
+    ERtDateRangePreset["LastMonth"] = "last-month";
+})(ERtDateRangePreset || (ERtDateRangePreset = {}));
+
+/**
+ * Чистая логика поля диапазона дат: порядок двух дней, состояния дней месяца, быстрые варианты,
+ * итог и текст поля. Сегодняшний день приходит параметром — компонент читает часы сам.
+ *
+ * Дни — строки `YYYY-MM-DD`: строки одной формы сравниваются как текст в порядке дат.
+ */
+const DAY_LENGTH_MS = 86_400_000;
+const DAY_LEN = 10;
+const MONTH_LEN$1 = 7;
+const YEAR_LEN = 4;
+const LAST_WEEK_DAYS = 7;
+const LAST_MONTH_DAYS = 30;
+/** Знак между датами в тексте поля. */
+const DASH = ' — ';
+/** Тире между датами набранного текста: длинное или короткое, дефис — только между пробелами. */
+const DASH_RE = /[—–]|\s-\s/;
+function dayToMs(day) {
+    const [y, m, d] = day.split('-').map(Number);
+    return Date.UTC(y, m - 1, d);
+}
+function msToDay(ms) {
+    return new Date(ms).toISOString().slice(0, DAY_LEN);
+}
+function addDays(day, delta) {
+    return msToDay(dayToMs(day) + delta * DAY_LENGTH_MS);
+}
+function lastDayOf(month) {
+    return addDays(`${rtDateAddMonths(month, 1)}-01`, -1);
+}
+function dayState(day, low, high) {
+    if (high === null || low === high) {
+        return day === low ? ERtCalendarDayState.Chosen : ERtCalendarDayState.Free;
+    }
+    if (day === low) {
+        return ERtCalendarDayState.Start;
+    }
+    if (day === high) {
+        return ERtCalendarDayState.End;
+    }
+    const ms = dayToMs(day);
+    return low !== null && ms > dayToMs(low) && ms < dayToMs(high) ? ERtCalendarDayState.InRange : ERtCalendarDayState.Free;
+}
+/** Два дня по порядку: второй раньше первого — они меняются местами. */
+function rtRangeOrder(a, b) {
+    return dayToMs(a) <= dayToMs(b) ? { start: a, end: b } : { start: b, end: a };
+}
+/** Значение поля из того, что пришло из формы; не пара дней по порядку — `null`. */
+function rtRangeRead(value) {
+    if (typeof value !== 'object' || value === null) {
+        return null;
+    }
+    const start = Reflect.get(value, 'start');
+    const end = Reflect.get(value, 'end');
+    if (typeof start !== 'string' || typeof end !== 'string') {
+        return null;
+    }
+    const ok = rtDateRead(start, 'date') !== null && rtDateRead(end, 'date') !== null && dayToMs(start) <= dayToMs(end);
+    return ok ? { start, end } : null;
+}
+/** Диапазон лежит в границах целиком. */
+function rtRangeInBounds(range, min, max) {
+    return rtDateInBounds(range.start, min, max) && rtDateInBounds(range.end, min, max);
+}
+/**
+ * Месяц `YYYY-MM` для календаря: дни черновика — начало, конец и дни между ними. Пока выбрано только
+ * начало, будущий диапазон тянется до дня под указателем, и этот день светлый, как дни между краями:
+ * залит только выбранный край.
+ */
+function rtRangeMonth(month, ctx) {
+    const base = rtDateMonth(month, { locale: ctx.locale, today: ctx.today, chosen: null, min: ctx.min, max: ctx.max });
+    const other = ctx.end ?? ctx.hover;
+    const range = ctx.start === null || other === null ? null : rtRangeOrder(ctx.start, other);
+    const low = range?.start ?? ctx.start;
+    const high = range?.end ?? null;
+    const preview = ctx.end === null && ctx.hover !== ctx.start ? ctx.hover : null;
+    return {
+        ...base,
+        days: base.days.map((day) => {
+            const state = dayState(day.key, low, high);
+            return { ...day, state: day.key === preview ? ERtCalendarDayState.InRange : state };
+        }),
+    };
+}
+/** Диапазоны быстрых вариантов от сегодняшнего дня. */
+function rtRangePresets(today) {
+    const month = today.slice(0, MONTH_LEN$1);
+    const lastMonth = rtDateAddMonths(month, -1);
+    const yesterday = addDays(today, -1);
+    return {
+        [ERtDateRangePreset.Today]: { start: today, end: today },
+        [ERtDateRangePreset.Yesterday]: { start: yesterday, end: yesterday },
+        [ERtDateRangePreset.Last7]: { start: addDays(today, 1 - LAST_WEEK_DAYS), end: today },
+        [ERtDateRangePreset.Last30]: { start: addDays(today, 1 - LAST_MONTH_DAYS), end: today },
+        [ERtDateRangePreset.ThisMonth]: { start: `${month}-01`, end: today },
+        [ERtDateRangePreset.LastMonth]: { start: `${lastMonth}-01`, end: lastDayOf(lastMonth) },
+    };
+}
+/** Быстрые варианты в порядке панели; вариант, не лежащий в границах целиком, выключен. */
+function rtRangePresetCells(today, min, max) {
+    const ranges = rtRangePresets(today);
+    return Object.values(ERtDateRangePreset).map((preset) => ({
+        preset,
+        range: ranges[preset],
+        disabled: !rtRangeInBounds(ranges[preset], min, max),
+    }));
+}
+/** Вариант, чей диапазон совпадает с черновиком; иначе `null`. */
+function rtRangePresetOf(range, today) {
+    if (range === null) {
+        return null;
+    }
+    const ranges = rtRangePresets(today);
+    const found = Object.values(ERtDateRangePreset).find((preset) => ranges[preset].start === range.start && ranges[preset].end === range.end);
+    return found ?? null;
+}
+/** Число дней диапазона, оба края включены. */
+function rtRangeDays(range) {
+    return Math.round((dayToMs(range.end) - dayToMs(range.start)) / DAY_LENGTH_MS) + 1;
+}
+/** Форма числа по правилам локали; `zero` и `two` идут подписью `other`. */
+function rtRangePlural(count, locale) {
+    const form = new Intl.PluralRules(locale).select(count);
+    return form === 'one' || form === 'few' || form === 'many' ? form : 'other';
+}
+/** Даты итога по локали: `12–15 октября`; год пишется, когда края в разных годах. */
+function rtRangeDates(range, locale) {
+    const sameYear = range.start.slice(0, YEAR_LEN) === range.end.slice(0, YEAR_LEN);
+    const options = sameYear
+        ? { day: 'numeric', month: 'long', timeZone: 'UTC' }
+        : { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' };
+    return new Intl.DateTimeFormat(locale, options).formatRange(dayToMs(range.start), dayToMs(range.end));
+}
+/** Текст поля: две даты в порядке локали через тире; пусто — пустой текст. */
+function rtRangeText(value, layout) {
+    return value === null ? '' : `${rtDateText(value.start, 'date', layout)}${DASH}${rtDateText(value.end, 'date', layout)}`;
+}
+/** Подсказка формы текста буквами кита: `дд.мм.гггг — дд.мм.гггг`. */
+function rtRangeShape(layout, letters) {
+    const day = rtDateShape('date', layout, letters);
+    return `${day}${DASH}${day}`;
+}
+/**
+ * Читает набранный текст в диапазон; `null` — текст не две даты. Даты читаются в порядке локали,
+ * форма значения тоже; даты в обратном порядке ставятся по порядку.
+ */
+function rtRangeParse(text, layout) {
+    const parts = text.trim().split(DASH_RE);
+    if (parts.length !== 2) {
+        return null;
+    }
+    const start = rtDateParse(parts[0].trim(), 'date', layout);
+    const end = rtDateParse(parts[1].trim(), 'date', layout);
+    return start === null || end === null ? null : rtRangeOrder(start, end);
+}
+
+const BEM_BLOCK$1 = 'rt-date-range-panel';
+const MONTH_LEN = 7;
+/** Подпись каждого быстрого варианта в наборе кита. */
+const PRESET_LABELS = {
+    [ERtDateRangePreset.Today]: 'uiToday',
+    [ERtDateRangePreset.Yesterday]: 'uiYesterday',
+    [ERtDateRangePreset.Last7]: 'uiLast7Days',
+    [ERtDateRangePreset.Last30]: 'uiLast30Days',
+    [ERtDateRangePreset.ThisMonth]: 'uiThisMonth',
+    [ERtDateRangePreset.LastMonth]: 'uiLastMonth',
+};
+/** Подпись числа дней для каждой формы множественного числа. */
+const DAY_LABELS = {
+    one: 'uiDaysOne',
+    few: 'uiDaysFew',
+    many: 'uiDaysMany',
+    other: 'uiDaysOther',
+};
+/**
+ * Панель rt-date-range: быстрые варианты, два месяца рядом (в шторке — один) и подвал с итогом,
+ * «Сбросить» и «Применить».
+ *
+ * Панель не пишет в форму: готовый диапазон уходит событием `picked`, просьба закрыться — `closed`.
+ * Черновик живёт, пока панель открыта; поле создаёт её заново на каждое открытие. Вся арифметика
+ * диапазона — в `rt-date-range.logic`.
+ */
+class RtDateRangePanelComponent {
+    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.today = computed(() => rtDateNow(this.now() ?? this.#openedAt, 1).day, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        this.start = linkedSignal(() => this.value()?.start ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []));
+        this.end = linkedSignal(() => this.value()?.end ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []));
+        /** День под указателем: пока выбрано только начало, до него рисуется будущий диапазон. */
+        this.hover = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
+        this.activeKey = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+        this.shownMonth = linkedSignal(() => (this.value()?.start ?? this.today()).slice(0, MONTH_LEN), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shownMonth" }] : /* istanbul ignore next */ []));
+        /** Готовый черновик: оба края выбраны. */
+        this.draft = computed(() => {
+            const start = this.start();
+            const end = this.end();
+            return start === null || end === null ? null : { start, end };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        this.months = computed(() => {
+            const ctx = {
+                locale: this.#locale(),
+                today: this.today(),
+                start: this.start(),
+                end: this.end(),
+                hover: this.hover(),
+                min: this.min(),
+                max: this.max(),
+            };
+            return this.#shown().map((month) => rtRangeMonth(month, ctx));
+        }, /* @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.#lastShown(), 1, this.min(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
+        this.presets = computed(() => {
+            const labels = this.t();
+            const chosen = rtRangePresetOf(this.draft(), this.today());
+            return rtRangePresetCells(this.today(), this.min(), this.max()).map((cell) => ({
+                cell,
+                label: labels[PRESET_LABELS[cell.preset]],
+                chosen: cell.preset === chosen,
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+        /** Число дней черновика подписью кита по форме множественного числа локали. */
+        this.daysText = rtKitLabel(computed(() => {
+            const draft = this.draft();
+            return draft === null ? '' : DAY_LABELS[rtRangePlural(rtRangeDays(draft), this.#locale())];
+        }), computed(() => {
+            const draft = this.draft();
+            return { count: draft === null ? 0 : rtRangeDays(draft) };
+        }));
+        /** Итог подвала: даты и число дней, в шторке — только число; с одним началом — просьба о конце. */
+        this.summary = computed(() => {
+            const draft = this.draft();
+            if (draft === null) {
+                return this.start() === null ? this.t().uiPickStartDate : this.t().uiPickEndDate;
+            }
+            return this.sheet() ? this.daysText() : `${rtRangeDates(draft, this.#locale())} · ${this.daysText()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+        /** Значение поля: с него начинается черновик. */
+        this.value = input(null, /* @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.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();
+    }
+    /** Локаль кита: названия месяцев, дней недели, даты итога и форма числа дней идут по ней. */
+    #locale;
+    /** Минута открытия панели: от неё считается «сегодня», когда вход `now` не задан. */
+    #openedAt;
+    #firstDay;
+    /** Первый выбор — начало, второй — конец; выбор после готового диапазона начинает новый. */
+    pickDay(day) {
+        this.activeKey.set(day.key);
+        const start = this.start();
+        if (start === null || this.end() !== null) {
+            this.start.set(day.key);
+            this.end.set(null);
+            return;
+        }
+        const range = rtRangeOrder(start, day.key);
+        this.start.set(range.start);
+        this.end.set(range.end);
+        this.hover.set(null);
+    }
+    onHover(day) {
+        this.hover.set(day?.key ?? null);
+    }
+    pickPreset(cell) {
+        if (cell.disabled) {
+            return;
+        }
+        this.start.set(cell.range.start);
+        this.end.set(cell.range.end);
+        this.hover.set(null);
+        this.shownMonth.set(cell.range.start.slice(0, MONTH_LEN));
+    }
+    /** Клавиша сетки: фокус переходит на день, и месяцы листаются, если он ушёл за показанные. */
+    onGridKey(event) {
+        const next = rtDateGridKey(event.key, event.day.key, this.#firstDay(), this.min(), this.max());
+        if (next === null) {
+            return;
+        }
+        const month = next.slice(0, MONTH_LEN);
+        if (!this.#shown().includes(month)) {
+            const before = Number(month.replace('-', '')) < Number(this.shownMonth().replace('-', ''));
+            this.shownMonth.set(before ? month : rtDateAddMonths(month, 1 - this.#shown().length));
+        }
+        this.activeKey.set(next);
+        this.hover.set(next);
+    }
+    page(delta) {
+        this.shownMonth.set(rtDateAddMonths(this.shownMonth(), delta));
+    }
+    reset() {
+        this.start.set(null);
+        this.end.set(null);
+        this.hover.set(null);
+    }
+    /** «Применить»: готовый черновик уходит значением, панель закрывается. */
+    apply() {
+        const draft = this.draft();
+        if (draft !== null) {
+            this.picked.emit(draft);
+            this.closed.emit();
+        }
+    }
+    /** Показанные месяцы `YYYY-MM`: два рядом, в шторке — один. */
+    #shown() {
+        const first = this.shownMonth();
+        return this.sheet() ? [first] : [first, rtDateAddMonths(first, 1)];
+    }
+    #lastShown() {
+        const shown = this.#shown();
+        return shown[shown.length - 1];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDateRangePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDateRangePanelComponent, isStandalone: true, selector: "rt-date-range-panel", 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 }, 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-range-panel--sheet": "sheet()" }, classAttribute: "rt-date-range-panel" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-date-range-panel\">\n    @if (sheet()) {\n        <p rtElem=\"title\" qa-dataid=\"date-range-title\">{{ t().uiPeriod }}</p>\n    }\n\n    <div rtElem=\"body\">\n        <div rtElem=\"presets\" qa-dataid=\"date-range-presets\" role=\"group\" [attr.aria-label]=\"t().uiQuickRanges\">\n            @for (item of presets(); track item.cell.preset) {\n                <button\n                    rtButton\n                    rtElem=\"preset\"\n                    qa-dataid=\"date-range-preset\"\n                    type=\"button\"\n                    size=\"sm\"\n                    [theme]=\"item.chosen ? 'primary' : 'secondary'\"\n                    [appearance]=\"sheet() ? 'outlined' : 'text'\"\n                    [attr.data-preset]=\"item.cell.preset\"\n                    [label]=\"item.label\"\n                    [attr.aria-label]=\"item.label\"\n                    [pressed]=\"item.chosen\"\n                    [disabled]=\"item.cell.disabled\"\n                    (click)=\"pickPreset(item.cell)\"></button>\n            }\n        </div>\n\n        <rt-calendar\n            rtElem=\"calendar\"\n            qa-dataid=\"date-range-calendar\"\n            grid\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            (dayHover)=\"onHover($event)\"\n            (gridKey)=\"onGridKey($event)\" />\n    </div>\n\n    <div rtElem=\"footer\">\n        <span rtElem=\"summary\" qa-dataid=\"date-range-summary\" aria-live=\"polite\">{{ summary() }}</span>\n        <button\n            rtButton\n            qa-dataid=\"date-range-reset\"\n            theme=\"primary\"\n            appearance=\"text\"\n            size=\"sm\"\n            type=\"button\"\n            [label]=\"t().uiReset\"\n            [attr.aria-label]=\"t().uiReset\"\n            (click)=\"reset()\"></button>\n        <button\n            rtButton\n            qa-dataid=\"date-range-apply\"\n            size=\"sm\"\n            type=\"button\"\n            [label]=\"t().uiApply\"\n            [attr.aria-label]=\"t().uiApply\"\n            [disabled]=\"draft() === null\"\n            (click)=\"apply()\"></button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-range-panel{--rt-date-range-panel-sheet-day-size: calc(var(--rt-size-10) + var(--rt-size-1));--rt-date-range-panel-divider-width: var(--rt-border-width-thin);display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-4)}.rt-date-range-panel__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-lg);font-weight:var(--rt-font-weight-semibold);text-align:center}.rt-date-range-panel__body{display:flex;align-items:flex-start;gap:var(--rt-space-4)}.rt-date-range-panel__presets{display:flex;flex:0 0 auto;flex-direction:column;align-self:stretch;padding-right:var(--rt-space-4);border-right:var(--rt-date-range-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-1)}.rt-date-range-panel__preset{justify-content:flex-start;white-space:nowrap}.rt-date-range-panel .rt-date-range-panel__calendar{--rt-calendar-day-justify: center;--rt-calendar-column-gap: 0;--rt-calendar-range-inner-radius: 0;flex:1 1 auto;min-inline-size:calc(var(--rt-size-10) * 14 + var(--rt-space-6))}.rt-date-range-panel__footer{display:flex;align-items:center;padding-top:var(--rt-space-2);border-top:var(--rt-date-range-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-2)}.rt-date-range-panel__summary{flex:1 1 auto;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-date-range-panel--sheet{padding-inline:0}.rt-date-range-panel--sheet .rt-date-range-panel__body{flex-direction:column;align-items:stretch}.rt-date-range-panel--sheet .rt-date-range-panel__presets{flex-direction:row;padding-right:0;padding-bottom:var(--rt-space-1);border-right:none;gap:var(--rt-space-2);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.rt-date-range-panel--sheet .rt-date-range-panel__preset{flex:0 0 auto}.rt-date-range-panel--sheet .rt-date-range-panel__calendar{--rt-calendar-month-count: 1;--rt-calendar-day-size: var(--rt-date-range-panel-sheet-day-size);min-inline-size: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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDateRangePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-date-range-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // rt-tools
+                        BlockDirective,
+                        ElemDirective,
+                        // components
+                        RtButtonDirective,
+                        RtCalendarComponent,
+                    ], host: {
+                        class: BEM_BLOCK$1,
+                        '[class.rt-date-range-panel--sheet]': 'sheet()',
+                        '(keydown.escape)': 'closed.emit()',
+                    }, template: "<ng-container rtBlock=\"rt-date-range-panel\">\n    @if (sheet()) {\n        <p rtElem=\"title\" qa-dataid=\"date-range-title\">{{ t().uiPeriod }}</p>\n    }\n\n    <div rtElem=\"body\">\n        <div rtElem=\"presets\" qa-dataid=\"date-range-presets\" role=\"group\" [attr.aria-label]=\"t().uiQuickRanges\">\n            @for (item of presets(); track item.cell.preset) {\n                <button\n                    rtButton\n                    rtElem=\"preset\"\n                    qa-dataid=\"date-range-preset\"\n                    type=\"button\"\n                    size=\"sm\"\n                    [theme]=\"item.chosen ? 'primary' : 'secondary'\"\n                    [appearance]=\"sheet() ? 'outlined' : 'text'\"\n                    [attr.data-preset]=\"item.cell.preset\"\n                    [label]=\"item.label\"\n                    [attr.aria-label]=\"item.label\"\n                    [pressed]=\"item.chosen\"\n                    [disabled]=\"item.cell.disabled\"\n                    (click)=\"pickPreset(item.cell)\"></button>\n            }\n        </div>\n\n        <rt-calendar\n            rtElem=\"calendar\"\n            qa-dataid=\"date-range-calendar\"\n            grid\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            (dayHover)=\"onHover($event)\"\n            (gridKey)=\"onGridKey($event)\" />\n    </div>\n\n    <div rtElem=\"footer\">\n        <span rtElem=\"summary\" qa-dataid=\"date-range-summary\" aria-live=\"polite\">{{ summary() }}</span>\n        <button\n            rtButton\n            qa-dataid=\"date-range-reset\"\n            theme=\"primary\"\n            appearance=\"text\"\n            size=\"sm\"\n            type=\"button\"\n            [label]=\"t().uiReset\"\n            [attr.aria-label]=\"t().uiReset\"\n            (click)=\"reset()\"></button>\n        <button\n            rtButton\n            qa-dataid=\"date-range-apply\"\n            size=\"sm\"\n            type=\"button\"\n            [label]=\"t().uiApply\"\n            [attr.aria-label]=\"t().uiApply\"\n            [disabled]=\"draft() === null\"\n            (click)=\"apply()\"></button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-date-range-panel{--rt-date-range-panel-sheet-day-size: calc(var(--rt-size-10) + var(--rt-size-1));--rt-date-range-panel-divider-width: var(--rt-border-width-thin);display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-4)}.rt-date-range-panel__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-lg);font-weight:var(--rt-font-weight-semibold);text-align:center}.rt-date-range-panel__body{display:flex;align-items:flex-start;gap:var(--rt-space-4)}.rt-date-range-panel__presets{display:flex;flex:0 0 auto;flex-direction:column;align-self:stretch;padding-right:var(--rt-space-4);border-right:var(--rt-date-range-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-1)}.rt-date-range-panel__preset{justify-content:flex-start;white-space:nowrap}.rt-date-range-panel .rt-date-range-panel__calendar{--rt-calendar-day-justify: center;--rt-calendar-column-gap: 0;--rt-calendar-range-inner-radius: 0;flex:1 1 auto;min-inline-size:calc(var(--rt-size-10) * 14 + var(--rt-space-6))}.rt-date-range-panel__footer{display:flex;align-items:center;padding-top:var(--rt-space-2);border-top:var(--rt-date-range-panel-divider-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-2)}.rt-date-range-panel__summary{flex:1 1 auto;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-date-range-panel--sheet{padding-inline:0}.rt-date-range-panel--sheet .rt-date-range-panel__body{flex-direction:column;align-items:stretch}.rt-date-range-panel--sheet .rt-date-range-panel__presets{flex-direction:row;padding-right:0;padding-bottom:var(--rt-space-1);border-right:none;gap:var(--rt-space-2);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.rt-date-range-panel--sheet .rt-date-range-panel__preset{flex:0 0 auto}.rt-date-range-panel--sheet .rt-date-range-panel__calendar{--rt-calendar-month-count: 1;--rt-calendar-day-size: var(--rt-date-range-panel-sheet-day-size);min-inline-size:0}}\n"] }]
+        }], propDecorators: { 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 }] }], 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"] }] } });
+
+const BEM_BLOCK = 'rt-date-range';
+/**
+ * Поле диапазона дат со своей панелью кита, визуально и по токенам идентичное rt-input (host — box
+ * `--rt-input-*`, input — прозрачный `__field`). Кнопка в конце поля открывает
+ * `rt-date-range-panel`: на широком экране в поповере, на узком — в нижней шторке. CVA через общий
+ * `RtFormControlBase`: clearable, авто-подсветка invalid, read-only представление.
+ *
+ * `value` — пара дней `{ start, end }` в форме `YYYY-MM-DD` или `null`. Текст в поле — две даты в
+ * порядке языка интерфейса через тире (`12.10.2026 — 15.10.2026` под `ru`); набирается так же.
+ * Нечитаемый или лежащий за границами текст оставляет значение прежним и помечает поле ошибкой.
+ */
+class RtDateRangeComponent 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 rtRangeShape(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 */ []));
+        /** Значение, прочитанное из формы: не пара дней по порядку поле показывает пустой. */
+        this.range = computed(() => rtRangeRead(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+        this.text = computed(() => rtRangeText(this.range(), this.#layout()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.range() !== null, /* @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.range()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        /** Первый допустимый день `YYYY-MM-DD`. */
+        this.min = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /** Последний допустимый день `YYYY-MM-DD`. */
+        this.max = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    }
+    /** Локаль кита: приложение, меняющее язык на ходу, меняет её, и текст поля пересчитывается. */
+    #locale;
+    /** Порядок дня, месяца и года в тексте поля — по локали кита. */
+    #layout;
+    /** Значение из формы снимает ошибку набора: в поле теперь стоит оно. */
+    writeValue(value) {
+        super.writeValue(value);
+        this.textInvalid.set(false);
+    }
+    getEmptyValue() {
+        return null;
+    }
+    focusAfterClear() {
+        this.fieldEl()?.nativeElement.focus();
+    }
+    clearValue() {
+        super.clearValue();
+        this.#accept(null);
+    }
+    /** Набор текста: значение меняется, только когда текст читается как диапазон в границах. */
+    onTyped(event) {
+        const text = event.target.value;
+        if (text.trim() === '') {
+            this.#commit(null);
+            return;
+        }
+        const read = rtRangeParse(text, this.#layout());
+        if (read === null || !rtRangeInBounds(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 = rtRangeText(value, this.#layout());
+        }
+    }
+    /** Плоский текст для режима чтения: диапазон по локали, `15 – 20 мар. 2026 г.` под `ru`. */
+    #format(range) {
+        if (range === null) {
+            return '';
+        }
+        return new Intl.DateTimeFormat(this.#locale(), { dateStyle: 'medium', timeZone: 'UTC' }).formatRange(Date.parse(range.start), Date.parse(range.end));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDateRangeComponent, isStandalone: true, selector: "rt-date-range", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", 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 } }, host: { properties: { "class.rt-date-range--disabled": "isDisabled()", "class.rt-date-range--invalid": "isInvalid() || textInvalid()", "class.rt-date-range--readonly": "isReadonly()", "class.rt-date-range--borderless": "!bordered()", "class.rt-date-range--appearance--fill": "appearance() === 'fill'", "class.rt-date-range--size--sm": "size() === 'sm'", "class.rt-date-range--size--lg": "size() === 'lg'" }, classAttribute: "rt-date-range" }, providers: [
+            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+            { provide: RtFormControlBase, useExisting: forwardRef(() => RtDateRangeComponent) },
+        ], 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-range\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"date-range-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"date-range-control\"\n            type=\"text\"\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-range-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-range-open\"\n            icon=\"ico-calendar\"\n            size=\"sm\"\n            variant=\"ghost\"\n            iconColor=\"muted\"\n            rtPopoverAlign=\"end\"\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-range-popup\">\n                <rt-date-range-panel [value]=\"range()\" [min]=\"min()\" [max]=\"max()\" (picked)=\"onPicked($event)\" (closed)=\"closePanel()\" />\n            </div>\n        </ng-template>\n\n        @if (narrow()) {\n            <rt-bottom-sheet qa-dataid=\"date-range-sheet\" [open]=\"sheetOpen()\" (openChange)=\"sheetOpen.set($event)\">\n                @if (sheetOpen()) {\n                    <rt-date-range-panel\n                        sheet\n                        [value]=\"range()\"\n                        [min]=\"min()\"\n                        [max]=\"max()\"\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-range{--rt-date-range-radius: var(--rt-input-radius);--rt-date-range-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-range-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-range: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-range--borderless{border-color:transparent}.rt-date-range--appearance--fill{border-color:transparent;border-radius:var(--rt-date-range-fill-radius) var(--rt-date-range-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-date-range--invalid{border-color:var(--rt-input-color-border-error)}.rt-date-range--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-date-range--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-date-range--size--sm{min-height:var(--rt-input-height-sm)}.rt-date-range--size--lg{min-height:var(--rt-input-height-lg)}.rt-date-range--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-date-range__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-date-range__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-date-range__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-range__field:disabled{cursor:not-allowed}.rt-date-range__clear,.rt-date-range__open{flex-shrink:0}.rt-date-range__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-range[data-rt-radius=none]{--rt-date-range-radius: var(--rt-radius-none)}.rt-date-range[data-rt-radius=xs]{--rt-date-range-radius: var(--rt-radius-xs)}.rt-date-range[data-rt-radius=sm]{--rt-date-range-radius: var(--rt-radius-sm)}.rt-date-range[data-rt-radius=ms]{--rt-date-range-radius: var(--rt-radius-ms)}.rt-date-range[data-rt-radius=md]{--rt-date-range-radius: var(--rt-radius-md)}.rt-date-range[data-rt-radius=lg]{--rt-date-range-radius: var(--rt-radius-lg)}.rt-date-range[data-rt-radius=xl]{--rt-date-range-radius: var(--rt-radius-xl)}.rt-date-range[data-rt-radius=\"2xl\"]{--rt-date-range-radius: var(--rt-radius-2xl)}.rt-date-range[data-rt-radius=full]{--rt-date-range-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: RtDateRangePanelComponent, selector: "rt-date-range-panel", inputs: ["value", "min", "max", "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: RtDateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtBottomSheetComponent,
+                        RtDateRangePanelComponent,
+                        RtIconButtonComponent,
+                        RtPopoverDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], providers: [
+                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtDateRangeComponent) },
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-date-range--disabled]': 'isDisabled()',
+                        '[class.rt-date-range--invalid]': 'isInvalid() || textInvalid()',
+                        '[class.rt-date-range--readonly]': 'isReadonly()',
+                        '[class.rt-date-range--borderless]': '!bordered()',
+                        '[class.rt-date-range--appearance--fill]': "appearance() === 'fill'",
+                        '[class.rt-date-range--size--sm]': "size() === 'sm'",
+                        '[class.rt-date-range--size--lg]': "size() === 'lg'",
+                    }, template: "<ng-container rtBlock=\"rt-date-range\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"date-range-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"date-range-control\"\n            type=\"text\"\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-range-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-range-open\"\n            icon=\"ico-calendar\"\n            size=\"sm\"\n            variant=\"ghost\"\n            iconColor=\"muted\"\n            rtPopoverAlign=\"end\"\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-range-popup\">\n                <rt-date-range-panel [value]=\"range()\" [min]=\"min()\" [max]=\"max()\" (picked)=\"onPicked($event)\" (closed)=\"closePanel()\" />\n            </div>\n        </ng-template>\n\n        @if (narrow()) {\n            <rt-bottom-sheet qa-dataid=\"date-range-sheet\" [open]=\"sheetOpen()\" (openChange)=\"sheetOpen.set($event)\">\n                @if (sheetOpen()) {\n                    <rt-date-range-panel\n                        sheet\n                        [value]=\"range()\"\n                        [min]=\"min()\"\n                        [max]=\"max()\"\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-range{--rt-date-range-radius: var(--rt-input-radius);--rt-date-range-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-range-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-range: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-range--borderless{border-color:transparent}.rt-date-range--appearance--fill{border-color:transparent;border-radius:var(--rt-date-range-fill-radius) var(--rt-date-range-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-date-range--invalid{border-color:var(--rt-input-color-border-error)}.rt-date-range--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-date-range--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-date-range--size--sm{min-height:var(--rt-input-height-sm)}.rt-date-range--size--lg{min-height:var(--rt-input-height-lg)}.rt-date-range--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-date-range__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-date-range__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-date-range__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-range__field:disabled{cursor:not-allowed}.rt-date-range__clear,.rt-date-range__open{flex-shrink:0}.rt-date-range__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-range[data-rt-radius=none]{--rt-date-range-radius: var(--rt-radius-none)}.rt-date-range[data-rt-radius=xs]{--rt-date-range-radius: var(--rt-radius-xs)}.rt-date-range[data-rt-radius=sm]{--rt-date-range-radius: var(--rt-radius-sm)}.rt-date-range[data-rt-radius=ms]{--rt-date-range-radius: var(--rt-radius-ms)}.rt-date-range[data-rt-radius=md]{--rt-date-range-radius: var(--rt-radius-md)}.rt-date-range[data-rt-radius=lg]{--rt-date-range-radius: var(--rt-radius-lg)}.rt-date-range[data-rt-radius=xl]{--rt-date-range-radius: var(--rt-radius-xl)}.rt-date-range[data-rt-radius=\"2xl\"]{--rt-date-range-radius: var(--rt-radius-2xl)}.rt-date-range[data-rt-radius=full]{--rt-date-range-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 }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ERtDateRangePreset, RtDateRangeComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-date-range.mjs.map