@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-date-range-picker-content/bh-date-range-picker-content.css

@@ -0,0 +1,275 @@
+/**
+ * BellhopOS Stencil Global Styles
+ *
+ * This file imports all design tokens and provides global CSS custom properties
+ * that are available to all Stencil components.
+ */
+
+/* ==========================================================================
+   FONT IMPORTS
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
+
+/* ==========================================================================
+   DESIGN TOKENS
+   ========================================================================== */
+
+:root {
+  /* -------------------------------------------------------------------------
+     COLORS - Primary
+     ------------------------------------------------------------------------- */
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%);
+  --color-transparent: hsla(0, 0%, 100%, 0);
+
+  /* Neutral */
+  --color-neutral-25: hsl(240, 20%, 99%);
+  --color-neutral-50: hsl(240, 20%, 98%);
+  --color-neutral-100: hsl(240, 17%, 95%);
+  --color-neutral-200: hsl(227, 25%, 89%);
+  --color-neutral-300: hsl(224, 24%, 78%);
+  --color-neutral-400: hsl(226, 24%, 59%);
+  --color-neutral-500: hsl(226, 24%, 48%);
+  --color-neutral-600: hsl(226, 24%, 38%);
+  --color-neutral-700: hsl(226, 24%, 25%);
+  --color-neutral-800: hsl(233, 33%, 10%);
+  --color-neutral-900: hsl(231, 32%, 8%);
+  --color-neutral-950: hsl(231, 32%, 8%);
+
+  /* Brand */
+  --color-brand-25: hsl(220, 82%, 98%);
+  --color-brand-50: hsl(222, 87%, 97%);
+  --color-brand-100: hsl(221, 94%, 94%);
+  --color-brand-200: hsl(221, 92%, 86%);
+  --color-brand-300: hsl(224, 95%, 77%);
+  --color-brand-400: hsl(224, 94%, 72%);
+  --color-brand-500: hsl(230, 67%, 58%);
+  --color-brand-600: hsl(230, 69%, 48%);
+  --color-brand-700: hsl(230, 75%, 34%);
+  --color-brand-800: hsl(243, 86%, 44%);
+  --color-brand-900: hsl(237, 69%, 24%);
+  --color-brand-950: hsl(237, 61%, 20%);
+
+  /* Error */
+  --color-error-25: hsl(12, 100%, 99%);
+  --color-error-50: hsl(5, 86%, 97%);
+  --color-error-100: hsl(4, 93%, 94%);
+  --color-error-200: hsl(3, 96%, 89%);
+  --color-error-300: hsl(4, 96%, 80%);
+  --color-error-400: hsl(4, 92%, 69%);
+  --color-error-500: hsl(4, 86%, 58%);
+  --color-error-600: hsl(4, 74%, 49%);
+  --color-error-700: hsl(4, 76%, 40%);
+  --color-error-800: hsl(4, 72%, 33%);
+  --color-error-900: hsl(8, 65%, 29%);
+  --color-error-950: hsl(8, 75%, 19%);
+
+  /* Warning */
+  --color-warning-25: hsl(42, 100%, 98%);
+  --color-warning-50: hsl(45, 100%, 96%);
+  --color-warning-100: hsl(45, 96%, 89%);
+  --color-warning-200: hsl(44, 98%, 77%);
+  --color-warning-300: hsl(42, 99%, 65%);
+  --color-warning-400: hsl(39, 98%, 56%);
+  --color-warning-500: hsl(34, 94%, 50%);
+  --color-warning-600: hsl(28, 97%, 44%);
+  --color-warning-700: hsl(22, 92%, 37%);
+  --color-warning-800: hsl(19, 84%, 31%);
+  --color-warning-900: hsl(18, 79%, 27%);
+  --color-warning-950: hsl(17, 79%, 17%);
+
+  /* Success */
+  --color-success-25: hsl(142, 80%, 98%);
+  --color-success-50: hsl(145, 81%, 96%);
+  --color-success-100: hsl(140, 80%, 90%);
+  --color-success-200: hsl(144, 78%, 80%);
+  --color-success-300: hsl(148, 63%, 67%);
+  --color-success-400: hsl(150, 57%, 54%);
+  --color-success-500: hsl(152, 77%, 39%);
+  --color-success-600: hsl(153, 91%, 30%);
+  --color-success-700: hsl(155, 90%, 24%);
+  --color-success-800: hsl(155, 84%, 20%);
+  --color-success-900: hsl(156, 83%, 16%);
+  --color-success-950: hsl(157, 82%, 11%);
+
+  /* -------------------------------------------------------------------------
+     TYPOGRAPHY
+     ------------------------------------------------------------------------- */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* Text Sizes */
+  --text-xl-size: 1.25rem;
+  --text-lg-size: 1.125rem;
+  --text-md-size: 1rem;
+  --text-sm-size: 0.875rem;
+  --text-xs-size: 0.75rem;
+
+  /* Line Heights */
+  --text-xl-line: 1.875rem;
+  --text-lg-line: 1.75rem;
+  --text-md-line: 1.5rem;
+  --text-sm-line: 1.25rem;
+  --text-xs-line: 1.125rem;
+
+  /* -------------------------------------------------------------------------
+     SPACING
+     ------------------------------------------------------------------------- */
+  --spacing-none: 0rem;
+  --spacing-xxs: 0.125rem;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.375rem;
+  --spacing-md: 0.5rem;
+  --spacing-lg: 0.75rem;
+  --spacing-xl: 1rem;
+  --spacing-2xl: 1.25rem;
+  --spacing-3xl: 1.5rem;
+  --spacing-4xl: 2rem;
+  --spacing-5xl: 2.5rem;
+  --spacing-6xl: 3rem;
+
+  /* -------------------------------------------------------------------------
+     RADIUS
+     ------------------------------------------------------------------------- */
+  --radius-none: 0rem;
+  --radius-xxs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.25rem;
+  --radius-4xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* -------------------------------------------------------------------------
+     SHADOWS
+     ------------------------------------------------------------------------- */
+  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
+    0px 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+
+  /* -------------------------------------------------------------------------
+     ICON COMPENSATION (for buttons with icons)
+     ------------------------------------------------------------------------- */
+  --icon-compensation-xs-btn: calc(var(--spacing-lg) - var(--spacing-xs));
+  --icon-compensation-sm-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-md-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-lg-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+}
+
+/* ==========================================================================
+   BASE STYLES
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Material Symbols base styling */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+
+:host {
+  display: block;
+}
+
+/* Main container */
+.date-range-picker-content {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-inter);
+  width: fit-content;
+}
+
+/* Date pickers container - side by side layout */
+.date-pickers {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: relative;
+  gap: var(--spacing-sm);
+}
+
+/* Left picker */
+.left-picker {
+  display: flex;
+  flex-direction: column;
+  width: 296px;
+}
+
+/* Right picker */
+.right-picker {
+  display: flex;
+  flex-direction: column;
+  width: 296px;
+}
+
+/* Vertical divider between calendars */
+.date-pickers::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 1px;
+  height: 100%;
+  background: var(--color-neutral-200);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .date-range-picker-content {
+    width: 320px;
+  }
+
+  .date-pickers {
+    flex-direction: column;
+  }
+
+  .left-picker,
+  .right-picker {
+    width: 100%;
+  }
+
+  /* Hide vertical divider on mobile */
+  .date-pickers::after {
+    display: none;
+  }
+}

package/collection/components/bh-date-range-picker-content/bh-date-range-picker-content.js

@@ -0,0 +1,338 @@
+import { h, Host } from "@stencil/core";
+export class BhDateRangePickerContent {
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled dates
+     */
+    disabledDates = [];
+    /**
+     * Whether to show days from other months
+     */
+    showOtherMonthDays = true;
+    /**
+     * Currently selected value
+     */
+    value;
+    selectedRange = null;
+    leftMonth = new Date().getMonth();
+    leftYear = new Date().getFullYear();
+    rightMonth = (new Date().getMonth() + 1) % 12;
+    rightYear = new Date().getMonth() === 11 ? new Date().getFullYear() + 1 : new Date().getFullYear();
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a date range is selected
+     */
+    bhDateRangeSelect;
+    handleValueChange(newValue) {
+        if (newValue !== undefined) {
+            this.selectedRange = { ...newValue };
+        }
+        else {
+            this.selectedRange = null;
+        }
+    }
+    componentWillLoad() {
+        const today = new Date();
+        const currentMonth = today.getMonth();
+        const currentYear = today.getFullYear();
+        this.leftMonth = currentMonth;
+        this.leftYear = currentYear;
+        const nextMonthYear = this.getNextMonth(currentMonth, currentYear);
+        this.rightMonth = nextMonthYear.month;
+        this.rightYear = nextMonthYear.year;
+        if (this.value) {
+            this.selectedRange = this.value;
+        }
+    }
+    getNextMonth(month, year) {
+        const nextMonth = month + 1;
+        if (nextMonth > 11) {
+            return { month: 0, year: year + 1 };
+        }
+        return { month: nextMonth, year };
+    }
+    getPreviousMonth(month, year) {
+        const prevMonth = month - 1;
+        if (prevMonth < 0) {
+            return { month: 11, year: year - 1 };
+        }
+        return { month: prevMonth, year };
+    }
+    handleLeftDateSelect = (event) => {
+        this.handleDateSelect(event.detail);
+    };
+    handleRightDateSelect = (event) => {
+        this.handleDateSelect(event.detail);
+    };
+    handleDateSelect(date) {
+        if (!date)
+            return;
+        let newRange;
+        if (!this.selectedRange?.startDate || (this.selectedRange.startDate && this.selectedRange.endDate)) {
+            // Start new range
+            newRange = { startDate: date, endDate: null };
+        }
+        else if (this.selectedRange.startDate && !this.selectedRange.endDate) {
+            // Complete the range
+            const startDate = this.selectedRange.startDate;
+            const isAfterStart = date.year > startDate.year ||
+                (date.year === startDate.year && date.month > startDate.month) ||
+                (date.year === startDate.year && date.month === startDate.month && date.day > startDate.day);
+            if (isAfterStart) {
+                newRange = { startDate, endDate: date };
+            }
+            else {
+                newRange = { startDate: date, endDate: startDate };
+            }
+        }
+        else {
+            newRange = { startDate: date, endDate: null };
+        }
+        this.selectedRange = newRange;
+        this.bhChange.emit(newRange);
+        this.bhDateRangeSelect.emit(newRange);
+    }
+    handleLeftMonthYearChange = (event) => {
+        const { month, year } = event.detail;
+        this.leftMonth = month;
+        this.leftYear = year;
+        // Ensure right calendar is always at least one month ahead
+        if (year > this.rightYear || (year === this.rightYear && month >= this.rightMonth)) {
+            const nextMonthYear = this.getNextMonth(month, year);
+            this.rightMonth = nextMonthYear.month;
+            this.rightYear = nextMonthYear.year;
+        }
+    };
+    handleRightMonthYearChange = (event) => {
+        const { month, year } = event.detail;
+        this.rightMonth = month;
+        this.rightYear = year;
+        // Ensure left calendar is always at least one month behind
+        if (year < this.leftYear || (year === this.leftYear && month <= this.leftMonth)) {
+            const prevMonthYear = this.getPreviousMonth(month, year);
+            this.leftMonth = prevMonthYear.month;
+            this.leftYear = prevMonthYear.year;
+        }
+    };
+    render() {
+        return (h(Host, { key: '401af65573fa4fe62300d46ddcb877e29691d36b' }, h("div", { key: 'b11405e3d537549749e779277757f16ab01638d2', class: "date-range-picker-content" }, h("div", { key: '0b7fe35d6ea462f0dfddfd70d22f8e900b44108a', class: "date-pickers" }, h("div", { key: '94c8eb0f36cf81a8ff5048a6b7156a8138e63458', class: "left-picker" }, h("bh-date-picker-content", { key: '0258925d371fa05a8a37238a42f490d9b0b1e555', minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledDates: this.disabledDates, showOtherMonthDays: this.showOtherMonthDays, displayMonth: this.leftMonth, displayYear: this.leftYear, rangeStart: this.selectedRange?.startDate ?? undefined, rangeEnd: this.selectedRange?.endDate ?? undefined, onBhChange: this.handleLeftDateSelect, onBhMonthYearChange: this.handleLeftMonthYearChange })), h("div", { key: '6fea01d43dc9de3760f6c01cc8db6b6f0fb63bae', class: "right-picker" }, h("bh-date-picker-content", { key: '6af5a344d985db40b17a6a54b3164f90082dd36b', minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledDates: this.disabledDates, showOtherMonthDays: this.showOtherMonthDays, displayMonth: this.rightMonth, displayYear: this.rightYear, rangeStart: this.selectedRange?.startDate ?? undefined, rangeEnd: this.selectedRange?.endDate ?? undefined, onBhChange: this.handleRightDateSelect, onBhMonthYearChange: this.handleRightMonthYearChange }))))));
+    }
+    static get is() { return "bh-date-range-picker-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-date-range-picker-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-date-range-picker-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "minYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum year in the picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-year",
+                "defaultValue": "1998"
+            },
+            "maxYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum year in the picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-year",
+                "defaultValue": "2060"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the picker is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledDate[]",
+                    "resolved": "DisabledDate[]",
+                    "references": {
+                        "DisabledDate": {
+                            "location": "import",
+                            "path": "../bh-date-picker-content/bh-date-picker-content",
+                            "id": "src/components/bh-date-picker-content/bh-date-picker-content.tsx::DisabledDate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of disabled dates"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "showOtherMonthDays": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show days from other months"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-other-month-days",
+                "defaultValue": "true"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectedDateRange",
+                    "resolved": "SelectedDateRange | undefined",
+                    "references": {
+                        "SelectedDateRange": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx",
+                            "id": "src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx::SelectedDateRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedRange": {},
+            "leftMonth": {},
+            "leftYear": {},
+            "rightMonth": {},
+            "rightYear": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when value changes"
+                },
+                "complexType": {
+                    "original": "SelectedDateRange | null",
+                    "resolved": "SelectedDateRange | null",
+                    "references": {
+                        "SelectedDateRange": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx",
+                            "id": "src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx::SelectedDateRange"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhDateRangeSelect",
+                "name": "bhDateRangeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a date range is selected"
+                },
+                "complexType": {
+                    "original": "SelectedDateRange | null",
+                    "resolved": "SelectedDateRange | null",
+                    "references": {
+                        "SelectedDateRange": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx",
+                            "id": "src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx::SelectedDateRange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=bh-date-range-picker-content.js.map

package/collection/components/bh-date-range-picker-content/bh-date-range-picker-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-date-range-picker-content.js","sourceRoot":"","sources":["../../../src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { SelectedDate, DisabledDate } from '../bh-date-picker-content/bh-date-picker-content';\n\nexport interface SelectedDateRange {\n  startDate: SelectedDate | null;\n  endDate: SelectedDate | null;\n}\n\n@Component({\n  tag: 'bh-date-range-picker-content',\n  styleUrl: 'bh-date-range-picker-content.css',\n  shadow: true,\n})\nexport class BhDateRangePickerContent {\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled dates\n   */\n  @Prop() disabledDates: DisabledDate[] = [];\n\n  /**\n   * Whether to show days from other months\n   */\n  @Prop() showOtherMonthDays: boolean = true;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: SelectedDateRange;\n\n  @State() selectedRange: SelectedDateRange | null = null;\n  @State() leftMonth: number = new Date().getMonth();\n  @State() leftYear: number = new Date().getFullYear();\n  @State() rightMonth: number = (new Date().getMonth() + 1) % 12;\n  @State() rightYear: number = new Date().getMonth() === 11 ? new Date().getFullYear() + 1 : new Date().getFullYear();\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event({ bubbles: true, composed: true }) bhChange!: EventEmitter<SelectedDateRange | null>;\n\n  /**\n   * Event emitted when a date range is selected\n   */\n  @Event({ bubbles: true, composed: true }) bhDateRangeSelect!: EventEmitter<SelectedDateRange | null>;\n\n  @Watch('value')\n  handleValueChange(newValue: SelectedDateRange | undefined) {\n    if (newValue !== undefined) {\n      this.selectedRange = { ...newValue };\n    } else {\n      this.selectedRange = null;\n    }\n  }\n\n  componentWillLoad() {\n    const today = new Date();\n    const currentMonth = today.getMonth();\n    const currentYear = today.getFullYear();\n\n    this.leftMonth = currentMonth;\n    this.leftYear = currentYear;\n\n    const nextMonthYear = this.getNextMonth(currentMonth, currentYear);\n    this.rightMonth = nextMonthYear.month;\n    this.rightYear = nextMonthYear.year;\n\n    if (this.value) {\n      this.selectedRange = this.value;\n    }\n  }\n\n  private getNextMonth(month: number, year: number): { month: number; year: number } {\n    const nextMonth = month + 1;\n    if (nextMonth > 11) {\n      return { month: 0, year: year + 1 };\n    }\n    return { month: nextMonth, year };\n  }\n\n  private getPreviousMonth(month: number, year: number): { month: number; year: number } {\n    const prevMonth = month - 1;\n    if (prevMonth < 0) {\n      return { month: 11, year: year - 1 };\n    }\n    return { month: prevMonth, year };\n  }\n\n  private handleLeftDateSelect = (event: CustomEvent<SelectedDate | null>) => {\n    this.handleDateSelect(event.detail);\n  };\n\n  private handleRightDateSelect = (event: CustomEvent<SelectedDate | null>) => {\n    this.handleDateSelect(event.detail);\n  };\n\n  private handleDateSelect(date: SelectedDate | null) {\n    if (!date) return;\n\n    let newRange: SelectedDateRange;\n\n    if (!this.selectedRange?.startDate || (this.selectedRange.startDate && this.selectedRange.endDate)) {\n      // Start new range\n      newRange = { startDate: date, endDate: null };\n    } else if (this.selectedRange.startDate && !this.selectedRange.endDate) {\n      // Complete the range\n      const startDate = this.selectedRange.startDate;\n      const isAfterStart = date.year > startDate.year ||\n        (date.year === startDate.year && date.month > startDate.month) ||\n        (date.year === startDate.year && date.month === startDate.month && date.day > startDate.day);\n\n      if (isAfterStart) {\n        newRange = { startDate, endDate: date };\n      } else {\n        newRange = { startDate: date, endDate: startDate };\n      }\n    } else {\n      newRange = { startDate: date, endDate: null };\n    }\n\n    this.selectedRange = newRange;\n    this.bhChange.emit(newRange);\n    this.bhDateRangeSelect.emit(newRange);\n  }\n\n  private handleLeftMonthYearChange = (event: CustomEvent<{ month: number; year: number }>) => {\n    const { month, year } = event.detail;\n    this.leftMonth = month;\n    this.leftYear = year;\n\n    // Ensure right calendar is always at least one month ahead\n    if (year > this.rightYear || (year === this.rightYear && month >= this.rightMonth)) {\n      const nextMonthYear = this.getNextMonth(month, year);\n      this.rightMonth = nextMonthYear.month;\n      this.rightYear = nextMonthYear.year;\n    }\n  };\n\n  private handleRightMonthYearChange = (event: CustomEvent<{ month: number; year: number }>) => {\n    const { month, year } = event.detail;\n    this.rightMonth = month;\n    this.rightYear = year;\n\n    // Ensure left calendar is always at least one month behind\n    if (year < this.leftYear || (year === this.leftYear && month <= this.leftMonth)) {\n      const prevMonthYear = this.getPreviousMonth(month, year);\n      this.leftMonth = prevMonthYear.month;\n      this.leftYear = prevMonthYear.year;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"date-range-picker-content\">\n          <div class=\"date-pickers\">\n            <div class=\"left-picker\">\n              <bh-date-picker-content\n                minYear={this.minYear}\n                maxYear={this.maxYear}\n                disabled={this.disabled}\n                disabledDates={this.disabledDates}\n                showOtherMonthDays={this.showOtherMonthDays}\n                displayMonth={this.leftMonth}\n                displayYear={this.leftYear}\n                rangeStart={this.selectedRange?.startDate ?? undefined}\n                rangeEnd={this.selectedRange?.endDate ?? undefined}\n                onBhChange={this.handleLeftDateSelect}\n                onBhMonthYearChange={this.handleLeftMonthYearChange}\n              ></bh-date-picker-content>\n            </div>\n            <div class=\"right-picker\">\n              <bh-date-picker-content\n                minYear={this.minYear}\n                maxYear={this.maxYear}\n                disabled={this.disabled}\n                disabledDates={this.disabledDates}\n                showOtherMonthDays={this.showOtherMonthDays}\n                displayMonth={this.rightMonth}\n                displayYear={this.rightYear}\n                rangeStart={this.selectedRange?.startDate ?? undefined}\n                rangeEnd={this.selectedRange?.endDate ?? undefined}\n                onBhChange={this.handleRightDateSelect}\n                onBhMonthYearChange={this.handleRightMonthYearChange}\n              ></bh-date-picker-content>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}