well-petal 0.0.78 → 0.0.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/petal.js +9 -29
- package/package.json +1 -1
package/dist/petal.js
CHANGED
|
@@ -150,23 +150,13 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem
|
|
|
150
150
|
|
|
151
151
|
/***/ }),
|
|
152
152
|
|
|
153
|
-
/***/ "./src/animation.ts":
|
|
154
|
-
/*!**************************!*\
|
|
155
|
-
!*** ./src/animation.ts ***!
|
|
156
|
-
\**************************/
|
|
157
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
158
|
-
|
|
159
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getModalGSAPAnimation: () => (/* binding */ getModalGSAPAnimation),\n/* harmony export */ isModalAnimation: () => (/* binding */ isModalAnimation)\n/* harmony export */ });\n/* harmony import */ var _lib_animations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./lib/animations */ \"./src/lib/animations.ts\");\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _lib_breakpoints__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./lib/breakpoints */ \"./src/lib/breakpoints.ts\");\n\n\n\nconst validAnimations = [\"scale\", \"slide-up\", \"slide-down\", \"slide-left\", \"slide-right\"];\nconst animationOpenMap = {\n scale: _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateScaleUp,\n \"slide-up\": _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateOpenSlideUp,\n \"slide-down\": _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateOpenSlideDown,\n \"slide-left\": _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateOpenSlideLeft,\n \"slide-right\": _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateOpenSlideRight,\n};\nconst animationCloseMap = {\n scale: _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateScaleDown,\n \"slide-up\": _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateCloseSlideUp,\n \"slide-down\": _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateCloseSlideDown,\n \"slide-left\": _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateCloseSlideLeft,\n \"slide-right\": _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animateCloseSlideRight,\n};\n// Map open animations to their corresponding close animations\nconst reverseAnimationMap = {\n scale: \"scale\",\n \"slide-up\": \"slide-down\",\n \"slide-down\": \"slide-up\",\n \"slide-left\": \"slide-right\",\n \"slide-right\": \"slide-left\",\n};\n/**\n * Map modal type to animation for each direction\n */\nconst modalTypeAnimationMap = {\n center: { open: \"scale\", close: \"scale\" },\n left: { open: \"slide-right\", close: \"slide-left\" },\n right: { open: \"slide-left\", close: \"slide-right\" },\n top: { open: \"slide-down\", close: \"slide-up\" },\n bottom: { open: \"slide-up\", close: \"slide-down\" },\n};\n/**\n * Creates GSAP animation based on the modal's type and attributes\n * @param modal The Modal element\n * @param direction Open or Close\n * @param modalType The modal type (center, left, right, top, bottom)\n * @returns GSAP animation vars for the modal\n */\nfunction getModalGSAPAnimation(modal, direction, modalType) {\n let animationName;\n // If modal type is provided and no custom animation attributes are set, use type-based animation\n if (modalType && !modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN) && !modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_MOBILE)) {\n animationName = modalTypeAnimationMap[modalType][direction];\n }\n else {\n // Otherwise, use the attribute-based animation (legacy behavior)\n animationName = getAnimationName(modal, direction);\n }\n // Get the animation function\n let anim;\n if (direction === \"open\")\n anim = animationOpenMap[animationName]();\n else\n anim = animationCloseMap[animationName]();\n // Set the animation duration\n const duration = parseFloat(modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DURATION) || \"0.5\");\n anim.to.duration = duration;\n return anim;\n}\n/**\n *\n * @param modal The Modal element\n * @param direction Open or Close\n * @returns The name of the animation to perform\n */\nfunction getAnimationName(modal, direction) {\n const openDesktop = getModalAnimation(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN);\n const openMobile = getModalAnimation(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_MOBILE);\n const closeDesktop = getModalAnimation(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE);\n const closeMobile = getModalAnimation(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_MOBILE);\n if (direction === \"open\") {\n if ((0,_lib_breakpoints__WEBPACK_IMPORTED_MODULE_2__.isMobile)())\n return openMobile;\n else\n return openDesktop;\n }\n // If closing\n else {\n const hasCloseDesktop = modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE);\n const hasCloseMobile = modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_MOBILE);\n if ((0,_lib_breakpoints__WEBPACK_IMPORTED_MODULE_2__.isMobile)()) {\n // If no mobile close animation is set, use the reverse of the open animation\n return hasCloseMobile ? closeMobile : reverseAnimationMap[openMobile];\n }\n else {\n // If no desktop close animation is set, use the reverse of the open animation\n return hasCloseDesktop ? closeDesktop : reverseAnimationMap[openDesktop];\n }\n }\n}\n// Validate modal animation string\nfunction isModalAnimation(value) {\n return validAnimations.includes(value);\n}\n// Safe parser with fallback\nfunction getModalAnimation(modal, attr) {\n const raw = modal.getAttribute(attr);\n return isModalAnimation(raw !== null && raw !== void 0 ? raw : \"\") ? raw : \"slide-up\";\n}\n\n\n//# sourceURL=webpack://petal/./src/animation.ts?");
|
|
160
|
-
|
|
161
|
-
/***/ }),
|
|
162
|
-
|
|
163
153
|
/***/ "./src/lib/animations.ts":
|
|
164
154
|
/*!*******************************!*\
|
|
165
155
|
!*** ./src/lib/animations.ts ***!
|
|
166
156
|
\*******************************/
|
|
167
157
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
168
158
|
|
|
169
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */
|
|
159
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animations: () => (/* binding */ animations),\n/* harmony export */ createMaskAnimation: () => (/* binding */ createMaskAnimation),\n/* harmony export */ getReverseAnimation: () => (/* binding */ getReverseAnimation),\n/* harmony export */ reverseAnimationMap: () => (/* binding */ reverseAnimationMap)\n/* harmony export */ });\n/**\n * Animation Configurations\n *\n * Centralized animation definitions used by all Petal modules.\n * Returns animation configs with 'from' and 'to' states for GSAP.\n */\n/**\n * Unified animation system with configurable offsets, easing, and duration\n * - For modals: use \"100%\" offset for full viewport movements\n * - For dropdowns: use small pixel offsets (e.g., 25) for subtle movements\n * - Easing: GSAP easing function (default: \"power1.inOut\")\n * - Duration: Animation duration in seconds (default: 0.5)\n */\nconst animations = {\n scale: (options) => {\n const { ease = \"power1.inOut\", duration = 0.5 } = normalizeOptions(options);\n return {\n from: { scale: 0, opacity: 0 },\n to: { scale: 1, opacity: 1, ease, duration },\n };\n },\n \"slide-up\": (options) => {\n const { offset = \"100%\", ease = \"power1.inOut\", duration = 0.5 } = normalizeOptions(options);\n return {\n from: { x: 0, y: offset, opacity: 0 },\n to: { x: 0, y: 0, opacity: 1, ease, duration },\n };\n },\n \"slide-down\": (options) => {\n const { offset = \"100%\", ease = \"power1.inOut\", duration = 0.5 } = normalizeOptions(options);\n return {\n from: { x: 0, y: typeof offset === \"number\" ? -offset : `-${offset}`, opacity: 0 },\n to: { x: 0, y: 0, opacity: 1, ease, duration },\n };\n },\n \"slide-left\": (options) => {\n const { offset = \"100%\", ease = \"power1.inOut\", duration = 0.5 } = normalizeOptions(options);\n return {\n from: { x: offset, y: 0, opacity: 0 },\n to: { x: 0, y: 0, opacity: 1, ease, duration },\n };\n },\n \"slide-right\": (options) => {\n const { offset = \"100%\", ease = \"power1.inOut\", duration = 0.5 } = normalizeOptions(options);\n return {\n from: { x: typeof offset === \"number\" ? -offset : `-${offset}`, y: 0, opacity: 0 },\n to: { x: 0, y: 0, opacity: 1, ease, duration },\n };\n },\n};\n/**\n * Normalizes animation options to support both legacy number/string offset\n * and new AnimationOptions object\n */\nfunction normalizeOptions(options) {\n if (options === undefined || options === null) {\n return {};\n }\n if (typeof options === \"number\" || typeof options === \"string\") {\n return { offset: options };\n }\n return options;\n}\n// Mask/overlay fade animations\nfunction createMaskAnimation(targetOpacity) {\n return {\n from: { opacity: 0 },\n to: { opacity: targetOpacity, duration: 0.5 },\n };\n}\n// Animation reversal map (for closing animations)\nconst reverseAnimationMap = {\n \"scale\": \"scale\",\n \"slide-up\": \"slide-down\",\n \"slide-down\": \"slide-up\",\n \"slide-left\": \"slide-right\",\n \"slide-right\": \"slide-left\",\n};\n/**\n * Gets the reverse animation config by swapping from/to\n */\nfunction getReverseAnimation(animationType, options) {\n const reverseType = reverseAnimationMap[animationType];\n const anim = animations[reverseType](options);\n // Swap from and to for reverse\n return {\n from: anim.to,\n to: anim.from,\n };\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/animations.ts?");
|
|
170
160
|
|
|
171
161
|
/***/ }),
|
|
172
162
|
|
|
@@ -176,17 +166,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
176
166
|
\*******************************/
|
|
177
167
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
178
168
|
|
|
179
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ARIA_EXPANDED: () => (/* binding */ ARIA_EXPANDED),\n/* harmony export */ ATTR_ALLOW_CLOSE: () => (/* binding */ ATTR_ALLOW_CLOSE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_MOBILE),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN: () => (/* binding */ ATTR_PETAL_ANIM_OPEN),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_MOBILE),\n/* harmony export */ ATTR_PETAL_BANNER: () => (/* binding */ ATTR_PETAL_BANNER),\n/* harmony export */ ATTR_PETAL_BANNER_CLOSE: () => (/* binding */ ATTR_PETAL_BANNER_CLOSE),\n/* harmony export */ ATTR_PETAL_BANNER_CLOSED_CLASS: () => (/* binding */ ATTR_PETAL_BANNER_CLOSED_CLASS),\n/* harmony export */ ATTR_PETAL_CLOSE: () => (/* binding */ ATTR_PETAL_CLOSE),\n/* harmony export */ ATTR_PETAL_DEBUG: () => (/* binding */ ATTR_PETAL_DEBUG),\n/* harmony export */ ATTR_PETAL_DIALOG: () => (/* binding */ ATTR_PETAL_DIALOG),\n/* harmony export */ ATTR_PETAL_DISABLE_SCROLL_ON_OPEN: () => (/* binding */ ATTR_PETAL_DISABLE_SCROLL_ON_OPEN),\n/* harmony export */ ATTR_PETAL_DROPDOWN: () => (/* binding */ ATTR_PETAL_DROPDOWN),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_CLOSE: () => (/* binding */ ATTR_PETAL_DROPDOWN_CLOSE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_CLOSE_DELAY: () => (/* binding */ ATTR_PETAL_DROPDOWN_CLOSE_DELAY),\n/* harmony export */ ATTR_PETAL_DROPDOWN_EXPAND_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_EXPAND_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_EXPAND_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_EXPAND_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_EXPAND_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_EXPAND_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_MENU: () => (/* binding */ ATTR_PETAL_DROPDOWN_MENU),\n/* harmony export */ ATTR_PETAL_DROPDOWN_MENU_BOX: () => (/* binding */ ATTR_PETAL_DROPDOWN_MENU_BOX),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_DELAY: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_DELAY),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SCROLL: () => (/* binding */ ATTR_PETAL_DROPDOWN_SCROLL),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_DESKTOP: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_DESKTOP),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_TOGGLE: () => (/* binding */ ATTR_PETAL_DROPDOWN_TOGGLE),\n/* harmony export */ ATTR_PETAL_DURATION: () => (/* binding */ ATTR_PETAL_DURATION),\n/* harmony export */ ATTR_PETAL_ELEMENT: () => (/* binding */ ATTR_PETAL_ELEMENT),\n/* harmony export */ ATTR_PETAL_GROUP: () => (/* binding */ ATTR_PETAL_GROUP),\n/* harmony export */ ATTR_PETAL_MODAL: () => (/* binding */ ATTR_PETAL_MODAL),\n/* harmony export */ ATTR_PETAL_MODAL_TYPE: () => (/* binding */ ATTR_PETAL_MODAL_TYPE),\n/* harmony export */ ATTR_PETAL_NAME: () => (/* binding */ ATTR_PETAL_NAME),\n/* harmony export */ ATTR_PETAL_NAV: () => (/* binding */ ATTR_PETAL_NAV),\n/* harmony export */ ATTR_PETAL_NAV_SECONDARY: () => (/* binding */ ATTR_PETAL_NAV_SECONDARY),\n/* harmony export */ ATTR_PETAL_OPEN: () => (/* binding */ ATTR_PETAL_OPEN),\n/* harmony export */ ATTR_PETAL_OVERLAY: () => (/* binding */ ATTR_PETAL_OVERLAY),\n/* harmony export */ ATTR_PETAL_OVERLAY_CLOSE: () => (/* binding */ ATTR_PETAL_OVERLAY_CLOSE),\n/* harmony export */ ATTR_PETAL_OVERLAY_OPACITY: () => (/* binding */ ATTR_PETAL_OVERLAY_OPACITY),\n/* harmony export */ ATTR_PETAL_POSITION: () => (/* binding */ ATTR_PETAL_POSITION),\n/* harmony export */ ATTR_PETAL_SESSION_TTL: () => (/* binding */ ATTR_PETAL_SESSION_TTL),\n/* harmony export */ ATTR_PETAL_SHOW_DELAY: () => (/* binding */ ATTR_PETAL_SHOW_DELAY),\n/* harmony export */ ATTR_PETAL_SHOW_ONCE: () => (/* binding */ ATTR_PETAL_SHOW_ONCE),\n/* harmony export */ ATTR_PETAL_STATE: () => (/* binding */ ATTR_PETAL_STATE),\n/* harmony export */ ATTR_PETAL_TRIGGER_CLOSE: () => (/* binding */ ATTR_PETAL_TRIGGER_CLOSE)\n/* harmony export */ });\n// BASE\nconst ATTR_PETAL_NAME = \"petal\";\nconst ATTR_PETAL_ELEMENT = \"petal-el\";\nconst ATTR_PETAL_GROUP = \"petal-group\"; // Group name for coordinated behavior across components\nconst ATTR_PETAL_STATE = \"petal-state\";\nconst ATTR_PETAL_DEBUG = \"petal-debug\"; // Enable debug console logging\n// BEHAVIOR\nconst ATTR_PETAL_SHOW_ONCE = \"petal-show-once\"; // Regardless of other settings, only show the modal once per user session\nconst ATTR_PETAL_SHOW_DELAY = \"petal-show-delay\"; // Time to wait before showing modal (in seconds)\nconst ATTR_PETAL_SESSION_TTL = \"petal-session-ttl\"; // Time to keep user session (in hours)\n/**-------------------------*\n * OVERLAY\n *--------------------------*/\nconst ATTR_PETAL_OVERLAY = \"overlay\";\nconst ATTR_PETAL_OVERLAY_OPACITY = \"petal-overlay-opacity\";\nconst ATTR_PETAL_OVERLAY_CLOSE = \"petal-overlay-close\";\n/**-------------------------*\n * MODAL\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_MODAL = \"modal\";\nconst ATTR_PETAL_OPEN = \"open\";\nconst ATTR_PETAL_TRIGGER_CLOSE = \"trigger-close\";\nconst ATTR_PETAL_DIALOG = \"dialog\";\n// DEPRECATED - Use ATTR_PETAL_TRIGGER_CLOSE instead\nconst ATTR_PETAL_CLOSE = \"close\";\n// MODAL TYPE\nconst ATTR_PETAL_MODAL_TYPE = \"petal-modal-type\";\n// ANIMATIONS\nconst ATTR_PETAL_ANIM_OPEN = \"petal-anim-open\";\nconst ATTR_PETAL_ANIM_CLOSE = \"petal-anim-close\";\nconst ATTR_PETAL_ANIM_OPEN_MOBILE = \"petal-anim-open-mobile\";\nconst ATTR_PETAL_ANIM_CLOSE_MOBILE = \"petal-anim-close-mobile\";\nconst ATTR_PETAL_DURATION = \"petal-duration\";\n/**-------------------------*\n * NAV\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_NAV = \"nav\";\nconst ATTR_PETAL_NAV_SECONDARY = \"nav-secondary\";\nconst ATTR_PETAL_BANNER = \"banner\";\nconst ATTR_PETAL_BANNER_CLOSE = \"banner-close\";\n// SETTINGS\nconst ATTR_ALLOW_CLOSE = \"petal-allow-close\";\nconst ATTR_PETAL_POSITION = \"petal-position\";\n// CSS\nconst ATTR_PETAL_BANNER_CLOSED_CLASS = \"petal-hide-nav-banner\";\n/**-------------------------*\n * DROPDOWN\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_DROPDOWN = \"dropdown\";\nconst ATTR_PETAL_DROPDOWN_TOGGLE = \"dropdown-toggle\";\nconst ATTR_PETAL_DROPDOWN_MENU = \"dropdown-menu\";\nconst ATTR_PETAL_DROPDOWN_MENU_BOX = \"dropdown-drawer\";\nconst ATTR_PETAL_DROPDOWN_SCROLL = \"dropdown-scroll\";\n// DEPRECATED - Use ATTR_PETAL_TRIGGER_CLOSE instead\nconst ATTR_PETAL_DROPDOWN_CLOSE = \"dropdown-close\";\n// BEHAVIOR\nconst ATTR_PETAL_DISABLE_SCROLL_ON_OPEN = \"petal-disable-scroll-on-open\";\n// OPEN/CLOSE BEHAVIOR\nconst ATTR_PETAL_DROPDOWN_OPEN_DELAY = \"petal-dropdown-open-delay\";\nconst ATTR_PETAL_DROPDOWN_CLOSE_DELAY = \"petal-dropdown-close-delay\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER = \"petal-dropdown-open-on-hover\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET = \"petal-dropdown-open-on-hover-tablet\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE = \"petal-dropdown-open-on-hover-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE = \"petal-dropdown-open-on-hover-mobile\";\n// VISIBILITY\nconst ATTR_PETAL_DROPDOWN_SHOW_DESKTOP = \"petal-dropdown-show-desktop\";\nconst ATTR_PETAL_DROPDOWN_SHOW_TABLET = \"petal-dropdown-show-tablet\";\nconst ATTR_PETAL_DROPDOWN_SHOW_MOBILE_LANDSCAPE = \"petal-dropdown-show-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_SHOW_MOBILE = \"petal-dropdown-show-mobile\";\n// EXPAND\nconst ATTR_PETAL_DROPDOWN_EXPAND_TABLET = \"petal-dropdown-expand-tablet\";\nconst ATTR_PETAL_DROPDOWN_EXPAND_MOBILE_LANDSCAPE = \"petal-dropdown-expand-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_EXPAND_MOBILE = \"petal-dropdown-expand-mobile\";\n// ANIMATIONS\nconst ATTR_PETAL_DROPDOWN_ANIM = \"petal-dropdown-anim\";\nconst ATTR_PETAL_DROPDOWN_ANIM_TABLET = \"petal-dropdown-anim-tablet\";\nconst ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE = \"petal-dropdown-anim-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_ANIM_MOBILE = \"petal-dropdown-anim-mobile\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED = \"petal-dropdown-anim-open-speed\";\nconst ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED = \"petal-dropdown-anim-close-speed\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OFFSET = \"petal-dropdown-anim-offset\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET = \"petal-dropdown-anim-offset-tablet\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE = \"petal-dropdown-anim-offset-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE = \"petal-dropdown-anim-offset-mobile\";\n// ARIA ATTRIBUTES\nconst ARIA_EXPANDED = \"aria-expanded\";\n\n\n//# sourceURL=webpack://petal/./src/lib/attributes.ts?");
|
|
180
|
-
|
|
181
|
-
/***/ }),
|
|
182
|
-
|
|
183
|
-
/***/ "./src/lib/breakpoints.ts":
|
|
184
|
-
/*!********************************!*\
|
|
185
|
-
!*** ./src/lib/breakpoints.ts ***!
|
|
186
|
-
\********************************/
|
|
187
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
188
|
-
|
|
189
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ isMobile: () => (/* binding */ isMobile)\n/* harmony export */ });\n// Device check\nfunction isMobile() {\n return window.innerWidth <= 768;\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/breakpoints.ts?");
|
|
169
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ARIA_EXPANDED: () => (/* binding */ ARIA_EXPANDED),\n/* harmony export */ ATTR_ALLOW_CLOSE: () => (/* binding */ ATTR_ALLOW_CLOSE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_DURATION: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_DURATION),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_EASE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_EASE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_MOBILE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_SPEED: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_SPEED),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_TABLET: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_TABLET),\n/* harmony export */ ATTR_PETAL_ANIM_OFFSET: () => (/* binding */ ATTR_PETAL_ANIM_OFFSET),\n/* harmony export */ ATTR_PETAL_ANIM_OFFSET_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_OFFSET_MOBILE),\n/* harmony export */ ATTR_PETAL_ANIM_OFFSET_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_ANIM_OFFSET_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_ANIM_OFFSET_TABLET: () => (/* binding */ ATTR_PETAL_ANIM_OFFSET_TABLET),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN: () => (/* binding */ ATTR_PETAL_ANIM_OPEN),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_DURATION: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_DURATION),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_EASE: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_EASE),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_MOBILE),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_SPEED: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_SPEED),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_TABLET: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_TABLET),\n/* harmony export */ ATTR_PETAL_BANNER: () => (/* binding */ ATTR_PETAL_BANNER),\n/* harmony export */ ATTR_PETAL_BANNER_CLOSE: () => (/* binding */ ATTR_PETAL_BANNER_CLOSE),\n/* harmony export */ ATTR_PETAL_BANNER_CLOSED_CLASS: () => (/* binding */ ATTR_PETAL_BANNER_CLOSED_CLASS),\n/* harmony export */ ATTR_PETAL_CLOSE: () => (/* binding */ ATTR_PETAL_CLOSE),\n/* harmony export */ ATTR_PETAL_DEBUG: () => (/* binding */ ATTR_PETAL_DEBUG),\n/* harmony export */ ATTR_PETAL_DIALOG: () => (/* binding */ ATTR_PETAL_DIALOG),\n/* harmony export */ ATTR_PETAL_DISABLE_SCROLL_ON_OPEN: () => (/* binding */ ATTR_PETAL_DISABLE_SCROLL_ON_OPEN),\n/* harmony export */ ATTR_PETAL_DROPDOWN: () => (/* binding */ ATTR_PETAL_DROPDOWN),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_CLOSE_DELAY: () => (/* binding */ ATTR_PETAL_DROPDOWN_CLOSE_DELAY),\n/* harmony export */ ATTR_PETAL_DROPDOWN_EXPAND_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_EXPAND_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_EXPAND_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_EXPAND_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_EXPAND_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_EXPAND_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_MENU: () => (/* binding */ ATTR_PETAL_DROPDOWN_MENU),\n/* harmony export */ ATTR_PETAL_DROPDOWN_MENU_BOX: () => (/* binding */ ATTR_PETAL_DROPDOWN_MENU_BOX),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_DELAY: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_DELAY),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SCROLL: () => (/* binding */ ATTR_PETAL_DROPDOWN_SCROLL),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_DESKTOP: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_DESKTOP),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_TOGGLE: () => (/* binding */ ATTR_PETAL_DROPDOWN_TOGGLE),\n/* harmony export */ ATTR_PETAL_ELEMENT: () => (/* binding */ ATTR_PETAL_ELEMENT),\n/* harmony export */ ATTR_PETAL_GROUP: () => (/* binding */ ATTR_PETAL_GROUP),\n/* harmony export */ ATTR_PETAL_MODAL: () => (/* binding */ ATTR_PETAL_MODAL),\n/* harmony export */ ATTR_PETAL_MODAL_TYPE: () => (/* binding */ ATTR_PETAL_MODAL_TYPE),\n/* harmony export */ ATTR_PETAL_NAME: () => (/* binding */ ATTR_PETAL_NAME),\n/* harmony export */ ATTR_PETAL_NAV: () => (/* binding */ ATTR_PETAL_NAV),\n/* harmony export */ ATTR_PETAL_NAV_SECONDARY: () => (/* binding */ ATTR_PETAL_NAV_SECONDARY),\n/* harmony export */ ATTR_PETAL_OPEN: () => (/* binding */ ATTR_PETAL_OPEN),\n/* harmony export */ ATTR_PETAL_OVERLAY: () => (/* binding */ ATTR_PETAL_OVERLAY),\n/* harmony export */ ATTR_PETAL_OVERLAY_CLOSE: () => (/* binding */ ATTR_PETAL_OVERLAY_CLOSE),\n/* harmony export */ ATTR_PETAL_OVERLAY_OPACITY: () => (/* binding */ ATTR_PETAL_OVERLAY_OPACITY),\n/* harmony export */ ATTR_PETAL_POSITION: () => (/* binding */ ATTR_PETAL_POSITION),\n/* harmony export */ ATTR_PETAL_SESSION_TTL: () => (/* binding */ ATTR_PETAL_SESSION_TTL),\n/* harmony export */ ATTR_PETAL_SHOW_DELAY: () => (/* binding */ ATTR_PETAL_SHOW_DELAY),\n/* harmony export */ ATTR_PETAL_SHOW_ONCE: () => (/* binding */ ATTR_PETAL_SHOW_ONCE),\n/* harmony export */ ATTR_PETAL_STATE: () => (/* binding */ ATTR_PETAL_STATE),\n/* harmony export */ ATTR_PETAL_TRIGGER_CLOSE: () => (/* binding */ ATTR_PETAL_TRIGGER_CLOSE)\n/* harmony export */ });\n// BASE\nconst ATTR_PETAL_NAME = \"petal\";\nconst ATTR_PETAL_ELEMENT = \"petal-el\";\nconst ATTR_PETAL_GROUP = \"petal-group\"; // Group name for coordinated behavior across components\nconst ATTR_PETAL_STATE = \"petal-state\";\nconst ATTR_PETAL_DEBUG = \"petal-debug\"; // Enable debug console logging\n// BEHAVIOR\nconst ATTR_PETAL_SHOW_ONCE = \"petal-show-once\"; // Regardless of other settings, only show the modal once per user session\nconst ATTR_PETAL_SHOW_DELAY = \"petal-show-delay\"; // Time to wait before showing modal (in seconds)\nconst ATTR_PETAL_SESSION_TTL = \"petal-session-ttl\"; // Time to keep user session (in hours)\n// ANIMATIONS\nconst ATTR_PETAL_ANIM_OPEN = \"petal-anim-open\";\nconst ATTR_PETAL_ANIM_OPEN_TABLET = \"petal-anim-open-tablet\";\nconst ATTR_PETAL_ANIM_OPEN_MOBILE_LANDSCAPE = \"petal-anim-open-mobile-landscape\";\nconst ATTR_PETAL_ANIM_OPEN_MOBILE = \"petal-anim-open-mobile\";\nconst ATTR_PETAL_ANIM_OPEN_EASE = \"petal-anim-open-ease\";\nconst ATTR_PETAL_ANIM_OPEN_DURATION = \"petal-anim-open-duration\";\nconst ATTR_PETAL_ANIM_CLOSE = \"petal-anim-close\";\nconst ATTR_PETAL_ANIM_CLOSE_TABLET = \"petal-anim-close-tablet\";\nconst ATTR_PETAL_ANIM_CLOSE_MOBILE_LANDSCAPE = \"petal-anim-close-mobile-landscape\";\nconst ATTR_PETAL_ANIM_CLOSE_MOBILE = \"petal-anim-close-mobile\";\nconst ATTR_PETAL_ANIM_CLOSE_EASE = \"petal-anim-close-ease\";\nconst ATTR_PETAL_ANIM_CLOSE_DURATION = \"petal-anim-close-duration\";\nconst ATTR_PETAL_ANIM_OPEN_SPEED = \"petal-anim-open-speed\";\nconst ATTR_PETAL_ANIM_CLOSE_SPEED = \"petal-anim-close-speed\";\nconst ATTR_PETAL_ANIM_OFFSET = \"petal-anim-offset\";\nconst ATTR_PETAL_ANIM_OFFSET_TABLET = \"petal-anim-offset-tablet\";\nconst ATTR_PETAL_ANIM_OFFSET_MOBILE_LANDSCAPE = \"petal-anim-offset-mobile-landscape\";\nconst ATTR_PETAL_ANIM_OFFSET_MOBILE = \"petal-anim-offset-mobile\";\n/**-------------------------*\n * OVERLAY\n *--------------------------*/\nconst ATTR_PETAL_OVERLAY = \"overlay\";\nconst ATTR_PETAL_OVERLAY_OPACITY = \"petal-overlay-opacity\";\nconst ATTR_PETAL_OVERLAY_CLOSE = \"petal-overlay-close\";\n/**-------------------------*\n * MODAL\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_MODAL = \"modal\";\nconst ATTR_PETAL_OPEN = \"open\";\nconst ATTR_PETAL_TRIGGER_CLOSE = \"trigger-close\";\nconst ATTR_PETAL_DIALOG = \"dialog\";\n// DEPRECATED - Use ATTR_PETAL_TRIGGER_CLOSE instead\nconst ATTR_PETAL_CLOSE = \"close\";\n// MODAL TYPE\nconst ATTR_PETAL_MODAL_TYPE = \"petal-modal-type\";\n/**-------------------------*\n * NAV\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_NAV = \"nav\";\nconst ATTR_PETAL_NAV_SECONDARY = \"nav-secondary\";\nconst ATTR_PETAL_BANNER = \"banner\";\nconst ATTR_PETAL_BANNER_CLOSE = \"banner-close\";\n// SETTINGS\nconst ATTR_ALLOW_CLOSE = \"petal-allow-close\";\nconst ATTR_PETAL_POSITION = \"petal-position\";\n// CSS\nconst ATTR_PETAL_BANNER_CLOSED_CLASS = \"petal-hide-nav-banner\";\n/**-------------------------*\n * DROPDOWN\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_DROPDOWN = \"dropdown\";\nconst ATTR_PETAL_DROPDOWN_TOGGLE = \"dropdown-toggle\";\nconst ATTR_PETAL_DROPDOWN_MENU = \"dropdown-menu\";\nconst ATTR_PETAL_DROPDOWN_MENU_BOX = \"dropdown-drawer\";\nconst ATTR_PETAL_DROPDOWN_SCROLL = \"dropdown-scroll\";\n// BEHAVIOR\nconst ATTR_PETAL_DISABLE_SCROLL_ON_OPEN = \"petal-disable-scroll-on-open\";\n// OPEN/CLOSE BEHAVIOR\nconst ATTR_PETAL_DROPDOWN_OPEN_DELAY = \"petal-dropdown-open-delay\";\nconst ATTR_PETAL_DROPDOWN_CLOSE_DELAY = \"petal-dropdown-close-delay\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER = \"petal-dropdown-open-on-hover\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET = \"petal-dropdown-open-on-hover-tablet\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE = \"petal-dropdown-open-on-hover-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE = \"petal-dropdown-open-on-hover-mobile\";\n// VISIBILITY\nconst ATTR_PETAL_DROPDOWN_SHOW_DESKTOP = \"petal-dropdown-show-desktop\";\nconst ATTR_PETAL_DROPDOWN_SHOW_TABLET = \"petal-dropdown-show-tablet\";\nconst ATTR_PETAL_DROPDOWN_SHOW_MOBILE_LANDSCAPE = \"petal-dropdown-show-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_SHOW_MOBILE = \"petal-dropdown-show-mobile\";\n// EXPAND\nconst ATTR_PETAL_DROPDOWN_EXPAND_TABLET = \"petal-dropdown-expand-tablet\";\nconst ATTR_PETAL_DROPDOWN_EXPAND_MOBILE_LANDSCAPE = \"petal-dropdown-expand-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_EXPAND_MOBILE = \"petal-dropdown-expand-mobile\";\n// DEPRECATED - Use unified ATTR_PETAL_ANIM_* attributes instead\nconst ATTR_PETAL_DROPDOWN_ANIM = \"petal-dropdown-anim\";\nconst ATTR_PETAL_DROPDOWN_ANIM_TABLET = \"petal-dropdown-anim-tablet\";\nconst ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE = \"petal-dropdown-anim-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_ANIM_MOBILE = \"petal-dropdown-anim-mobile\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED = \"petal-dropdown-anim-open-speed\";\nconst ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED = \"petal-dropdown-anim-close-speed\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OFFSET = \"petal-dropdown-anim-offset\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET = \"petal-dropdown-anim-offset-tablet\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE = \"petal-dropdown-anim-offset-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE = \"petal-dropdown-anim-offset-mobile\";\n// ARIA ATTRIBUTES\nconst ARIA_EXPANDED = \"aria-expanded\";\n\n\n//# sourceURL=webpack://petal/./src/lib/attributes.ts?");
|
|
190
170
|
|
|
191
171
|
/***/ }),
|
|
192
172
|
|
|
@@ -246,7 +226,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
246
226
|
\***************************************************/
|
|
247
227
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
248
228
|
|
|
249
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateClose: () => (/* binding */ animateClose),\n/* harmony export */ animateOpen: () => (/* binding */ animateOpen),\n/* harmony export */ initializeDrawerPosition: () => (/* binding */ initializeDrawerPosition)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var _lib_animations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/animations */ \"./src/lib/animations.ts\");\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/**\n * Dropdown Animator Module\n *\n * Handles GSAP animations for dropdown menus including:\n * - Opening/closing animations\n * - Overlay fade transitions\n * - Timeline management\n */\n\n\n\n
|
|
229
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateClose: () => (/* binding */ animateClose),\n/* harmony export */ animateOpen: () => (/* binding */ animateOpen),\n/* harmony export */ initializeDrawerPosition: () => (/* binding */ initializeDrawerPosition)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var _lib_animations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/animations */ \"./src/lib/animations.ts\");\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/**\n * Dropdown Animator Module\n *\n * Handles GSAP animations for dropdown menus including:\n * - Opening/closing animations\n * - Overlay fade transitions\n * - Timeline management\n */\n\n\n\n/**\n * Animates dropdown opening with GSAP\n */\nfunction animateOpen(elements, currentAnim, currentOffset, config, index) {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - performOpen() executing with GSAP`);\n const { dropdown, toggle, menu, drawer, overlay } = elements;\n // Build animation options with easing and duration\n const animOptions = {\n offset: currentOffset,\n ease: config.animOpenEase || undefined,\n duration: config.animOpenSpeed\n };\n const anim = _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animations[currentAnim](animOptions);\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline();\n // Set menu to visible with flex display\n tl.set(menu, { display: \"flex\", visibility: \"visible\" });\n // Set overlay to flex and visible if it exists\n if (overlay) {\n tl.set(overlay, { display: \"flex\", visibility: \"visible\" }, \"<\");\n }\n // Animate the drawer (duration and ease are now in anim.to)\n tl.fromTo(drawer, anim.from, anim.to, \"<\");\n // Update ARIA and state\n toggle.setAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"true\");\n dropdown.setAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_STATE, \"open\");\n // Fade in overlay\n if (overlay) {\n tl.to(overlay, { opacity: 1, duration: config.animOpenSpeed }, \"<\");\n }\n return tl;\n}\n/**\n * Animates dropdown closing with GSAP\n */\nfunction animateClose(elements, currentOpenAnim, currentCloseAnim, currentOffset, config, index) {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - closeDropdown() executing with GSAP`);\n const { dropdown, toggle, menu, drawer, overlay } = elements;\n // Build animation options with easing and duration\n const animOptions = {\n offset: currentOffset,\n ease: config.animCloseEase || undefined,\n duration: config.animCloseSpeed\n };\n // Use explicit close animation if provided, otherwise reverse the open animation\n const anim = currentCloseAnim\n ? (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.getReverseAnimation)(currentCloseAnim, animOptions)\n : (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.getReverseAnimation)(currentOpenAnim, animOptions);\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline({\n onComplete: () => {\n // Update ARIA and state after animation completes\n toggle.setAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"false\");\n dropdown.setAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_STATE, \"closed\");\n // Set display to none and visibility to hidden after animation completes\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(menu, { display: \"none\", visibility: \"hidden\" });\n if (overlay) {\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(overlay, { display: \"none\", visibility: \"hidden\" });\n }\n },\n });\n // Animate the drawer (duration and ease are now in anim.to)\n tl.fromTo(drawer, anim.from, anim.to);\n // Fade out overlay\n if (overlay) {\n tl.to(overlay, { opacity: 0, duration: config.animCloseSpeed }, \"<\");\n }\n return tl;\n}\n/**\n * Initialize drawer to its animation's starting position\n */\nfunction initializeDrawerPosition(drawer, currentAnim, currentOffset) {\n // For initialization, we only need the offset (duration and easing don't apply)\n const anim = _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animations[currentAnim]({ offset: currentOffset });\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(drawer, anim.from);\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown-animator.ts?");
|
|
250
230
|
|
|
251
231
|
/***/ }),
|
|
252
232
|
|
|
@@ -256,7 +236,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
256
236
|
\*************************************************/
|
|
257
237
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
258
238
|
|
|
259
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getCurrentAnimation: () => (/* binding */ getCurrentAnimation),\n/* harmony export */ getCurrentOffset: () => (/* binding */ getCurrentOffset),\n/* harmony export */ getCurrentOpenOnHover: () => (/* binding */ getCurrentOpenOnHover),\n/* harmony export */ getCurrentShowState: () => (/* binding */ getCurrentShowState),\n/* harmony export */ logConfig: () => (/* binding */ logConfig),\n/* harmony export */ parseDropdownConfig: () => (/* binding */ parseDropdownConfig)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/**\n * Dropdown Configuration Module\n *\n * Handles parsing and managing dropdown configuration from HTML attributes\n * including animations, delays, offsets, and responsive breakpoints.\n */\n\n/**\n * Parse offset value from attribute string\n * Returns number for pixel values, string for percentage values\n */\nfunction parseOffset(value) {\n if (value.includes(\"%\")) {\n return value;\n }\n return parseInt(value);\n}\n/**\n * Parse boolean attribute value with null for unspecified\n */\nfunction parseBooleanOrNull(value) {\n if (value === null)\n return null;\n return value === \"true\";\n}\n/**\n * Parses dropdown configuration from HTML element attributes\n */\nfunction parseDropdownConfig(dropdown) {\n // Group coordination\n const group = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP) || null;\n // Debug mode\n const debug = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DEBUG) === \"true\";\n // Check if device has mouse capability (pointer device)\n const hasMouse = window.matchMedia(\"(pointer: fine)\").matches;\n // Scroll lock\n const disableScrollOnOpen = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DISABLE_SCROLL_ON_OPEN) === \"true\";\n // Open-on-hover configuration with breakpoints\n const openOnHoverDesktopAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER);\n const openOnHoverTabletAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET);\n const openOnHoverMobileLandscapeAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE);\n const openOnHoverMobileAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE);\n const openOnHoverDesktop = openOnHoverDesktopAttr === \"true\";\n const openOnHoverTablet = parseBooleanOrNull(openOnHoverTabletAttr);\n const openOnHoverMobileLandscape = parseBooleanOrNull(openOnHoverMobileLandscapeAttr);\n const openOnHoverMobile = parseBooleanOrNull(openOnHoverMobileAttr);\n // Show on breakpoints configuration (defaults to true)\n const showDesktopAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_SHOW_DESKTOP);\n const showTabletAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_SHOW_TABLET);\n const showMobileLandscapeAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_SHOW_MOBILE_LANDSCAPE);\n const showMobileAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_SHOW_MOBILE);\n const showDesktop = showDesktopAttr === null ? true : showDesktopAttr === \"true\";\n const showTablet = parseBooleanOrNull(showTabletAttr);\n const showMobileLandscape = parseBooleanOrNull(showMobileLandscapeAttr);\n const showMobile = parseBooleanOrNull(showMobileAttr);\n // Delays\n const openDelay = parseInt(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_DELAY) || \"200\");\n const closeDelay = parseInt(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"200\");\n // Animation configuration\n const anim = (dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM) || \"slide-down\");\n const animTablet = (dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_TABLET) || anim);\n const animMobileLandscape = (dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE) || animTablet);\n const animMobile = (dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE) || animMobileLandscape);\n // Animation speed configuration (in milliseconds, converted to seconds for GSAP)\n const animOpenSpeed = parseInt(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED) || \"500\") / 1000;\n const animCloseSpeed = parseInt(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED) || \"300\") / 1000;\n // Animation offset configuration (in pixels or percentage) with breakpoints\n const animOffsetRaw = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET) || \"25\";\n const animOffset = parseOffset(animOffsetRaw);\n const animOffsetTablet = parseOffset(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET) || animOffsetRaw);\n const animOffsetMobileLandscape = parseOffset(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE) || dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET) || animOffsetRaw);\n const animOffsetMobile = parseOffset(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE) ||\n dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE) ||\n dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET) ||\n animOffsetRaw);\n return {\n group,\n debug,\n hasMouse,\n disableScrollOnOpen,\n openOnHoverDesktop,\n openOnHoverTablet,\n openOnHoverMobileLandscape,\n openOnHoverMobile,\n showDesktop,\n showTablet,\n showMobileLandscape,\n showMobile,\n openDelay,\n closeDelay,\n anim,\n animTablet,\n animMobileLandscape,\n animMobile,\n animOpenSpeed,\n animCloseSpeed,\n animOffset,\n animOffsetTablet,\n animOffsetMobileLandscape,\n animOffsetMobile,\n };\n}\n/**\n * Get current animation based on screen width\n */\nfunction getCurrentAnimation(config) {\n const width = window.innerWidth;\n if (width <= 479)\n return config.animMobile;\n if (width <= 767)\n return config.animMobileLandscape;\n if (width <= 991)\n return config.animTablet;\n return config.anim;\n}\n/**\n * Get current animation offset based on screen width\n */\nfunction getCurrentOffset(config) {\n const width = window.innerWidth;\n if (width <= 479)\n return config.animOffsetMobile;\n if (width <= 767)\n return config.animOffsetMobileLandscape;\n if (width <= 991)\n return config.animOffsetTablet;\n return config.animOffset;\n}\n/**\n * Get current open-on-hover setting based on screen width and device capability\n */\nfunction getCurrentOpenOnHover(config) {\n const width = window.innerWidth;\n let shouldHover = config.openOnHoverDesktop;\n if (width <= 479 && config.openOnHoverMobile !== null) {\n shouldHover = config.openOnHoverMobile;\n }\n else if (width <= 767 && config.openOnHoverMobileLandscape !== null) {\n shouldHover = config.openOnHoverMobileLandscape;\n }\n else if (width <= 991 && config.openOnHoverTablet !== null) {\n shouldHover = config.openOnHoverTablet;\n }\n // Only enable hover if device has mouse OR on desktop (width > 991)\n // This ensures hover works on desktop even if pointer detection is uncertain\n return shouldHover && (config.hasMouse || width > 991);\n}\n/**\n * Get current show state based on screen width\n */\nfunction getCurrentShowState(config) {\n const width = window.innerWidth;\n let shouldShow = config.showDesktop;\n if (width <= 479 && config.showMobile !== null) {\n shouldShow = config.showMobile;\n }\n else if (width <= 767 && config.showMobileLandscape !== null) {\n shouldShow = config.showMobileLandscape;\n }\n else if (width <= 991 && config.showTablet !== null) {\n shouldShow = config.showTablet;\n }\n return shouldShow;\n}\n/**\n * Log configuration for debugging\n */\nfunction logConfig(index, config) {\n if (!config.debug)\n return;\n console.log(`Dropdown ${index + 1} - Config:`, {\n group: config.group,\n debug: config.debug,\n hasMouse: config.hasMouse,\n openOnHoverDesktop: config.openOnHoverDesktop,\n openOnHoverTablet: config.openOnHoverTablet,\n openOnHoverMobileLandscape: config.openOnHoverMobileLandscape,\n openOnHoverMobile: config.openOnHoverMobile,\n openOnHover: getCurrentOpenOnHover(config),\n showDesktop: config.showDesktop,\n showTablet: config.showTablet,\n showMobileLandscape: config.showMobileLandscape,\n showMobile: config.showMobile,\n shouldShow: getCurrentShowState(config),\n openDelay: config.openDelay,\n closeDelay: config.closeDelay,\n anim: config.anim,\n animTablet: config.animTablet,\n animMobileLandscape: config.animMobileLandscape,\n animMobile: config.animMobile,\n animOpenSpeed: `${config.animOpenSpeed}s`,\n animCloseSpeed: `${config.animCloseSpeed}s`,\n animOffset: config.animOffset,\n animOffsetTablet: config.animOffsetTablet,\n animOffsetMobileLandscape: config.animOffsetMobileLandscape,\n animOffsetMobile: config.animOffsetMobile,\n });\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown-config.ts?");
|
|
239
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getCurrentCloseAnimation: () => (/* binding */ getCurrentCloseAnimation),\n/* harmony export */ getCurrentOffset: () => (/* binding */ getCurrentOffset),\n/* harmony export */ getCurrentOpenAnimation: () => (/* binding */ getCurrentOpenAnimation),\n/* harmony export */ getCurrentOpenOnHover: () => (/* binding */ getCurrentOpenOnHover),\n/* harmony export */ getCurrentShowState: () => (/* binding */ getCurrentShowState),\n/* harmony export */ logConfig: () => (/* binding */ logConfig),\n/* harmony export */ parseDropdownConfig: () => (/* binding */ parseDropdownConfig)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/**\n * Dropdown Configuration Module\n *\n * Handles parsing and managing dropdown configuration from HTML attributes\n * including animations, delays, offsets, and responsive breakpoints.\n */\n\n/**\n * Parse offset value from attribute string\n * Returns number for pixel values, string for percentage values\n */\nfunction parseOffset(value) {\n if (value.includes(\"%\")) {\n return value;\n }\n return parseInt(value);\n}\n/**\n * Parse boolean attribute value with null for unspecified\n */\nfunction parseBooleanOrNull(value) {\n if (value === null)\n return null;\n return value === \"true\";\n}\n/**\n * Parses dropdown configuration from HTML element attributes\n */\nfunction parseDropdownConfig(dropdown) {\n // Group coordination\n const group = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP) || null;\n // Debug mode\n const debug = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DEBUG) === \"true\";\n // Check if device has mouse capability (pointer device)\n const hasMouse = window.matchMedia(\"(pointer: fine)\").matches;\n // Scroll lock\n const disableScrollOnOpen = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DISABLE_SCROLL_ON_OPEN) === \"true\";\n // Open-on-hover configuration with breakpoints\n const openOnHoverDesktopAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER);\n const openOnHoverTabletAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET);\n const openOnHoverMobileLandscapeAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE);\n const openOnHoverMobileAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE);\n const openOnHoverDesktop = openOnHoverDesktopAttr === \"true\";\n const openOnHoverTablet = parseBooleanOrNull(openOnHoverTabletAttr);\n const openOnHoverMobileLandscape = parseBooleanOrNull(openOnHoverMobileLandscapeAttr);\n const openOnHoverMobile = parseBooleanOrNull(openOnHoverMobileAttr);\n // Show on breakpoints configuration (defaults to true)\n const showDesktopAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_SHOW_DESKTOP);\n const showTabletAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_SHOW_TABLET);\n const showMobileLandscapeAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_SHOW_MOBILE_LANDSCAPE);\n const showMobileAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_SHOW_MOBILE);\n const showDesktop = showDesktopAttr === null ? true : showDesktopAttr === \"true\";\n const showTablet = parseBooleanOrNull(showTabletAttr);\n const showMobileLandscape = parseBooleanOrNull(showMobileLandscapeAttr);\n const showMobile = parseBooleanOrNull(showMobileAttr);\n // Delays\n const openDelay = parseInt(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_DELAY) || \"200\");\n const closeDelay = parseInt(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"200\");\n // Open animation configuration with cascading defaults\n const animOpen = (dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN) || \"slide-down\");\n const animOpenTablet = (dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_TABLET) || animOpen);\n const animOpenMobileLandscape = (dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_MOBILE_LANDSCAPE) || animOpenTablet);\n const animOpenMobile = (dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_MOBILE) || animOpenMobileLandscape);\n // Close animation configuration (nullable - will use reverse of open if not set)\n const animCloseAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE);\n const animClose = animCloseAttr ? animCloseAttr : null;\n const animCloseTabletAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_TABLET);\n const animCloseTablet = animCloseTabletAttr ? animCloseTabletAttr : null;\n const animCloseMobileLandscapeAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_MOBILE_LANDSCAPE);\n const animCloseMobileLandscape = animCloseMobileLandscapeAttr ? animCloseMobileLandscapeAttr : null;\n const animCloseMobileAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_MOBILE);\n const animCloseMobile = animCloseMobileAttr ? animCloseMobileAttr : null;\n // Animation speed configuration (in milliseconds, converted to seconds for GSAP)\n // Priority: ATTR_PETAL_ANIM_OPEN_DURATION > ATTR_PETAL_ANIM_OPEN_SPEED > default\n const animOpenDurationAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_DURATION);\n const animOpenSpeedAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_SPEED);\n const animOpenSpeed = animOpenDurationAttr\n ? parseFloat(animOpenDurationAttr)\n : animOpenSpeedAttr\n ? parseInt(animOpenSpeedAttr) / 1000\n : 0.5;\n const animCloseDurationAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_DURATION);\n const animCloseSpeedAttr = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_SPEED);\n const animCloseSpeed = animCloseDurationAttr\n ? parseFloat(animCloseDurationAttr)\n : animCloseSpeedAttr\n ? parseInt(animCloseSpeedAttr) / 1000\n : 0.3;\n // Animation easing configuration\n const animOpenEase = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_EASE) || null;\n const animCloseEase = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_EASE) || null;\n // Animation offset configuration (in pixels or percentage) with breakpoints\n const animOffsetRaw = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OFFSET) || \"25\";\n const animOffset = parseOffset(animOffsetRaw);\n const animOffsetTablet = parseOffset(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OFFSET_TABLET) || animOffsetRaw);\n const animOffsetMobileLandscape = parseOffset(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OFFSET_MOBILE_LANDSCAPE) || dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OFFSET_TABLET) || animOffsetRaw);\n const animOffsetMobile = parseOffset(dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OFFSET_MOBILE) ||\n dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OFFSET_MOBILE_LANDSCAPE) ||\n dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OFFSET_TABLET) ||\n animOffsetRaw);\n return {\n group,\n debug,\n hasMouse,\n disableScrollOnOpen,\n openOnHoverDesktop,\n openOnHoverTablet,\n openOnHoverMobileLandscape,\n openOnHoverMobile,\n showDesktop,\n showTablet,\n showMobileLandscape,\n showMobile,\n openDelay,\n closeDelay,\n animOpen,\n animOpenTablet,\n animOpenMobileLandscape,\n animOpenMobile,\n animClose,\n animCloseTablet,\n animCloseMobileLandscape,\n animCloseMobile,\n animOpenSpeed,\n animCloseSpeed,\n animOpenEase,\n animCloseEase,\n animOffset,\n animOffsetTablet,\n animOffsetMobileLandscape,\n animOffsetMobile,\n };\n}\n/**\n * Get current open animation based on screen width\n */\nfunction getCurrentOpenAnimation(config) {\n const width = window.innerWidth;\n if (width <= 479)\n return config.animOpenMobile;\n if (width <= 767)\n return config.animOpenMobileLandscape;\n if (width <= 991)\n return config.animOpenTablet;\n return config.animOpen;\n}\n/**\n * Get current close animation based on screen width\n * Returns null if no explicit close animation is set (will use reverse of open)\n */\nfunction getCurrentCloseAnimation(config) {\n const width = window.innerWidth;\n if (width <= 479)\n return config.animCloseMobile;\n if (width <= 767)\n return config.animCloseMobileLandscape;\n if (width <= 991)\n return config.animCloseTablet;\n return config.animClose;\n}\n/**\n * Get current animation offset based on screen width\n */\nfunction getCurrentOffset(config) {\n const width = window.innerWidth;\n if (width <= 479)\n return config.animOffsetMobile;\n if (width <= 767)\n return config.animOffsetMobileLandscape;\n if (width <= 991)\n return config.animOffsetTablet;\n return config.animOffset;\n}\n/**\n * Get current open-on-hover setting based on screen width and device capability\n */\nfunction getCurrentOpenOnHover(config) {\n const width = window.innerWidth;\n let shouldHover = config.openOnHoverDesktop;\n if (width <= 479 && config.openOnHoverMobile !== null) {\n shouldHover = config.openOnHoverMobile;\n }\n else if (width <= 767 && config.openOnHoverMobileLandscape !== null) {\n shouldHover = config.openOnHoverMobileLandscape;\n }\n else if (width <= 991 && config.openOnHoverTablet !== null) {\n shouldHover = config.openOnHoverTablet;\n }\n // Only enable hover if device has mouse OR on desktop (width > 991)\n // This ensures hover works on desktop even if pointer detection is uncertain\n return shouldHover && (config.hasMouse || width > 991);\n}\n/**\n * Get current show state based on screen width\n */\nfunction getCurrentShowState(config) {\n const width = window.innerWidth;\n let shouldShow = config.showDesktop;\n if (width <= 479 && config.showMobile !== null) {\n shouldShow = config.showMobile;\n }\n else if (width <= 767 && config.showMobileLandscape !== null) {\n shouldShow = config.showMobileLandscape;\n }\n else if (width <= 991 && config.showTablet !== null) {\n shouldShow = config.showTablet;\n }\n return shouldShow;\n}\n/**\n * Log configuration for debugging\n */\nfunction logConfig(index, config) {\n if (!config.debug)\n return;\n console.log(`Dropdown ${index + 1} - Config:`, {\n group: config.group,\n debug: config.debug,\n hasMouse: config.hasMouse,\n openOnHoverDesktop: config.openOnHoverDesktop,\n openOnHoverTablet: config.openOnHoverTablet,\n openOnHoverMobileLandscape: config.openOnHoverMobileLandscape,\n openOnHoverMobile: config.openOnHoverMobile,\n openOnHover: getCurrentOpenOnHover(config),\n showDesktop: config.showDesktop,\n showTablet: config.showTablet,\n showMobileLandscape: config.showMobileLandscape,\n showMobile: config.showMobile,\n shouldShow: getCurrentShowState(config),\n openDelay: config.openDelay,\n closeDelay: config.closeDelay,\n animOpen: config.animOpen,\n animOpenTablet: config.animOpenTablet,\n animOpenMobileLandscape: config.animOpenMobileLandscape,\n animOpenMobile: config.animOpenMobile,\n animClose: config.animClose,\n animCloseTablet: config.animCloseTablet,\n animCloseMobileLandscape: config.animCloseMobileLandscape,\n animCloseMobile: config.animCloseMobile,\n animOpenSpeed: `${config.animOpenSpeed}s`,\n animCloseSpeed: `${config.animCloseSpeed}s`,\n animOpenEase: config.animOpenEase,\n animCloseEase: config.animCloseEase,\n animOffset: config.animOffset,\n animOffsetTablet: config.animOffsetTablet,\n animOffsetMobileLandscape: config.animOffsetMobileLandscape,\n animOffsetMobile: config.animOffsetMobile,\n });\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown-config.ts?");
|
|
260
240
|
|
|
261
241
|
/***/ }),
|
|
262
242
|
|
|
@@ -266,7 +246,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
266
246
|
\*****************************************************/
|
|
267
247
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
268
248
|
|
|
269
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DropdownController: () => (/* binding */ DropdownController)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _dropdown_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dropdown-config */ \"./src/modules/dropdown/dropdown-config.ts\");\n/* harmony import */ var _dropdown_animator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown-animator */ \"./src/modules/dropdown/dropdown-animator.ts\");\n/* harmony import */ var _lib_scroll_lock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../lib/scroll-lock */ \"./src/lib/scroll-lock.ts\");\n/**\n * Dropdown Controller Module\n *\n * Manages dropdown state, event handlers, and group coordination.\n * Orchestrates opening/closing logic with animations.\n */\n\n\n\n\nclass DropdownController {\n constructor(elements, config, index) {\n this.elements = elements;\n this.config = config;\n this.index = index;\n this.isOpen = false;\n this.timeoutId = null;\n this.currentTimeline = null;\n /**\n * Opens the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Delays opening if specified or if another dropdown in same group is open\n * - Animates using GSAP timeline\n */\n this.open = () => {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - openDropdown() called`);\n // Cancel any pending close\n if (this.timeoutId) {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Cancelling pending close timeout`);\n clearTimeout(this.timeoutId);\n this.timeoutId = null;\n }\n // Kill any existing timeline\n if (this.currentTimeline) {\n this.currentTimeline.kill();\n this.currentTimeline = null;\n }\n // Check if we need to delay opening (group coordination)\n let groupCoordinationDelay = 0;\n if (this.config.group) {\n const groupDropdowns = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN}'][${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP}='${this.config.group}']`);\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Found ${groupDropdowns.length} dropdowns in group '${this.config.group}'`);\n // Find the currently open dropdown in this group\n const openDropdownInGroup = Array.from(groupDropdowns).find((dd) => {\n const ddToggle = dd.querySelector(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n return ddToggle && ddToggle !== this.elements.toggle && ddToggle.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED) === \"true\";\n });\n // If another is open, get its close delay attribute for coordination\n if (openDropdownInGroup) {\n groupCoordinationDelay = parseInt(openDropdownInGroup.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"0\", 10);\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Another dropdown in group is open, coordinating with delay: ${groupCoordinationDelay}ms`);\n }\n }\n // Perform the actual open (immediately or delayed)\n const performOpen = () => {\n const currentAnim = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentAnimation)(this.config);\n const currentOffset = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOffset)(this.config);\n this.currentTimeline = (0,_dropdown_animator__WEBPACK_IMPORTED_MODULE_2__.animateOpen)(this.elements, currentAnim, currentOffset, this.config, this.index);\n this.isOpen = true;\n // Lock scroll if configured\n if (this.config.disableScrollOnOpen) {\n (0,_lib_scroll_lock__WEBPACK_IMPORTED_MODULE_3__.lockScroll)();\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Scroll locked`);\n }\n };\n // Use the greater of openDelay or groupCoordinationDelay\n const totalDelay = Math.max(this.config.openDelay, groupCoordinationDelay);\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Total delay: ${totalDelay}ms (openDelay: ${this.config.openDelay}ms, groupCoordination: ${groupCoordinationDelay}ms)`);\n if (totalDelay > 0) {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Scheduling open in ${totalDelay}ms`);\n setTimeout(performOpen, totalDelay);\n }\n else {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Opening immediately`);\n performOpen();\n }\n };\n /**\n * Closes the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Animates using GSAP timeline\n * - Sets visibility to hidden after animation completes\n */\n this.close = () => {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - closeDropdown() called`);\n // Cancel any pending close\n if (this.timeoutId) {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Cancelling existing timeout`);\n clearTimeout(this.timeoutId);\n this.timeoutId = null;\n }\n // Kill any existing timeline\n if (this.currentTimeline) {\n this.currentTimeline.kill();\n this.currentTimeline = null;\n }\n const currentAnim = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentAnimation)(this.config);\n const currentOffset = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOffset)(this.config);\n this.currentTimeline = (0,_dropdown_animator__WEBPACK_IMPORTED_MODULE_2__.animateClose)(this.elements, currentAnim, currentOffset, this.config, this.index);\n this.isOpen = false;\n // Unlock scroll if configured\n if (this.config.disableScrollOnOpen) {\n (0,_lib_scroll_lock__WEBPACK_IMPORTED_MODULE_3__.unlockScroll)();\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Scroll unlocked`);\n }\n };\n /**\n * Closes the dropdown with an optional delay\n * - Uses petal-dropdown-delay attribute value\n * - Stores timeout ID for potential cancellation\n */\n this.closeWithDelay = () => {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - closeDropdownWithDelay() called with delay: ${this.config.closeDelay}ms`);\n if (this.config.closeDelay > 0) {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Scheduling close in ${this.config.closeDelay}ms`);\n this.timeoutId = window.setTimeout(this.close, this.config.closeDelay);\n }\n else {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Closing immediately (no delay)`);\n this.close();\n }\n };\n /**\n * Toggles the dropdown between open and closed states\n * - Used for click-based dropdowns\n */\n this.toggle = () => {\n if (this.isOpen) {\n this.close();\n }\n else {\n this.open();\n }\n };\n /**\n * Handles clicks outside the dropdown\n * - Only active for click-based dropdowns\n * - Closes dropdown if click is outside both toggle and menu\n */\n this.handleOutsideClick = (event, dropdown) => {\n if (!this.isOpen)\n return;\n const clickedInsideDropdown = dropdown.contains(event.target);\n if (!clickedInsideDropdown) {\n this.close();\n }\n };\n /**\n * Handle resize event - reinitialize drawer position if closed\n */\n this.handleResize = () => {\n if (!this.isOpen) {\n this.initializeDrawer();\n }\n // Update show state and visibility on resize\n this.updateShowState();\n };\n this.openOnHover = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOpenOnHover)(config);\n this.shouldShow = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentShowState)(config);\n this.updateVisibility();\n }\n /**\n * Initialize drawer to starting position\n */\n initializeDrawer() {\n const currentAnim = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentAnimation)(this.config);\n const currentOffset = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOffset)(this.config);\n (0,_dropdown_animator__WEBPACK_IMPORTED_MODULE_2__.initializeDrawerPosition)(this.elements.drawer, currentAnim, currentOffset);\n }\n /**\n * Update visibility based on current show state\n */\n updateVisibility() {\n const { menu } = this.elements;\n if (this.shouldShow) {\n // Show menu\n menu.style.removeProperty('display');\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Showing menu`);\n }\n else {\n // Hide menu and close if open\n if (this.isOpen) {\n this.close();\n }\n menu.style.display = 'none';\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Hiding menu`);\n }\n }\n /**\n * Update show state based on current breakpoint\n */\n updateShowState() {\n const newShouldShow = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentShowState)(this.config);\n const changed = newShouldShow !== this.shouldShow;\n if (changed) {\n this.shouldShow = newShouldShow;\n this.updateVisibility();\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Show state changed to: ${this.shouldShow}`);\n }\n return changed;\n }\n /**\n * Update interaction mode based on current open-on-hover setting\n */\n updateOpenOnHover() {\n const newOpenOnHover = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOpenOnHover)(this.config);\n const changed = newOpenOnHover !== this.openOnHover;\n this.openOnHover = newOpenOnHover;\n return changed;\n }\n /**\n * Get current open-on-hover mode\n */\n getOpenOnHover() {\n return this.openOnHover;\n }\n /**\n * Get current should show state\n */\n getShouldShow() {\n return this.shouldShow;\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown-controller.ts?");
|
|
249
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DropdownController: () => (/* binding */ DropdownController)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _dropdown_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dropdown-config */ \"./src/modules/dropdown/dropdown-config.ts\");\n/* harmony import */ var _dropdown_animator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown-animator */ \"./src/modules/dropdown/dropdown-animator.ts\");\n/* harmony import */ var _lib_scroll_lock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../lib/scroll-lock */ \"./src/lib/scroll-lock.ts\");\n/**\n * Dropdown Controller Module\n *\n * Manages dropdown state, event handlers, and group coordination.\n * Orchestrates opening/closing logic with animations.\n */\n\n\n\n\nclass DropdownController {\n constructor(elements, config, index) {\n this.elements = elements;\n this.config = config;\n this.index = index;\n this.isOpen = false;\n this.timeoutId = null;\n this.currentTimeline = null;\n /**\n * Opens the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Delays opening if specified or if another dropdown in same group is open\n * - Animates using GSAP timeline\n */\n this.open = () => {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - openDropdown() called`);\n // Cancel any pending close\n if (this.timeoutId) {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Cancelling pending close timeout`);\n clearTimeout(this.timeoutId);\n this.timeoutId = null;\n }\n // Kill any existing timeline\n if (this.currentTimeline) {\n this.currentTimeline.kill();\n this.currentTimeline = null;\n }\n // Check if we need to delay opening (group coordination)\n let groupCoordinationDelay = 0;\n if (this.config.group) {\n const groupDropdowns = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN}'][${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP}='${this.config.group}']`);\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Found ${groupDropdowns.length} dropdowns in group '${this.config.group}'`);\n // Find the currently open dropdown in this group\n const openDropdownInGroup = Array.from(groupDropdowns).find((dd) => {\n const ddToggle = dd.querySelector(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n return ddToggle && ddToggle !== this.elements.toggle && ddToggle.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED) === \"true\";\n });\n // If another is open, get its close delay attribute for coordination\n if (openDropdownInGroup) {\n groupCoordinationDelay = parseInt(openDropdownInGroup.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"0\", 10);\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Another dropdown in group is open, coordinating with delay: ${groupCoordinationDelay}ms`);\n }\n }\n // Perform the actual open (immediately or delayed)\n const performOpen = () => {\n const currentAnim = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOpenAnimation)(this.config);\n const currentOffset = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOffset)(this.config);\n this.currentTimeline = (0,_dropdown_animator__WEBPACK_IMPORTED_MODULE_2__.animateOpen)(this.elements, currentAnim, currentOffset, this.config, this.index);\n this.isOpen = true;\n // Lock scroll if configured\n if (this.config.disableScrollOnOpen) {\n (0,_lib_scroll_lock__WEBPACK_IMPORTED_MODULE_3__.lockScroll)();\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Scroll locked`);\n }\n };\n // Use the greater of openDelay or groupCoordinationDelay\n const totalDelay = Math.max(this.config.openDelay, groupCoordinationDelay);\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Total delay: ${totalDelay}ms (openDelay: ${this.config.openDelay}ms, groupCoordination: ${groupCoordinationDelay}ms)`);\n if (totalDelay > 0) {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Scheduling open in ${totalDelay}ms`);\n setTimeout(performOpen, totalDelay);\n }\n else {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Opening immediately`);\n performOpen();\n }\n };\n /**\n * Closes the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Animates using GSAP timeline\n * - Sets visibility to hidden after animation completes\n */\n this.close = () => {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - closeDropdown() called`);\n // Cancel any pending close\n if (this.timeoutId) {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Cancelling existing timeout`);\n clearTimeout(this.timeoutId);\n this.timeoutId = null;\n }\n // Kill any existing timeline\n if (this.currentTimeline) {\n this.currentTimeline.kill();\n this.currentTimeline = null;\n }\n const currentOpenAnim = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOpenAnimation)(this.config);\n const currentCloseAnim = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentCloseAnimation)(this.config);\n const currentOffset = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOffset)(this.config);\n this.currentTimeline = (0,_dropdown_animator__WEBPACK_IMPORTED_MODULE_2__.animateClose)(this.elements, currentOpenAnim, currentCloseAnim, currentOffset, this.config, this.index);\n this.isOpen = false;\n // Unlock scroll if configured\n if (this.config.disableScrollOnOpen) {\n (0,_lib_scroll_lock__WEBPACK_IMPORTED_MODULE_3__.unlockScroll)();\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Scroll unlocked`);\n }\n };\n /**\n * Closes the dropdown with an optional delay\n * - Uses petal-dropdown-delay attribute value\n * - Stores timeout ID for potential cancellation\n */\n this.closeWithDelay = () => {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - closeDropdownWithDelay() called with delay: ${this.config.closeDelay}ms`);\n if (this.config.closeDelay > 0) {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Scheduling close in ${this.config.closeDelay}ms`);\n this.timeoutId = window.setTimeout(this.close, this.config.closeDelay);\n }\n else {\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Closing immediately (no delay)`);\n this.close();\n }\n };\n /**\n * Toggles the dropdown between open and closed states\n * - Used for click-based dropdowns\n */\n this.toggle = () => {\n if (this.isOpen) {\n this.close();\n }\n else {\n this.open();\n }\n };\n /**\n * Handles clicks outside the dropdown\n * - Only active for click-based dropdowns\n * - Closes dropdown if click is outside both toggle and menu\n */\n this.handleOutsideClick = (event, dropdown) => {\n if (!this.isOpen)\n return;\n const clickedInsideDropdown = dropdown.contains(event.target);\n if (!clickedInsideDropdown) {\n this.close();\n }\n };\n /**\n * Handle resize event - reinitialize drawer position if closed\n */\n this.handleResize = () => {\n if (!this.isOpen) {\n this.initializeDrawer();\n }\n // Update show state and visibility on resize\n this.updateShowState();\n };\n this.openOnHover = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOpenOnHover)(config);\n this.shouldShow = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentShowState)(config);\n this.updateVisibility();\n }\n /**\n * Initialize drawer to starting position\n */\n initializeDrawer() {\n const currentAnim = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOpenAnimation)(this.config);\n const currentOffset = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOffset)(this.config);\n (0,_dropdown_animator__WEBPACK_IMPORTED_MODULE_2__.initializeDrawerPosition)(this.elements.drawer, currentAnim, currentOffset);\n }\n /**\n * Update visibility based on current show state\n */\n updateVisibility() {\n const { menu } = this.elements;\n if (this.shouldShow) {\n // Show menu\n menu.style.removeProperty('display');\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Showing menu`);\n }\n else {\n // Hide menu and close if open\n if (this.isOpen) {\n this.close();\n }\n menu.style.display = 'none';\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Hiding menu`);\n }\n }\n /**\n * Update show state based on current breakpoint\n */\n updateShowState() {\n const newShouldShow = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentShowState)(this.config);\n const changed = newShouldShow !== this.shouldShow;\n if (changed) {\n this.shouldShow = newShouldShow;\n this.updateVisibility();\n if (this.config.debug)\n console.log(`Dropdown ${this.index + 1} - Show state changed to: ${this.shouldShow}`);\n }\n return changed;\n }\n /**\n * Update interaction mode based on current open-on-hover setting\n */\n updateOpenOnHover() {\n const newOpenOnHover = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOpenOnHover)(this.config);\n const changed = newOpenOnHover !== this.openOnHover;\n this.openOnHover = newOpenOnHover;\n return changed;\n }\n /**\n * Get current open-on-hover mode\n */\n getOpenOnHover() {\n return this.openOnHover;\n }\n /**\n * Get current should show state\n */\n getShouldShow() {\n return this.shouldShow;\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown-controller.ts?");
|
|
270
250
|
|
|
271
251
|
/***/ }),
|
|
272
252
|
|
|
@@ -286,7 +266,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
286
266
|
\******************************************/
|
|
287
267
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
288
268
|
|
|
289
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ initializeDropdowns: () => (/* binding */ initializeDropdowns)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _dropdown_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dropdown-config */ \"./src/modules/dropdown/dropdown-config.ts\");\n/* harmony import */ var _dropdown_controller__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown-controller */ \"./src/modules/dropdown/dropdown-controller.ts\");\n/* harmony import */ var _lib_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../lib/helpers */ \"./src/lib/helpers.ts\");\n/**\n * Dropdown Component\n *\n * Handles interactive dropdown menus with support for:\n * - Click or hover-based opening\n * - Customizable close delays\n * - Grouped dropdown coordination\n * - CSS-based animations\n * - Accessibility (aria-expanded)\n * - Named element linking (petal=\"name\")\n *\n * HTML Attributes (defined in attributes.ts):\n * - petal=\"name\" (optional) - Links elements together by name. When set on a dropdown container,\n * all related elements (toggle, menu, overlay, close) must have the same petal=\"name\" attribute.\n * Elements are matched by both name and type before firing their behavior.\n * - petal-el=\"dropdown\" - Container element\n * - petal-el=\"dropdown-toggle\" - Clickable/hoverable trigger\n * - petal-el=\"dropdown-menu\" - Menu content\n * - petal-el=\"dropdown-drawer\" - Menu inner box\n * - petal-el=\"overlay\" (optional) - Background overlay\n * - petal-el=\"trigger-close\" (optional) - Clickable element that closes the dropdown\n * - petal-group=\"name\" (optional) - Group name for coordinated animations\n * - petal-dropdown-open-on-hover=\"true\" (optional) - Use hover instead of click\n * - petal-dropdown-open-delay=\"ms\" (optional) - Open delay in milliseconds (default: 200)\n * - petal-dropdown-close-delay=\"ms\" (optional) - Close delay in milliseconds (default: 200)\n * - petal-dropdown-anim=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Desktop animation (default: slide-down)\n * - petal-dropdown-anim-tablet=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Tablet animation (inherits from petal-dropdown-anim)\n * - petal-dropdown-anim-mobile-landscape=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile landscape animation (inherits from petal-dropdown-anim-tablet)\n * - petal-dropdown-anim-mobile=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile animation (inherits from petal-dropdown-anim-mobile-landscape)\n * - petal-dropdown-anim-open-speed=\"ms\" (optional) - Animation speed when opening in milliseconds (default: 500)\n * - petal-dropdown-anim-close-speed=\"ms\" (optional) - Animation speed when closing in milliseconds (default: 300)\n */\n\n\n\n\nfunction initializeDropdowns() {\n const init = () => {\n const dropdowns = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN}']`);\n dropdowns.forEach((dropdown, index) => {\n // ===========================\n // Element References\n // ===========================\n // Get the name attribute from the dropdown container\n const petalName = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME);\n // Build selectors that match elements by both name and type\n const buildSelector = (elementType) => {\n if (petalName) {\n return `[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}='${petalName}'][${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${elementType}']`;\n }\n return `[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${elementType}']`;\n };\n const toggle = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_TOGGLE);\n const menu = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_MENU);\n const drawer = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_MENU_BOX);\n const overlay = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY);\n const close = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_TRIGGER_CLOSE) || (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_CLOSE);\n // Validate required elements\n if (!toggle || !menu || !drawer) {\n return;\n }\n // ===========================\n // Configuration\n // ===========================\n const config = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.parseDropdownConfig)(dropdown);\n if (config.debug) {\n console.log(`\\n=== Initializing Dropdown ${index + 1} ===`);\n if (petalName) {\n console.log(`Dropdown ${index + 1} - Name: \"${petalName}\"`);\n }\n console.log(`Dropdown ${index + 1} - Found toggle:`, toggle);\n console.log(`Dropdown ${index + 1} - Found menu:`, menu);\n console.log(`Dropdown ${index + 1} - Found drawer:`, drawer);\n console.log(`Dropdown ${index + 1} - Found overlay:`, overlay);\n console.log(`Dropdown ${index + 1} - Found close:`, close);\n }\n (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.logConfig)(index, config);\n // ===========================\n // Controller Setup\n // ===========================\n const elements = { dropdown, toggle, menu, drawer, overlay };\n const controller = new _dropdown_controller__WEBPACK_IMPORTED_MODULE_2__.DropdownController(elements, config, index);\n // ===========================\n // Initialization\n // ===========================\n // Set initial aria-expanded state and ensure dropdown is closed\n toggle.setAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED, \"false\");\n dropdown.setAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE, \"closed\");\n // Initialize drawer to its animation's starting position\n controller.initializeDrawer();\n // Event listener references with console logging\n const mouseEnterHandler = () => {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - MOUSEENTER event triggered`);\n controller.open();\n };\n const mouseLeaveHandler = () => {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - MOUSELEAVE event triggered`);\n controller.closeWithDelay();\n };\n const clickOutsideHandler = (event) => {\n controller.handleOutsideClick(event, dropdown);\n };\n // Function to attach/detach event listeners based on hover mode\n const updateEventListeners = () => {\n const previousMode = controller.getOpenOnHover();\n const modeChanged = controller.updateOpenOnHover();\n if (modeChanged) {\n const newMode = controller.getOpenOnHover();\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Switching interaction mode to ${newMode ? \"hover\" : \"click\"}`);\n // Remove old listeners\n if (previousMode) {\n dropdown.removeEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.removeEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n toggle.removeEventListener(\"click\", controller.toggle);\n document.removeEventListener(\"click\", clickOutsideHandler);\n }\n // Attach new listeners\n if (newMode) {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", controller.toggle);\n document.addEventListener(\"click\", clickOutsideHandler);\n }\n }\n };\n // Reinitialize drawer position on window resize and update event listeners\n const handleResize = () => {\n controller.handleResize();\n updateEventListeners();\n };\n window.addEventListener(\"resize\", handleResize);\n // Initial event listener setup\n const initialOpenOnHover = controller.getOpenOnHover();\n if (initialOpenOnHover) {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", controller.toggle);\n document.addEventListener(\"click\", clickOutsideHandler);\n }\n // Attach click listener to dropdown-close element (if it exists)\n if (close) {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching click listener to close element`);\n close.addEventListener(\"click\", controller.close);\n }\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Initialization complete\\n`);\n });\n };\n // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", init);\n }\n else {\n init();\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown.ts?");
|
|
269
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ initializeDropdowns: () => (/* binding */ initializeDropdowns)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _dropdown_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dropdown-config */ \"./src/modules/dropdown/dropdown-config.ts\");\n/* harmony import */ var _dropdown_controller__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown-controller */ \"./src/modules/dropdown/dropdown-controller.ts\");\n/* harmony import */ var _lib_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../lib/helpers */ \"./src/lib/helpers.ts\");\n/**\n * Dropdown Component\n *\n * Handles interactive dropdown menus with support for:\n * - Click or hover-based opening\n * - Customizable close delays\n * - Grouped dropdown coordination\n * - CSS-based animations\n * - Accessibility (aria-expanded)\n * - Named element linking (petal=\"name\")\n *\n * HTML Attributes (defined in attributes.ts):\n * - petal=\"name\" (optional) - Links elements together by name. When set on a dropdown container,\n * all related elements (toggle, menu, overlay, close) must have the same petal=\"name\" attribute.\n * Elements are matched by both name and type before firing their behavior.\n * - petal-el=\"dropdown\" - Container element\n * - petal-el=\"dropdown-toggle\" - Clickable/hoverable trigger\n * - petal-el=\"dropdown-menu\" - Menu content\n * - petal-el=\"dropdown-drawer\" - Menu inner box\n * - petal-dropdown-open-on-hover=\"true\" (optional) - Use hover instead of click\n * - petal-dropdown-open-delay=\"ms\" (optional) - Open delay in milliseconds (default: 200)\n * - petal-dropdown-close-delay=\"ms\" (optional) - Close delay in milliseconds (default: 200)\n */\n\n\n\n\nfunction initializeDropdowns() {\n const init = () => {\n const dropdowns = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN}']`);\n dropdowns.forEach((dropdown, index) => {\n // ===========================\n // Element References\n // ===========================\n // Get the name attribute from the dropdown container\n const petalName = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME);\n // Build selectors that match elements by both name and type\n const buildSelector = (elementType) => {\n if (petalName) {\n return `[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}='${petalName}'][${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${elementType}']`;\n }\n return `[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${elementType}']`;\n };\n const toggle = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_TOGGLE);\n const menu = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_MENU);\n const drawer = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_MENU_BOX);\n const overlay = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY);\n const close = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_3__.findPetalElementByNameOrInParent)(dropdown, petalName, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_TRIGGER_CLOSE);\n // Validate required elements\n if (!toggle || !menu || !drawer) {\n return;\n }\n // ===========================\n // Configuration\n // ===========================\n const config = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.parseDropdownConfig)(dropdown);\n if (config.debug) {\n console.log(`\\n=== Initializing Dropdown ${index + 1} ===`);\n if (petalName) {\n console.log(`Dropdown ${index + 1} - Name: \"${petalName}\"`);\n }\n console.log(`Dropdown ${index + 1} - Found toggle:`, toggle);\n console.log(`Dropdown ${index + 1} - Found menu:`, menu);\n console.log(`Dropdown ${index + 1} - Found drawer:`, drawer);\n console.log(`Dropdown ${index + 1} - Found overlay:`, overlay);\n console.log(`Dropdown ${index + 1} - Found close:`, close);\n }\n (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.logConfig)(index, config);\n // ===========================\n // Controller Setup\n // ===========================\n const elements = { dropdown, toggle, menu, drawer, overlay };\n const controller = new _dropdown_controller__WEBPACK_IMPORTED_MODULE_2__.DropdownController(elements, config, index);\n // ===========================\n // Initialization\n // ===========================\n // Set initial aria-expanded state and ensure dropdown is closed\n toggle.setAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED, \"false\");\n dropdown.setAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE, \"closed\");\n // Initialize drawer to its animation's starting position\n controller.initializeDrawer();\n // Event listener references with console logging\n const mouseEnterHandler = () => {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - MOUSEENTER event triggered`);\n controller.open();\n };\n const mouseLeaveHandler = () => {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - MOUSELEAVE event triggered`);\n controller.closeWithDelay();\n };\n const clickOutsideHandler = (event) => {\n controller.handleOutsideClick(event, dropdown);\n };\n // Function to attach/detach event listeners based on hover mode\n const updateEventListeners = () => {\n const previousMode = controller.getOpenOnHover();\n const modeChanged = controller.updateOpenOnHover();\n if (modeChanged) {\n const newMode = controller.getOpenOnHover();\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Switching interaction mode to ${newMode ? \"hover\" : \"click\"}`);\n // Remove old listeners\n if (previousMode) {\n dropdown.removeEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.removeEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n toggle.removeEventListener(\"click\", controller.toggle);\n document.removeEventListener(\"click\", clickOutsideHandler);\n }\n // Attach new listeners\n if (newMode) {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", controller.toggle);\n document.addEventListener(\"click\", clickOutsideHandler);\n }\n }\n };\n // Reinitialize drawer position on window resize and update event listeners\n const handleResize = () => {\n controller.handleResize();\n updateEventListeners();\n };\n window.addEventListener(\"resize\", handleResize);\n // Initial event listener setup\n const initialOpenOnHover = controller.getOpenOnHover();\n if (initialOpenOnHover) {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", controller.toggle);\n document.addEventListener(\"click\", clickOutsideHandler);\n }\n // Attach click listener to dropdown-close element (if it exists)\n if (close) {\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Attaching click listener to close element`);\n close.addEventListener(\"click\", controller.close);\n }\n if (config.debug)\n console.log(`Dropdown ${index + 1} - Initialization complete\\n`);\n });\n };\n // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", init);\n }\n else {\n init();\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown.ts?");
|
|
290
270
|
|
|
291
271
|
/***/ }),
|
|
292
272
|
|
|
@@ -296,7 +276,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
296
276
|
\*********************************************/
|
|
297
277
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
298
278
|
|
|
299
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateClose: () => (/* binding */ animateClose),\n/* harmony export */ animateOpen: () => (/* binding */ animateOpen),\n/* harmony export */ initializeElements: () => (/* binding */ initializeElements)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var
|
|
279
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateClose: () => (/* binding */ animateClose),\n/* harmony export */ animateOpen: () => (/* binding */ animateOpen),\n/* harmony export */ initializeElements: () => (/* binding */ initializeElements)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var _lib_animations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/animations */ \"./src/lib/animations.ts\");\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/**\n * Modal Animator Module\n *\n * Handles GSAP animations for modals including:\n * - Dialog opening/closing animations\n * - Mask fade transitions\n * - Timeline management\n */\n\n\n\n// Map modal type to default animations\nconst modalTypeAnimationMap = {\n center: { open: \"scale\", close: \"scale\" },\n left: { open: \"slide-right\", close: \"slide-left\" },\n right: { open: \"slide-left\", close: \"slide-right\" },\n top: { open: \"slide-down\", close: \"slide-up\" },\n bottom: { open: \"slide-up\", close: \"slide-down\" },\n};\n/**\n * Gets the animation name for the modal based on screen width and direction\n */\nfunction getAnimationName(modal, direction, modalType) {\n var _a, _b, _c;\n const width = window.innerWidth;\n // If modal type is provided and no custom animation attributes are set, use type-based animation\n const hasCustomAnims = modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN) ||\n modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_TABLET) ||\n modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_MOBILE_LANDSCAPE) ||\n modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_MOBILE);\n if (modalType && !hasCustomAnims) {\n return modalTypeAnimationMap[modalType][direction];\n }\n // Get open animations with cascading defaults\n const openDesktop = getModalAnimation(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN);\n const openTablet = getModalAnimation(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_TABLET) || openDesktop;\n const openMobileLandscape = getModalAnimation(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_MOBILE_LANDSCAPE) || openTablet;\n const openMobile = getModalAnimation(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_MOBILE) || openMobileLandscape;\n // Get close animations (nullable)\n const closeDesktop = getModalAnimationOrNull(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE);\n const closeTablet = getModalAnimationOrNull(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_TABLET);\n const closeMobileLandscape = getModalAnimationOrNull(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_MOBILE_LANDSCAPE);\n const closeMobile = getModalAnimationOrNull(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_MOBILE);\n // Get current open animation based on breakpoint\n let currentOpenAnim;\n if (width <= 479) {\n currentOpenAnim = openMobile;\n }\n else if (width <= 767) {\n currentOpenAnim = openMobileLandscape;\n }\n else if (width <= 991) {\n currentOpenAnim = openTablet;\n }\n else {\n currentOpenAnim = openDesktop;\n }\n if (direction === \"open\") {\n return currentOpenAnim;\n }\n // For close, use explicit close animation if set, otherwise reverse the open animation\n let currentCloseAnim;\n if (width <= 479) {\n currentCloseAnim = (_b = (_a = closeMobile !== null && closeMobile !== void 0 ? closeMobile : closeMobileLandscape) !== null && _a !== void 0 ? _a : closeTablet) !== null && _b !== void 0 ? _b : closeDesktop;\n }\n else if (width <= 767) {\n currentCloseAnim = (_c = closeMobileLandscape !== null && closeMobileLandscape !== void 0 ? closeMobileLandscape : closeTablet) !== null && _c !== void 0 ? _c : closeDesktop;\n }\n else if (width <= 991) {\n currentCloseAnim = closeTablet !== null && closeTablet !== void 0 ? closeTablet : closeDesktop;\n }\n else {\n currentCloseAnim = closeDesktop;\n }\n return currentCloseAnim !== null && currentCloseAnim !== void 0 ? currentCloseAnim : _lib_animations__WEBPACK_IMPORTED_MODULE_0__.reverseAnimationMap[currentOpenAnim];\n}\n/**\n * Validates and parses modal animation string\n */\nfunction isModalAnimation(value) {\n const validTypes = [\"scale\", \"slide-up\", \"slide-down\", \"slide-left\", \"slide-right\"];\n return validTypes.includes(value);\n}\n/**\n * Safe parser with fallback\n */\nfunction getModalAnimation(modal, attr) {\n const raw = modal.getAttribute(attr);\n return isModalAnimation(raw !== null && raw !== void 0 ? raw : \"\") ? raw : \"slide-up\";\n}\n/**\n * Safe parser that returns null if not found\n */\nfunction getModalAnimationOrNull(modal, attr) {\n const raw = modal.getAttribute(attr);\n return isModalAnimation(raw !== null && raw !== void 0 ? raw : \"\") ? raw : null;\n}\n/**\n * Animates modal opening with GSAP\n */\nfunction animateOpen(elements, config) {\n const { modal, dialog, mask } = elements;\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline();\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - openModal() called`);\n // Set Modal display to flex\n tl.set(modal, { display: \"flex\" });\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - Set display to flex`);\n // Get animation with easing and duration (modals use 100% offset for full viewport movements)\n const animationType = getAnimationName(modal, \"open\", config.type);\n const ease = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_EASE) || undefined;\n const duration = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_DURATION)\n ? parseFloat(modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_DURATION))\n : undefined;\n const animOptions = {\n offset: \"100%\",\n ease,\n duration\n };\n const anim = _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animations[animationType](animOptions);\n // Set initial dialog state to prevent flicker\n tl.set(dialog, anim.from);\n // Animate Mask open (if mask exists)\n if (mask) {\n const maskAnim = (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.createMaskAnimation)(config.maskOpacity);\n tl.fromTo(mask, maskAnim.from, maskAnim.to, \"<\");\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - Animating mask open (opacity: ${config.maskOpacity})`);\n }\n // Animate Dialog Open (duration is now in anim.to)\n tl.to(dialog, anim.to);\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - Animating dialog open`);\n return tl;\n}\n/**\n * Animates modal closing with GSAP\n */\nfunction animateClose(elements, config) {\n const { modal, dialog, mask } = elements;\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline();\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - closeModal() called`);\n // Get animation with easing and duration (modals use 100% offset for full viewport movements)\n const animationType = getAnimationName(modal, \"close\", config.type);\n const ease = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_EASE) || undefined;\n const duration = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_DURATION)\n ? parseFloat(modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_DURATION))\n : undefined;\n const animOptions = {\n offset: \"100%\",\n ease,\n duration\n };\n const anim = (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.getReverseAnimation)(animationType, animOptions);\n // Animate the Dialog Closed (duration is now in anim.to)\n tl.fromTo(dialog, anim.from, anim.to);\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - Animating dialog close`);\n // Animate Mask Closed (if mask exists)\n if (mask) {\n tl.to(mask, { opacity: 0, duration: 0.5 }, \"<\");\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - Animating mask close`);\n }\n // Hide the Modal and clear transforms so they don't persist\n tl.set(modal, { display: \"none\" });\n tl.set(dialog, { clearProps: \"x,y,scale,transform\" });\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - Set display to none and cleared transforms`);\n return tl;\n}\n/**\n * Initialize modal elements to their starting state\n */\nfunction initializeElements(elements, config) {\n const { modal, mask } = elements;\n // Initialize Mask (if it exists)\n if (mask) {\n mask.style.opacity = \"0\";\n if (config.debug)\n console.log(` [DEBUG] Set mask opacity to 0`);\n }\n // Initialize Modal\n modal.style.display = \"none\";\n if (config.debug)\n console.log(` [DEBUG] Set modal display to none`);\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/modal/modal-animator.ts?");
|
|
300
280
|
|
|
301
281
|
/***/ }),
|
|
302
282
|
|
|
@@ -336,7 +316,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
336
316
|
\****************************************/
|
|
337
317
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
338
318
|
|
|
339
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ cleanupOverlays: () => (/* binding */ cleanupOverlays),\n/* harmony export */ initializeOverlays: () => (/* binding */ initializeOverlays)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _lib_helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/helpers */ \"./src/lib/helpers.ts\");\n/**\n * Overlay Component\n *\n * Handles overlays that respond to petal-state changes in grouped elements.\n * Overlays can be controlled by:\n * 1. petal-group attribute - Shows when any element with matching group has petal-state='active'|'open'\n * 2. petal name attribute - Shows when any element with matching name has petal-state='active'|'open'\n * 3. Parent element - Shows when parent element has petal-state='active'|'open'\n *\n * HTML Attributes:\n * - petal-el=\"overlay\" - The overlay element (required)\n * - petal-group=\"groupName\" - Group name to watch for active/open state (optional)\n * - petal=\"name\" - Name to watch for active/open state (optional, fallback if no group)\n *\n * Priority order: group > name > parent\n */\n\n\nconst overlayControllers = [];\n/**\n * Check if any element in a group has petal-state='active' or 'open'\n */\nfunction hasActiveElementInGroup(group) {\n const elements = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP}=\"${group}\"]`);\n return Array.from(elements).some((el) => {\n const state = el.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n });\n}\n/**\n * Check if any element with a name has petal-state='active' or 'open'\n */\nfunction hasActiveElementWithName(name) {\n const elements = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}=\"${name}\"]`);\n return Array.from(elements).some((el) => {\n const state = el.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n });\n}\n/**\n * Check if parent element has petal-state='active' or 'open'\n */\nfunction hasActiveParent(overlay) {\n const parent = overlay.parentElement;\n if (!parent)\n return false;\n const state = parent.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n}\n/**\n * Update overlay visibility based on active states\n */\nfunction updateOverlayVisibility(controller) {\n const { overlay, group, name } = controller;\n let shouldShow = false;\n // Priority 1: Check group\n if (group) {\n shouldShow = hasActiveElementInGroup(group);\n }\n // Priority 2: Check name\n else if (name) {\n shouldShow = hasActiveElementWithName(name);\n }\n // Priority 3: Check parent\n else {\n shouldShow = hasActiveParent(overlay);\n }\n //
|
|
319
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ cleanupOverlays: () => (/* binding */ cleanupOverlays),\n/* harmony export */ initializeOverlays: () => (/* binding */ initializeOverlays)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _lib_helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/helpers */ \"./src/lib/helpers.ts\");\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/**\n * Overlay Component\n *\n * Handles overlays that respond to petal-state changes in grouped elements.\n * Overlays can be controlled by:\n * 1. petal-group attribute - Shows when any element with matching group has petal-state='active'|'open'\n * 2. petal name attribute - Shows when any element with matching name has petal-state='active'|'open'\n * 3. Parent element - Shows when parent element has petal-state='active'|'open'\n *\n * HTML Attributes:\n * - petal-el=\"overlay\" - The overlay element (required)\n * - petal-group=\"groupName\" - Group name to watch for active/open state (optional)\n * - petal=\"name\" - Name to watch for active/open state (optional, fallback if no group)\n *\n * Priority order: group > name > parent\n */\n\n\n\nconst overlayControllers = [];\n/**\n * Check if any element in a group has petal-state='active' or 'open'\n */\nfunction hasActiveElementInGroup(group) {\n const elements = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP}=\"${group}\"]`);\n return Array.from(elements).some((el) => {\n const state = el.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n });\n}\n/**\n * Check if any element with a name has petal-state='active' or 'open'\n */\nfunction hasActiveElementWithName(name) {\n const elements = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}=\"${name}\"]`);\n return Array.from(elements).some((el) => {\n const state = el.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n });\n}\n/**\n * Check if parent element has petal-state='active' or 'open'\n */\nfunction hasActiveParent(overlay) {\n const parent = overlay.parentElement;\n if (!parent)\n return false;\n const state = parent.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n}\n/**\n * Update overlay visibility based on active states\n */\nfunction updateOverlayVisibility(controller) {\n const { overlay, group, name, maxOpacity } = controller;\n let shouldShow = false;\n // Priority 1: Check group\n if (group) {\n shouldShow = hasActiveElementInGroup(group);\n }\n // Priority 2: Check name\n else if (name) {\n shouldShow = hasActiveElementWithName(name);\n }\n // Priority 3: Check parent\n else {\n shouldShow = hasActiveParent(overlay);\n }\n // Kill any existing animation\n if (controller.currentTimeline) {\n controller.currentTimeline.kill();\n controller.currentTimeline = null;\n }\n // Animate overlay\n if (shouldShow) {\n // Show and fade in\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline();\n tl.set(overlay, { display: \"flex\" });\n tl.to(overlay, { opacity: maxOpacity, duration: 0.3 });\n controller.currentTimeline = tl;\n }\n else {\n // Fade out and hide\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline({\n onComplete: () => {\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(overlay, { display: \"none\" });\n },\n });\n tl.to(overlay, { opacity: 0, duration: 0.3 });\n controller.currentTimeline = tl;\n }\n}\n/**\n * Initialize a single overlay\n */\nfunction initializeOverlay(overlay) {\n const group = overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP);\n const name = overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME);\n // Skip if this overlay is controlled by modal/dropdown\n // (i.e., it has a parent that's a modal or dropdown)\n const parentModal = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findClosestPetalParent)(overlay, \"modal\");\n const parentDropdown = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findClosestPetalParent)(overlay, \"dropdown\");\n // If overlay has a group or name attribute, it uses the new system\n // Otherwise, let modal/dropdown handle it\n if (!group && !name && (parentModal || parentDropdown)) {\n return null;\n }\n // Get max opacity from attribute (default to 1)\n const maxOpacity = parseFloat(overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY_OPACITY) || \"1\");\n // Create controller\n const controller = {\n overlay,\n group,\n name,\n maxOpacity,\n observer: null, // Set below\n currentTimeline: null,\n cleanup: () => { },\n };\n // Set initial state\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(overlay, { opacity: 0, display: \"none\" });\n // Set initial visibility\n updateOverlayVisibility(controller);\n // Watch for attribute changes on all relevant elements\n const observer = new MutationObserver((mutations) => {\n // Check if any mutation affects petal-state\n const stateChanged = mutations.some((mutation) => {\n if (mutation.type === \"attributes\" && mutation.attributeName === _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE) {\n const target = mutation.target;\n // Check if this element is in our group or has our name\n if (group && target.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP) === group)\n return true;\n if (name && target.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME) === name)\n return true;\n if (!group && !name && target === overlay.parentElement)\n return true;\n return false;\n }\n return false;\n });\n if (stateChanged) {\n updateOverlayVisibility(controller);\n }\n });\n // Observe attribute changes on document body\n observer.observe(document.body, {\n attributes: true,\n attributeFilter: [_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE],\n subtree: true,\n });\n controller.observer = observer;\n controller.cleanup = () => {\n observer.disconnect();\n };\n return controller;\n}\n/**\n * Initialize all overlays on the page\n */\nfunction initializeOverlays() {\n console.log(`🌸 [OVERLAY] initializeOverlays() called`);\n const overlays = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.getAllPetalElementsOfType)(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY);\n console.log(`🌸 [OVERLAY] Detected ${overlays.length} overlay(s)`);\n overlays.forEach((overlay, index) => {\n const group = overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP);\n const name = overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME);\n console.log(`🌸 [OVERLAY] Processing overlay ${index + 1}/${overlays.length}`);\n console.log(`🌸 [OVERLAY] Group: \"${group}\", Name: \"${name}\"`);\n const controller = initializeOverlay(overlay);\n if (controller) {\n overlayControllers.push(controller);\n console.log(`🌸 [OVERLAY] Overlay ${index + 1} initialized with group-based control`);\n }\n else {\n console.log(`🌸 [OVERLAY] Overlay ${index + 1} will be controlled by parent component`);\n }\n });\n console.log(`🌸 [OVERLAY] Initialization complete - ${overlayControllers.length} overlays with group-based control`);\n}\n/**\n * Cleanup all overlay controllers\n */\nfunction cleanupOverlays() {\n overlayControllers.forEach((controller) => controller.cleanup());\n overlayControllers.length = 0;\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/overlay/overlay.ts?");
|
|
340
320
|
|
|
341
321
|
/***/ }),
|
|
342
322
|
|
|
@@ -356,7 +336,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
356
336
|
\**********************/
|
|
357
337
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
358
338
|
|
|
359
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_modal_modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/modal/modal */ \"./src/modules/modal/modal.ts\");\n/* harmony import */ var _modules_banner_banner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/banner/banner */ \"./src/modules/banner/banner.ts\");\n/* harmony import */ var _modules_dropdown_dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/dropdown/dropdown */ \"./src/modules/dropdown/dropdown.ts\");\n/* harmony import */ var _modules_overlay_overlay__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/overlay/overlay */ \"./src/modules/overlay/overlay.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _modules_dropdown_dropdown_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/dropdown/dropdown.css */ \"./src/modules/dropdown/dropdown.css\");\n\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.
|
|
339
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_modal_modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/modal/modal */ \"./src/modules/modal/modal.ts\");\n/* harmony import */ var _modules_banner_banner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/banner/banner */ \"./src/modules/banner/banner.ts\");\n/* harmony import */ var _modules_dropdown_dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/dropdown/dropdown */ \"./src/modules/dropdown/dropdown.ts\");\n/* harmony import */ var _modules_overlay_overlay__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/overlay/overlay */ \"./src/modules/overlay/overlay.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _modules_dropdown_dropdown_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/dropdown/dropdown.css */ \"./src/modules/dropdown/dropdown.css\");\n\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.80\"}`);\n(0,_modules_modal_modal__WEBPACK_IMPORTED_MODULE_0__.initializeAllModals)();\n(0,_modules_banner_banner__WEBPACK_IMPORTED_MODULE_1__.initializeBanner)();\n(0,_modules_dropdown_dropdown__WEBPACK_IMPORTED_MODULE_2__.initializeDropdowns)();\n(0,_modules_overlay_overlay__WEBPACK_IMPORTED_MODULE_3__.initializeOverlays)();\n\n\n//# sourceURL=webpack://petal/./src/petal.ts?");
|
|
360
340
|
|
|
361
341
|
/***/ }),
|
|
362
342
|
|