well-petal 0.0.87 → 0.0.88
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 +18 -58
- package/package.json +1 -1
package/dist/petal.js
CHANGED
|
@@ -156,7 +156,7 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem
|
|
|
156
156
|
\*******************************/
|
|
157
157
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
158
158
|
|
|
159
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animations: () => (/* binding */ animations),\n/* harmony export */ clearAnimationProperties: () => (/* binding */ clearAnimationProperties),\n/* harmony export */ getReverseAnimation: () => (/* binding */ getReverseAnimation),\n/* harmony export */ isValidAnimation: () => (/* binding */ isValidAnimation),\n/* harmony export */ reverseAnimationMap: () => (/* binding */ reverseAnimationMap)\n/* harmony export */ });\n/* harmony import */ var
|
|
159
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animations: () => (/* binding */ animations),\n/* harmony export */ clearAnimationProperties: () => (/* binding */ clearAnimationProperties),\n/* harmony export */ getAnimation: () => (/* binding */ getAnimation),\n/* harmony export */ getAnimationConfig: () => (/* binding */ getAnimationConfig),\n/* harmony export */ getReverseAnimation: () => (/* binding */ getReverseAnimation),\n/* harmony export */ isValidAnimation: () => (/* binding */ isValidAnimation),\n/* harmony export */ parseAnimation: () => (/* binding */ parseAnimation),\n/* harmony export */ reverseAnimationMap: () => (/* binding */ reverseAnimationMap)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var _attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./attributes */ \"./src/lib/attributes.ts\");\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 */\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\nconst validTypes = [\"scale\", \"slide-up\", \"slide-down\", \"slide-left\", \"slide-right\", \"crop-up\", \"crop-down\", \"fade-in\", \"fade-out\"];\nconst DEFAULT_POS_OFFSET = \"100%\";\nconst DEFAULT_OPACITY_OFFSET = \"1\";\nfunction getAnimationConfig(el, animType) {\n const open = {\n animation: el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN) || \"slide-up\",\n offset: el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_OFFSET) || DEFAULT_POS_OFFSET,\n delay: parseFloat(el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_DELAY)) || 0,\n duration: el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_DURATION) || 0.5,\n ease: el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_OPEN_EASE) || \"power1.inOut\",\n };\n const close = {\n animation: el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE) || \"slide-down\",\n offset: el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_OFFSET) || 0,\n delay: parseFloat(el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_DELAY)) || 0,\n duration: el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_DURATION) || 0.5,\n ease: el.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_EASE) || \"power1.inOut\",\n };\n if (animType === \"OPEN\")\n return open;\n else\n return close;\n}\n/**\n * Validates and parses modal animation string\n */\nfunction isValidAnimation(value) {\n return validTypes.includes(value);\n}\nfunction parseAnimation(raw) {\n if (raw === null)\n return null;\n return validTypes.includes(raw) ? raw : null;\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 } = options || {};\n // Scale animation always scales to 1, offset is not used\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 = DEFAULT_POS_OFFSET, ease = \"power1.inOut\", duration = 0.5 } = 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 = DEFAULT_POS_OFFSET, ease = \"power1.inOut\", duration = 0.5 } = 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 = DEFAULT_POS_OFFSET, ease = \"power1.inOut\", duration = 0.5 } = 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 = DEFAULT_POS_OFFSET, ease = \"power1.inOut\", duration = 0.5 } = 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 \"crop-up\": (options) => {\n const { ease = \"power1.inOut\", duration = 0.5 } = options || {};\n return {\n from: { \"clip-path\": \"inset(100% 0% 0% 0%)\" },\n to: { \"clip-path\": \"inset(0% 0% 0% 0%)\", ease, duration },\n };\n },\n \"crop-down\": (options) => {\n const { ease = \"power1.inOut\", duration = 0.5 } = options || {};\n return {\n from: { \"clip-path\": \"inset(0% 0% 100% 0%)\" },\n to: { \"clip-path\": \"inset(0% 0% 0% 0%)\", ease, duration },\n };\n },\n \"fade-in\": (options) => {\n const { offset = DEFAULT_OPACITY_OFFSET, ease = \"power1.inOut\", duration = 0.5 } = options || {};\n return {\n from: { opacity: 0 },\n to: { opacity: offset, ease, duration },\n };\n },\n \"fade-out\": (options) => {\n const { offset = DEFAULT_OPACITY_OFFSET, ease = \"power1.inOut\", duration = 0.5 } = options || {};\n return {\n from: { opacity: offset },\n to: { opacity: 0, ease, duration },\n };\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 \"crop-up\": \"crop-down\",\n \"crop-down\": \"crop-up\",\n \"fade-in\": \"fade-out\",\n \"fade-out\": \"fade-in\",\n};\n/**\n * Gets the reverse animation config by swapping from/to\n * Important: ease and duration must stay in the 'to' state, not be swapped\n */\nfunction getReverseAnimation(animationType, options) {\n const valid = isValidAnimation(animationType);\n if (!valid) {\n console.warn(`Invalid animation type: ${animationType}`);\n return animations[\"slide-up\"](options);\n }\n const reverseType = reverseAnimationMap[animationType];\n const anim = animations[reverseType](options);\n // Extract ease and duration from 'to' before swapping\n const _a = anim.to, { ease, duration } = _a, toWithoutEasing = __rest(_a, [\"ease\", \"duration\"]);\n // Swap from and to, but keep ease and duration in the 'to' state\n return {\n from: toWithoutEasing,\n to: Object.assign(Object.assign({}, anim.from), { ease, duration }),\n };\n}\nfunction getAnimation(animationType, animationConfig) {\n console.log(\"Getting animation for type:\", animationType, \"with config:\", animationConfig);\n const valid = isValidAnimation(animationType);\n if (!valid) {\n console.warn(`Invalid animation type: ${animationType}`);\n return animations[\"slide-up\"](animationConfig);\n }\n return animations[animationType](animationConfig);\n}\n/**\n * Clears all animation-related properties from an element\n * This ensures clean state when switching between different animation types\n *\n * Resets:\n * - Position transforms (x, y)\n * - Scale transforms\n * - Opacity\n * - Clip-path\n * - All transforms\n */\nfunction clearAnimationProperties(element) {\n // Use GSAP's clearProps to ensure all inline styles are removed\n gsap__WEBPACK_IMPORTED_MODULE_1__.gsap.set(element, { clearProps: \"x,y,scale,opacity,clip-path,transform\" });\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/animations.ts?");
|
|
160
160
|
|
|
161
161
|
/***/ }),
|
|
162
162
|
|
|
@@ -166,7 +166,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
166
166
|
\*******************************/
|
|
167
167
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
168
168
|
|
|
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_DEBUG: () => (/* binding */ ATTR_PETAL_DEBUG),\n/* harmony export */ ATTR_PETAL_DIALOG: () => (/* binding */ ATTR_PETAL_DIALOG),\n/* harmony export */ ATTR_PETAL_DROPDOWN: () => (/* binding */ ATTR_PETAL_DROPDOWN),\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_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_HIDE_DESKTOP: () => (/* binding */ ATTR_PETAL_HIDE_DESKTOP),\n/* harmony export */ ATTR_PETAL_HIDE_MOBILE: () => (/* binding */ ATTR_PETAL_HIDE_MOBILE),\n/* harmony export */ ATTR_PETAL_HIDE_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_HIDE_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_HIDE_TABLET: () => (/* binding */ ATTR_PETAL_HIDE_TABLET),\n/* harmony export */ ATTR_PETAL_LOCK_SCROLL_ON_OPEN: () => (/* binding */ ATTR_PETAL_LOCK_SCROLL_ON_OPEN),\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_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 */ ATTR_PETAL_TRIGGER_OPEN: () => (/* binding */ ATTR_PETAL_TRIGGER_OPEN)\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 * BREAKPOINTS\n *--------------------------*/\nconst ATTR_PETAL_HIDE_DESKTOP = \"petal-hide-desktop\";\nconst ATTR_PETAL_HIDE_TABLET = \"petal-hide-tablet\";\nconst ATTR_PETAL_HIDE_MOBILE_LANDSCAPE = \"petal-hide-mobile-landscape\";\nconst ATTR_PETAL_HIDE_MOBILE = \"petal-hide-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 * OPEN & CLOSE\n *--------------------------*/\nconst ATTR_PETAL_TRIGGER_OPEN = \"trigger-open\";\nconst ATTR_PETAL_TRIGGER_CLOSE = \"trigger-close\";\n/**-------------------------*\n * MODAL\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_MODAL = \"modal\";\nconst ATTR_PETAL_DIALOG = \"dialog\";\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\";\n// BEHAVIOR\nconst ATTR_PETAL_LOCK_SCROLL_ON_OPEN = \"petal-lock-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// ARIA ATTRIBUTES\nconst ARIA_EXPANDED = \"aria-expanded\";\n\n\n//# sourceURL=webpack://petal/./src/lib/attributes.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_DELAY: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_DELAY),\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_OFFSET: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_OFFSET),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN: () => (/* binding */ ATTR_PETAL_ANIM_OPEN),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_DELAY: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_DELAY),\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_OFFSET: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_OFFSET),\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_DEBUG: () => (/* binding */ ATTR_PETAL_DEBUG),\n/* harmony export */ ATTR_PETAL_DIALOG: () => (/* binding */ ATTR_PETAL_DIALOG),\n/* harmony export */ ATTR_PETAL_DROPDOWN: () => (/* binding */ ATTR_PETAL_DROPDOWN),\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_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_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_HIDE_DESKTOP: () => (/* binding */ ATTR_PETAL_HIDE_DESKTOP),\n/* harmony export */ ATTR_PETAL_HIDE_MOBILE: () => (/* binding */ ATTR_PETAL_HIDE_MOBILE),\n/* harmony export */ ATTR_PETAL_HIDE_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_HIDE_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_HIDE_TABLET: () => (/* binding */ ATTR_PETAL_HIDE_TABLET),\n/* harmony export */ ATTR_PETAL_LOCK_SCROLL_ON_OPEN: () => (/* binding */ ATTR_PETAL_LOCK_SCROLL_ON_OPEN),\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_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_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 */ ATTR_PETAL_TRIGGER_OPEN: () => (/* binding */ ATTR_PETAL_TRIGGER_OPEN)\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_SESSION_TTL = \"petal-session-ttl\"; // Time to keep user session (in hours)\n/**-------------------------*\n * ANIMATION\n *--------------------------*/\nconst ATTR_PETAL_ANIM_OPEN = \"petal-anim-open\";\nconst ATTR_PETAL_ANIM_OPEN_DURATION = \"petal-anim-open-duration\";\nconst ATTR_PETAL_ANIM_OPEN_DELAY = \"petal-anim-open-delay\";\nconst ATTR_PETAL_ANIM_OPEN_OFFSET = \"petal-anim-open-offset\";\nconst ATTR_PETAL_ANIM_OPEN_EASE = \"petal-anim-open-ease\";\nconst ATTR_PETAL_ANIM_CLOSE = \"petal-anim-close\";\nconst ATTR_PETAL_ANIM_CLOSE_DURATION = \"petal-anim-close-duration\";\nconst ATTR_PETAL_ANIM_CLOSE_DELAY = \"petal-anim-close-delay\";\nconst ATTR_PETAL_ANIM_CLOSE_OFFSET = \"petal-anim-close-offset\";\nconst ATTR_PETAL_ANIM_CLOSE_EASE = \"petal-anim-close-ease\";\n/**-------------------------*\n * BREAKPOINTS\n *--------------------------*/\nconst ATTR_PETAL_HIDE_DESKTOP = \"petal-hide-desktop\";\nconst ATTR_PETAL_HIDE_TABLET = \"petal-hide-tablet\";\nconst ATTR_PETAL_HIDE_MOBILE_LANDSCAPE = \"petal-hide-mobile-landscape\";\nconst ATTR_PETAL_HIDE_MOBILE = \"petal-hide-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 * OPEN & CLOSE\n *--------------------------*/\nconst ATTR_PETAL_TRIGGER_OPEN = \"trigger-open\";\nconst ATTR_PETAL_TRIGGER_CLOSE = \"trigger-close\";\n/**-------------------------*\n * MODAL\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_MODAL = \"modal\";\nconst ATTR_PETAL_DIALOG = \"dialog\";\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\";\n// BEHAVIOR\nconst ATTR_PETAL_LOCK_SCROLL_ON_OPEN = \"petal-lock-scroll-on-open\";\n// OPEN/CLOSE BEHAVIOR\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// ARIA ATTRIBUTES\nconst ARIA_EXPANDED = \"aria-expanded\";\n\n\n//# sourceURL=webpack://petal/./src/lib/attributes.ts?");
|
|
170
170
|
|
|
171
171
|
/***/ }),
|
|
172
172
|
|
|
@@ -186,7 +186,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
186
186
|
\****************************/
|
|
187
187
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
188
188
|
|
|
189
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ findClosestPetalParent: () => (/* binding */ findClosestPetalParent),\n/* harmony export */ findPetalElementByName: () => (/* binding */ findPetalElementByName),\n/* harmony export */ findPetalElementByNameOrInParent: () => (/* binding */ findPetalElementByNameOrInParent),\n/* harmony export */ findPetalElementsByName: () => (/* binding */ findPetalElementsByName),\n/* harmony export */ findPetalElementsByNameOrInParent: () => (/* binding */ findPetalElementsByNameOrInParent),\n/* harmony export */ getAllPetalElementsOfType: () => (/* binding */ getAllPetalElementsOfType),\n/* harmony export */ getPetalElementInParent: () => (/* binding */ getPetalElementInParent),\n/* harmony export */ getPetalElementsInParent: () => (/* binding */ getPetalElementsInParent)\n/* harmony export */ });\n/* harmony import */ var _attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./attributes */ \"./src/lib/attributes.ts\");\n\nfunction getAllPetalElementsOfType(el) {\n return document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\nfunction getPetalElementInParent(parent, el) {\n return parent.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\nfunction getPetalElementsInParent(parent, el) {\n return parent.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\n/**\n * Find Petal Element by Name\n * @param name The Petal Name for the Element (Set with petal=['NAME']).\n * @param el The Attribute of the Element to get.\n * @returns An Element of the correct type with the matching name or null if none is found.\n */\nfunction findPetalElementByName(name, el) {\n return document.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}='${name}'][${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\n/**\n * Find Petal Elements by Name\n * @param name The Petal Name for the Elements (Set with petal=['NAME']).\n * @param el The Attribute of the Elements to get.\n * @returns Elements of the correct type with the matching name or null if none is found.\n */\nfunction findPetalElementsByName(name, el) {\n return document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}='${name}'][${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\nfunction findPetalElementByNameOrInParent(parent, name, el) {\n // First try to find by name globally\n const globalMatch = findPetalElementByName(name, el);\n if (globalMatch)\n return globalMatch;\n // If no name match, try to find within the parent\n return getPetalElementInParent(parent, el);\n}\nfunction findPetalElementsByNameOrInParent(parent, name, el) {\n // First try to find by name globally\n const globalMatch = findPetalElementsByName(name, el);\n if (globalMatch && globalMatch.length > 0)\n return globalMatch;\n // If no name match, try to find within the parent\n return getPetalElementsInParent(parent, el);\n}\n/**\n * Find the closest parent element with a specific petal-el attribute\n * @param element The starting element\n * @param petalElType The petal-el type to search for (e.g., 'modal', 'dropdown')\n * @returns The closest parent with the specified petal-el type, or null if none found\n */\nfunction findClosestPetalParent(element, petalElType) {\n let current = element.parentElement;\n while (current) {\n if (current.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT) === petalElType) {\n return current;\n }\n current = current.parentElement;\n }\n return null;\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/helpers.ts?");
|
|
189
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ findClosestPetalParent: () => (/* binding */ findClosestPetalParent),\n/* harmony export */ findPetalElementByName: () => (/* binding */ findPetalElementByName),\n/* harmony export */ findPetalElementByNameOrInParent: () => (/* binding */ findPetalElementByNameOrInParent),\n/* harmony export */ findPetalElementsByName: () => (/* binding */ findPetalElementsByName),\n/* harmony export */ findPetalElementsByNameOrInParent: () => (/* binding */ findPetalElementsByNameOrInParent),\n/* harmony export */ getAllPetalElementsOfType: () => (/* binding */ getAllPetalElementsOfType),\n/* harmony export */ getPetalElementInParent: () => (/* binding */ getPetalElementInParent),\n/* harmony export */ getPetalElementsInParent: () => (/* binding */ getPetalElementsInParent),\n/* harmony export */ parseAsIs: () => (/* binding */ parseAsIs),\n/* harmony export */ parseBoolean: () => (/* binding */ parseBoolean),\n/* harmony export */ parseNumber: () => (/* binding */ parseNumber),\n/* harmony export */ parseOffset: () => (/* binding */ parseOffset),\n/* harmony export */ parseString: () => (/* binding */ parseString)\n/* harmony export */ });\n/* harmony import */ var _attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./attributes */ \"./src/lib/attributes.ts\");\n\nfunction getAllPetalElementsOfType(el) {\n return document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\nfunction getPetalElementInParent(parent, el) {\n return parent.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\nfunction getPetalElementsInParent(parent, el) {\n return parent.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\n/**\n * Find Petal Element by Name\n * @param name The Petal Name for the Element (Set with petal=['NAME']).\n * @param el The Attribute of the Element to get.\n * @returns An Element of the correct type with the matching name or null if none is found.\n */\nfunction findPetalElementByName(name, el) {\n return document.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}='${name}'][${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\n/**\n * Find Petal Elements by Name\n * @param name The Petal Name for the Elements (Set with petal=['NAME']).\n * @param el The Attribute of the Elements to get.\n * @returns Elements of the correct type with the matching name or null if none is found.\n */\nfunction findPetalElementsByName(name, el) {\n return document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}='${name}'][${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${el}']`);\n}\nfunction findPetalElementByNameOrInParent(parent, name, el) {\n // First try to find by name globally\n const globalMatch = findPetalElementByName(name, el);\n if (globalMatch)\n return globalMatch;\n // If no name match, try to find within the parent\n return getPetalElementInParent(parent, el);\n}\nfunction findPetalElementsByNameOrInParent(parent, name, el) {\n // First try to find by name globally\n const globalMatch = findPetalElementsByName(name, el);\n if (globalMatch && globalMatch.length > 0)\n return globalMatch;\n // If no name match, try to find within the parent\n return getPetalElementsInParent(parent, el);\n}\n/**\n * Find the closest parent element with a specific petal-el attribute\n * @param element The starting element\n * @param petalElType The petal-el type to search for (e.g., 'modal', 'dropdown')\n * @returns The closest parent with the specified petal-el type, or null if none found\n */\nfunction findClosestPetalParent(element, petalElType) {\n let current = element.parentElement;\n while (current) {\n if (current.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT) === petalElType) {\n return current;\n }\n current = current.parentElement;\n }\n return null;\n}\nfunction parseNumber(raw) {\n if (raw === null)\n return null;\n const parsed = parseFloat(raw);\n return isNaN(parsed) ? null : parsed;\n}\n/**\n * Parses a boolean attribute value.\n * Returns null if the raw value is null, otherwise returns true for \"true\" and false otherwise.\n */\nfunction parseBoolean(raw) {\n if (raw === null)\n return null;\n return raw === \"true\";\n}\n/**\n * Parses an offset value.\n * Returns the string as-is if it contains \"%\", otherwise parses as an integer.\n * Returns 0 if the raw value is null.\n */\nfunction parseOffset(raw) {\n if (raw === null)\n return 0;\n return raw.includes(\"%\") ? raw : parseInt(raw);\n}\nfunction parseString(raw) {\n return raw;\n}\n/**\n * Identity parser that returns the value as-is, typed as the provided generic.\n * Useful when you need to satisfy a parser function signature but don't want to transform the value.\n */\nfunction parseAsIs(raw) {\n return raw;\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/helpers.ts?");
|
|
190
190
|
|
|
191
191
|
/***/ }),
|
|
192
192
|
|
|
@@ -210,6 +210,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
210
210
|
|
|
211
211
|
/***/ }),
|
|
212
212
|
|
|
213
|
+
/***/ "./src/lib/setting.ts":
|
|
214
|
+
/*!****************************!*\
|
|
215
|
+
!*** ./src/lib/setting.ts ***!
|
|
216
|
+
\****************************/
|
|
217
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
218
|
+
|
|
219
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ BREAKPOINT_MOBILE: () => (/* binding */ BREAKPOINT_MOBILE),\n/* harmony export */ BREAKPOINT_MOBILE_LANDSCAPE: () => (/* binding */ BREAKPOINT_MOBILE_LANDSCAPE),\n/* harmony export */ BREAKPOINT_TABLET: () => (/* binding */ BREAKPOINT_TABLET),\n/* harmony export */ getSetting: () => (/* binding */ getSetting),\n/* harmony export */ getSettingAttr: () => (/* binding */ getSettingAttr),\n/* harmony export */ isMobile: () => (/* binding */ isMobile),\n/* harmony export */ parseSetting: () => (/* binding */ parseSetting)\n/* harmony export */ });\n// Breakpoint thresholds (max-width, inclusive)\nconst BREAKPOINT_MOBILE = 479;\nconst BREAKPOINT_MOBILE_LANDSCAPE = 767;\nconst BREAKPOINT_TABLET = 991;\nconst BREAKPOINT_SUFFIXES = [\"\", \"-tablet\", \"-mobile-landscape\", \"-mobile\"];\n/**\n * Reads an attribute across all four breakpoints, cascades (each level falls back\n * to the previous), and parses each value through the provided `parse` function.\n *\n * @param el The element to read attributes from.\n * @param baseAttr The desktop attribute name (e.g. \"petal-anim-open\").\n * Tablet/mobile variants are derived by appending suffixes.\n * @param parse Converts the raw string (or null if missing) to the desired type.\n */\nfunction parseSetting(el, baseAttr, parse) {\n const raw = BREAKPOINT_SUFFIXES.map((suffix) => el.getAttribute(`${baseAttr}${suffix}`));\n // If only the desktop breakpoint is sset, return it as a single value\n if (raw[1] === null && raw[2] === null && raw[3] === null) {\n return parse(raw[0]);\n }\n // Cascade values from desktop down to mobile\n const cascaded = [];\n for (let i = 0; i < 4; i++) {\n if (raw[i] !== null) {\n cascaded[i] = raw[i];\n }\n else {\n cascaded[i] = i === 0 ? null : cascaded[i - 1];\n }\n }\n return {\n desktop: parse(cascaded[0]),\n tablet: parse(cascaded[1]),\n mobileLandscape: parse(cascaded[2]),\n mobile: parse(cascaded[3]),\n };\n}\n/**\n * Resolves a value set across breakpoints based on current window width.\n * Priority: mobile → mobileLandscape → tablet → desktop (narrowest match wins).\n *\n * @param values The breakpoint configuration values\n * @param parse Optional function to parse/transform the resolved value\n */\nfunction getSetting(values) {\n var _a, _b, _c, _d, _e, _f;\n const width = window.innerWidth;\n let resolved;\n if (typeof values !== \"object\" || values === null || !(\"desktop\" in values)) {\n // Single value for all breakpoints\n resolved = values;\n }\n else {\n if (width <= BREAKPOINT_MOBILE)\n resolved = (_c = (_b = (_a = values.mobile) !== null && _a !== void 0 ? _a : values.mobileLandscape) !== null && _b !== void 0 ? _b : values.tablet) !== null && _c !== void 0 ? _c : values.desktop;\n else if (width <= BREAKPOINT_MOBILE_LANDSCAPE)\n resolved = (_e = (_d = values.mobileLandscape) !== null && _d !== void 0 ? _d : values.tablet) !== null && _e !== void 0 ? _e : values.desktop;\n else if (width <= BREAKPOINT_TABLET)\n resolved = (_f = values.tablet) !== null && _f !== void 0 ? _f : values.desktop;\n else\n resolved = values.desktop;\n }\n return resolved;\n}\n/** Returns true if the current viewport is at or below the mobile breakpoint. */\nfunction isMobile() {\n return window.innerWidth <= BREAKPOINT_MOBILE;\n}\n/**\n * Gets an attribute value from an element, parsing it across all breakpoints\n * and resolving to the appropriate value for the current viewport width.\n *\n * @param el The element to read the attribute from\n * @param baseAttr The base attribute name (e.g. \"petal-dropdown-close-delay\")\n * @param parse Function to convert the raw string to the desired type\n * @returns The resolved value for the current breakpoint\n */\nfunction getSettingAttr(el, baseAttr, parse) {\n const setting = parseSetting(el, baseAttr, parse);\n return getSetting(setting);\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/setting.ts?");
|
|
220
|
+
|
|
221
|
+
/***/ }),
|
|
222
|
+
|
|
213
223
|
/***/ "./src/modules/banner/banner-config.ts":
|
|
214
224
|
/*!*********************************************!*\
|
|
215
225
|
!*** ./src/modules/banner/banner-config.ts ***!
|
|
@@ -236,7 +246,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
236
246
|
\***************************************************/
|
|
237
247
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
238
248
|
|
|
239
|
-
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
|
|
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_3__ = __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/* harmony import */ var _lib_setting__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/setting */ \"./src/lib/setting.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/**\n * Animates dropdown opening with GSAP\n */\nfunction animateOpen(elements, config, index) {\n const { dropdown, toggle, menu, drawer, overlay } = elements;\n // CURRENT STOP:\n // Need to get the correct animation options based on breakpoint settings\n // Right now, breakpoints are not being applied correctly\n const anim = config.animOpen;\n // Get current breakpoint animation\n const currentAnim = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.getSetting)(anim);\n console.log(anim);\n console.log(currentAnim);\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_3__.gsap.timeline();\n // CRITICAL: Set drawer position BEFORE making menu visible to avoid flash\n //gsap.set(drawer, anim.from);\n // Now make elements visible\n gsap__WEBPACK_IMPORTED_MODULE_3__.gsap.set(menu, { display: \"flex\", visibility: \"visible\" });\n if (overlay) {\n gsap__WEBPACK_IMPORTED_MODULE_3__.gsap.set(overlay, { display: \"flex\", visibility: \"visible\", opacity: 1 });\n }\n // Animate the drawer\n //tl.to(drawer, 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 return tl;\n}\n/**\n * Animates dropdown closing with GSAP\n */\nfunction animateClose(elements, config, index) {\n var _a;\n const { dropdown, toggle, menu, drawer, overlay } = elements;\n const settings = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.getSetting)(config.animClose);\n const openAnim = ((_a = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.getSetting)(config.animOpen)) === null || _a === void 0 ? void 0 : _a.animation) || \"slide-up\";\n // Build animation options with easing and duration\n const animOptions = {\n animation: (settings === null || settings === void 0 ? void 0 : settings.animation) || \"slide-up\",\n delay: (settings === null || settings === void 0 ? void 0 : settings.delay) || 0,\n duration: (settings === null || settings === void 0 ? void 0 : settings.duration) || 0.5,\n offset: (settings === null || settings === void 0 ? void 0 : settings.offset) || undefined,\n ease: (settings === null || settings === void 0 ? void 0 : settings.ease) || undefined,\n };\n // Use explicit close animation if provided, otherwise reverse the open animation\n const anim = animOptions.animation ? (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.getAnimation)(animOptions.animation, animOptions) : (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.getReverseAnimation)(openAnim, animOptions);\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_3__.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 // Clear all animation properties to ensure clean state for next open\n (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.clearAnimationProperties)(drawer);\n // Set display to none and visibility to hidden after animation completes\n gsap__WEBPACK_IMPORTED_MODULE_3__.gsap.set(menu, { display: \"none\", visibility: \"hidden\" });\n if (overlay) {\n gsap__WEBPACK_IMPORTED_MODULE_3__.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: animOptions.duration || 0.5 }, \"<\");\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 // Validate animation type and fallback to slide-up if invalid\n const validAnim = (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.isValidAnimation)(currentAnim) ? currentAnim : \"slide-up\";\n const anim = _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animations[validAnim]({ offset: currentOffset });\n gsap__WEBPACK_IMPORTED_MODULE_3__.gsap.set(drawer, anim.from);\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown-animator.ts?");
|
|
240
250
|
|
|
241
251
|
/***/ }),
|
|
242
252
|
|
|
@@ -246,7 +256,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
246
256
|
\*************************************************/
|
|
247
257
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
248
258
|
|
|
249
|
-
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_LOCK_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 ? parseFloat(animOpenDurationAttr) : animOpenSpeedAttr ? parseInt(animOpenSpeedAttr) / 1000 : 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 ? parseFloat(animCloseDurationAttr) : animCloseSpeedAttr ? parseInt(animCloseSpeedAttr) / 1000 : 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) || 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 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?");
|
|
259
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\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_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_setting__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/setting */ \"./src/lib/setting.ts\");\n/* harmony import */ var _lib_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../lib/helpers */ \"./src/lib/helpers.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\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_1__.ATTR_PETAL_GROUP) || null;\n // Debug mode\n const debug = dropdown.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.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_1__.ATTR_PETAL_LOCK_SCROLL_ON_OPEN) === \"true\";\n // Open-on-hover configuration with breakpoints (defaults to true)\n const openOnHover = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.parseSetting)(dropdown, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER, _lib_helpers__WEBPACK_IMPORTED_MODULE_3__.parseBoolean);\n // Show on breakpoints configuration (defaults to true)\n const show = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.parseSetting)(dropdown, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_SHOW_DESKTOP, _lib_helpers__WEBPACK_IMPORTED_MODULE_3__.parseBoolean);\n // Open animation configuration with cascading defaults\n const animOpen = (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.getAnimationConfig)(dropdown, \"OPEN\");\n const animClose = (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.getAnimationConfig)(dropdown, \"CLOSE\");\n return {\n group,\n debug,\n hasMouse,\n disableScrollOnOpen,\n openOnHover,\n show,\n animOpen,\n animClose,\n };\n}\nfunction getCurrentOpenOnHover(config) {\n // Nullable breakpoint values fall back to desktop if not explicitly set\n const shouldHover = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.getSetting)(config.openOnHover);\n // Only enable hover if device has mouse OR on desktop (width > BREAKPOINT_TABLET)\n return !!shouldHover && (config.hasMouse || window.innerWidth > _lib_setting__WEBPACK_IMPORTED_MODULE_2__.BREAKPOINT_TABLET);\n}\nfunction getCurrentShowState(config) {\n return !!(0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.getSetting)(config.show);\n}\nfunction getCurrentOpenAnimation(config) {\n var _a;\n return ((_a = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.getSetting)(config.animOpen)) === null || _a === void 0 ? void 0 : _a.animation) || null;\n}\nfunction getCurrentOffset(config) {\n var _a;\n return ((_a = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_2__.getSetting)(config.animOpen)) === null || _a === void 0 ? void 0 : _a.offset) || null;\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 openOnHover: config.openOnHover,\n show: config.show,\n shouldShow: getCurrentShowState(config),\n animOpen: config.animOpen,\n animClose: config.animClose,\n });\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/dropdown/dropdown-config.ts?");
|
|
250
260
|
|
|
251
261
|
/***/ }),
|
|
252
262
|
|
|
@@ -256,7 +266,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
256
266
|
\*****************************************************/
|
|
257
267
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
258
268
|
|
|
259
|
-
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/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../lib/debug */ \"./src/lib/debug.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\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 * - Closes other dropdowns in same group before opening\n * - Animates using GSAP timeline\n */\n this.open = () => {\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debug)(this.config.debug, \"Dropdown\", `Dropdown ${this.index + 1} - openDropdown() called`);\n // Cancel any pending close\n if (this.timeoutId) {\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 close other dropdowns in the group first\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 // Close all other dropdowns in this group\n Array.from(groupDropdowns).forEach((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 if (ddToggle && ddToggle !== this.elements.toggle && ddToggle.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED) === \"true\") {\n // Trigger close on the other dropdown by dispatching a mouseleave event\n dd.dispatchEvent(new MouseEvent(\"mouseleave\", { bubbles: true, cancelable: true }));\n // Calculate total time needed: close delay + close animation duration\n const closeDelay = parseInt(dd.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"200\", 10);\n // Get the close animation duration from the dropdown's config\n // Parse the close speed attribute (in ms, needs conversion to seconds)\n const closeSpeedAttr = dd.getAttribute(\"petal-anim-close-speed\");\n const closeDurationAttr = dd.getAttribute(\"petal-anim-close-duration\");\n const closeAnimDuration = closeDurationAttr\n ? parseFloat(closeDurationAttr) * 1000 // duration is in seconds\n : closeSpeedAttr\n ? parseInt(closeSpeedAttr) // speed is in milliseconds\n : 300; // default 300ms\n // Total time = close delay + close animation duration\n const totalCloseTime = closeDelay + closeAnimDuration;\n groupCoordinationDelay = Math.max(groupCoordinationDelay, totalCloseTime);\n }\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 }\n };\n // Use the greater of openDelay or groupCoordinationDelay\n const totalDelay = Math.max(this.config.openDelay, groupCoordinationDelay);\n if (totalDelay > 0) {\n setTimeout(performOpen, totalDelay);\n }\n else {\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 (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debug)(this.config.debug, \"Dropdown\", `Dropdown ${this.index + 1} - closeDropdown() called`);\n // Cancel any pending close\n if (this.timeoutId) {\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 }\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.closeDelay > 0) {\n this.timeoutId = window.setTimeout(this.close, this.config.closeDelay);\n }\n else {\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 }\n else {\n // Hide menu and close if open\n if (this.isOpen) {\n this.close();\n }\n menu.style.display = \"none\";\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 }\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?");
|
|
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/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../lib/debug */ \"./src/lib/debug.ts\");\n/* harmony import */ var _lib_setting__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../lib/setting */ \"./src/lib/setting.ts\");\n/* harmony import */ var _lib_helpers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../lib/helpers */ \"./src/lib/helpers.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\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 * - Closes other dropdowns in same group before opening\n * - Animates using GSAP timeline\n */\n this.open = () => {\n var _a;\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debug)(this.config.debug, \"Dropdown\", `Dropdown ${this.index + 1} - openDropdown() called`);\n const openDelay = ((_a = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_5__.getSetting)(this.config.animOpen)) === null || _a === void 0 ? void 0 : _a.delay) || 0;\n // Cancel any pending close\n if (this.timeoutId) {\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 close other dropdowns in the group first\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 // Close all other dropdowns in this group\n Array.from(groupDropdowns).forEach((dd) => {\n console.log(\"Checking other dropdown in group for coordination...\");\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 if (ddToggle && ddToggle !== this.elements.toggle && ddToggle.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED) === \"true\") {\n // Trigger close on the other dropdown by dispatching a mouseleave event\n dd.dispatchEvent(new MouseEvent(\"mouseleave\", { bubbles: true, cancelable: true }));\n // Calculate total time needed: close delay + close animation duration\n const closeDelay = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_5__.getSettingAttr)(dd, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ANIM_CLOSE_DELAY, _lib_helpers__WEBPACK_IMPORTED_MODULE_6__.parseNumber) || 200;\n // Get the close animation duration from the dropdown's config\n // Parse the close speed attribute (in ms, needs conversion to seconds)\n const closeSpeedAttr = dd.getAttribute(\"petal-anim-close-speed\");\n const closeDurationAttr = dd.getAttribute(\"petal-anim-close-duration\");\n const closeAnimDuration = closeDurationAttr\n ? parseFloat(closeDurationAttr) * 1000 // duration is in seconds\n : closeSpeedAttr\n ? parseInt(closeSpeedAttr) // speed is in milliseconds\n : 300; // default 300ms\n // Total time = close delay + close animation duration\n const totalCloseTime = closeDelay + closeAnimDuration;\n groupCoordinationDelay = Math.max(groupCoordinationDelay, totalCloseTime);\n }\n });\n }\n // Perform the actual open (immediately or delayed)\n const performOpen = () => {\n var _a, _b;\n const currentAnim = (_a = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_5__.getSetting)(this.config.animOpen)) === null || _a === void 0 ? void 0 : _a.animation;\n const currentOffset = (_b = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_5__.getSetting)(this.config.animOpen)) === null || _b === void 0 ? void 0 : _b.offset;\n this.currentTimeline = (0,_dropdown_animator__WEBPACK_IMPORTED_MODULE_2__.animateOpen)(this.elements, 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 }\n };\n // Use the greater of openDelay or groupCoordinationDelay\n const totalDelay = Math.max(openDelay, groupCoordinationDelay);\n if (totalDelay > 0) {\n setTimeout(performOpen, totalDelay);\n }\n else {\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 (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debug)(this.config.debug, \"Dropdown\", `Dropdown ${this.index + 1} - closeDropdown() called`);\n // Cancel any pending close\n if (this.timeoutId) {\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 this.currentTimeline = (0,_dropdown_animator__WEBPACK_IMPORTED_MODULE_2__.animateClose)(this.elements, 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 }\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 var _a;\n const closeDelay = ((_a = (0,_lib_setting__WEBPACK_IMPORTED_MODULE_5__.getSetting)(this.config.animClose)) === null || _a === void 0 ? void 0 : _a.delay) || 0;\n if (closeDelay > 0) {\n this.timeoutId = window.setTimeout(this.close, closeDelay);\n }\n else {\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) || \"slide-up\";\n const currentOffset = (0,_dropdown_config__WEBPACK_IMPORTED_MODULE_1__.getCurrentOffset)(this.config) || 0;\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 }\n else {\n // Hide menu and close if open\n if (this.isOpen) {\n this.close();\n }\n menu.style.display = \"none\";\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 }\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?");
|
|
260
270
|
|
|
261
271
|
/***/ }),
|
|
262
272
|
|
|
@@ -276,47 +286,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
276
286
|
\******************************************/
|
|
277
287
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
278
288
|
|
|
279
|
-
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/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../lib/debug */ \"./src/lib/debug.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\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 (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"toggle\", toggle);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"menu\", menu);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"drawer\", drawer);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"overlay\", overlay);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"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\n const mouseEnterHandler = () => {\n controller.open();\n };\n const mouseLeaveHandler = () => {\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 (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debug)(config.debug, \"DROPDOWN\", `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 dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\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 dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\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 close.addEventListener(\"click\", controller.close);\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?");
|
|
280
|
-
|
|
281
|
-
/***/ }),
|
|
282
|
-
|
|
283
|
-
/***/ "./src/modules/modal/modal-animator.ts":
|
|
284
|
-
/*!*********************************************!*\
|
|
285
|
-
!*** ./src/modules/modal/modal-animator.ts ***!
|
|
286
|
-
\*********************************************/
|
|
287
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
288
|
-
|
|
289
|
-
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_3__ = __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/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/debug */ \"./src/lib/debug.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\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 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 modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE) ||\n modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_TABLET) ||\n modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_MOBILE_LANDSCAPE) ||\n modal.hasAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_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 with cascading defaults (like open animations)\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) || closeDesktop;\n const closeMobileLandscape = getModalAnimationOrNull(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_MOBILE_LANDSCAPE) || closeTablet;\n const closeMobile = getModalAnimationOrNull(modal, _lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_MOBILE) || closeMobileLandscape;\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 // Get current close animation based on breakpoint\n let currentCloseAnim;\n if (width <= 479) {\n currentCloseAnim = closeMobile;\n }\n else if (width <= 767) {\n currentCloseAnim = closeMobileLandscape;\n }\n else if (width <= 991) {\n currentCloseAnim = closeTablet;\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 * Safe parser with fallback\n */\nfunction getModalAnimation(modal, attr) {\n const raw = modal.getAttribute(attr);\n return (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.isValidAnimation)(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 (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.isValidAnimation)(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_3__.gsap.timeline();\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) ? parseFloat(modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_OPEN_DURATION)) : undefined;\n const animOptions = {\n offset: \"100%\",\n ease,\n duration,\n };\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_2__.debug)(config.debug, \"MODAL\", `\"${config.name}\" - open()`);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_2__.debug)(config.debug, \"MODAL\", `${animOptions}`);\n const anim = _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animations[animationType](animOptions);\n // Clear any leftover animation properties before starting\n (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.clearAnimationProperties)(dialog);\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 // 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 = _lib_animations__WEBPACK_IMPORTED_MODULE_0__.animations[\"fade-in\"]({ offset: 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\n tl.fromTo(dialog, anim.from, 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_3__.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) ? parseFloat(modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ANIM_CLOSE_DURATION)) : 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 all animation properties\n tl.set(modal, { display: \"none\" });\n tl.call(() => (0,_lib_animations__WEBPACK_IMPORTED_MODULE_0__.clearAnimationProperties)(dialog));\n if (config.debug)\n console.log(`[DEBUG] Modal \"${config.name}\" - Set display to none and cleared all animation properties`);\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?");
|
|
290
|
-
|
|
291
|
-
/***/ }),
|
|
292
|
-
|
|
293
|
-
/***/ "./src/modules/modal/modal-config.ts":
|
|
294
|
-
/*!*******************************************!*\
|
|
295
|
-
!*** ./src/modules/modal/modal-config.ts ***!
|
|
296
|
-
\*******************************************/
|
|
297
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
298
|
-
|
|
299
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ logConfig: () => (/* binding */ logConfig),\n/* harmony export */ parseModalConfig: () => (/* binding */ parseModalConfig)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/**\n * Modal Configuration Module\n *\n * Handles parsing modal configuration from HTML attributes.\n */\n\n/**\n * Parses modal configuration from HTML element attributes\n */\nfunction parseModalConfig(modal) {\n const name = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME) || \"unknown\";\n const debug = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DEBUG) === \"true\";\n const maskOpacity = parseFloat(modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY_OPACITY) || \"0.15\");\n const typeAttr = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_MODAL_TYPE);\n const type = isValidModalType(typeAttr) ? typeAttr : \"center\";\n const lockScrollOnOpen = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_LOCK_SCROLL_ON_OPEN) !== \"false\"; // Default to true\n return {\n name,\n debug,\n maskOpacity,\n type,\n lockScrollOnOpen,\n };\n}\n/**\n * Type guard to validate modal type\n */\nfunction isValidModalType(value) {\n return value === \"center\" || value === \"left\" || value === \"right\" || value === \"top\" || value === \"bottom\";\n}\n/**\n * Log configuration for debugging\n */\nfunction logConfig(config) {\n if (!config.debug)\n return;\n console.log(config);\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/modal/modal-config.ts?");
|
|
300
|
-
|
|
301
|
-
/***/ }),
|
|
302
|
-
|
|
303
|
-
/***/ "./src/modules/modal/modal-controller.ts":
|
|
304
|
-
/*!***********************************************!*\
|
|
305
|
-
!*** ./src/modules/modal/modal-controller.ts ***!
|
|
306
|
-
\***********************************************/
|
|
307
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
308
|
-
|
|
309
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModalController: () => (/* binding */ ModalController)\n/* harmony export */ });\n/* harmony import */ var _lib_memory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/memory */ \"./src/lib/memory.ts\");\n/* harmony import */ var _video__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../video */ \"./src/video.ts\");\n/* harmony import */ var _lib_scroll_lock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/scroll-lock */ \"./src/lib/scroll-lock.ts\");\n/* harmony import */ var _modal_animator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modal-animator */ \"./src/modules/modal/modal-animator.ts\");\n/**\n * Modal Controller Module\n *\n * Manages modal state and orchestrates opening/closing logic with animations.\n */\n\n\n\n\nclass ModalController {\n constructor(elements, config) {\n this.elements = elements;\n this.config = config;\n this.currentTimeline = null;\n /**\n * Opens the modal using GSAP\n */\n this.open = () => {\n // Kill any existing timeline\n if (this.currentTimeline) {\n this.currentTimeline.kill();\n this.currentTimeline = null;\n }\n // Lock scroll if configured\n if (this.config.lockScrollOnOpen) {\n (0,_lib_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.lockScroll)();\n if (this.config.debug)\n console.log(`[DEBUG] Modal \"${this.config.name}\" - Locked scroll`);\n }\n this.currentTimeline = (0,_modal_animator__WEBPACK_IMPORTED_MODULE_3__.animateOpen)(this.elements, this.config);\n };\n /**\n * Closes the modal using GSAP\n */\n this.close = () => {\n // Kill any existing timeline\n if (this.currentTimeline) {\n this.currentTimeline.kill();\n this.currentTimeline = null;\n }\n // Unlock scroll if configured\n if (this.config.lockScrollOnOpen) {\n (0,_lib_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.unlockScroll)();\n if (this.config.debug)\n console.log(`[DEBUG] Modal \"${this.config.name}\" - Unlocked scroll`);\n }\n // Pause any videos inside the modal\n (0,_video__WEBPACK_IMPORTED_MODULE_1__.pauseVideo)(this.elements.modal);\n if (this.config.debug)\n console.log(`[DEBUG] Modal \"${this.config.name}\" - Paused any videos`);\n // Store modal closed state\n (0,_lib_memory__WEBPACK_IMPORTED_MODULE_0__.storeClosedState)(\"modal\", this.config.name);\n if (this.config.debug)\n console.log(`[DEBUG] Modal \"${this.config.name}\" - Stored closed state in session`);\n this.currentTimeline = (0,_modal_animator__WEBPACK_IMPORTED_MODULE_3__.animateClose)(this.elements, this.config);\n };\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/modal/modal-controller.ts?");
|
|
310
|
-
|
|
311
|
-
/***/ }),
|
|
312
|
-
|
|
313
|
-
/***/ "./src/modules/modal/modal.ts":
|
|
314
|
-
/*!************************************!*\
|
|
315
|
-
!*** ./src/modules/modal/modal.ts ***!
|
|
316
|
-
\************************************/
|
|
317
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
318
|
-
|
|
319
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ initializeAllModals: () => (/* binding */ initializeAllModals)\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 _modal_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modal-config */ \"./src/modules/modal/modal-config.ts\");\n/* harmony import */ var _modal_controller__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modal-controller */ \"./src/modules/modal/modal-controller.ts\");\n/* harmony import */ var _modal_animator__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modal-animator */ \"./src/modules/modal/modal-animator.ts\");\n/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../lib/debug */ \"./src/lib/debug.ts\");\n/**\n * Modal Component\n *\n * Handles interactive modal dialogs with support for:\n * - GSAP animations\n * - Optional overlay with configurable opacity\n * - Video pause on close\n * - Session state storage\n * - Open/close triggers\n * - Overlay click-to-close\n *\n * HTML Attributes (defined in attributes.ts):\n * - petal-el=\"modal\" - Container element (required)\n * - petal-el=\"dialog\" - Dialog content (required)\n * - petal-el=\"overlay\" - Background overlay (optional)\n * - petal=\"name\" - Modal identifier (optional)\n * - petal-el=\"open\" - Open trigger (requires petal=\"name\" on trigger if outside modal)\n * - petal-el=\"trigger-close\" - Close trigger (auto-detects parent modal if no name)\n * - petal-overlay-close=\"true\" - Enable overlay click-to-close (default: true)\n * - petal-overlay-opacity=\"0.15\" - Overlay opacity (default: 0.15)\n * - petal-modal-type=\"center|left|right|top|bottom\" - Modal position type (default: center)\n * - petal-debug=\"true\" - Enable debug logging\n */\n\n\n\n\n\n\n/**\n * Initialize all modals on the page\n */\nfunction initializeAllModals() {\n const modals = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.getAllPetalElementsOfType)(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_MODAL);\n modals.forEach((modal, index) => {\n // ===========================\n // Configuration\n // ===========================\n const name = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME) || null;\n const config = (0,_modal_config__WEBPACK_IMPORTED_MODULE_2__.parseModalConfig)(modal);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_5__.debug)(config.debug, \"MODAL\", `Processing ${name} (${index + 1}/${modals.length})`);\n (0,_modal_config__WEBPACK_IMPORTED_MODULE_2__.logConfig)(config);\n // ===========================\n // Element References\n // ===========================\n const overlay = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findPetalElementByNameOrInParent)(modal, name, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY);\n const dialog = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findPetalElementByNameOrInParent)(modal, name, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DIALOG);\n const openTriggers = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findPetalElementsByNameOrInParent)(modal, name, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_TRIGGER_OPEN);\n const closeTriggers = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findPetalElementsByNameOrInParent)(modal, name, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_TRIGGER_CLOSE);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_5__.debugElements)(config.debug, \"MODAL\", \"overlay\", overlay);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_5__.debugElements)(config.debug, \"MODAL\", \"open trigger\", openTriggers);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_5__.debugElements)(config.debug, \"MODAL\", \"close trigger\", closeTriggers);\n if (!dialog) {\n console.warn(`⚠️ [MODAL] Skipping modal \"${name}\" - missing dialog`);\n return;\n }\n // ===========================\n // Initialization\n // ===========================\n const elements = {\n modal: modal,\n dialog,\n mask: overlay,\n };\n // Create a single controller instance for this modal\n const controller = new _modal_controller__WEBPACK_IMPORTED_MODULE_3__.ModalController(elements, config);\n // Initialize Open Triggers\n openTriggers === null || openTriggers === void 0 ? void 0 : openTriggers.forEach((trigger, triggerIndex) => {\n trigger.addEventListener(\"click\", () => {\n controller.open();\n });\n });\n // Initialize Close Triggers\n closeTriggers === null || closeTriggers === void 0 ? void 0 : closeTriggers.forEach((trigger, triggerIndex) => {\n trigger.addEventListener(\"click\", () => {\n controller.close();\n });\n });\n // Find and attach close triggers without names (that are children of this modal)\n if (!name) {\n const allCloseTriggers = [...Array.from((0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.getAllPetalElementsOfType)(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_TRIGGER_CLOSE))];\n allCloseTriggers.forEach((trigger) => {\n // Check if this close trigger doesn't have a name and is a child of this modal\n const triggerName = trigger.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME);\n if (!triggerName) {\n const parentModal = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findClosestPetalParent)(trigger, _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_MODAL);\n if (parentModal === modal) {\n trigger.addEventListener(\"click\", () => {\n controller.close();\n });\n }\n }\n });\n }\n // Initialize Overlay Close Trigger\n const overlayCloseAttr = modal.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY_CLOSE);\n const overlayClose = overlayCloseAttr === null ? true : overlayCloseAttr === \"true\";\n if (overlay && overlayClose) {\n overlay.addEventListener(\"click\", () => {\n controller.close();\n });\n }\n (0,_modal_animator__WEBPACK_IMPORTED_MODULE_4__.initializeElements)(elements, config);\n });\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/modal/modal.ts?");
|
|
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/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../lib/debug */ \"./src/lib/debug.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\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 (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"toggle\", toggle);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"menu\", menu);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"drawer\", drawer);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"overlay\", overlay);\n (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debugElements)(config.debug, \"DROPDOWN\", \"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\n const mouseEnterHandler = () => {\n controller.open();\n };\n const mouseLeaveHandler = () => {\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 (0,_lib_debug__WEBPACK_IMPORTED_MODULE_4__.debug)(config.debug, \"DROPDOWN\", `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 dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\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 dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\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 close.addEventListener(\"click\", (event) => {\n event.stopPropagation();\n controller.close();\n });\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?");
|
|
320
290
|
|
|
321
291
|
/***/ }),
|
|
322
292
|
|
|
@@ -346,17 +316,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
346
316
|
\**********************/
|
|
347
317
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
348
318
|
|
|
349
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var
|
|
350
|
-
|
|
351
|
-
/***/ }),
|
|
352
|
-
|
|
353
|
-
/***/ "./src/video.ts":
|
|
354
|
-
/*!**********************!*\
|
|
355
|
-
!*** ./src/video.ts ***!
|
|
356
|
-
\**********************/
|
|
357
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
358
|
-
|
|
359
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ pauseVideo: () => (/* binding */ pauseVideo)\n/* harmony export */ });\nfunction pauseVideo(modal) {\n // Pause all <video> elements inside the modal before hiding it\n modal.querySelectorAll(\"video\").forEach((video) => {\n if (!video.paused)\n video.pause();\n });\n}\n\n\n//# sourceURL=webpack://petal/./src/video.ts?");
|
|
319
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_banner_banner__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/banner/banner */ \"./src/modules/banner/banner.ts\");\n/* harmony import */ var _modules_dropdown_dropdown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/dropdown/dropdown */ \"./src/modules/dropdown/dropdown.ts\");\n/* harmony import */ var _modules_overlay_overlay__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/overlay/overlay */ \"./src/modules/overlay/overlay.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _modules_dropdown_dropdown_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modules/dropdown/dropdown.css */ \"./src/modules/dropdown/dropdown.css\");\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.88\"}`);\n//initializeAllModals();\n(0,_modules_banner_banner__WEBPACK_IMPORTED_MODULE_0__.initializeBanner)();\n(0,_modules_dropdown_dropdown__WEBPACK_IMPORTED_MODULE_1__.initializeDropdowns)();\n(0,_modules_overlay_overlay__WEBPACK_IMPORTED_MODULE_2__.initializeOverlays)();\n\n\n//# sourceURL=webpack://petal/./src/petal.ts?");
|
|
360
320
|
|
|
361
321
|
/***/ })
|
|
362
322
|
|