@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-picker-menu/bh-picker-menu.js

@@ -0,0 +1,470 @@
+import { h, Host } from "@stencil/core";
+export class BhPickerMenu {
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled months
+     */
+    disabledMonths = [];
+    /**
+     * Animation class for the menu
+     */
+    animationClass = 'animate-dropdown-enter';
+    /**
+     * Whether the menu is visible
+     */
+    visible = true;
+    /**
+     * Whether to show the footer with action buttons
+     */
+    showFooter = true;
+    /**
+     * Whether to show the today button
+     */
+    showTodayButton = false;
+    /**
+     * Whether the apply button is disabled
+     */
+    disableApply = false;
+    /**
+     * Current value
+     */
+    value;
+    isClosing = false;
+    shouldRender = true;
+    selectedMonth = null;
+    selectedYear = null;
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a month/year is selected
+     */
+    bhMonthYearSelect;
+    /**
+     * Event emitted when cancel is clicked
+     */
+    bhCancel;
+    /**
+     * Event emitted when apply is clicked
+     */
+    bhApply;
+    /**
+     * Event emitted when today button is clicked
+     */
+    bhToday;
+    handleVisibleChange(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isClosing = false;
+        }
+        else {
+            this.isClosing = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isClosing = false;
+            }, 150);
+        }
+    }
+    handleValueChange(newValue) {
+        if (newValue) {
+            this.selectedMonth = newValue.month;
+            this.selectedYear = newValue.year;
+        }
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+        if (this.value) {
+            this.selectedMonth = this.value.month;
+            this.selectedYear = this.value.year;
+        }
+        else {
+            // Initialize with current date
+            const now = new Date();
+            const currentMonth = now.getMonth();
+            const currentYear = now.getFullYear();
+            if (currentYear >= this.minYear && currentYear <= this.maxYear) {
+                this.selectedMonth = currentMonth;
+                this.selectedYear = currentYear;
+            }
+            else if (currentYear < this.minYear) {
+                this.selectedYear = this.minYear;
+                this.selectedMonth = currentMonth;
+            }
+            else {
+                this.selectedYear = this.maxYear;
+                this.selectedMonth = currentMonth;
+            }
+        }
+    }
+    handleMonthYearSelect = (event) => {
+        const selection = event.detail;
+        this.selectedMonth = selection.month;
+        this.selectedYear = selection.year;
+        this.bhChange.emit(selection);
+        this.bhMonthYearSelect.emit(selection);
+    };
+    handleCancel = () => {
+        this.bhCancel.emit();
+    };
+    handleApply = () => {
+        this.bhApply.emit();
+    };
+    handleToday = () => {
+        this.bhToday.emit();
+    };
+    render() {
+        if (!this.shouldRender) {
+            return null;
+        }
+        const menuClasses = {
+            'picker-menu': true,
+            'animate-dropdown-exit': this.isClosing,
+            [this.animationClass]: !this.isClosing,
+            'no-footer': !this.showFooter,
+        };
+        return (h(Host, null, h("div", { class: menuClasses }, h("slot", null, h("bh-month-picker-content", { minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledMonths: this.disabledMonths, scrollable: true, selectedMonth: this.selectedMonth ?? undefined, selectedYear: this.selectedYear ?? undefined, onBhChange: this.handleMonthYearSelect })), this.showFooter && (h("div", { class: "picker-menu-footer" }, h("div", { class: `picker-menu-actions ${this.showTodayButton ? 'has-today-button' : ''}` }, this.showTodayButton && (h("bh-button", { hierarchy: "secondary", size: "sm", icon: "only", iconName: "today", onBhClick: this.handleToday })), h("div", { class: "picker-menu-main-actions" }, h("bh-button", { hierarchy: "secondary", size: "sm", label: "Cancel", onBhClick: this.handleCancel }), h("bh-button", { hierarchy: "primary", size: "sm", label: "Apply", disabled: this.disableApply, onBhClick: this.handleApply }))))))));
+    }
+    static get is() { return "bh-picker-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-picker-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-picker-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "minYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum year in the picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-year",
+                "defaultValue": "1998"
+            },
+            "maxYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum year in the picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-year",
+                "defaultValue": "2060"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the picker is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disabledMonths": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledMonth[]",
+                    "resolved": "DisabledMonth[]",
+                    "references": {
+                        "DisabledMonth": {
+                            "location": "import",
+                            "path": "../bh-month-picker-content/bh-month-picker-content",
+                            "id": "src/components/bh-month-picker-content/bh-month-picker-content.tsx::DisabledMonth"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of disabled months"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "animationClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation class for the menu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-class",
+                "defaultValue": "'animate-dropdown-enter'"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "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 with action buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "true"
+            },
+            "showTodayButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the today button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-today-button",
+                "defaultValue": "false"
+            },
+            "disableApply": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the apply button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-apply",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MonthYear",
+                    "resolved": "MonthYear | undefined",
+                    "references": {
+                        "MonthYear": {
+                            "location": "import",
+                            "path": "../bh-month-picker-content/bh-month-picker-content",
+                            "id": "src/components/bh-month-picker-content/bh-month-picker-content.tsx::MonthYear"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isClosing": {},
+            "shouldRender": {},
+            "selectedMonth": {},
+            "selectedYear": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when value changes"
+                },
+                "complexType": {
+                    "original": "MonthYear | null",
+                    "resolved": "MonthYear | null",
+                    "references": {
+                        "MonthYear": {
+                            "location": "import",
+                            "path": "../bh-month-picker-content/bh-month-picker-content",
+                            "id": "src/components/bh-month-picker-content/bh-month-picker-content.tsx::MonthYear"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhMonthYearSelect",
+                "name": "bhMonthYearSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a month/year is selected"
+                },
+                "complexType": {
+                    "original": "MonthYear",
+                    "resolved": "MonthYear",
+                    "references": {
+                        "MonthYear": {
+                            "location": "import",
+                            "path": "../bh-month-picker-content/bh-month-picker-content",
+                            "id": "src/components/bh-month-picker-content/bh-month-picker-content.tsx::MonthYear"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhCancel",
+                "name": "bhCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when cancel is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhApply",
+                "name": "bhApply",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when apply is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhToday",
+                "name": "bhToday",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when today button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "handleVisibleChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=bh-picker-menu.js.map

package/collection/components/bh-picker-menu/bh-picker-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-picker-menu.js","sourceRoot":"","sources":["../../../src/components/bh-picker-menu/bh-picker-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQ5F,MAAM,OAAO,YAAY;IACvB;;OAEG;IACK,OAAO,GAAW,IAAI,CAAC;IAE/B;;OAEG;IACK,OAAO,GAAW,IAAI,CAAC;IAE/B;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,GAAoB,EAAE,CAAC;IAE7C;;OAEG;IACK,cAAc,GAAW,wBAAwB,CAAC;IAE1D;;OAEG;IACK,OAAO,GAAY,IAAI,CAAC;IAEhC;;OAEG;IACK,UAAU,GAAY,IAAI,CAAC;IAEnC;;OAEG;IACK,eAAe,GAAY,KAAK,CAAC;IAEzC;;OAEG;IACK,YAAY,GAAY,KAAK,CAAC;IAEtC;;OAEG;IACK,KAAK,CAAa;IAEjB,SAAS,GAAY,KAAK,CAAC;IAC3B,YAAY,GAAY,IAAI,CAAC;IAC7B,aAAa,GAAkB,IAAI,CAAC;IACpC,YAAY,GAAkB,IAAI,CAAC;IAE5C;;OAEG;IACM,QAAQ,CAAkC;IAEnD;;OAEG;IACM,iBAAiB,CAA2B;IAErD;;OAEG;IACM,QAAQ,CAAsB;IAEvC;;OAEG;IACM,OAAO,CAAsB;IAEtC;;OAEG;IACM,OAAO,CAAsB;IAGtC,mBAAmB,CAAC,QAAiB;QACnC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzB,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;IACH,CAAC;IAGD,iBAAiB,CAAC,QAA+B;QAC/C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC;YACpC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC;QACpC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;QAEjC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YACtC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,+BAA+B;YAC/B,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,MAAM,YAAY,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;YACpC,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;YAEtC,IAAI,WAAW,IAAI,IAAI,CAAC,OAAO,IAAI,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC/D,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;gBAClC,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;YAClC,CAAC;iBAAM,IAAI,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;gBACtC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;gBACjC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;gBACjC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;YACpC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,qBAAqB,GAAG,CAAC,KAA6B,EAAE,EAAE;QAChE,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC;QACrC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,IAAI,CAAC;QACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC,CAAC;IAEM,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,WAAW,GAAG;YAClB,aAAa,EAAE,IAAI;YACnB,uBAAuB,EAAE,IAAI,CAAC,SAAS;YACvC,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS;YACtC,WAAW,EAAE,CAAC,IAAI,CAAC,UAAU;SAC9B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAE,WAAW;gBAErB;oBACE,+BACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,IAAI,EAChB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,SAAS,EAC9C,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,SAAS,EAC5C,UAAU,EAAE,IAAI,CAAC,qBAAqB,GACb,CACtB;gBAGN,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAC,oBAAoB;oBAC7B,WAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE;wBAEhF,IAAI,CAAC,eAAe,IAAI,CACvB,iBACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,IAAI,CAAC,WAAW,GAChB,CACd;wBAGD,WAAK,KAAK,EAAC,0BAA0B;4BACnC,iBACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,YAAY,GACjB;4BACb,iBACE,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,WAAW,GAChB,CACT,CACF,CACF,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { MonthYear, DisabledMonth } from '../bh-month-picker-content/bh-month-picker-content';\n\n@Component({\n  tag: 'bh-picker-menu',\n  styleUrl: 'bh-picker-menu.css',\n  shadow: true,\n})\nexport class BhPickerMenu {\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 months\n   */\n  @Prop() disabledMonths: DisabledMonth[] = [];\n\n  /**\n   * Animation class for the menu\n   */\n  @Prop() animationClass: string = 'animate-dropdown-enter';\n\n  /**\n   * Whether the menu is visible\n   */\n  @Prop() visible: boolean = true;\n\n  /**\n   * Whether to show the footer with action buttons\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Whether to show the today button\n   */\n  @Prop() showTodayButton: boolean = false;\n\n  /**\n   * Whether the apply button is disabled\n   */\n  @Prop() disableApply: boolean = false;\n\n  /**\n   * Current value\n   */\n  @Prop() value?: MonthYear;\n\n  @State() isClosing: boolean = false;\n  @State() shouldRender: boolean = true;\n  @State() selectedMonth: number | null = null;\n  @State() selectedYear: number | null = null;\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event() bhChange!: EventEmitter<MonthYear | null>;\n\n  /**\n   * Event emitted when a month/year is selected\n   */\n  @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n  /**\n   * Event emitted when cancel is clicked\n   */\n  @Event() bhCancel!: EventEmitter<void>;\n\n  /**\n   * Event emitted when apply is clicked\n   */\n  @Event() bhApply!: EventEmitter<void>;\n\n  /**\n   * Event emitted when today button is clicked\n   */\n  @Event() bhToday!: EventEmitter<void>;\n\n  @Watch('visible')\n  handleVisibleChange(newValue: boolean) {\n    if (newValue) {\n      this.shouldRender = true;\n      this.isClosing = false;\n    } else {\n      this.isClosing = true;\n      setTimeout(() => {\n        this.shouldRender = false;\n        this.isClosing = false;\n      }, 150);\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue) {\n      this.selectedMonth = newValue.month;\n      this.selectedYear = newValue.year;\n    }\n  }\n\n  componentWillLoad() {\n    this.shouldRender = this.visible;\n\n    if (this.value) {\n      this.selectedMonth = this.value.month;\n      this.selectedYear = this.value.year;\n    } else {\n      // Initialize with current date\n      const now = new Date();\n      const currentMonth = now.getMonth();\n      const currentYear = now.getFullYear();\n\n      if (currentYear >= this.minYear && currentYear <= this.maxYear) {\n        this.selectedMonth = currentMonth;\n        this.selectedYear = currentYear;\n      } else if (currentYear < this.minYear) {\n        this.selectedYear = this.minYear;\n        this.selectedMonth = currentMonth;\n      } else {\n        this.selectedYear = this.maxYear;\n        this.selectedMonth = currentMonth;\n      }\n    }\n  }\n\n  private handleMonthYearSelect = (event: CustomEvent<MonthYear>) => {\n    const selection = event.detail;\n    this.selectedMonth = selection.month;\n    this.selectedYear = selection.year;\n    this.bhChange.emit(selection);\n    this.bhMonthYearSelect.emit(selection);\n  };\n\n  private handleCancel = () => {\n    this.bhCancel.emit();\n  };\n\n  private handleApply = () => {\n    this.bhApply.emit();\n  };\n\n  private handleToday = () => {\n    this.bhToday.emit();\n  };\n\n  render() {\n    if (!this.shouldRender) {\n      return null;\n    }\n\n    const menuClasses = {\n      'picker-menu': true,\n      'animate-dropdown-exit': this.isClosing,\n      [this.animationClass]: !this.isClosing,\n      'no-footer': !this.showFooter,\n    };\n\n    return (\n      <Host>\n        <div class={menuClasses}>\n          {/* Main Content Area - render slot if provided, otherwise MonthPickerContent */}\n          <slot>\n            <bh-month-picker-content\n              minYear={this.minYear}\n              maxYear={this.maxYear}\n              disabled={this.disabled}\n              disabledMonths={this.disabledMonths}\n              scrollable={true}\n              selectedMonth={this.selectedMonth ?? undefined}\n              selectedYear={this.selectedYear ?? undefined}\n              onBhChange={this.handleMonthYearSelect}\n            ></bh-month-picker-content>\n          </slot>\n\n          {/* Footer Actions - conditionally rendered */}\n          {this.showFooter && (\n            <div class=\"picker-menu-footer\">\n              <div class={`picker-menu-actions ${this.showTodayButton ? 'has-today-button' : ''}`}>\n                {/* Today button on the left */}\n                {this.showTodayButton && (\n                  <bh-button\n                    hierarchy=\"secondary\"\n                    size=\"sm\"\n                    icon=\"only\"\n                    iconName=\"today\"\n                    onBhClick={this.handleToday}\n                  ></bh-button>\n                )}\n\n                {/* Cancel and Apply buttons always on the right */}\n                <div class=\"picker-menu-main-actions\">\n                  <bh-button\n                    hierarchy=\"secondary\"\n                    size=\"sm\"\n                    label=\"Cancel\"\n                    onBhClick={this.handleCancel}\n                  ></bh-button>\n                  <bh-button\n                    hierarchy=\"primary\"\n                    size=\"sm\"\n                    label=\"Apply\"\n                    disabled={this.disableApply}\n                    onBhClick={this.handleApply}\n                  ></bh-button>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}