@stenajs-webui/calendar 25.2.0 → 25.3.1

package/dist/features/month-picker/MonthPicker.d.ts

@@ -1,7 +1,11 @@
 import * as React from "react";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { SupportedLocaleCode } from "../localize-date-format/LocaleMapper";
-export type MonthPickerSizeVariant = "smaller" | "small" | "medium" | "large";
+/**
+ * The size of the calendar the month picker stands in for. At "auto" it fills
+ * the width it is given, which a calendar of size "auto" keeps for it.
+ */
+export type MonthPickerSizeVariant = "smaller" | "small" | "medium" | "large" | "auto";
 export interface MonthPickerProps extends ValueAndOnValueChangeProps<Date> {
     localeCode: SupportedLocaleCode;
     firstMonth: Date;

package/dist/features/travel-calendar/components/TravelCalendar.d.ts

@@ -2,7 +2,15 @@ import * as React from "react";
 import { Dispatch, SetStateAction } from "react";
 import { MonthData } from "../../../util/calendar/CalendarDataFactory";
 import { RenderTravelDateContent } from "../types";
-export type TravelCalendarSizeVariant = "smaller" | "small" | "medium" | "large";
+/**
+ * The size of the dates. "smaller" to "large" are fixed sizes, 40 to 56px.
+ *
+ * "auto" sizes the dates to their content, for content that needs more room
+ * than a fixed size has, such as a price written out in full. Every date is
+ * as wide as the widest and as high as the highest, and none is smaller than
+ * "medium". Everything else, such as the month header, is "medium".
+ */
+export type TravelCalendarSizeVariant = "smaller" | "small" | "medium" | "large" | "auto";
 export interface TravelCalendarProps {
     visibleMonthData: MonthData;
     onClickDate: (date: Date) => void;

package/dist/features/travel-calendar/components/TravelCalendarOrMonthPicker.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { ReactNode } from "react";
+import { VisiblePanel } from "../types";
+import { TravelCalendarSizeVariant } from "./TravelCalendar";
+export interface TravelCalendarOrMonthPickerProps {
+    size: TravelCalendarSizeVariant;
+    visiblePanel: VisiblePanel;
+    calendar: ReactNode;
+    monthPicker: ReactNode;
+}
+/**
+ * The calendar, or the month picker in its place.
+ *
+ * At size "auto" the calendar is as wide as its dates, which the month picker
+ * has no way of knowing. So the calendar stays under the month picker, hidden,
+ * and keeps its width for it: the month picker fills it, and nothing around
+ * the calendar changes width when the user opens it.
+ */
+export declare const TravelCalendarOrMonthPicker: React.FC<TravelCalendarOrMonthPickerProps>;

package/dist/features/travel-calendar/components/TravelDateCellBackground.d.ts

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { TravelCalendarSizeVariant } from "./TravelCalendar";
 export interface TravelDateCellBackgroundProps {
-    calendarSize: TravelCalendarSizeVariant;
     bgColorLeft: string;
     bgColorRight: string;
 }

package/dist/features/travel-calendar/components/TravelDateTextInputRow.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { ReactNode } from "react";
+import { TravelCalendarSizeVariant } from "./TravelCalendar";
+export interface TravelDateTextInputRowProps {
+    calendarSize: TravelCalendarSizeVariant;
+    children?: ReactNode;
+}
+/**
+ * The row the text inputs are in. At size "auto" it is as wide as the
+ * calendar, and the inputs take their width from it.
+ */
+export declare const TravelDateTextInputRow: React.FC<TravelDateTextInputRowProps>;

package/dist/index.css

@@ -1 +1 @@
-._calendar_5yxz4_1{--swui-calendar-day-width: 48px;--swui-calendar-day-height: 48px;--swui-calendar-day-border-radius: var(--swui-max-border-radius);--swui-calendar-week-number-bg-color: transparent;--swui-calendar-week-number-text-color: var(--lhds-color-ui-500);--swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-wrapper-selected-border: var(--core-blue);--swui-calendar-wrapper-selected-background: var(--core-blue);--swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);--swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);--swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);--swui-calendar-wrapper-today-background: var(--lhds-color-ui-50);--swui-calendar-text-selected-color: #fff;--swui-calendar-text-disabled-color: var(--swui-text-disabled-color);--swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color)}._calendar_5yxz4_1 table{border-spacing:0 4px}._calendar_5yxz4_1 tr td:last-child{border-top-right-radius:var(--swui-calendar-day-border-radius);border-bottom-right-radius:var(--swui-calendar-day-border-radius)}._calendar_5yxz4_1._weekNumberVisible_5yxz4_41 tr td:nth-child(2),._calendar_5yxz4_1:not(._weekNumberVisible_5yxz4_41) tr td:first-child{border-top-left-radius:var(--swui-calendar-day-border-radius);border-bottom-left-radius:var(--swui-calendar-day-border-radius)}._calendar_5yxz4_1 td{padding:0;width:var(--swui-calendar-day-width);height:var(--swui-calendar-day-height)}._timePicker_1w05d_1{overflow:hidden;width:180px}._timePickerColumn_1w05d_6{overflow-y:hidden;flex:1}._timePickerColumn_1w05d_6:hover{overflow-y:scroll}._travelDateCell_1dwjr_1{position:relative;--cell-height: var(--travel-calendar-cell-height, var(--cell-default-height));--cell-border-radius: var( --travel-calendar-cell-border-radius, var(--swui-max-border-radius) )}._travelDateCell_1dwjr_1._smaller_1dwjr_21{width:40px;--cell-default-height: 40px}._travelDateCell_1dwjr_1._small_1dwjr_21{width:44px;--cell-default-height: 44px}._travelDateCell_1dwjr_1._medium_1dwjr_31{width:48px;--cell-default-height: 48px}._travelDateCell_1dwjr_1._large_1dwjr_36{width:56px;--cell-default-height: 56px}._travelDateCell_1dwjr_1{height:calc(var(--cell-height) + var(--cell-row-gap, 4px));border-radius:var(--cell-border-radius)}._travelDateCell_1dwjr_1._clickable_1dwjr_45{cursor:pointer}._travelDateCell_1dwjr_1._disabled_1dwjr_49{cursor:not-allowed}._travelDateCell_1dwjr_1:focus{outline:none}._travelDateCell_1dwjr_1:focus-visible ._outline_1dwjr_58{outline:var(--swui-focus-outline);outline-width:var(--swui-focus-outline-width);background:transparent;position:absolute;border-radius:var(--cell-border-radius);top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2);left:0;right:0;z-index:10}._travelDateCell_1dwjr_1:focus-visible ._contentWrapper_1dwjr_71._contentWrapper_1dwjr_71._contentWrapper_1dwjr_71{border-color:transparent}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71{--travel-calendar-date-content-color: var(--swui-text-primary-color);pointer-events:none;border-radius:var(--cell-border-radius);border-width:2px;border-style:solid;border-color:transparent;background:transparent;position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;left:0;right:0;top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71 ._todayDot_1dwjr_115{width:4px;height:4px;border-radius:50%;background:var(--lhds-color-red-500)}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71 ._defaultTodayMarkerPosition_1dwjr_122{position:absolute;bottom:6px;left:50%;margin-left:-2px;display:flex}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionStart_1dwjr_131 ._todayDot_1dwjr_115{background:#fff}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionStart_1dwjr_131,._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionEnd_1dwjr_136{border-color:var(--selection-background-color)}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionStart_1dwjr_131{background:var(--selection-background-color);--travel-calendar-date-content-color: white}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._isSelectionEnd_1dwjr_136:not(._isSelectionStart_1dwjr_131){background:#fff}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._hover_1dwjr_149{border-color:var(--selection-background-color)}._travelDateCell_1dwjr_1 ._contentWrapper_1dwjr_71._hover_1dwjr_149._startSelected_1dwjr_152:not(._endSelected_1dwjr_152):not(._isSelectionStart_1dwjr_131){background:#fff;--travel-calendar-date-content-color: var(--swui-text-primary-color)}._travelDateCellBackground_ualq9_1{margin-top:calc(var(--cell-row-gap, 4px) / 2);margin-bottom:calc(var(--cell-row-gap, 4px) / 2);height:var(--cell-height)}._travelDateCellBackground_ualq9_1._smaller_ualq9_12{width:20px}._travelDateCellBackground_ualq9_1._small_ualq9_12{width:22px}._travelDateCellBackground_ualq9_1._medium_ualq9_20{width:24px}._travelDateCellBackground_ualq9_1._large_ualq9_24{width:28px}._travelCalendar_3zr00_1{--cell-row-gap: 4px;border-spacing:0;padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2);width:fit-content;-webkit-user-select:none;user-select:none;--selection-background-color: var( --travel-calendar-selection-background-color, var(--core-blue) );--selection-range-background-color: var( --travel-calendar-selection-range-background-color, var(--himmel) )}._travelCalendar_3zr00_1 th{padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelCalendar_3zr00_1 td{padding:0}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2:not(._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2._calendarVisible_1j7rp_6){opacity:0}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2:not(._travelDateInput_hmfbf_1 ._overlay_hmfbf_2._calendarVisible_hmfbf_6){opacity:0}
+._calendar_5yxz4_1{--swui-calendar-day-width: 48px;--swui-calendar-day-height: 48px;--swui-calendar-day-border-radius: var(--swui-max-border-radius);--swui-calendar-week-number-bg-color: transparent;--swui-calendar-week-number-text-color: var(--lhds-color-ui-500);--swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-wrapper-selected-border: var(--core-blue);--swui-calendar-wrapper-selected-background: var(--core-blue);--swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);--swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);--swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);--swui-calendar-wrapper-today-background: var(--lhds-color-ui-50);--swui-calendar-text-selected-color: #fff;--swui-calendar-text-disabled-color: var(--swui-text-disabled-color);--swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color)}._calendar_5yxz4_1 table{border-spacing:0 4px}._calendar_5yxz4_1 tr td:last-child{border-top-right-radius:var(--swui-calendar-day-border-radius);border-bottom-right-radius:var(--swui-calendar-day-border-radius)}._calendar_5yxz4_1._weekNumberVisible_5yxz4_41 tr td:nth-child(2),._calendar_5yxz4_1:not(._weekNumberVisible_5yxz4_41) tr td:first-child{border-top-left-radius:var(--swui-calendar-day-border-radius);border-bottom-left-radius:var(--swui-calendar-day-border-radius)}._calendar_5yxz4_1 td{padding:0;width:var(--swui-calendar-day-width);height:var(--swui-calendar-day-height)}._timePicker_1w05d_1{overflow:hidden;width:180px}._timePickerColumn_1w05d_6{overflow-y:hidden;flex:1}._timePickerColumn_1w05d_6:hover{overflow-y:scroll}._auto_tiwm6_12{container-type:inline-size;min-width:336px}._travelDateCell_1fmql_1{position:relative;--cell-height: var(--travel-calendar-cell-height, var(--cell-default-height));--cell-border-radius: var( --travel-calendar-cell-border-radius, var(--swui-max-border-radius) )}._travelDateCell_1fmql_1._smaller_1fmql_22{width:40px;--cell-default-height: 40px}._travelDateCell_1fmql_1._small_1fmql_22{width:44px;--cell-default-height: 44px}._travelDateCell_1fmql_1._medium_1fmql_32{width:48px;--cell-default-height: 48px}._travelDateCell_1fmql_1._large_1fmql_37{width:56px;--cell-default-height: 56px}._travelDateCell_1fmql_1{height:calc(var(--cell-height) + var(--cell-row-gap, 4px));border-radius:var(--cell-border-radius)}._travelDateCell_1fmql_1._auto_1fmql_51{--cell-default-height: 48px;display:flex;flex-direction:column;height:auto;padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelDateCell_1fmql_1._auto_1fmql_51 ._contentWrapper_1fmql_60{position:relative;inset:auto;flex:1;box-sizing:border-box;min-width:48px;min-height:var(--cell-height)}._travelDateCell_1fmql_1._clickable_1fmql_71{cursor:pointer}._travelDateCell_1fmql_1._disabled_1fmql_75{cursor:not-allowed}._travelDateCell_1fmql_1:focus{outline:none}._travelDateCell_1fmql_1:focus-visible ._outline_1fmql_84{outline:var(--swui-focus-outline);outline-width:var(--swui-focus-outline-width);background:transparent;position:absolute;border-radius:var(--cell-border-radius);top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2);left:0;right:0;z-index:10}._travelDateCell_1fmql_1:focus-visible ._contentWrapper_1fmql_60._contentWrapper_1fmql_60._contentWrapper_1fmql_60{border-color:transparent}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60{--travel-calendar-date-content-color: var(--swui-text-primary-color);pointer-events:none;border-radius:var(--cell-border-radius);border-width:2px;border-style:solid;border-color:transparent;background:transparent;position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;left:0;right:0;top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60 ._todayDot_1fmql_141{width:4px;height:4px;border-radius:50%;background:var(--lhds-color-red-500)}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60 ._defaultTodayMarkerPosition_1fmql_148{position:absolute;bottom:6px;left:50%;margin-left:-2px;display:flex}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionStart_1fmql_157 ._todayDot_1fmql_141{background:#fff}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionStart_1fmql_157,._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionEnd_1fmql_162{border-color:var(--selection-background-color)}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionStart_1fmql_157{background:var(--selection-background-color);--travel-calendar-date-content-color: white}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._isSelectionEnd_1fmql_162:not(._isSelectionStart_1fmql_157){background:#fff}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._hover_1fmql_175{border-color:var(--selection-background-color)}._travelDateCell_1fmql_1 ._contentWrapper_1fmql_60._hover_1fmql_175._startSelected_1fmql_178:not(._endSelected_1fmql_178):not(._isSelectionStart_1fmql_157){background:#fff;--travel-calendar-date-content-color: var(--swui-text-primary-color)}._travelDateCellBackground_3v66m_1{position:absolute;top:calc(var(--cell-row-gap, 4px) / 2);bottom:calc(var(--cell-row-gap, 4px) / 2);left:0;right:0;display:flex}._travelDateCellBackground_3v66m_1>*{flex:1}._travelCalendar_1h0ot_1{--cell-row-gap: 4px;border-spacing:0;padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2);width:fit-content;-webkit-user-select:none;user-select:none;--selection-background-color: var( --travel-calendar-selection-background-color, var(--core-blue) );--selection-range-background-color: var( --travel-calendar-selection-range-background-color, var(--himmel) )}._travelCalendar_1h0ot_1 th{padding-top:calc(var(--cell-row-gap, 4px) / 2);padding-bottom:calc(var(--cell-row-gap, 4px) / 2)}._travelCalendar_1h0ot_1 td{padding:0}._travelCalendar_1h0ot_1._auto_1h0ot_51{display:block}._travelCalendar_1h0ot_1._auto_1h0ot_51 tbody{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto;grid-auto-rows:1fr}._travelCalendar_1h0ot_1._auto_1h0ot_51 tr{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2:not(._travelDateRangeInput_1j7rp_1 ._overlay_1j7rp_2._calendarVisible_1j7rp_6){opacity:0}._travelCalendarOrMonthPicker_o89ob_2{display:grid}._travelCalendarOrMonthPicker_o89ob_2>*{grid-area:1 / 1}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2{transition:opacity var(--swui-animation-time-fast) ease-in-out;opacity:1}._travelDateInput_hmfbf_1 ._overlay_hmfbf_2:not(._travelDateInput_hmfbf_1 ._overlay_hmfbf_2._calendarVisible_hmfbf_6){opacity:0}