@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-calendar.mjs

@@ -1,152 +1,433 @@
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { signal, viewChildren, computed, input, booleanAttribute, output, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BlockDirective, ElemDirective } from '@rt-tools/core';
-import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-import { RtSkeletonComponent } from '@rt-tools/ui-kit-v2/skeleton';
-
-/**
- * Контракты `rt-calendar` — презентационный месячный грид с range-выбором.
- *
- * Компонент домен-агностичен: состояния/цены/доступность дней вычисляет
- * consumer и передаёт готовые view-модели месяцев. Клики по дням и навигация
- * по месяцам эмитятся наружу; никакой доменной логики внутри нет.
- */
-/** Состояние ячейки дня — модификатор `data-state` на кнопке дня. */
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, input, output, signal, viewChildren } from "@angular/core";
+import { BlockDirective, ElemDirective } from "@rt-tools/core";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+import { RtSkeletonComponent } from "@rt-tools/ui-kit-v2/skeleton";
 var ERtCalendarDayState;
-(function (ERtCalendarDayState) {
-    ERtCalendarDayState["Free"] = "free";
-    ERtCalendarDayState["Busy"] = "busy";
-    ERtCalendarDayState["Past"] = "past";
-    ERtCalendarDayState["Blocked"] = "blocked";
-    ERtCalendarDayState["Start"] = "start";
-    ERtCalendarDayState["End"] = "end";
-    ERtCalendarDayState["InRange"] = "in-range";
-    /** Выбранный день одиночного выбора — залит. */
-    ERtCalendarDayState["Chosen"] = "chosen";
+(function(ERtCalendarDayState) {
+	ERtCalendarDayState["Free"] = "free";
+	ERtCalendarDayState["Busy"] = "busy";
+	ERtCalendarDayState["Past"] = "past";
+	ERtCalendarDayState["Blocked"] = "blocked";
+	ERtCalendarDayState["Start"] = "start";
+	ERtCalendarDayState["End"] = "end";
+	ERtCalendarDayState["InRange"] = "in-range";
+	ERtCalendarDayState["Chosen"] = "chosen";
 })(ERtCalendarDayState || (ERtCalendarDayState = {}));
-
-const BEM_BLOCK = 'rt-calendar';
-/** Клавиши, что календарь в режиме сетки отдаёт наружу вместо прокрутки страницы. */
-const GRID_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End']);
-class RtCalendarComponent {
-    /** Фокус двигала клавиша: только тогда календарь переводит фокус на `activeKey`. */
-    #keyed;
-    constructor() {
-        /** Фокус двигала клавиша: только тогда календарь переводит фокус на `activeKey`. */
-        this.#keyed = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#keyed" }] : /* istanbul ignore next */ []));
-        this.sublabelSkeletonHeight = '12px';
-        this.chosenState = ERtCalendarDayState.Chosen;
-        this.dayButtons = viewChildren('dayButton', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dayButtons" }] : /* istanbul ignore next */ []));
-        /**
-         * День, что стоит в порядке обхода Tab в режиме сетки: `activeKey`, иначе выбранный, иначе
-         * сегодняшний, иначе первый доступный. Вне режима сетки — `null`, и каждый день обходится Tab.
-         */
-        this.rovingKey = computed(() => {
-            if (!this.grid()) {
-                return null;
-            }
-            const days = this.months().flatMap((month) => [...month.days]);
-            const active = this.activeKey();
-            const pick = days.find((day) => day.key === active) ??
-                days.find((day) => day.state === ERtCalendarDayState.Chosen) ??
-                days.find((day) => day.today === true) ??
-                days.find((day) => !day.disabled);
-            return pick?.key ?? null;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rovingKey" }] : /* istanbul ignore next */ []));
-        this.months = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
-        this.weekdayLabels = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
-        this.canPrev = input(false, { ...(ngDevMode ? { debugName: "canPrev" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.canNext = input(false, { ...(ngDevMode ? { debugName: "canNext" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Локализованные aria-подписи кнопок навигации — задаёт consumer. */
-        this.prevAriaLabel = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "prevAriaLabel" }] : /* istanbul ignore next */ []));
-        this.nextAriaLabel = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
-        this.sublabelsLoading = input(false, { ...(ngDevMode ? { debugName: "sublabelsLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Режим сетки: один день в обходе Tab, клавиши стрелок, PageUp/PageDown, Home и End уходят
-         * наружу событием `gridKey`, а фокус встаёт на `activeKey`. Выключен — поведение прежнее.
-         */
-        this.grid = input(false, { ...(ngDevMode ? { debugName: "grid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** День с фокусом в режиме сетки, ключ `YYYY-MM-DD`; его ставит consumer по `gridKey`. */
-        this.activeKey = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
-        /** Заголовок месяца — кнопка, что шлёт `titleClick`: так consumer открывает выбор месяца. */
-        this.titleAction = input(false, { ...(ngDevMode ? { debugName: "titleAction" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Заголовок первого месяца стоит в шапке между стрелками, а не над сеткой. */
-        this.headerTitle = input(false, { ...(ngDevMode ? { debugName: "headerTitle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.prevMonth = output();
-        this.nextMonth = output();
-        this.dayClick = output();
-        /** Клавиша сетки на дне: куда перевести фокус, решает consumer. */
-        this.gridKey = output();
-        this.titleClick = output();
-        /** День под указателем или с фокусом; `null` — указатель ушёл с месяцев. По нему рисуется будущий диапазон. */
-        this.dayHover = output();
-        afterRenderEffect(() => {
-            const key = this.rovingKey();
-            if (!this.#keyed() || key === null) {
-                return;
-            }
-            this.dayButtons()
-                .find((button) => button.nativeElement.dataset['iso'] === key)
-                ?.nativeElement.focus();
-        });
-    }
-    onDayKey(event, day) {
-        if (!this.grid() || !GRID_KEYS.has(event.key)) {
-            return;
-        }
-        event.preventDefault();
-        this.#keyed.set(true);
-        this.gridKey.emit({ key: event.key, day });
-    }
-    onDayHover(day) {
-        if (!day.disabled) {
-            this.dayHover.emit(day);
-        }
-    }
-    onDayClick(day) {
-        if (!day.disabled) {
-            this.dayClick.emit(day);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtCalendarComponent, isStandalone: true, selector: "rt-calendar", inputs: { months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: true, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: true, transformFunction: null }, canPrev: { classPropertyName: "canPrev", publicName: "canPrev", isSignal: true, isRequired: false, transformFunction: null }, canNext: { classPropertyName: "canNext", publicName: "canNext", isSignal: true, isRequired: false, transformFunction: null }, prevAriaLabel: { classPropertyName: "prevAriaLabel", publicName: "prevAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextAriaLabel: { classPropertyName: "nextAriaLabel", publicName: "nextAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sublabelsLoading: { classPropertyName: "sublabelsLoading", publicName: "sublabelsLoading", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, titleAction: { classPropertyName: "titleAction", publicName: "titleAction", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevMonth: "prevMonth", nextMonth: "nextMonth", dayClick: "dayClick", gridKey: "gridKey", titleClick: "titleClick", dayHover: "dayHover" }, host: { classAttribute: "rt-calendar" }, viewQueries: [{ propertyName: "dayButtons", predicate: ["dayButton"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-calendar\">\n    <div rtElem=\"header\">\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-prev-month\"\n            icon=\"chevron-left\"\n            variant=\"secondary\"\n            radius=\"full\"\n            [ariaLabel]=\"prevAriaLabel()\"\n            [disabled]=\"!canPrev()\"\n            (clicked)=\"prevMonth.emit()\" />\n        @if (headerTitle() && months()[0]; as first) {\n            <ng-container *ngTemplateOutlet=\"titleTpl; context: { $implicit: first }\" />\n        }\n        <ng-content select=\"[calendarHint]\" />\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-next-month\"\n            icon=\"chevron-right\"\n            variant=\"secondary\"\n            radius=\"full\"\n            [ariaLabel]=\"nextAriaLabel()\"\n            [disabled]=\"!canNext()\"\n            (clicked)=\"nextMonth.emit()\" />\n    </div>\n\n    <div rtElem=\"months\" qa-dataid=\"calendar-months\" (mouseleave)=\"dayHover.emit(null)\">\n        @for (month of months(); track month.key) {\n            <div rtElem=\"month\" qa-dataid=\"calendar-month\">\n                @if (!headerTitle()) {\n                    <ng-container *ngTemplateOutlet=\"titleTpl; context: { $implicit: month }\" />\n                }\n                <div rtElem=\"grid\" qa-dataid=\"calendar-grid\">\n                    @for (weekday of weekdayLabels(); track $index) {\n                        <span rtElem=\"weekday\" qa-dataid=\"calendar-weekday\">{{ weekday }}</span>\n                    }\n                    @for (blank of month.leadingBlanks; track blank) {\n                        <!-- \u041F\u0443\u0441\u0442\u0430\u044F \u044F\u0447\u0435\u0439\u043A\u0430 \u0441\u0435\u0442\u043A\u0438 \u0434\u043E \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u0434\u043D\u044F \u043C\u0435\u0441\u044F\u0446\u0430: \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442 \u043C\u0435\u0441\u0442\u043E \u0438 \u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043A\u0440\u0430\u0441\u0438\u0442. -->\n                        <span qa-dataid=\"calendar-blank\" aria-hidden=\"true\"></span>\n                    }\n                    @for (day of month.days; track day.key) {\n                        <button\n                            #dayButton\n                            rtElem=\"day\"\n                            qa-dataid=\"calendar-day\"\n                            type=\"button\"\n                            [attr.data-iso]=\"day.key\"\n                            [attr.data-state]=\"day.state\"\n                            [attr.data-today]=\"day.today ? '' : null\"\n                            [attr.aria-current]=\"day.today ? 'date' : null\"\n                            [attr.aria-pressed]=\"day.state === chosenState ? true : null\"\n                            [attr.tabindex]=\"rovingKey() === null ? null : day.key === rovingKey() ? 0 : -1\"\n                            [disabled]=\"day.disabled\"\n                            (keydown)=\"onDayKey($event, day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (focus)=\"onDayHover(day)\"\n                            (click)=\"onDayClick(day)\">\n                            <span rtElem=\"day-num\" qa-dataid=\"calendar-day-num\">{{ day.dayOfMonth }}</span>\n                            @if (sublabelsLoading()) {\n                                <rt-skeleton\n                                    rtElem=\"day-sublabel\"\n                                    qa-dataid=\"calendar-day-price-skeleton\"\n                                    width=\"80%\"\n                                    radius=\"sm\"\n                                    [height]=\"sublabelSkeletonHeight\" />\n                            } @else if (day.sublabel) {\n                                <span rtElem=\"day-sublabel\" qa-dataid=\"calendar-day-price\">{{ day.sublabel }}</span>\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <ng-content />\n\n    <ng-template #titleTpl let-month>\n        @if (titleAction()) {\n            <button rtElem=\"month-title\" qa-dataid=\"calendar-month-title\" type=\"button\" (click)=\"titleClick.emit(month)\">\n                {{ month.label }}\n            </button>\n        } @else {\n            <p rtElem=\"month-title\" qa-dataid=\"calendar-month-title\">{{ month.label }}</p>\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-calendar{--rt-calendar-day-radius: var(--rt-radius-md);--rt-calendar-day-size: auto;--rt-calendar-day-justify: flex-start;--rt-calendar-month-count: 2;--rt-calendar-column-gap: var(--rt-space-0-5);--rt-calendar-range-inner-radius: var(--rt-calendar-day-radius);--rt-calendar-today-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);display:block}.rt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4);gap:var(--rt-space-4)}.rt-calendar__nav{flex:0 0 auto}.rt-calendar__header .rt-calendar__month-title{width:auto;padding:var(--rt-space-1) var(--rt-space-2);margin:0}.rt-calendar__months{display:grid;gap:var(--rt-space-6);grid-template-columns:repeat(var(--rt-calendar-month-count),1fr)}.rt-calendar__month-title{display:block;width:100%;padding:0;border:none;margin:0 0 var(--rt-space-2);background:none;color:var(--rt-color-text-primary);font:inherit;font-weight:var(--rt-font-weight-semibold);text-align:center}.rt-calendar__month-title:first-letter{text-transform:uppercase}.rt-calendar__month-title:is(button){border-radius:var(--rt-calendar-day-radius);cursor:pointer}.rt-calendar__month-title:is(button):hover{color:var(--rt-color-text-link)}.rt-calendar__month-title:is(button):focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-calendar__grid{display:grid;gap:var(--rt-space-0-5) var(--rt-calendar-column-gap);grid-template-columns:repeat(7,1fr)}.rt-calendar__weekday{padding:var(--rt-space-1) 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-align:center}.rt-calendar__day{display:flex;flex-direction:column;align-items:center;justify-content:var(--rt-calendar-day-justify);padding:var(--rt-space-2) var(--rt-space-0-5);border:none;border-radius:var(--rt-calendar-day-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-0-5);min-block-size:var(--rt-calendar-day-size)}.rt-calendar__day:hover:not(:disabled,[data-state=start],[data-state=end],[data-state=in-range],[data-state=chosen]){background:var(--rt-color-bg-subtle)}.rt-calendar__day:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-calendar__day[data-state=past],.rt-calendar__day[data-state=blocked]{color:var(--rt-color-text-muted);opacity:.45}.rt-calendar__day[data-state=busy]{color:var(--rt-color-text-muted);opacity:.45;text-decoration:line-through}.rt-calendar__day[data-today]{box-shadow:var(--rt-calendar-today-ring)}.rt-calendar__day:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-calendar__day[data-state=start],.rt-calendar__day[data-state=end],.rt-calendar__day[data-state=chosen]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-calendar__day[data-state=start]{border-end-end-radius:var(--rt-calendar-range-inner-radius);border-start-end-radius:var(--rt-calendar-range-inner-radius)}.rt-calendar__day[data-state=end]{border-end-start-radius:var(--rt-calendar-range-inner-radius);border-start-start-radius:var(--rt-calendar-range-inner-radius)}.rt-calendar__day[data-state=in-range]{border-radius:var(--rt-calendar-range-inner-radius);background:var(--rt-color-action-primary-soft);color:var(--rt-color-text-link);font-weight:var(--rt-font-weight-semibold)}.rt-calendar__day-num{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium)}.rt-calendar__day-sublabel{font-size:var(--rt-text-2xs);opacity:.75}@media(width<=640px){.rt-calendar__months{grid-template-columns:1fr}.rt-calendar__month:last-child{display:none}}@media(width<=374px){.rt-calendar__day{padding-inline:0}.rt-calendar__day-sublabel{font-size:var(--rt-text-3xs)}}.rt-calendar[data-rt-radius=none]{--rt-calendar-day-radius: var(--rt-radius-none)}.rt-calendar[data-rt-radius=xs]{--rt-calendar-day-radius: var(--rt-radius-xs)}.rt-calendar[data-rt-radius=sm]{--rt-calendar-day-radius: var(--rt-radius-sm)}.rt-calendar[data-rt-radius=ms]{--rt-calendar-day-radius: var(--rt-radius-ms)}.rt-calendar[data-rt-radius=md]{--rt-calendar-day-radius: var(--rt-radius-md)}.rt-calendar[data-rt-radius=lg]{--rt-calendar-day-radius: var(--rt-radius-lg)}.rt-calendar[data-rt-radius=xl]{--rt-calendar-day-radius: var(--rt-radius-xl)}.rt-calendar[data-rt-radius=\"2xl\"]{--rt-calendar-day-radius: var(--rt-radius-2xl)}.rt-calendar[data-rt-radius=full]{--rt-calendar-day-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "directive", type: 
-                // angular
-                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
-                // rt-tools
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "component", type: 
-                // components
-                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: RtSkeletonComponent, selector: "rt-skeleton", inputs: ["shape", "size", "width", "height", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtCalendarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-calendar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // angular
-                        NgTemplateOutlet,
-                        // rt-tools
-                        BlockDirective,
-                        ElemDirective,
-                        // components
-                        RtIconButtonComponent,
-                        RtSkeletonComponent,
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                    }, template: "<ng-container rtBlock=\"rt-calendar\">\n    <div rtElem=\"header\">\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-prev-month\"\n            icon=\"chevron-left\"\n            variant=\"secondary\"\n            radius=\"full\"\n            [ariaLabel]=\"prevAriaLabel()\"\n            [disabled]=\"!canPrev()\"\n            (clicked)=\"prevMonth.emit()\" />\n        @if (headerTitle() && months()[0]; as first) {\n            <ng-container *ngTemplateOutlet=\"titleTpl; context: { $implicit: first }\" />\n        }\n        <ng-content select=\"[calendarHint]\" />\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-next-month\"\n            icon=\"chevron-right\"\n            variant=\"secondary\"\n            radius=\"full\"\n            [ariaLabel]=\"nextAriaLabel()\"\n            [disabled]=\"!canNext()\"\n            (clicked)=\"nextMonth.emit()\" />\n    </div>\n\n    <div rtElem=\"months\" qa-dataid=\"calendar-months\" (mouseleave)=\"dayHover.emit(null)\">\n        @for (month of months(); track month.key) {\n            <div rtElem=\"month\" qa-dataid=\"calendar-month\">\n                @if (!headerTitle()) {\n                    <ng-container *ngTemplateOutlet=\"titleTpl; context: { $implicit: month }\" />\n                }\n                <div rtElem=\"grid\" qa-dataid=\"calendar-grid\">\n                    @for (weekday of weekdayLabels(); track $index) {\n                        <span rtElem=\"weekday\" qa-dataid=\"calendar-weekday\">{{ weekday }}</span>\n                    }\n                    @for (blank of month.leadingBlanks; track blank) {\n                        <!-- \u041F\u0443\u0441\u0442\u0430\u044F \u044F\u0447\u0435\u0439\u043A\u0430 \u0441\u0435\u0442\u043A\u0438 \u0434\u043E \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u0434\u043D\u044F \u043C\u0435\u0441\u044F\u0446\u0430: \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442 \u043C\u0435\u0441\u0442\u043E \u0438 \u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043A\u0440\u0430\u0441\u0438\u0442. -->\n                        <span qa-dataid=\"calendar-blank\" aria-hidden=\"true\"></span>\n                    }\n                    @for (day of month.days; track day.key) {\n                        <button\n                            #dayButton\n                            rtElem=\"day\"\n                            qa-dataid=\"calendar-day\"\n                            type=\"button\"\n                            [attr.data-iso]=\"day.key\"\n                            [attr.data-state]=\"day.state\"\n                            [attr.data-today]=\"day.today ? '' : null\"\n                            [attr.aria-current]=\"day.today ? 'date' : null\"\n                            [attr.aria-pressed]=\"day.state === chosenState ? true : null\"\n                            [attr.tabindex]=\"rovingKey() === null ? null : day.key === rovingKey() ? 0 : -1\"\n                            [disabled]=\"day.disabled\"\n                            (keydown)=\"onDayKey($event, day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (focus)=\"onDayHover(day)\"\n                            (click)=\"onDayClick(day)\">\n                            <span rtElem=\"day-num\" qa-dataid=\"calendar-day-num\">{{ day.dayOfMonth }}</span>\n                            @if (sublabelsLoading()) {\n                                <rt-skeleton\n                                    rtElem=\"day-sublabel\"\n                                    qa-dataid=\"calendar-day-price-skeleton\"\n                                    width=\"80%\"\n                                    radius=\"sm\"\n                                    [height]=\"sublabelSkeletonHeight\" />\n                            } @else if (day.sublabel) {\n                                <span rtElem=\"day-sublabel\" qa-dataid=\"calendar-day-price\">{{ day.sublabel }}</span>\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <ng-content />\n\n    <ng-template #titleTpl let-month>\n        @if (titleAction()) {\n            <button rtElem=\"month-title\" qa-dataid=\"calendar-month-title\" type=\"button\" (click)=\"titleClick.emit(month)\">\n                {{ month.label }}\n            </button>\n        } @else {\n            <p rtElem=\"month-title\" qa-dataid=\"calendar-month-title\">{{ month.label }}</p>\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-calendar{--rt-calendar-day-radius: var(--rt-radius-md);--rt-calendar-day-size: auto;--rt-calendar-day-justify: flex-start;--rt-calendar-month-count: 2;--rt-calendar-column-gap: var(--rt-space-0-5);--rt-calendar-range-inner-radius: var(--rt-calendar-day-radius);--rt-calendar-today-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);display:block}.rt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4);gap:var(--rt-space-4)}.rt-calendar__nav{flex:0 0 auto}.rt-calendar__header .rt-calendar__month-title{width:auto;padding:var(--rt-space-1) var(--rt-space-2);margin:0}.rt-calendar__months{display:grid;gap:var(--rt-space-6);grid-template-columns:repeat(var(--rt-calendar-month-count),1fr)}.rt-calendar__month-title{display:block;width:100%;padding:0;border:none;margin:0 0 var(--rt-space-2);background:none;color:var(--rt-color-text-primary);font:inherit;font-weight:var(--rt-font-weight-semibold);text-align:center}.rt-calendar__month-title:first-letter{text-transform:uppercase}.rt-calendar__month-title:is(button){border-radius:var(--rt-calendar-day-radius);cursor:pointer}.rt-calendar__month-title:is(button):hover{color:var(--rt-color-text-link)}.rt-calendar__month-title:is(button):focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-calendar__grid{display:grid;gap:var(--rt-space-0-5) var(--rt-calendar-column-gap);grid-template-columns:repeat(7,1fr)}.rt-calendar__weekday{padding:var(--rt-space-1) 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-align:center}.rt-calendar__day{display:flex;flex-direction:column;align-items:center;justify-content:var(--rt-calendar-day-justify);padding:var(--rt-space-2) var(--rt-space-0-5);border:none;border-radius:var(--rt-calendar-day-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-0-5);min-block-size:var(--rt-calendar-day-size)}.rt-calendar__day:hover:not(:disabled,[data-state=start],[data-state=end],[data-state=in-range],[data-state=chosen]){background:var(--rt-color-bg-subtle)}.rt-calendar__day:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-calendar__day[data-state=past],.rt-calendar__day[data-state=blocked]{color:var(--rt-color-text-muted);opacity:.45}.rt-calendar__day[data-state=busy]{color:var(--rt-color-text-muted);opacity:.45;text-decoration:line-through}.rt-calendar__day[data-today]{box-shadow:var(--rt-calendar-today-ring)}.rt-calendar__day:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-calendar__day[data-state=start],.rt-calendar__day[data-state=end],.rt-calendar__day[data-state=chosen]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-calendar__day[data-state=start]{border-end-end-radius:var(--rt-calendar-range-inner-radius);border-start-end-radius:var(--rt-calendar-range-inner-radius)}.rt-calendar__day[data-state=end]{border-end-start-radius:var(--rt-calendar-range-inner-radius);border-start-start-radius:var(--rt-calendar-range-inner-radius)}.rt-calendar__day[data-state=in-range]{border-radius:var(--rt-calendar-range-inner-radius);background:var(--rt-color-action-primary-soft);color:var(--rt-color-text-link);font-weight:var(--rt-font-weight-semibold)}.rt-calendar__day-num{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium)}.rt-calendar__day-sublabel{font-size:var(--rt-text-2xs);opacity:.75}@media(width<=640px){.rt-calendar__months{grid-template-columns:1fr}.rt-calendar__month:last-child{display:none}}@media(width<=374px){.rt-calendar__day{padding-inline:0}.rt-calendar__day-sublabel{font-size:var(--rt-text-3xs)}}.rt-calendar[data-rt-radius=none]{--rt-calendar-day-radius: var(--rt-radius-none)}.rt-calendar[data-rt-radius=xs]{--rt-calendar-day-radius: var(--rt-radius-xs)}.rt-calendar[data-rt-radius=sm]{--rt-calendar-day-radius: var(--rt-radius-sm)}.rt-calendar[data-rt-radius=ms]{--rt-calendar-day-radius: var(--rt-radius-ms)}.rt-calendar[data-rt-radius=md]{--rt-calendar-day-radius: var(--rt-radius-md)}.rt-calendar[data-rt-radius=lg]{--rt-calendar-day-radius: var(--rt-radius-lg)}.rt-calendar[data-rt-radius=xl]{--rt-calendar-day-radius: var(--rt-radius-xl)}.rt-calendar[data-rt-radius=\"2xl\"]{--rt-calendar-day-radius: var(--rt-radius-2xl)}.rt-calendar[data-rt-radius=full]{--rt-calendar-day-radius: var(--rt-radius-full)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dayButtons: [{ type: i0.ViewChildren, args: ['dayButton', { isSignal: true }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: true }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: true }] }], canPrev: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPrev", required: false }] }], canNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "canNext", required: false }] }], prevAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevAriaLabel", required: false }] }], nextAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextAriaLabel", required: false }] }], sublabelsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabelsLoading", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], titleAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleAction", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], prevMonth: [{ type: i0.Output, args: ["prevMonth"] }], nextMonth: [{ type: i0.Output, args: ["nextMonth"] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], gridKey: [{ type: i0.Output, args: ["gridKey"] }], titleClick: [{ type: i0.Output, args: ["titleClick"] }], dayHover: [{ type: i0.Output, args: ["dayHover"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const BEM_BLOCK = "rt-calendar";
+const GRID_KEYS = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"PageUp",
+	"PageDown",
+	"Home",
+	"End"
+]);
+var RtCalendarComponent = class RtCalendarComponent {
+	#keyed;
+	constructor() {
+		this.#keyed = signal(false, ...ngDevMode ? [{ debugName: "#keyed" }] : /* istanbul ignore next */ []);
+		this.sublabelSkeletonHeight = "12px";
+		this.chosenState = ERtCalendarDayState.Chosen;
+		this.dayButtons = viewChildren("dayButton", ...ngDevMode ? [{ debugName: "dayButtons" }] : /* istanbul ignore next */ []);
+		this.rovingKey = computed(() => {
+			if (!this.grid()) return null;
+			const days = this.months().flatMap((month) => [...month.days]);
+			const active = this.activeKey();
+			return (days.find((day) => day.key === active) ?? days.find((day) => day.state === ERtCalendarDayState.Chosen) ?? days.find((day) => day.today === true) ?? days.find((day) => !day.disabled))?.key ?? null;
+		}, ...ngDevMode ? [{ debugName: "rovingKey" }] : /* istanbul ignore next */ []);
+		this.months = input.required(...ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []);
+		this.weekdayLabels = input.required(...ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []);
+		this.canPrev = input(false, {
+			...ngDevMode ? { debugName: "canPrev" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.canNext = input(false, {
+			...ngDevMode ? { debugName: "canNext" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.prevAriaLabel = input("", ...ngDevMode ? [{ debugName: "prevAriaLabel" }] : /* istanbul ignore next */ []);
+		this.nextAriaLabel = input("", ...ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []);
+		this.sublabelsLoading = input(false, {
+			...ngDevMode ? { debugName: "sublabelsLoading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.grid = input(false, {
+			...ngDevMode ? { debugName: "grid" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.activeKey = input(null, ...ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []);
+		this.titleAction = input(false, {
+			...ngDevMode ? { debugName: "titleAction" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.headerTitle = input(false, {
+			...ngDevMode ? { debugName: "headerTitle" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.prevMonth = output();
+		this.nextMonth = output();
+		this.dayClick = output();
+		this.gridKey = output();
+		this.titleClick = output();
+		this.dayHover = output();
+		afterRenderEffect(() => {
+			const key = this.rovingKey();
+			if (!this.#keyed() || key === null) return;
+			this.dayButtons().find((button) => button.nativeElement.dataset["iso"] === key)?.nativeElement.focus();
+		});
+	}
+	onDayKey(event, day) {
+		if (!this.grid() || !GRID_KEYS.has(event.key)) return;
+		event.preventDefault();
+		this.#keyed.set(true);
+		this.gridKey.emit({
+			key: event.key,
+			day
+		});
+	}
+	onDayHover(day) {
+		if (!day.disabled) this.dayHover.emit(day);
+	}
+	onDayClick(day) {
+		if (!day.disabled) this.dayClick.emit(day);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtCalendarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtCalendarComponent,
+			isStandalone: true,
+			selector: "rt-calendar",
+			inputs: {
+				months: {
+					classPropertyName: "months",
+					publicName: "months",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				weekdayLabels: {
+					classPropertyName: "weekdayLabels",
+					publicName: "weekdayLabels",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				canPrev: {
+					classPropertyName: "canPrev",
+					publicName: "canPrev",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				canNext: {
+					classPropertyName: "canNext",
+					publicName: "canNext",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				prevAriaLabel: {
+					classPropertyName: "prevAriaLabel",
+					publicName: "prevAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				nextAriaLabel: {
+					classPropertyName: "nextAriaLabel",
+					publicName: "nextAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sublabelsLoading: {
+					classPropertyName: "sublabelsLoading",
+					publicName: "sublabelsLoading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				grid: {
+					classPropertyName: "grid",
+					publicName: "grid",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				activeKey: {
+					classPropertyName: "activeKey",
+					publicName: "activeKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				titleAction: {
+					classPropertyName: "titleAction",
+					publicName: "titleAction",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				headerTitle: {
+					classPropertyName: "headerTitle",
+					publicName: "headerTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				prevMonth: "prevMonth",
+				nextMonth: "nextMonth",
+				dayClick: "dayClick",
+				gridKey: "gridKey",
+				titleClick: "titleClick",
+				dayHover: "dayHover"
+			},
+			host: { classAttribute: "rt-calendar" },
+			viewQueries: [{
+				propertyName: "dayButtons",
+				predicate: ["dayButton"],
+				descendants: true,
+				isSignal: true
+			}],
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-calendar\">\n    <div rtElem=\"header\">\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-prev-month\"\n            icon=\"chevron-left\"\n            variant=\"secondary\"\n            radius=\"full\"\n            [ariaLabel]=\"prevAriaLabel()\"\n            [disabled]=\"!canPrev()\"\n            (clicked)=\"prevMonth.emit()\" />\n        @if (headerTitle() && months()[0]; as first) {\n            <ng-container *ngTemplateOutlet=\"titleTpl; context: { $implicit: first }\" />\n        }\n        <ng-content select=\"[calendarHint]\" />\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-next-month\"\n            icon=\"chevron-right\"\n            variant=\"secondary\"\n            radius=\"full\"\n            [ariaLabel]=\"nextAriaLabel()\"\n            [disabled]=\"!canNext()\"\n            (clicked)=\"nextMonth.emit()\" />\n    </div>\n\n    <div rtElem=\"months\" qa-dataid=\"calendar-months\" (mouseleave)=\"dayHover.emit(null)\">\n        @for (month of months(); track month.key) {\n            <div rtElem=\"month\" qa-dataid=\"calendar-month\">\n                @if (!headerTitle()) {\n                    <ng-container *ngTemplateOutlet=\"titleTpl; context: { $implicit: month }\" />\n                }\n                <div rtElem=\"grid\" qa-dataid=\"calendar-grid\">\n                    @for (weekday of weekdayLabels(); track $index) {\n                        <span rtElem=\"weekday\" qa-dataid=\"calendar-weekday\">{{ weekday }}</span>\n                    }\n                    @for (blank of month.leadingBlanks; track blank) {\n                        <!-- Пустая ячейка сетки до первого дня месяца: занимает место и ничего не красит. -->\n                        <span qa-dataid=\"calendar-blank\" aria-hidden=\"true\"></span>\n                    }\n                    @for (day of month.days; track day.key) {\n                        <button\n                            #dayButton\n                            rtElem=\"day\"\n                            qa-dataid=\"calendar-day\"\n                            type=\"button\"\n                            [attr.data-iso]=\"day.key\"\n                            [attr.data-state]=\"day.state\"\n                            [attr.data-today]=\"day.today ? '' : null\"\n                            [attr.aria-current]=\"day.today ? 'date' : null\"\n                            [attr.aria-pressed]=\"day.state === chosenState ? true : null\"\n                            [attr.tabindex]=\"rovingKey() === null ? null : day.key === rovingKey() ? 0 : -1\"\n                            [disabled]=\"day.disabled\"\n                            (keydown)=\"onDayKey($event, day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (focus)=\"onDayHover(day)\"\n                            (click)=\"onDayClick(day)\">\n                            <span rtElem=\"day-num\" qa-dataid=\"calendar-day-num\">{{ day.dayOfMonth }}</span>\n                            @if (sublabelsLoading()) {\n                                <rt-skeleton\n                                    rtElem=\"day-sublabel\"\n                                    qa-dataid=\"calendar-day-price-skeleton\"\n                                    width=\"80%\"\n                                    radius=\"sm\"\n                                    [height]=\"sublabelSkeletonHeight\" />\n                            } @else if (day.sublabel) {\n                                <span rtElem=\"day-sublabel\" qa-dataid=\"calendar-day-price\">{{ day.sublabel }}</span>\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <ng-content />\n\n    <ng-template #titleTpl let-month>\n        @if (titleAction()) {\n            <button rtElem=\"month-title\" qa-dataid=\"calendar-month-title\" type=\"button\" (click)=\"titleClick.emit(month)\">\n                {{ month.label }}\n            </button>\n        } @else {\n            <p rtElem=\"month-title\" qa-dataid=\"calendar-month-title\">{{ month.label }}</p>\n        }\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-calendar{--rt-calendar-day-radius: var(--rt-radius-md);--rt-calendar-day-size: auto;--rt-calendar-day-justify: flex-start;--rt-calendar-month-count: 2;--rt-calendar-column-gap: var(--rt-space-0-5);--rt-calendar-range-inner-radius: var(--rt-calendar-day-radius);--rt-calendar-today-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);display:block}.rt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4);gap:var(--rt-space-4)}.rt-calendar__nav{flex:0 0 auto}.rt-calendar__header .rt-calendar__month-title{width:auto;padding:var(--rt-space-1) var(--rt-space-2);margin:0}.rt-calendar__months{display:grid;gap:var(--rt-space-6);grid-template-columns:repeat(var(--rt-calendar-month-count),1fr)}.rt-calendar__month-title{display:block;width:100%;padding:0;border:none;margin:0 0 var(--rt-space-2);background:none;color:var(--rt-color-text-primary);font:inherit;font-weight:var(--rt-font-weight-semibold);text-align:center}.rt-calendar__month-title:first-letter{text-transform:uppercase}.rt-calendar__month-title:is(button){border-radius:var(--rt-calendar-day-radius);cursor:pointer}.rt-calendar__month-title:is(button):hover{color:var(--rt-color-text-link)}.rt-calendar__month-title:is(button):focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-calendar__grid{display:grid;gap:var(--rt-space-0-5) var(--rt-calendar-column-gap);grid-template-columns:repeat(7,1fr)}.rt-calendar__weekday{padding:var(--rt-space-1) 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-align:center}.rt-calendar__day{display:flex;flex-direction:column;align-items:center;justify-content:var(--rt-calendar-day-justify);padding:var(--rt-space-2) var(--rt-space-0-5);border:none;border-radius:var(--rt-calendar-day-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-0-5);min-block-size:var(--rt-calendar-day-size)}.rt-calendar__day:hover:not(:disabled,[data-state=start],[data-state=end],[data-state=in-range],[data-state=chosen]){background:var(--rt-color-bg-subtle)}.rt-calendar__day:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-calendar__day[data-state=past],.rt-calendar__day[data-state=blocked]{color:var(--rt-color-text-muted);opacity:.45}.rt-calendar__day[data-state=busy]{color:var(--rt-color-text-muted);opacity:.45;text-decoration:line-through}.rt-calendar__day[data-today]{box-shadow:var(--rt-calendar-today-ring)}.rt-calendar__day:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-calendar__day[data-state=start],.rt-calendar__day[data-state=end],.rt-calendar__day[data-state=chosen]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-calendar__day[data-state=start]{border-end-end-radius:var(--rt-calendar-range-inner-radius);border-start-end-radius:var(--rt-calendar-range-inner-radius)}.rt-calendar__day[data-state=end]{border-end-start-radius:var(--rt-calendar-range-inner-radius);border-start-start-radius:var(--rt-calendar-range-inner-radius)}.rt-calendar__day[data-state=in-range]{border-radius:var(--rt-calendar-range-inner-radius);background:var(--rt-color-action-primary-soft);color:var(--rt-color-text-link);font-weight:var(--rt-font-weight-semibold)}.rt-calendar__day-num{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium)}.rt-calendar__day-sublabel{font-size:var(--rt-text-2xs);opacity:.75}@media(width<=640px){.rt-calendar__months{grid-template-columns:1fr}.rt-calendar__month:last-child{display:none}}@media(width<=374px){.rt-calendar__day{padding-inline:0}.rt-calendar__day-sublabel{font-size:var(--rt-text-3xs)}}.rt-calendar[data-rt-radius=none]{--rt-calendar-day-radius: var(--rt-radius-none)}.rt-calendar[data-rt-radius=xs]{--rt-calendar-day-radius: var(--rt-radius-xs)}.rt-calendar[data-rt-radius=sm]{--rt-calendar-day-radius: var(--rt-radius-sm)}.rt-calendar[data-rt-radius=ms]{--rt-calendar-day-radius: var(--rt-radius-ms)}.rt-calendar[data-rt-radius=md]{--rt-calendar-day-radius: var(--rt-radius-md)}.rt-calendar[data-rt-radius=lg]{--rt-calendar-day-radius: var(--rt-radius-lg)}.rt-calendar[data-rt-radius=xl]{--rt-calendar-day-radius: var(--rt-radius-xl)}.rt-calendar[data-rt-radius=\"2xl\"]{--rt-calendar-day-radius: var(--rt-radius-2xl)}.rt-calendar[data-rt-radius=full]{--rt-calendar-day-radius: var(--rt-radius-full)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtSkeletonComponent,
+					selector: "rt-skeleton",
+					inputs: [
+						"shape",
+						"size",
+						"width",
+						"height",
+						"animation"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtCalendarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-calendar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				BlockDirective,
+				ElemDirective,
+				RtIconButtonComponent,
+				RtSkeletonComponent
+			],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-calendar\">\n    <div rtElem=\"header\">\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-prev-month\"\n            icon=\"chevron-left\"\n            variant=\"secondary\"\n            radius=\"full\"\n            [ariaLabel]=\"prevAriaLabel()\"\n            [disabled]=\"!canPrev()\"\n            (clicked)=\"prevMonth.emit()\" />\n        @if (headerTitle() && months()[0]; as first) {\n            <ng-container *ngTemplateOutlet=\"titleTpl; context: { $implicit: first }\" />\n        }\n        <ng-content select=\"[calendarHint]\" />\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-next-month\"\n            icon=\"chevron-right\"\n            variant=\"secondary\"\n            radius=\"full\"\n            [ariaLabel]=\"nextAriaLabel()\"\n            [disabled]=\"!canNext()\"\n            (clicked)=\"nextMonth.emit()\" />\n    </div>\n\n    <div rtElem=\"months\" qa-dataid=\"calendar-months\" (mouseleave)=\"dayHover.emit(null)\">\n        @for (month of months(); track month.key) {\n            <div rtElem=\"month\" qa-dataid=\"calendar-month\">\n                @if (!headerTitle()) {\n                    <ng-container *ngTemplateOutlet=\"titleTpl; context: { $implicit: month }\" />\n                }\n                <div rtElem=\"grid\" qa-dataid=\"calendar-grid\">\n                    @for (weekday of weekdayLabels(); track $index) {\n                        <span rtElem=\"weekday\" qa-dataid=\"calendar-weekday\">{{ weekday }}</span>\n                    }\n                    @for (blank of month.leadingBlanks; track blank) {\n                        <!-- Пустая ячейка сетки до первого дня месяца: занимает место и ничего не красит. -->\n                        <span qa-dataid=\"calendar-blank\" aria-hidden=\"true\"></span>\n                    }\n                    @for (day of month.days; track day.key) {\n                        <button\n                            #dayButton\n                            rtElem=\"day\"\n                            qa-dataid=\"calendar-day\"\n                            type=\"button\"\n                            [attr.data-iso]=\"day.key\"\n                            [attr.data-state]=\"day.state\"\n                            [attr.data-today]=\"day.today ? '' : null\"\n                            [attr.aria-current]=\"day.today ? 'date' : null\"\n                            [attr.aria-pressed]=\"day.state === chosenState ? true : null\"\n                            [attr.tabindex]=\"rovingKey() === null ? null : day.key === rovingKey() ? 0 : -1\"\n                            [disabled]=\"day.disabled\"\n                            (keydown)=\"onDayKey($event, day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (focus)=\"onDayHover(day)\"\n                            (click)=\"onDayClick(day)\">\n                            <span rtElem=\"day-num\" qa-dataid=\"calendar-day-num\">{{ day.dayOfMonth }}</span>\n                            @if (sublabelsLoading()) {\n                                <rt-skeleton\n                                    rtElem=\"day-sublabel\"\n                                    qa-dataid=\"calendar-day-price-skeleton\"\n                                    width=\"80%\"\n                                    radius=\"sm\"\n                                    [height]=\"sublabelSkeletonHeight\" />\n                            } @else if (day.sublabel) {\n                                <span rtElem=\"day-sublabel\" qa-dataid=\"calendar-day-price\">{{ day.sublabel }}</span>\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <ng-content />\n\n    <ng-template #titleTpl let-month>\n        @if (titleAction()) {\n            <button rtElem=\"month-title\" qa-dataid=\"calendar-month-title\" type=\"button\" (click)=\"titleClick.emit(month)\">\n                {{ month.label }}\n            </button>\n        } @else {\n            <p rtElem=\"month-title\" qa-dataid=\"calendar-month-title\">{{ month.label }}</p>\n        }\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-calendar{--rt-calendar-day-radius: var(--rt-radius-md);--rt-calendar-day-size: auto;--rt-calendar-day-justify: flex-start;--rt-calendar-month-count: 2;--rt-calendar-column-gap: var(--rt-space-0-5);--rt-calendar-range-inner-radius: var(--rt-calendar-day-radius);--rt-calendar-today-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);display:block}.rt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-4);gap:var(--rt-space-4)}.rt-calendar__nav{flex:0 0 auto}.rt-calendar__header .rt-calendar__month-title{width:auto;padding:var(--rt-space-1) var(--rt-space-2);margin:0}.rt-calendar__months{display:grid;gap:var(--rt-space-6);grid-template-columns:repeat(var(--rt-calendar-month-count),1fr)}.rt-calendar__month-title{display:block;width:100%;padding:0;border:none;margin:0 0 var(--rt-space-2);background:none;color:var(--rt-color-text-primary);font:inherit;font-weight:var(--rt-font-weight-semibold);text-align:center}.rt-calendar__month-title:first-letter{text-transform:uppercase}.rt-calendar__month-title:is(button){border-radius:var(--rt-calendar-day-radius);cursor:pointer}.rt-calendar__month-title:is(button):hover{color:var(--rt-color-text-link)}.rt-calendar__month-title:is(button):focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-calendar__grid{display:grid;gap:var(--rt-space-0-5) var(--rt-calendar-column-gap);grid-template-columns:repeat(7,1fr)}.rt-calendar__weekday{padding:var(--rt-space-1) 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-align:center}.rt-calendar__day{display:flex;flex-direction:column;align-items:center;justify-content:var(--rt-calendar-day-justify);padding:var(--rt-space-2) var(--rt-space-0-5);border:none;border-radius:var(--rt-calendar-day-radius);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-0-5);min-block-size:var(--rt-calendar-day-size)}.rt-calendar__day:hover:not(:disabled,[data-state=start],[data-state=end],[data-state=in-range],[data-state=chosen]){background:var(--rt-color-bg-subtle)}.rt-calendar__day:disabled{color:var(--rt-color-text-muted);cursor:not-allowed;opacity:.45}.rt-calendar__day[data-state=past],.rt-calendar__day[data-state=blocked]{color:var(--rt-color-text-muted);opacity:.45}.rt-calendar__day[data-state=busy]{color:var(--rt-color-text-muted);opacity:.45;text-decoration:line-through}.rt-calendar__day[data-today]{box-shadow:var(--rt-calendar-today-ring)}.rt-calendar__day:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-calendar__day[data-state=start],.rt-calendar__day[data-state=end],.rt-calendar__day[data-state=chosen]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-calendar__day[data-state=start]{border-end-end-radius:var(--rt-calendar-range-inner-radius);border-start-end-radius:var(--rt-calendar-range-inner-radius)}.rt-calendar__day[data-state=end]{border-end-start-radius:var(--rt-calendar-range-inner-radius);border-start-start-radius:var(--rt-calendar-range-inner-radius)}.rt-calendar__day[data-state=in-range]{border-radius:var(--rt-calendar-range-inner-radius);background:var(--rt-color-action-primary-soft);color:var(--rt-color-text-link);font-weight:var(--rt-font-weight-semibold)}.rt-calendar__day-num{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium)}.rt-calendar__day-sublabel{font-size:var(--rt-text-2xs);opacity:.75}@media(width<=640px){.rt-calendar__months{grid-template-columns:1fr}.rt-calendar__month:last-child{display:none}}@media(width<=374px){.rt-calendar__day{padding-inline:0}.rt-calendar__day-sublabel{font-size:var(--rt-text-3xs)}}.rt-calendar[data-rt-radius=none]{--rt-calendar-day-radius: var(--rt-radius-none)}.rt-calendar[data-rt-radius=xs]{--rt-calendar-day-radius: var(--rt-radius-xs)}.rt-calendar[data-rt-radius=sm]{--rt-calendar-day-radius: var(--rt-radius-sm)}.rt-calendar[data-rt-radius=ms]{--rt-calendar-day-radius: var(--rt-radius-ms)}.rt-calendar[data-rt-radius=md]{--rt-calendar-day-radius: var(--rt-radius-md)}.rt-calendar[data-rt-radius=lg]{--rt-calendar-day-radius: var(--rt-radius-lg)}.rt-calendar[data-rt-radius=xl]{--rt-calendar-day-radius: var(--rt-radius-xl)}.rt-calendar[data-rt-radius=\"2xl\"]{--rt-calendar-day-radius: var(--rt-radius-2xl)}.rt-calendar[data-rt-radius=full]{--rt-calendar-day-radius: var(--rt-radius-full)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		dayButtons: [{
+			type: i0.ViewChildren,
+			args: ["dayButton", { isSignal: true }]
+		}],
+		months: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "months",
+				required: true
+			}]
+		}],
+		weekdayLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weekdayLabels",
+				required: true
+			}]
+		}],
+		canPrev: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canPrev",
+				required: false
+			}]
+		}],
+		canNext: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canNext",
+				required: false
+			}]
+		}],
+		prevAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "prevAriaLabel",
+				required: false
+			}]
+		}],
+		nextAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextAriaLabel",
+				required: false
+			}]
+		}],
+		sublabelsLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sublabelsLoading",
+				required: false
+			}]
+		}],
+		grid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "grid",
+				required: false
+			}]
+		}],
+		activeKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeKey",
+				required: false
+			}]
+		}],
+		titleAction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "titleAction",
+				required: false
+			}]
+		}],
+		headerTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headerTitle",
+				required: false
+			}]
+		}],
+		prevMonth: [{
+			type: i0.Output,
+			args: ["prevMonth"]
+		}],
+		nextMonth: [{
+			type: i0.Output,
+			args: ["nextMonth"]
+		}],
+		dayClick: [{
+			type: i0.Output,
+			args: ["dayClick"]
+		}],
+		gridKey: [{
+			type: i0.Output,
+			args: ["gridKey"]
+		}],
+		titleClick: [{
+			type: i0.Output,
+			args: ["titleClick"]
+		}],
+		dayHover: [{
+			type: i0.Output,
+			args: ["dayHover"]
+		}]
+	}
+});
 export { ERtCalendarDayState, RtCalendarComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-calendar.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-calendar.mjs.map