@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/esm/bh-date-picker-content.entry.js

@@ -0,0 +1,368 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.js';
+
+const bhDatePickerContentCss = "@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'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--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%);--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%);--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%);--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%);--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%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--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-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-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;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--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))}*,*::before,*::after{box-sizing:border-box}.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}.date-picker-content{width:100%;font-family:var(--font-inter);display:flex;flex-direction:column}.month-navigation{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md)}.month-picker-inline{flex:1;overflow:hidden;max-height:270px;animation:fadeIn 150ms ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.month-picker-inline.animate-fade-out{animation:fadeOut 150ms ease-out}@keyframes fadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.calendar-grid{padding:0 var(--spacing-md) var(--spacing-md);flex:1}.day-names{display:grid;grid-template-columns:repeat(7, 1fr);width:280px;gap:0;margin-bottom:var(--spacing-sm)}.day-name{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-500)}.date-cells{display:grid;grid-template-columns:repeat(7, 1fr);width:280px;row-gap:var(--spacing-xs, 4px);column-gap:0;justify-items:center;align-items:center}.calendar-cell{width:40px;height:40px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:var(--radius-full);font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--text-sm-line);cursor:pointer;transition:all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease)}.calendar-cell.other-month .date-number{color:var(--color-neutral-400)}.calendar-cell.other-month.disabled .date-number{color:var(--color-neutral-300)}.calendar-cell.selectable .date-number{color:var(--color-neutral-500)}.calendar-cell.selectable:hover{background:var(--color-neutral-50)}.calendar-cell.selectable:hover .date-number{color:var(--color-neutral-800)}.calendar-cell.today{border:2px solid var(--color-brand-600)}.calendar-cell.today .date-number{color:var(--color-neutral-500)}.calendar-cell.today:hover{background:var(--color-brand-100)}.calendar-cell.today:hover .date-number{color:var(--color-brand-600)}.calendar-cell.selected{background:var(--color-brand-600)}.calendar-cell.selected .date-number{color:var(--color-white);font-weight:var(--weight-semibold)}.calendar-cell.selected:hover{background:var(--color-brand-800)}.calendar-cell.selected:hover .date-number{color:var(--color-white);font-weight:var(--weight-semibold)}.calendar-cell.in-range{background:var(--color-neutral-100);border-radius:0;position:relative}.calendar-cell.in-range .date-number{color:var(--color-neutral-800);font-weight:var(--weight-medium)}.calendar-cell.in-range:hover{background:var(--color-neutral-100)}.calendar-cell.in-range:hover .date-number{background:var(--color-neutral-200);border-radius:var(--radius-full);width:40px;height:40px;display:flex;align-items:center;justify-content:center}.calendar-cell.range-start,.calendar-cell.range-end{position:relative}.calendar-cell.range-start .date-number,.calendar-cell.range-end .date-number{background:var(--color-brand-600);color:var(--color-white);font-weight:var(--weight-semibold);border-radius:var(--radius-full);width:40px;height:40px;display:flex;align-items:center;justify-content:center}.calendar-cell.range-start:hover .date-number,.calendar-cell.range-start.selectable:hover .date-number,.calendar-cell.range-end:hover .date-number,.calendar-cell.range-end.selectable:hover .date-number{background:var(--color-brand-800);color:var(--color-white)}.calendar-cell.range-start{background:transparent}.calendar-cell.range-start::after{content:'';position:absolute;left:50%;top:0;width:50%;height:100%;background:var(--color-neutral-100);border-radius:var(--radius-full) 0 0 var(--radius-full);z-index:0}.calendar-cell.range-start:hover::after,.calendar-cell.range-start.selectable:hover::after{background:var(--color-neutral-200)}.calendar-cell.range-end{background:transparent}.calendar-cell.range-end::after{content:'';position:absolute;left:0;top:0;width:50%;height:100%;background:var(--color-neutral-100);border-radius:0 var(--radius-full) var(--radius-full) 0;z-index:0}.calendar-cell.range-end:hover::after,.calendar-cell.range-end.selectable:hover::after{background:var(--color-neutral-200)}.calendar-cell.range-start.range-end{background:transparent}.calendar-cell.range-start.range-end::after{display:none}.calendar-cell.range-start.range-end .date-number{border-radius:var(--radius-full)}.calendar-cell.range-start:not(.in-range):not(:has(~.range-end))::after{display:none}.calendar-cell.in-range:nth-child(7n+1){border-top-left-radius:var(--radius-full);border-bottom-left-radius:var(--radius-full)}.calendar-cell.in-range:nth-child(7n){border-top-right-radius:var(--radius-full);border-bottom-right-radius:var(--radius-full)}.calendar-cell.range-start:nth-child(7n)::after{display:none}.calendar-cell.range-end:nth-child(7n+1)::after{display:none}.calendar-cell.today.in-range{background:var(--color-brand-50)}.calendar-cell.today.in-range .date-number{color:var(--color-brand-600);font-weight:var(--weight-medium);background:transparent;border:2px solid var(--color-brand-600)}.calendar-cell.today.in-range:hover{background:var(--color-brand-100)}.calendar-cell.today.range-start .date-number,.calendar-cell.today.range-end .date-number{background:var(--color-brand-600);color:var(--color-white);border:none}.calendar-cell.disabled{cursor:not-allowed}.calendar-cell.disabled .date-number{color:var(--color-neutral-300)}.date-number{position:relative;z-index:1}";
+
+const BhDatePickerContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhDateSelect = createEvent(this, "bhDateSelect");
+        this.bhMonthChange = createEvent(this, "bhMonthChange");
+        this.bhMonthYearChange = createEvent(this, "bhMonthYearChange");
+    }
+    /**
+     * 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 = [];
+    /**
+     * Initial month to display (0-11)
+     */
+    initialMonth;
+    /**
+     * Initial year to display
+     */
+    initialYear;
+    /**
+     * Display month (for external control, 0-11)
+     */
+    displayMonth;
+    /**
+     * Display year (for external control)
+     */
+    displayYear;
+    /**
+     * Range start date (for date range picker)
+     */
+    rangeStart;
+    /**
+     * Range end date (for date range picker)
+     */
+    rangeEnd;
+    /**
+     * Currently selected value
+     */
+    value;
+    /**
+     * Whether to show days from other months
+     */
+    showOtherMonthDays = true;
+    selectedDate = null;
+    currentMonth = new Date().getMonth();
+    currentYear = new Date().getFullYear();
+    isMonthDropdownOpen = false;
+    isMonthDropdownClosing = false;
+    today = new Date();
+    monthNames = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December',
+    ];
+    dayNames = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a date is selected
+     */
+    bhDateSelect;
+    /**
+     * Event emitted when month changes
+     */
+    bhMonthChange;
+    /**
+     * Event emitted when month/year changes
+     */
+    bhMonthYearChange;
+    handleValueChange(newValue) {
+        if (newValue) {
+            this.selectedDate = newValue;
+            if (this.displayMonth === undefined && this.displayYear === undefined) {
+                this.currentMonth = newValue.month;
+                this.currentYear = newValue.year;
+            }
+        }
+        else {
+            this.selectedDate = null;
+        }
+    }
+    handleDisplayMonthChange(newValue) {
+        if (newValue !== undefined) {
+            this.currentMonth = newValue;
+        }
+    }
+    handleDisplayYearChange(newValue) {
+        if (newValue !== undefined) {
+            this.currentYear = newValue;
+        }
+    }
+    componentWillLoad() {
+        // Initialize month/year
+        if (this.displayMonth !== undefined) {
+            this.currentMonth = this.displayMonth;
+        }
+        else if (this.initialMonth !== undefined) {
+            this.currentMonth = this.initialMonth;
+        }
+        else {
+            this.currentMonth = this.today.getMonth();
+        }
+        if (this.displayYear !== undefined) {
+            this.currentYear = this.displayYear;
+        }
+        else if (this.initialYear !== undefined) {
+            this.currentYear = this.initialYear;
+        }
+        else {
+            this.currentYear = this.today.getFullYear();
+        }
+        // Initialize selected date
+        if (this.value) {
+            this.selectedDate = this.value;
+        }
+    }
+    get isInRangeMode() {
+        return this.rangeStart !== undefined || this.rangeEnd !== undefined;
+    }
+    get calendarCells() {
+        const cells = [];
+        const firstDay = new Date(this.currentYear, this.currentMonth, 1);
+        const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
+        // Get the day of the week for the first day (0 = Sunday, 6 = Saturday)
+        let firstDayOfWeek = firstDay.getDay();
+        // Convert to Monday start (0 = Monday, 6 = Sunday)
+        firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
+        // Add cells for days before the first of the month
+        if (this.showOtherMonthDays) {
+            for (let i = 0; i < firstDayOfWeek; i++) {
+                const prevMonthLastDay = new Date(this.currentYear, this.currentMonth, -i);
+                cells.unshift(this.createCell(prevMonthLastDay, false));
+            }
+        }
+        else {
+            for (let i = 0; i < firstDayOfWeek; i++) {
+                cells.unshift({
+                    day: 0,
+                    isCurrentMonth: false,
+                    isToday: false,
+                    isSelected: false,
+                    isDisabled: true,
+                    isRangeStart: false,
+                    isRangeEnd: false,
+                    isInRange: false,
+                    date: new Date(this.currentYear, this.currentMonth, -i),
+                });
+            }
+        }
+        // Add cells for current month
+        for (let day = 1; day <= lastDay.getDate(); day++) {
+            const date = new Date(this.currentYear, this.currentMonth, day);
+            cells.push(this.createCell(date, true));
+        }
+        // Add next month days to fill the grid
+        if (this.showOtherMonthDays) {
+            const totalCells = cells.length;
+            const remainingCells = 42 - totalCells;
+            for (let day = 1; day <= remainingCells; day++) {
+                const nextMonthDay = new Date(this.currentYear, this.currentMonth + 1, day);
+                cells.push(this.createCell(nextMonthDay, false));
+                if (cells.length % 7 === 0)
+                    break;
+            }
+        }
+        return cells;
+    }
+    createCell(date, isCurrentMonth) {
+        const isRangeStart = this.isDateRangeStart(date);
+        const isRangeEnd = this.isDateRangeEnd(date);
+        const isInRange = this.isDateInRange(date);
+        return {
+            day: date.getDate(),
+            isCurrentMonth,
+            isToday: this.isSameDay(date, this.today),
+            isSelected: this.isDateSelected(date),
+            isDisabled: !isCurrentMonth || this.isDateDisabled(date),
+            isRangeStart,
+            isRangeEnd,
+            isInRange,
+            date,
+        };
+    }
+    isSameDay(date1, date2) {
+        return (date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate());
+    }
+    isDateDisabled(date) {
+        if (!this.disabledDates || !Array.isArray(this.disabledDates)) {
+            return false;
+        }
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const day = date.getDate();
+        return this.disabledDates.some(disabled => disabled.year === year && disabled.month === month && disabled.day === day);
+    }
+    isDateSelected(date) {
+        if (this.isInRangeMode)
+            return false;
+        if (!this.selectedDate)
+            return false;
+        return (date.getFullYear() === this.selectedDate.year &&
+            date.getMonth() === this.selectedDate.month &&
+            date.getDate() === this.selectedDate.day);
+    }
+    isDateRangeStart(date) {
+        if (!this.rangeStart)
+            return false;
+        return (date.getFullYear() === this.rangeStart.year &&
+            date.getMonth() === this.rangeStart.month &&
+            date.getDate() === this.rangeStart.day);
+    }
+    isDateRangeEnd(date) {
+        if (!this.rangeEnd)
+            return false;
+        return (date.getFullYear() === this.rangeEnd.year &&
+            date.getMonth() === this.rangeEnd.month &&
+            date.getDate() === this.rangeEnd.day);
+    }
+    isDateInRange(date) {
+        if (!this.rangeStart || !this.rangeEnd)
+            return false;
+        const dateTime = date.getTime();
+        const startTime = new Date(this.rangeStart.year, this.rangeStart.month, this.rangeStart.day).getTime();
+        const endTime = new Date(this.rangeEnd.year, this.rangeEnd.month, this.rangeEnd.day).getTime();
+        return dateTime > startTime && dateTime < endTime;
+    }
+    handleCellClick(cell) {
+        if (cell.isDisabled || this.disabled || !cell.isCurrentMonth) {
+            return;
+        }
+        const newSelectedDate = {
+            year: cell.date.getFullYear(),
+            month: cell.date.getMonth(),
+            day: cell.date.getDate(),
+        };
+        // If we're in range mode, let the parent handle it
+        if (this.isInRangeMode) {
+            this.bhChange.emit(newSelectedDate);
+            this.bhDateSelect.emit(newSelectedDate);
+            return;
+        }
+        // Toggle selection
+        const isCurrentlySelected = this.selectedDate &&
+            this.selectedDate.year === newSelectedDate.year &&
+            this.selectedDate.month === newSelectedDate.month &&
+            this.selectedDate.day === newSelectedDate.day;
+        if (isCurrentlySelected) {
+            this.selectedDate = null;
+            this.bhChange.emit(null);
+            this.bhDateSelect.emit(null);
+        }
+        else {
+            this.selectedDate = newSelectedDate;
+            this.bhChange.emit(newSelectedDate);
+            this.bhDateSelect.emit(newSelectedDate);
+        }
+    }
+    handleMonthDropdownToggle = () => {
+        if (this.isMonthDropdownOpen) {
+            this.closeMonthDropdown();
+        }
+        else {
+            this.isMonthDropdownOpen = true;
+        }
+    };
+    closeMonthDropdown() {
+        this.isMonthDropdownClosing = true;
+        setTimeout(() => {
+            this.isMonthDropdownOpen = false;
+            this.isMonthDropdownClosing = false;
+        }, 150);
+    }
+    handleMonthYearSelect = (event) => {
+        this.closeMonthDropdown();
+        setTimeout(() => {
+            const monthYear = event.detail;
+            this.currentMonth = monthYear.month;
+            this.currentYear = monthYear.year;
+            this.bhMonthChange.emit({ month: monthYear.month, year: monthYear.year });
+            this.bhMonthYearChange.emit({ month: monthYear.month, year: monthYear.year });
+        }, 100);
+    };
+    handlePreviousMonth = () => {
+        if (this.disabled)
+            return;
+        let newMonth = this.currentMonth - 1;
+        let newYear = this.currentYear;
+        if (newMonth < 0) {
+            newMonth = 11;
+            newYear = this.currentYear - 1;
+        }
+        if (newYear >= this.minYear) {
+            this.currentMonth = newMonth;
+            this.currentYear = newYear;
+            this.bhMonthChange.emit({ month: newMonth, year: newYear });
+            this.bhMonthYearChange.emit({ month: newMonth, year: newYear });
+        }
+    };
+    handleNextMonth = () => {
+        if (this.disabled)
+            return;
+        let newMonth = this.currentMonth + 1;
+        let newYear = this.currentYear;
+        if (newMonth > 11) {
+            newMonth = 0;
+            newYear = this.currentYear + 1;
+        }
+        if (newYear <= this.maxYear) {
+            this.currentMonth = newMonth;
+            this.currentYear = newYear;
+            this.bhMonthChange.emit({ month: newMonth, year: newYear });
+            this.bhMonthYearChange.emit({ month: newMonth, year: newYear });
+        }
+    };
+    getCellClass(cell) {
+        const classes = ['calendar-cell'];
+        if (!cell.isCurrentMonth)
+            classes.push('other-month');
+        if (cell.isToday)
+            classes.push('today');
+        if (cell.isRangeStart)
+            classes.push('range-start');
+        if (cell.isRangeEnd)
+            classes.push('range-end');
+        if (cell.isInRange)
+            classes.push('in-range');
+        if (cell.isSelected)
+            classes.push('selected');
+        if (cell.isDisabled)
+            classes.push('disabled');
+        else if (cell.isCurrentMonth)
+            classes.push('selectable');
+        return classes.join(' ');
+    }
+    render() {
+        const currentMonthYear = `${this.monthNames[this.currentMonth]} ${this.currentYear}`;
+        return (h(Host, { key: 'd45d8b9b1098ecdbdb38f2aaa889a2cc463586c3' }, h("div", { key: '2ca8771a7d72a16a8b8166d770a860cc8ef23c9f', class: "date-picker-content" }, h("div", { key: '405054b0a4793f604a1ea17107c6eb66671c26e6', class: "month-navigation" }, h("bh-button-icon", { key: '5766fa657bded4ac5b43a1c2b40eb02650131aab', hierarchy: "tertiary", size: "md", iconName: "chevron_left", onBhClick: this.handlePreviousMonth, disabled: this.disabled || (this.currentYear === this.minYear && this.currentMonth === 0) }), h("bh-button", { key: 'e162fedd7ffcc9507e8f7adbff788c7cdfa940fd', hierarchy: "tertiary", size: "sm", label: currentMonthYear, icon: "trailing", iconName: "expand_more", onBhClick: this.handleMonthDropdownToggle }), h("bh-button-icon", { key: '71afdb015aea18272f3c5551e53f98886e9e4fc3', hierarchy: "tertiary", size: "md", iconName: "chevron_right", onBhClick: this.handleNextMonth, disabled: this.disabled || (this.currentYear === this.maxYear && this.currentMonth === 11) })), !this.isMonthDropdownOpen && (h("div", { key: 'ab39283bc798b3451f108b683d8c5044a86a2ccf', class: "calendar-grid" }, h("div", { key: 'c2552b5ddf3017803654c96911f4964e80632919', class: "day-names" }, this.dayNames.map(dayName => (h("div", { key: dayName, class: "day-name" }, dayName)))), h("div", { key: '3785ee7349530ba43f88319a577a3a0734306cd0', class: "date-cells" }, this.calendarCells.map((cell, index) => (h("div", { key: index, class: this.getCellClass(cell), onClick: () => this.handleCellClick(cell) }, h("span", { class: "date-number" }, cell.day === 0 ? '' : cell.day))))))), (this.isMonthDropdownOpen || this.isMonthDropdownClosing) && (h("div", { key: '11d784c57392bfb8a72e1bf0fd657b3060ed9bda', class: `month-picker-inline ${this.isMonthDropdownClosing ? 'animate-fade-out' : ''}` }, h("bh-month-picker-content", { key: 'ce6dbecad3d32ca03d0b9cfe8392b17992157e69', scrollable: true, height: "275px", selectedMonth: this.currentMonth, selectedYear: this.currentYear, onBhChange: this.handleMonthYearSelect, minYear: this.minYear, maxYear: this.maxYear }))))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "displayMonth": ["handleDisplayMonthChange"],
+        "displayYear": ["handleDisplayYearChange"]
+    }; }
+};
+BhDatePickerContent.style = bhDatePickerContentCss;
+
+export { BhDatePickerContent as bh_date_picker_content };
+//# sourceMappingURL=bh-date-picker-content.entry.js.map

package/dist/esm/bh-date-picker-content.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-date-picker-content.entry.js","sources":["src/components/bh-date-picker-content/bh-date-picker-content.css?tag=bh-date-picker-content&encapsulation=shadow","src/components/bh-date-picker-content/bh-date-picker-content.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n/* Content area - reusable calendar content */\n.date-picker-content {\n  width: 100%;\n  font-family: var(--font-inter);\n  display: flex;\n  flex-direction: column;\n}\n\n/* Month Navigation */\n.month-navigation {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-md);\n}\n\n/* Inline Month Picker - constrain to container */\n.month-picker-inline {\n  flex: 1;\n  overflow: hidden;\n  max-height: 270px;\n  animation: fadeIn 150ms ease-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.month-picker-inline.animate-fade-out {\n  animation: fadeOut 150ms ease-out;\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n}\n\n/* Calendar Grid */\n.calendar-grid {\n  padding: 0 var(--spacing-md) var(--spacing-md);\n  flex: 1;\n}\n\n.day-names {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  width: 280px;\n  gap: 0;\n  margin-bottom: var(--spacing-sm);\n}\n\n.day-name {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-500);\n}\n\n.date-cells {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  width: 280px;\n  row-gap: var(--spacing-xs, 4px);\n  column-gap: 0;\n  justify-items: center;\n  align-items: center;\n}\n\n/* Calendar Cell States */\n.calendar-cell {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: var(--radius-full);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  cursor: pointer;\n  transition: all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);\n}\n\n.calendar-cell.other-month .date-number {\n  color: var(--color-neutral-400);\n}\n\n.calendar-cell.other-month.disabled .date-number {\n  color: var(--color-neutral-300);\n}\n\n.calendar-cell.selectable .date-number {\n  color: var(--color-neutral-500);\n}\n\n.calendar-cell.selectable:hover {\n  background: var(--color-neutral-50);\n}\n\n.calendar-cell.selectable:hover .date-number {\n  color: var(--color-neutral-800);\n}\n\n.calendar-cell.today {\n  border: 2px solid var(--color-brand-600);\n}\n\n.calendar-cell.today .date-number {\n  color: var(--color-neutral-500);\n}\n\n.calendar-cell.today:hover {\n  background: var(--color-brand-100);\n}\n\n.calendar-cell.today:hover .date-number {\n  color: var(--color-brand-600);\n}\n\n.calendar-cell.selected {\n  background: var(--color-brand-600);\n}\n\n.calendar-cell.selected .date-number {\n  color: var(--color-white);\n  font-weight: var(--weight-semibold);\n}\n\n.calendar-cell.selected:hover {\n  background: var(--color-brand-800);\n}\n\n.calendar-cell.selected:hover .date-number {\n  color: var(--color-white);\n  font-weight: var(--weight-semibold);\n}\n\n/* Range states - in-range background */\n.calendar-cell.in-range {\n  background: var(--color-neutral-100);\n  border-radius: 0;\n  position: relative;\n}\n\n.calendar-cell.in-range .date-number {\n  color: var(--color-neutral-800);\n  font-weight: var(--weight-medium);\n}\n\n.calendar-cell.in-range:hover {\n  background: var(--color-neutral-100);\n}\n\n.calendar-cell.in-range:hover .date-number {\n  background: var(--color-neutral-200);\n  border-radius: var(--radius-full);\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Range start and end styling */\n.calendar-cell.range-start,\n.calendar-cell.range-end {\n  position: relative;\n}\n\n.calendar-cell.range-start .date-number,\n.calendar-cell.range-end .date-number {\n  background: var(--color-brand-600);\n  color: var(--color-white);\n  font-weight: var(--weight-semibold);\n  border-radius: var(--radius-full);\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.calendar-cell.range-start:hover .date-number,\n.calendar-cell.range-start.selectable:hover .date-number,\n.calendar-cell.range-end:hover .date-number,\n.calendar-cell.range-end.selectable:hover .date-number {\n  background: var(--color-brand-800);\n  color: var(--color-white);\n}\n\n/* Range start - extend background to the right */\n.calendar-cell.range-start {\n  background: transparent;\n}\n\n.calendar-cell.range-start::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 0;\n  width: 50%;\n  height: 100%;\n  background: var(--color-neutral-100);\n  border-radius: var(--radius-full) 0 0 var(--radius-full);\n  z-index: 0;\n}\n\n.calendar-cell.range-start:hover::after,\n.calendar-cell.range-start.selectable:hover::after {\n  background: var(--color-neutral-200);\n}\n\n/* Range end - extend background to the left */\n.calendar-cell.range-end {\n  background: transparent;\n}\n\n.calendar-cell.range-end::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 50%;\n  height: 100%;\n  background: var(--color-neutral-100);\n  border-radius: 0 var(--radius-full) var(--radius-full) 0;\n  z-index: 0;\n}\n\n.calendar-cell.range-end:hover::after,\n.calendar-cell.range-end.selectable:hover::after {\n  background: var(--color-neutral-200);\n}\n\n/* When both start and end are the same day */\n.calendar-cell.range-start.range-end {\n  background: transparent;\n}\n\n.calendar-cell.range-start.range-end::after {\n  display: none;\n}\n\n.calendar-cell.range-start.range-end .date-number {\n  border-radius: var(--radius-full);\n}\n\n/* Range start without end (first selection only) */\n.calendar-cell.range-start:not(.in-range):not(:has(~ .range-end))::after {\n  display: none;\n}\n\n/* Row start/end rounding for in-range cells */\n.calendar-cell.in-range:nth-child(7n+1) {\n  border-top-left-radius: var(--radius-full);\n  border-bottom-left-radius: var(--radius-full);\n}\n\n.calendar-cell.in-range:nth-child(7n) {\n  border-top-right-radius: var(--radius-full);\n  border-bottom-right-radius: var(--radius-full);\n}\n\n/* Range start at end of row */\n.calendar-cell.range-start:nth-child(7n)::after {\n  display: none;\n}\n\n/* Range end at start of row */\n.calendar-cell.range-end:nth-child(7n+1)::after {\n  display: none;\n}\n\n/* Today in range */\n.calendar-cell.today.in-range {\n  background: var(--color-brand-50);\n}\n\n.calendar-cell.today.in-range .date-number {\n  color: var(--color-brand-600);\n  font-weight: var(--weight-medium);\n  background: transparent;\n  border: 2px solid var(--color-brand-600);\n}\n\n.calendar-cell.today.in-range:hover {\n  background: var(--color-brand-100);\n}\n\n/* Today as range start/end */\n.calendar-cell.today.range-start .date-number,\n.calendar-cell.today.range-end .date-number {\n  background: var(--color-brand-600);\n  color: var(--color-white);\n  border: none;\n}\n\n.calendar-cell.disabled {\n  cursor: not-allowed;\n}\n\n.calendar-cell.disabled .date-number {\n  color: var(--color-neutral-300);\n}\n\n.date-number {\n  position: relative;\n  z-index: 1;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { MonthYear } from '../bh-month-picker-content/bh-month-picker-content';\n\nexport interface SelectedDate {\n  year: number;\n  month: number; // 0-11\n  day: number; // 1-31\n}\n\nexport interface DisabledDate {\n  year: number;\n  month: number;\n  day: number;\n}\n\ninterface CalendarCell {\n  day: number;\n  isCurrentMonth: boolean;\n  isToday: boolean;\n  isSelected: boolean;\n  isDisabled: boolean;\n  isRangeStart: boolean;\n  isRangeEnd: boolean;\n  isInRange: boolean;\n  date: Date;\n}\n\n@Component({\n  tag: 'bh-date-picker-content',\n  styleUrl: 'bh-date-picker-content.css',\n  shadow: true,\n})\nexport class BhDatePickerContent {\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   * Initial month to display (0-11)\n   */\n  @Prop() initialMonth?: number;\n\n  /**\n   * Initial year to display\n   */\n  @Prop() initialYear?: number;\n\n  /**\n   * Display month (for external control, 0-11)\n   */\n  @Prop() displayMonth?: number;\n\n  /**\n   * Display year (for external control)\n   */\n  @Prop() displayYear?: number;\n\n  /**\n   * Range start date (for date range picker)\n   */\n  @Prop() rangeStart?: SelectedDate;\n\n  /**\n   * Range end date (for date range picker)\n   */\n  @Prop() rangeEnd?: SelectedDate;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: SelectedDate;\n\n  /**\n   * Whether to show days from other months\n   */\n  @Prop() showOtherMonthDays: boolean = true;\n\n  @State() selectedDate: SelectedDate | null = null;\n  @State() currentMonth: number = new Date().getMonth();\n  @State() currentYear: number = new Date().getFullYear();\n  @State() isMonthDropdownOpen: boolean = false;\n  @State() isMonthDropdownClosing: boolean = false;\n\n  private today = new Date();\n  private monthNames = [\n    'January', 'February', 'March', 'April', 'May', 'June',\n    'July', 'August', 'September', 'October', 'November', 'December',\n  ];\n  private dayNames = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event({ bubbles: true, composed: true }) bhChange!: EventEmitter<SelectedDate | null>;\n\n  /**\n   * Event emitted when a date is selected\n   */\n  @Event({ bubbles: true, composed: true }) bhDateSelect!: EventEmitter<SelectedDate | null>;\n\n  /**\n   * Event emitted when month changes\n   */\n  @Event({ bubbles: true, composed: true }) bhMonthChange!: EventEmitter<{ month: number; year: number }>;\n\n  /**\n   * Event emitted when month/year changes\n   */\n  @Event({ bubbles: true, composed: true }) bhMonthYearChange!: EventEmitter<{ month: number; year: number }>;\n\n  @Watch('value')\n  handleValueChange(newValue: SelectedDate | undefined) {\n    if (newValue) {\n      this.selectedDate = newValue;\n      if (this.displayMonth === undefined && this.displayYear === undefined) {\n        this.currentMonth = newValue.month;\n        this.currentYear = newValue.year;\n      }\n    } else {\n      this.selectedDate = null;\n    }\n  }\n\n  @Watch('displayMonth')\n  handleDisplayMonthChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.currentMonth = newValue;\n    }\n  }\n\n  @Watch('displayYear')\n  handleDisplayYearChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.currentYear = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    // Initialize month/year\n    if (this.displayMonth !== undefined) {\n      this.currentMonth = this.displayMonth;\n    } else if (this.initialMonth !== undefined) {\n      this.currentMonth = this.initialMonth;\n    } else {\n      this.currentMonth = this.today.getMonth();\n    }\n\n    if (this.displayYear !== undefined) {\n      this.currentYear = this.displayYear;\n    } else if (this.initialYear !== undefined) {\n      this.currentYear = this.initialYear;\n    } else {\n      this.currentYear = this.today.getFullYear();\n    }\n\n    // Initialize selected date\n    if (this.value) {\n      this.selectedDate = this.value;\n    }\n  }\n\n  private get isInRangeMode(): boolean {\n    return this.rangeStart !== undefined || this.rangeEnd !== undefined;\n  }\n\n  private get calendarCells(): CalendarCell[] {\n    const cells: CalendarCell[] = [];\n    const firstDay = new Date(this.currentYear, this.currentMonth, 1);\n    const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);\n\n    // Get the day of the week for the first day (0 = Sunday, 6 = Saturday)\n    let firstDayOfWeek = firstDay.getDay();\n    // Convert to Monday start (0 = Monday, 6 = Sunday)\n    firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;\n\n    // Add cells for days before the first of the month\n    if (this.showOtherMonthDays) {\n      for (let i = 0; i < firstDayOfWeek; i++) {\n        const prevMonthLastDay = new Date(this.currentYear, this.currentMonth, -i);\n        cells.unshift(this.createCell(prevMonthLastDay, false));\n      }\n    } else {\n      for (let i = 0; i < firstDayOfWeek; i++) {\n        cells.unshift({\n          day: 0,\n          isCurrentMonth: false,\n          isToday: false,\n          isSelected: false,\n          isDisabled: true,\n          isRangeStart: false,\n          isRangeEnd: false,\n          isInRange: false,\n          date: new Date(this.currentYear, this.currentMonth, -i),\n        });\n      }\n    }\n\n    // Add cells for current month\n    for (let day = 1; day <= lastDay.getDate(); day++) {\n      const date = new Date(this.currentYear, this.currentMonth, day);\n      cells.push(this.createCell(date, true));\n    }\n\n    // Add next month days to fill the grid\n    if (this.showOtherMonthDays) {\n      const totalCells = cells.length;\n      const remainingCells = 42 - totalCells;\n\n      for (let day = 1; day <= remainingCells; day++) {\n        const nextMonthDay = new Date(this.currentYear, this.currentMonth + 1, day);\n        cells.push(this.createCell(nextMonthDay, false));\n\n        if (cells.length % 7 === 0) break;\n      }\n    }\n\n    return cells;\n  }\n\n  private createCell(date: Date, isCurrentMonth: boolean): CalendarCell {\n    const isRangeStart = this.isDateRangeStart(date);\n    const isRangeEnd = this.isDateRangeEnd(date);\n    const isInRange = this.isDateInRange(date);\n\n    return {\n      day: date.getDate(),\n      isCurrentMonth,\n      isToday: this.isSameDay(date, this.today),\n      isSelected: this.isDateSelected(date),\n      isDisabled: !isCurrentMonth || this.isDateDisabled(date),\n      isRangeStart,\n      isRangeEnd,\n      isInRange,\n      date,\n    };\n  }\n\n  private isSameDay(date1: Date, date2: Date): boolean {\n    return (\n      date1.getFullYear() === date2.getFullYear() &&\n      date1.getMonth() === date2.getMonth() &&\n      date1.getDate() === date2.getDate()\n    );\n  }\n\n  private isDateDisabled(date: Date): boolean {\n    if (!this.disabledDates || !Array.isArray(this.disabledDates)) {\n      return false;\n    }\n    const year = date.getFullYear();\n    const month = date.getMonth();\n    const day = date.getDate();\n    return this.disabledDates.some(\n      disabled => disabled.year === year && disabled.month === month && disabled.day === day\n    );\n  }\n\n  private isDateSelected(date: Date): boolean {\n    if (this.isInRangeMode) return false;\n    if (!this.selectedDate) return false;\n\n    return (\n      date.getFullYear() === this.selectedDate.year &&\n      date.getMonth() === this.selectedDate.month &&\n      date.getDate() === this.selectedDate.day\n    );\n  }\n\n  private isDateRangeStart(date: Date): boolean {\n    if (!this.rangeStart) return false;\n\n    return (\n      date.getFullYear() === this.rangeStart.year &&\n      date.getMonth() === this.rangeStart.month &&\n      date.getDate() === this.rangeStart.day\n    );\n  }\n\n  private isDateRangeEnd(date: Date): boolean {\n    if (!this.rangeEnd) return false;\n\n    return (\n      date.getFullYear() === this.rangeEnd.year &&\n      date.getMonth() === this.rangeEnd.month &&\n      date.getDate() === this.rangeEnd.day\n    );\n  }\n\n  private isDateInRange(date: Date): boolean {\n    if (!this.rangeStart || !this.rangeEnd) return false;\n\n    const dateTime = date.getTime();\n    const startTime = new Date(this.rangeStart.year, this.rangeStart.month, this.rangeStart.day).getTime();\n    const endTime = new Date(this.rangeEnd.year, this.rangeEnd.month, this.rangeEnd.day).getTime();\n\n    return dateTime > startTime && dateTime < endTime;\n  }\n\n  private handleCellClick(cell: CalendarCell) {\n    if (cell.isDisabled || this.disabled || !cell.isCurrentMonth) {\n      return;\n    }\n\n    const newSelectedDate: SelectedDate = {\n      year: cell.date.getFullYear(),\n      month: cell.date.getMonth(),\n      day: cell.date.getDate(),\n    };\n\n    // If we're in range mode, let the parent handle it\n    if (this.isInRangeMode) {\n      this.bhChange.emit(newSelectedDate);\n      this.bhDateSelect.emit(newSelectedDate);\n      return;\n    }\n\n    // Toggle selection\n    const isCurrentlySelected = this.selectedDate &&\n      this.selectedDate.year === newSelectedDate.year &&\n      this.selectedDate.month === newSelectedDate.month &&\n      this.selectedDate.day === newSelectedDate.day;\n\n    if (isCurrentlySelected) {\n      this.selectedDate = null;\n      this.bhChange.emit(null);\n      this.bhDateSelect.emit(null);\n    } else {\n      this.selectedDate = newSelectedDate;\n      this.bhChange.emit(newSelectedDate);\n      this.bhDateSelect.emit(newSelectedDate);\n    }\n  }\n\n  private handleMonthDropdownToggle = () => {\n    if (this.isMonthDropdownOpen) {\n      this.closeMonthDropdown();\n    } else {\n      this.isMonthDropdownOpen = true;\n    }\n  };\n\n  private closeMonthDropdown() {\n    this.isMonthDropdownClosing = true;\n    setTimeout(() => {\n      this.isMonthDropdownOpen = false;\n      this.isMonthDropdownClosing = false;\n    }, 150);\n  }\n\n  private handleMonthYearSelect = (event: CustomEvent<MonthYear>) => {\n    this.closeMonthDropdown();\n\n    setTimeout(() => {\n      const monthYear = event.detail;\n      this.currentMonth = monthYear.month;\n      this.currentYear = monthYear.year;\n      this.bhMonthChange.emit({ month: monthYear.month, year: monthYear.year });\n      this.bhMonthYearChange.emit({ month: monthYear.month, year: monthYear.year });\n    }, 100);\n  };\n\n  private handlePreviousMonth = () => {\n    if (this.disabled) return;\n\n    let newMonth = this.currentMonth - 1;\n    let newYear = this.currentYear;\n\n    if (newMonth < 0) {\n      newMonth = 11;\n      newYear = this.currentYear - 1;\n    }\n\n    if (newYear >= this.minYear) {\n      this.currentMonth = newMonth;\n      this.currentYear = newYear;\n      this.bhMonthChange.emit({ month: newMonth, year: newYear });\n      this.bhMonthYearChange.emit({ month: newMonth, year: newYear });\n    }\n  };\n\n  private handleNextMonth = () => {\n    if (this.disabled) return;\n\n    let newMonth = this.currentMonth + 1;\n    let newYear = this.currentYear;\n\n    if (newMonth > 11) {\n      newMonth = 0;\n      newYear = this.currentYear + 1;\n    }\n\n    if (newYear <= this.maxYear) {\n      this.currentMonth = newMonth;\n      this.currentYear = newYear;\n      this.bhMonthChange.emit({ month: newMonth, year: newYear });\n      this.bhMonthYearChange.emit({ month: newMonth, year: newYear });\n    }\n  };\n\n  private getCellClass(cell: CalendarCell): string {\n    const classes = ['calendar-cell'];\n\n    if (!cell.isCurrentMonth) classes.push('other-month');\n    if (cell.isToday) classes.push('today');\n    if (cell.isRangeStart) classes.push('range-start');\n    if (cell.isRangeEnd) classes.push('range-end');\n    if (cell.isInRange) classes.push('in-range');\n    if (cell.isSelected) classes.push('selected');\n    if (cell.isDisabled) classes.push('disabled');\n    else if (cell.isCurrentMonth) classes.push('selectable');\n\n    return classes.join(' ');\n  }\n\n  render() {\n    const currentMonthYear = `${this.monthNames[this.currentMonth]} ${this.currentYear}`;\n\n    return (\n      <Host>\n        <div class=\"date-picker-content\">\n          {/* Month Navigation */}\n          <div class=\"month-navigation\">\n            <bh-button-icon\n              hierarchy=\"tertiary\"\n              size=\"md\"\n              iconName=\"chevron_left\"\n              onBhClick={this.handlePreviousMonth}\n              disabled={this.disabled || (this.currentYear === this.minYear && this.currentMonth === 0)}\n            ></bh-button-icon>\n\n            <bh-button\n              hierarchy=\"tertiary\"\n              size=\"sm\"\n              label={currentMonthYear}\n              icon=\"trailing\"\n              iconName=\"expand_more\"\n              onBhClick={this.handleMonthDropdownToggle}\n            ></bh-button>\n\n            <bh-button-icon\n              hierarchy=\"tertiary\"\n              size=\"md\"\n              iconName=\"chevron_right\"\n              onBhClick={this.handleNextMonth}\n              disabled={this.disabled || (this.currentYear === this.maxYear && this.currentMonth === 11)}\n            ></bh-button-icon>\n          </div>\n\n          {/* Calendar Grid or Month Picker */}\n          {!this.isMonthDropdownOpen && (\n            <div class=\"calendar-grid\">\n              {/* Day Names Header */}\n              <div class=\"day-names\">\n                {this.dayNames.map(dayName => (\n                  <div key={dayName} class=\"day-name\">{dayName}</div>\n                ))}\n              </div>\n\n              {/* Date Cells */}\n              <div class=\"date-cells\">\n                {this.calendarCells.map((cell, index) => (\n                  <div\n                    key={index}\n                    class={this.getCellClass(cell)}\n                    onClick={() => this.handleCellClick(cell)}\n                  >\n                    <span class=\"date-number\">{cell.day === 0 ? '' : cell.day}</span>\n                  </div>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {/* Month Picker Content */}\n          {(this.isMonthDropdownOpen || this.isMonthDropdownClosing) && (\n            <div class={`month-picker-inline ${this.isMonthDropdownClosing ? 'animate-fade-out' : ''}`}>\n              <bh-month-picker-content\n                scrollable={true}\n                height=\"275px\"\n                selectedMonth={this.currentMonth}\n                selectedYear={this.currentYear}\n                onBhChange={this.handleMonthYearSelect}\n                minYear={this.minYear}\n                maxYear={this.maxYear}\n              ></bh-month-picker-content>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bh-date-picker.entry.js

@@ -0,0 +1,171 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.js';
+
+const bhDatePickerCss = "@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'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--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%);--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%);--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%);--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%);--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%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--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-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-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;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--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))}*,*::before,*::after{box-sizing:border-box}.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:inline-block;position:relative}.date-picker-container{position:relative;display:inline-block}.date-picker-trigger{cursor:pointer}.date-picker-trigger.input-field-container{position:relative}.calendar-icon-overlay{position:absolute;top:0;right:0;width:40px;height:100%;cursor:pointer;z-index:1}.date-picker-menu-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs)}.date-picker-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:transparent}";
+
+const BhDatePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhDateSelect = createEvent(this, "bhDateSelect");
+    }
+    /**
+     * Variant of the date picker trigger
+     */
+    variant = 'input';
+    /**
+     * 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 = [];
+    /**
+     * Label for input variant
+     */
+    label = 'Select Date';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Choose date';
+    /**
+     * Width for input variant
+     */
+    inputWidth = '200px';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show the footer
+     */
+    showFooter = false;
+    /**
+     * Whether to show days from other months
+     */
+    showOtherMonthDays = true;
+    /**
+     * Currently selected value
+     */
+    value;
+    selectedValue = null;
+    tempSelection = null;
+    isMenuOpen = false;
+    isMenuClosing = false;
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a date is selected
+     */
+    bhDateSelect;
+    handleValueChange(newValue) {
+        if (newValue !== undefined) {
+            this.selectedValue = newValue;
+        }
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.selectedValue = this.value;
+        }
+    }
+    getDisplayValue() {
+        if (!this.selectedValue)
+            return '';
+        const month = (this.selectedValue.month + 1).toString().padStart(2, '0');
+        const day = this.selectedValue.day.toString().padStart(2, '0');
+        return `${month}/${day}/${this.selectedValue.year}`;
+    }
+    getButtonLabel() {
+        return this.getDisplayValue() || this.placeholder;
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (!this.isMenuOpen && this.showFooter) {
+            this.tempSelection = this.selectedValue;
+        }
+        this.isMenuOpen = !this.isMenuOpen;
+    };
+    handleInputFocus = () => {
+        if (this.disabled)
+            return;
+        if (!this.isMenuOpen && this.showFooter) {
+            this.tempSelection = this.selectedValue;
+        }
+        this.isMenuOpen = true;
+    };
+    handleDateSelect = (event) => {
+        const date = event.detail;
+        if (this.showFooter && date) {
+            this.tempSelection = date;
+        }
+        else {
+            this.selectedValue = date;
+            this.bhChange.emit(date);
+            this.bhDateSelect.emit(date);
+            if (!this.showFooter) {
+                this.closeMenu();
+            }
+        }
+    };
+    handleMenuCancel = () => {
+        this.tempSelection = null;
+        this.closeMenu();
+    };
+    handleMenuApply = () => {
+        if (this.tempSelection) {
+            this.selectedValue = this.tempSelection;
+            this.tempSelection = null;
+            this.bhChange.emit(this.selectedValue);
+            this.bhDateSelect.emit(this.selectedValue);
+        }
+        this.closeMenu();
+    };
+    handleToday = () => {
+        const today = new Date();
+        const todayDate = {
+            year: today.getFullYear(),
+            month: today.getMonth(),
+            day: today.getDate(),
+        };
+        if (this.showFooter) {
+            this.tempSelection = todayDate;
+        }
+        else {
+            this.selectedValue = todayDate;
+            this.bhChange.emit(todayDate);
+            this.bhDateSelect.emit(todayDate);
+            this.closeMenu();
+        }
+    };
+    closeMenu() {
+        this.isMenuClosing = true;
+        setTimeout(() => {
+            this.isMenuOpen = false;
+            this.isMenuClosing = false;
+        }, 150);
+    }
+    handleBackdropClick = () => {
+        this.handleMenuCancel();
+    };
+    render() {
+        return (h(Host, { key: 'a802c8d0bf2a5e40c909a8980f160d47b4e7bbde' }, h("div", { key: '348e50ba916744ded6d348683b61129140fc2923', class: "date-picker-container" }, this.variant === 'dropdown-outlined' && (h("div", { key: 'c044d02c7e1377c5596283dc44368b8656a9e511', class: "date-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '0e298c804889426af639d955e747936728004ef0', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (h("div", { key: '862b2d55c32a1eb5063b44a495fdf93b0b4fcd80', class: "date-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '7573039c5ab7a356010e71a7ef4e37e3d7177b32', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (h("div", { key: '1f2dc7e7a932c76b3611fc090b9ee2c4637090a2', class: "date-picker-trigger input-field-container" }, h("bh-input-text", { key: 'f80ebc3d20ef711ee3b56031327b79395a609671', label: this.label, placeholder: this.placeholder, value: this.getDisplayValue(), disabled: this.disabled, showTrailingIcon: true, trailingIcon: "calendar_today", showHelpIcon: false, showHintText: false, showLabel: this.showLabel, width: this.inputWidth, onBhFocus: this.handleInputFocus }), h("div", { key: '7a6e32953de4a30b13a4fb0ae3c1ebdbaeab9303', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), h("div", { key: '80ed5a884954d099a11fcf99f6f1e90584759116', class: "date-picker-menu-container" }, h("bh-picker-menu", { key: 'ac3fa6d95099990e9d4ac9a223944efd7e3f8d3d', visible: this.isMenuOpen, showFooter: this.showFooter, showTodayButton: this.showFooter, disableApply: this.showFooter && this.tempSelection === null, onBhCancel: this.handleMenuCancel, onBhApply: this.handleMenuApply, onBhToday: this.handleToday }, h("bh-date-picker-content", { key: '8b92b1356191b4a0a48ddaa2b7f581f9d3eb4ac8', minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledDates: this.disabledDates, showOtherMonthDays: this.showOtherMonthDays, value: this.tempSelection ?? this.selectedValue ?? undefined, onBhDateSelect: this.handleDateSelect })))), (this.isMenuOpen || this.isMenuClosing) && (h("div", { key: '155ee3b226bf3425575c63e4d233c3eecb47b243', class: "date-picker-backdrop", onClick: this.handleBackdropClick }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+BhDatePicker.style = bhDatePickerCss;
+
+export { BhDatePicker as bh_date_picker };
+//# sourceMappingURL=bh-date-picker.entry.js.map