@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1,528 @@
+import { h, Host } from "@stencil/core";
+export class BhDateRangePicker {
+    /**
+     * 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 (h(Host, { key: '08aacf3080c26252ad9016db0239f6ec59e18464' }, h("div", { key: 'ead0f755f1068c1a6b66d13b3499c0eb3dc79a81', class: "date-range-picker-container" }, this.variant === 'dropdown-outlined' && (h("div", { key: '18aa33151bafd73fc7bd8cb5f37226d7946782c3', class: "date-range-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: 'dd1a3bdf7b1a3fa48717cf3d6ae56bc5c9523821', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (h("div", { key: 'c569af65f4722055339711fe824c845b7f9199b4', class: "date-range-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: 'd23bc5b104c6bd0b1c5bb8453e390805ab50df4e', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (h("div", { key: '2a238184c8446070517f80142ef9871f45d7a0a5', class: "date-range-picker-trigger" }, h("div", { key: '2def41d08a9b0d0e94ebff478ca74a89ba2587ca', class: "date-range-inputs", onClick: this.handleTriggerClick }, h("bh-input-text", { key: 'be1917751e940c2bc66a6f0c3d1b558a7d26ae60', 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 }), h("bh-input-text", { key: '34f7c3b5ba5a528e15b88813374cb82964b1faee', 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 })))), h("div", { key: '614f36cc1e0f2161ecdc071874949f914bfa4cb9', class: "date-range-picker-menu-container" }, h("bh-picker-menu", { key: '9a1fdc35f823cb14900a8085a5a566b5458aebfb', visible: this.isMenuOpen, showFooter: this.showFooter, disableApply: this.showFooter && (!this.tempSelection?.startDate || !this.tempSelection?.endDate), onBhCancel: this.handleMenuCancel, onBhApply: this.handleMenuApply }, h("bh-date-range-picker-content", { key: 'b15f784587af73c62aad69893cbf04c822c96136', 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) && (h("div", { key: '754601e50f509ba5032f8e915807f3835d25c6ff', class: "date-range-picker-backdrop", onClick: this.handleBackdropClick }))));
+    }
+    static get is() { return "bh-date-range-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-date-range-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-date-range-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DateRangePickerVariant",
+                    "resolved": "\"dropdown-ghost\" | \"dropdown-outlined\" | \"input\"",
+                    "references": {
+                        "DateRangePickerVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-date-range-picker/bh-date-range-picker.tsx",
+                            "id": "src/components/bh-date-range-picker/bh-date-range-picker.tsx::DateRangePickerVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant of the date range picker trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'input'"
+            },
+            "minYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum year in the picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-year",
+                "defaultValue": "1998"
+            },
+            "maxYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum year in the picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-year",
+                "defaultValue": "2060"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the picker is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledDate[]",
+                    "resolved": "DisabledDate[]",
+                    "references": {
+                        "DisabledDate": {
+                            "location": "import",
+                            "path": "../bh-date-picker-content/bh-date-picker-content",
+                            "id": "src/components/bh-date-picker-content/bh-date-picker-content.tsx::DisabledDate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of disabled dates"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "startLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for start date input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-label",
+                "defaultValue": "'Start Date'"
+            },
+            "endLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for end date input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-label",
+                "defaultValue": "'End Date'"
+            },
+            "startPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for start date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-placeholder",
+                "defaultValue": "'Choose start date'"
+            },
+            "endPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for end date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-placeholder",
+                "defaultValue": "'Choose end date'"
+            },
+            "inputWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width for input variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-width",
+                "defaultValue": "'200px'"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the footer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "true"
+            },
+            "showOtherMonthDays": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show days from other months"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-other-month-days",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectedDateRange",
+                    "resolved": "SelectedDateRange | undefined",
+                    "references": {
+                        "SelectedDateRange": {
+                            "location": "import",
+                            "path": "../bh-date-range-picker-content/bh-date-range-picker-content",
+                            "id": "src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx::SelectedDateRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValue": {},
+            "tempSelection": {},
+            "isMenuOpen": {},
+            "isMenuClosing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when value changes"
+                },
+                "complexType": {
+                    "original": "SelectedDateRange | null",
+                    "resolved": "SelectedDateRange | null",
+                    "references": {
+                        "SelectedDateRange": {
+                            "location": "import",
+                            "path": "../bh-date-range-picker-content/bh-date-range-picker-content",
+                            "id": "src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx::SelectedDateRange"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhDateRangeSelect",
+                "name": "bhDateRangeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a date range is selected"
+                },
+                "complexType": {
+                    "original": "SelectedDateRange | null",
+                    "resolved": "SelectedDateRange | null",
+                    "references": {
+                        "SelectedDateRange": {
+                            "location": "import",
+                            "path": "../bh-date-range-picker-content/bh-date-range-picker-content",
+                            "id": "src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx::SelectedDateRange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bhDateRangeSelect",
+                "method": "handleDateRangeSelectEvent",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=bh-date-range-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-date-range-picker.js","sourceRoot":"","sources":["../../../src/components/bh-date-range-picker/bh-date-range-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Watch, Listen, h, Host } from '@stencil/core';\nimport { SelectedDate, DisabledDate } from '../bh-date-picker-content/bh-date-picker-content';\nimport { SelectedDateRange } from '../bh-date-range-picker-content/bh-date-range-picker-content';\n\nexport type DateRangePickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n  tag: 'bh-date-range-picker',\n  styleUrl: 'bh-date-range-picker.css',\n  shadow: true,\n})\nexport class BhDateRangePicker {\n  /**\n   * Variant of the date range picker trigger\n   */\n  @Prop() variant: DateRangePickerVariant = '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 start date input\n   */\n  @Prop() startLabel: string = 'Start Date';\n\n  /**\n   * Label for end date input\n   */\n  @Prop() endLabel: string = 'End Date';\n\n  /**\n   * Placeholder for start date\n   */\n  @Prop() startPlaceholder: string = 'Choose start date';\n\n  /**\n   * Placeholder for end date\n   */\n  @Prop() endPlaceholder: string = 'Choose end 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 = true;\n\n  /**\n   * Whether to show days from other months\n   */\n  @Prop() showOtherMonthDays: boolean = false;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: SelectedDateRange;\n\n  @State() selectedValue: SelectedDateRange | null = null;\n  @State() tempSelection: SelectedDateRange | 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<SelectedDateRange | null>;\n\n  /**\n   * Event emitted when a date range is selected\n   */\n  @Event() bhDateRangeSelect!: EventEmitter<SelectedDateRange | null>;\n\n  @Watch('value')\n  handleValueChange(newValue: SelectedDateRange | 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 formatDate(date: SelectedDate | null): string {\n    if (!date) return '';\n    const month = (date.month + 1).toString().padStart(2, '0');\n    const day = date.day.toString().padStart(2, '0');\n    return `${month}/${day}/${date.year}`;\n  }\n\n  private getButtonLabel(): string {\n    if (!this.selectedValue || !this.selectedValue.startDate) return 'Select date range';\n\n    const startStr = this.formatDate(this.selectedValue.startDate);\n    const endStr = this.selectedValue.endDate ? this.formatDate(this.selectedValue.endDate) : '';\n\n    if (endStr) {\n      return `${startStr} - ${endStr}`;\n    }\n    return startStr;\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  @Listen('bhDateRangeSelect')\n  handleDateRangeSelectEvent(event: CustomEvent<SelectedDateRange | null>) {\n    // Stop propagation to prevent the event from bubbling further\n    event.stopPropagation();\n\n    const range = event.detail;\n    if (this.showFooter) {\n      // With footer: update temp selection, user clicks Apply to confirm\n      this.tempSelection = range;\n    } else {\n      // Without footer: update value immediately, close only when range is complete\n      this.selectedValue = range;\n      if (range?.startDate && range?.endDate) {\n        this.bhChange.emit(range);\n        this.bhDateRangeSelect.emit(range);\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.bhChange.emit(this.tempSelection);\n      this.bhDateRangeSelect.emit(this.tempSelection);\n      this.tempSelection = null;\n    }\n    this.closeMenu();\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-range-picker-container\">\n          {/* Dropdown Outlined Variant */}\n          {this.variant === 'dropdown-outlined' && (\n            <div class=\"date-range-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-range-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-range-picker-trigger\">\n              <div class=\"date-range-inputs\" onClick={this.handleTriggerClick}>\n                <bh-input-text\n                  label={this.startLabel}\n                  placeholder={this.startPlaceholder}\n                  value={this.formatDate(this.selectedValue?.startDate || null)}\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                  readOnly={true}\n                ></bh-input-text>\n                <bh-input-text\n                  label={this.endLabel}\n                  placeholder={this.endPlaceholder}\n                  value={this.formatDate(this.selectedValue?.endDate || null)}\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                  readOnly={true}\n                ></bh-input-text>\n              </div>\n            </div>\n          )}\n\n          {/* Date Range Picker Menu */}\n          <div class=\"date-range-picker-menu-container\">\n            <bh-picker-menu\n              visible={this.isMenuOpen}\n              showFooter={this.showFooter}\n              disableApply={this.showFooter && (!this.tempSelection?.startDate || !this.tempSelection?.endDate)}\n              onBhCancel={this.handleMenuCancel}\n              onBhApply={this.handleMenuApply}\n            >\n              <bh-date-range-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              ></bh-date-range-picker-content>\n            </bh-picker-menu>\n          </div>\n        </div>\n\n        {/* Backdrop */}\n        {(this.isMenuOpen || this.isMenuClosing) && (\n          <div class=\"date-range-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}