@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/cjs/bh-date-picker.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-date-picker.entry.cjs.js","sources":["src/components/bh-date-picker/bh-date-picker.css?tag=bh-date-picker&encapsulation=shadow","src/components/bh-date-picker/bh-date-picker.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.date-picker-container {\n  position: relative;\n  display: inline-block;\n}\n\n.date-picker-trigger {\n  cursor: pointer;\n}\n\n.date-picker-trigger.input-field-container {\n  position: relative;\n}\n\n.calendar-icon-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 40px;\n  height: 100%;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.date-picker-menu-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n}\n\n.date-picker-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n","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 type DatePickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n  tag: 'bh-date-picker',\n  styleUrl: 'bh-date-picker.css',\n  shadow: true,\n})\nexport class BhDatePicker {\n  /**\n   * Variant of the date picker trigger\n   */\n  @Prop() variant: DatePickerVariant = 'input';\n\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   * Label for input variant\n   */\n  @Prop() label: string = 'Select Date';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Choose date';\n\n  /**\n   * Width for input variant\n   */\n  @Prop() inputWidth: string = '200px';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show the footer\n   */\n  @Prop() showFooter: boolean = false;\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?: SelectedDate;\n\n  @State() selectedValue: SelectedDate | null = null;\n  @State() tempSelection: SelectedDate | null = null;\n  @State() isMenuOpen: boolean = false;\n  @State() isMenuClosing: boolean = false;\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event() bhChange!: EventEmitter<SelectedDate | null>;\n\n  /**\n   * Event emitted when a date is selected\n   */\n  @Event() bhDateSelect!: EventEmitter<SelectedDate | null>;\n\n  @Watch('value')\n  handleValueChange(newValue: SelectedDate | undefined) {\n    if (newValue !== undefined) {\n      this.selectedValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.selectedValue = this.value;\n    }\n  }\n\n  private getDisplayValue(): string {\n    if (!this.selectedValue) return '';\n    const month = (this.selectedValue.month + 1).toString().padStart(2, '0');\n    const day = this.selectedValue.day.toString().padStart(2, '0');\n    return `${month}/${day}/${this.selectedValue.year}`;\n  }\n\n  private getButtonLabel(): string {\n    return this.getDisplayValue() || this.placeholder;\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = !this.isMenuOpen;\n  };\n\n  private handleInputFocus = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = true;\n  };\n\n  private handleDateSelect = (event: CustomEvent<SelectedDate | null>) => {\n    const date = event.detail;\n    if (this.showFooter && date) {\n      this.tempSelection = date;\n    } else {\n      this.selectedValue = date;\n      this.bhChange.emit(date);\n      this.bhDateSelect.emit(date);\n      if (!this.showFooter) {\n        this.closeMenu();\n      }\n    }\n  };\n\n  private handleMenuCancel = () => {\n    this.tempSelection = null;\n    this.closeMenu();\n  };\n\n  private handleMenuApply = () => {\n    if (this.tempSelection) {\n      this.selectedValue = this.tempSelection;\n      this.tempSelection = null;\n      this.bhChange.emit(this.selectedValue);\n      this.bhDateSelect.emit(this.selectedValue);\n    }\n    this.closeMenu();\n  };\n\n  private handleToday = () => {\n    const today = new Date();\n    const todayDate: SelectedDate = {\n      year: today.getFullYear(),\n      month: today.getMonth(),\n      day: today.getDate(),\n    };\n\n    if (this.showFooter) {\n      this.tempSelection = todayDate;\n    } else {\n      this.selectedValue = todayDate;\n      this.bhChange.emit(todayDate);\n      this.bhDateSelect.emit(todayDate);\n      this.closeMenu();\n    }\n  };\n\n  private closeMenu() {\n    this.isMenuClosing = true;\n    setTimeout(() => {\n      this.isMenuOpen = false;\n      this.isMenuClosing = false;\n    }, 150);\n  }\n\n  private handleBackdropClick = () => {\n    this.handleMenuCancel();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"date-picker-container\">\n          {/* Dropdown Outlined Variant */}\n          {this.variant === 'dropdown-outlined' && (\n            <div class=\"date-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"secondary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Dropdown Ghost Variant */}\n          {this.variant === 'dropdown-ghost' && (\n            <div class=\"date-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"tertiary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Input Variant */}\n          {this.variant === 'input' && (\n            <div class=\"date-picker-trigger input-field-container\">\n              <bh-input-text\n                label={this.label}\n                placeholder={this.placeholder}\n                value={this.getDisplayValue()}\n                disabled={this.disabled}\n                showTrailingIcon={true}\n                trailingIcon=\"calendar_today\"\n                showHelpIcon={false}\n                showHintText={false}\n                showLabel={this.showLabel}\n                width={this.inputWidth}\n                onBhFocus={this.handleInputFocus}\n              ></bh-input-text>\n              <div class=\"calendar-icon-overlay\" onClick={this.handleTriggerClick}></div>\n            </div>\n          )}\n\n          {/* Date Picker Menu */}\n          <div class=\"date-picker-menu-container\">\n            <bh-picker-menu\n              visible={this.isMenuOpen}\n              showFooter={this.showFooter}\n              showTodayButton={this.showFooter}\n              disableApply={this.showFooter && this.tempSelection === null}\n              onBhCancel={this.handleMenuCancel}\n              onBhApply={this.handleMenuApply}\n              onBhToday={this.handleToday}\n            >\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                value={this.tempSelection ?? this.selectedValue ?? undefined}\n                onBhDateSelect={this.handleDateSelect}\n              ></bh-date-picker-content>\n            </bh-picker-menu>\n          </div>\n        </div>\n\n        {/* Backdrop */}\n        {(this.isMenuOpen || this.isMenuClosing) && (\n          <div class=\"date-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/bh-date-range-picker-content.cjs.entry.js

@@ -0,0 +1,151 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhDateRangePickerContentCss = "@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-range-picker-content{display:flex;flex-direction:column;font-family:var(--font-inter);width:fit-content}.date-pickers{display:flex;flex-direction:row;width:100%;position:relative;gap:var(--spacing-sm)}.left-picker{display:flex;flex-direction:column;width:296px}.right-picker{display:flex;flex-direction:column;width:296px}.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}@media (max-width: 768px){.date-range-picker-content{width:320px}.date-pickers{flex-direction:column}.left-picker,.right-picker{width:100%}.date-pickers::after{display:none}}";
+
+const BhDateRangePickerContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.createEvent(this, "bhChange");
+        this.bhDateRangeSelect = index.createEvent(this, "bhDateRangeSelect");
+    }
+    /**
+     * 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 (index.h(index.Host, { key: '8c0921dbc8b69b5cf807f36aab2707dc90c15c07' }, index.h("div", { key: '0e2de76a0709b383650992648ad287cc2765a71e', class: "date-range-picker-content" }, index.h("div", { key: '3f244bbac9cc6cc8c26e8d2e1c115a00c0a21602', class: "date-pickers" }, index.h("div", { key: '80bae45ed0096dd4db50a4576f3280933556e82b', class: "left-picker" }, index.h("bh-date-picker-content", { key: '71514b66edf509d76e00dca3f0daa445e9be19d7', 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 })), index.h("div", { key: '1446711304bd2e90aed82ddba2d7324644b52fa0', class: "right-picker" }, index.h("bh-date-picker-content", { key: '5231a18a91664902a73da79eee61cf3c98539157', 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 watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+BhDateRangePickerContent.style = bhDateRangePickerContentCss;
+
+exports.bh_date_range_picker_content = BhDateRangePickerContent;
+//# sourceMappingURL=bh-date-range-picker-content.entry.cjs.js.map

package/dist/cjs/bh-date-range-picker.cjs.entry.js

@@ -0,0 +1,167 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhDateRangePickerCss = "@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-range-picker-container{position:relative;display:inline-block}.date-range-picker-trigger{cursor:pointer}.date-range-inputs{display:flex;gap:var(--spacing-md)}.date-range-picker-menu-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs)}.date-range-picker-menu-container bh-picker-menu::part(menu){width:auto}.date-range-picker-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:transparent}";
+
+const BhDateRangePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.createEvent(this, "bhChange");
+        this.bhDateRangeSelect = index.createEvent(this, "bhDateRangeSelect");
+    }
+    /**
+     * Variant of the date range 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 start date input
+     */
+    startLabel = 'Start Date';
+    /**
+     * Label for end date input
+     */
+    endLabel = 'End Date';
+    /**
+     * Placeholder for start date
+     */
+    startPlaceholder = 'Choose start date';
+    /**
+     * Placeholder for end date
+     */
+    endPlaceholder = 'Choose end date';
+    /**
+     * Width for input variant
+     */
+    inputWidth = '200px';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show the footer
+     */
+    showFooter = true;
+    /**
+     * Whether to show days from other months
+     */
+    showOtherMonthDays = false;
+    /**
+     * Currently selected value
+     */
+    value;
+    selectedValue = null;
+    tempSelection = null;
+    isMenuOpen = false;
+    isMenuClosing = false;
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a date range is selected
+     */
+    bhDateRangeSelect;
+    handleValueChange(newValue) {
+        if (newValue !== undefined) {
+            this.selectedValue = newValue;
+        }
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.selectedValue = this.value;
+        }
+    }
+    formatDate(date) {
+        if (!date)
+            return '';
+        const month = (date.month + 1).toString().padStart(2, '0');
+        const day = date.day.toString().padStart(2, '0');
+        return `${month}/${day}/${date.year}`;
+    }
+    getButtonLabel() {
+        if (!this.selectedValue || !this.selectedValue.startDate)
+            return 'Select date range';
+        const startStr = this.formatDate(this.selectedValue.startDate);
+        const endStr = this.selectedValue.endDate ? this.formatDate(this.selectedValue.endDate) : '';
+        if (endStr) {
+            return `${startStr} - ${endStr}`;
+        }
+        return startStr;
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (!this.isMenuOpen && this.showFooter) {
+            this.tempSelection = this.selectedValue;
+        }
+        this.isMenuOpen = !this.isMenuOpen;
+    };
+    handleDateRangeSelectEvent(event) {
+        // Stop propagation to prevent the event from bubbling further
+        event.stopPropagation();
+        const range = event.detail;
+        if (this.showFooter) {
+            // With footer: update temp selection, user clicks Apply to confirm
+            this.tempSelection = range;
+        }
+        else {
+            // Without footer: update value immediately, close only when range is complete
+            this.selectedValue = range;
+            if (range?.startDate && range?.endDate) {
+                this.bhChange.emit(range);
+                this.bhDateRangeSelect.emit(range);
+                this.closeMenu();
+            }
+        }
+    }
+    handleMenuCancel = () => {
+        this.tempSelection = null;
+        this.closeMenu();
+    };
+    handleMenuApply = () => {
+        if (this.tempSelection) {
+            this.selectedValue = this.tempSelection;
+            this.bhChange.emit(this.tempSelection);
+            this.bhDateRangeSelect.emit(this.tempSelection);
+            this.tempSelection = null;
+        }
+        this.closeMenu();
+    };
+    closeMenu() {
+        this.isMenuClosing = true;
+        setTimeout(() => {
+            this.isMenuOpen = false;
+            this.isMenuClosing = false;
+        }, 150);
+    }
+    handleBackdropClick = () => {
+        this.handleMenuCancel();
+    };
+    render() {
+        return (index.h(index.Host, { key: '2c321a4a5e4cdf2109353991423169800a0d41ec' }, index.h("div", { key: '13b5bbc4860661e98323d4acb61882bdc3350188', class: "date-range-picker-container" }, this.variant === 'dropdown-outlined' && (index.h("div", { key: '9c7023a4ffbcd66b4ccb2f5828fe73cbab00ac87', class: "date-range-picker-trigger", onClick: this.handleTriggerClick }, index.h("bh-button", { key: '6677d5338cdd340b7422c467ace3048ee1c5d283', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (index.h("div", { key: '2960183f3b959b64b381658f1e10e2089a21a39d', class: "date-range-picker-trigger", onClick: this.handleTriggerClick }, index.h("bh-button", { key: 'b491e3a1262a75b0c12b69a154200138b267b271', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (index.h("div", { key: '7d4e184068e772f70cb81e14d1c207299624fd09', class: "date-range-picker-trigger" }, index.h("div", { key: '222cb92f21351bc42d3892d581b00ad0ad986af2', class: "date-range-inputs", onClick: this.handleTriggerClick }, index.h("bh-input-text", { key: 'cc659298934fc8f93a31354f48180e279374c30b', label: this.startLabel, placeholder: this.startPlaceholder, value: this.formatDate(this.selectedValue?.startDate || null), disabled: this.disabled, showTrailingIcon: true, trailingIcon: "calendar_today", showHelpIcon: false, showHintText: false, showLabel: this.showLabel, width: this.inputWidth, readOnly: true }), index.h("bh-input-text", { key: '1bfddf59ac795cca04aad5593545d26c5189810f', label: this.endLabel, placeholder: this.endPlaceholder, value: this.formatDate(this.selectedValue?.endDate || null), disabled: this.disabled, showTrailingIcon: true, trailingIcon: "calendar_today", showHelpIcon: false, showHintText: false, showLabel: this.showLabel, width: this.inputWidth, readOnly: true })))), index.h("div", { key: '88be4865a0e5d787d46d796d75d99216b3d5a7b1', class: "date-range-picker-menu-container" }, index.h("bh-picker-menu", { key: '73dea110a2c1ce04d00abd66f5084febca0e0f64', visible: this.isMenuOpen, showFooter: this.showFooter, disableApply: this.showFooter && (!this.tempSelection?.startDate || !this.tempSelection?.endDate), onBhCancel: this.handleMenuCancel, onBhApply: this.handleMenuApply }, index.h("bh-date-range-picker-content", { key: '6a3d4a2d7c433779d97553b0af825c4c3e7397f1', minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledDates: this.disabledDates, showOtherMonthDays: this.showOtherMonthDays, value: this.tempSelection ?? this.selectedValue ?? undefined })))), (this.isMenuOpen || this.isMenuClosing) && (index.h("div", { key: '2ae8001191cb0bb7b27b937189e5085a3d0c1811', class: "date-range-picker-backdrop", onClick: this.handleBackdropClick }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+BhDateRangePicker.style = bhDateRangePickerCss;
+
+exports.bh_date_range_picker = BhDateRangePicker;
+//# sourceMappingURL=bh-date-range-picker.entry.cjs.js.map

package/dist/cjs/bh-dropdown-menu.cjs.entry.js

@@ -0,0 +1,114 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhDropdownMenuCss = ":host{display:block}.dropdown-menu{width:240px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);overflow:hidden;flex-shrink:0;position:relative;box-sizing:border-box}.animate-dropdown-enter{animation:dropdownEnter 0.15s ease-out forwards}.animate-dropdown-exit{animation:dropdownExit 0.15s ease-in forwards}@keyframes dropdownEnter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.dropdown-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-neutral-200)}.dropdown-header-avatar{padding:var(--spacing-lg) var(--spacing-xl)}.avatar-group{display:flex;align-items:center;gap:var(--spacing-lg);width:100%}.avatar-text{display:flex;flex-direction:column;flex:1;min-width:0}.avatar-name{font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:var(--text-sm-size);text-align:left;line-height:1.43;color:var(--color-neutral-800);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-email{font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-600);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-title{font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-800);margin:0}.menu-items{padding:var(--spacing-xs) 0}.dropdown-item{padding:var(--spacing-none) var(--spacing-sm);cursor:pointer}.dropdown-item-disabled{opacity:0.5;cursor:not-allowed}.item-content{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-md);border-radius:var(--radius-sm);transition:background-color 0.15s ease}.dropdown-item:hover:not(.dropdown-item-disabled) .item-content{background:var(--color-neutral-100)}.item-main{display:flex;align-items:center;gap:var(--spacing-md);flex:1;min-width:0}.item-icon{font-size:var(--icon-size-md, 20px);color:var(--color-neutral-600);flex-shrink:0;display:flex;align-items:center;justify-content:center}.item-text{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-700);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.item-shortcut{font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-xs-size);line-height:1.5;color:var(--color-neutral-500);flex-shrink:0}.menu-divider{height:1px;background:var(--color-neutral-200);margin:var(--spacing-xs) 0}.dropdown-menu-scrollable .menu-items{max-height:280px;overflow-y:auto;overflow-x:hidden}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar{width:6px}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-track{background:var(--color-neutral-50);border-radius:var(--radius-xs)}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.dropdown-menu-scrollable .menu-items{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) var(--color-neutral-50)}";
+
+const BhDropdownMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.createEvent(this, "bhItemClick");
+    }
+    /**
+     * Header configuration (JSON string or object)
+     */
+    header;
+    /**
+     * Menu items array (JSON string or array)
+     */
+    menuItems = [];
+    /**
+     * Whether the menu is visible
+     */
+    visible = true;
+    /**
+     * Whether to show icons in menu items
+     */
+    showIcons = true;
+    /**
+     * Whether the menu should be scrollable
+     */
+    scrollable = false;
+    isClosing = false;
+    shouldRender = true;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhItemClick;
+    get parsedHeader() {
+        if (!this.header)
+            return undefined;
+        if (typeof this.header === 'string') {
+            try {
+                return JSON.parse(this.header);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return this.header;
+    }
+    get parsedMenuItems() {
+        if (typeof this.menuItems === 'string') {
+            try {
+                return JSON.parse(this.menuItems);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.menuItems || [];
+    }
+    watchVisible(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isClosing = false;
+        }
+        else {
+            this.isClosing = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isClosing = false;
+            }, 150);
+        }
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+    }
+    handleItemClick(item) {
+        if (!item.disabled && !item.divider) {
+            this.bhItemClick.emit(item);
+        }
+    }
+    getMenuItemClasses(item) {
+        return {
+            'dropdown-item': true,
+            'dropdown-item-disabled': !!item.disabled,
+        };
+    }
+    render() {
+        if (!this.visible) {
+            return null;
+        }
+        const header = this.parsedHeader;
+        const items = this.parsedMenuItems;
+        const dropdownClasses = {
+            'dropdown-menu': true,
+            'dropdown-menu-scrollable': this.scrollable,
+            'animate-dropdown-enter': true,
+            'animate-dropdown-exit': false,
+        };
+        const headerClasses = {
+            'dropdown-header': true,
+            'dropdown-header-avatar': !!header?.avatarGroup,
+        };
+        return (index.h("div", { class: dropdownClasses }, header && (index.h("div", { class: headerClasses }, header.avatarGroup && (index.h("div", { class: "avatar-group" }, index.h("bh-avatar", { size: "md", type: "image", status: "online", imageSrc: header.avatarSrc || '', alt: header.name || 'Avatar' }), index.h("div", { class: "avatar-text" }, index.h("div", { class: "avatar-name" }, header.name), index.h("div", { class: "avatar-email" }, header.email)))), !header.avatarGroup && header.title && (index.h("div", { class: "header-title" }, header.title)))), index.h("div", { class: "menu-items" }, items.map((item) => (index.h("div", { key: item.id }, item.divider && index.h("div", { class: "menu-divider" }), !item.divider && (index.h("div", { class: this.getMenuItemClasses(item), onClick: () => this.handleItemClick(item) }, index.h("div", { class: "item-content" }, index.h("div", { class: "item-main" }, item.icon && this.showIcons && (index.h("span", { class: "material-symbols-outlined item-icon" }, item.icon)), index.h("span", { class: "item-text", title: item.label }, item.label)), item.shortcut && (index.h("span", { class: "item-shortcut" }, item.shortcut)))))))))));
+    }
+    static get watchers() { return {
+        "visible": ["watchVisible"]
+    }; }
+};
+BhDropdownMenu.style = bhDropdownMenuCss;
+
+exports.bh_dropdown_menu = BhDropdownMenu;
+//# sourceMappingURL=bh-dropdown-menu.entry.cjs.js.map