(() => { var __defProp = Object.defineProperty; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __publicField = (obj, key, value) => { __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); return value; }; // node_modules/ftdomdelegate/main.js function Delegate(root) { this.listenerMap = [{}, {}]; if (root) { this.root(root); } this.handle = Delegate.prototype.handle.bind(this); this._removedListeners = []; } Delegate.prototype.root = function(root) { const listenerMap = this.listenerMap; let eventType; if (this.rootElement) { for (eventType in listenerMap[1]) { if (listenerMap[1].hasOwnProperty(eventType)) { this.rootElement.removeEventListener(eventType, this.handle, true); } } for (eventType in listenerMap[0]) { if (listenerMap[0].hasOwnProperty(eventType)) { this.rootElement.removeEventListener(eventType, this.handle, false); } } } if (!root || !root.addEventListener) { if (this.rootElement) { delete this.rootElement; } return this; } this.rootElement = root; for (eventType in listenerMap[1]) { if (listenerMap[1].hasOwnProperty(eventType)) { this.rootElement.addEventListener(eventType, this.handle, true); } } for (eventType in listenerMap[0]) { if (listenerMap[0].hasOwnProperty(eventType)) { this.rootElement.addEventListener(eventType, this.handle, false); } } return this; }; Delegate.prototype.captureForType = function(eventType) { return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(eventType) !== -1; }; Delegate.prototype.on = function(eventType, selector, handler, useCapture) { let root; let listenerMap; let matcher; let matcherParam; if (!eventType) { throw new TypeError("Invalid event type: " + eventType); } if (typeof selector === "function") { useCapture = handler; handler = selector; selector = null; } if (useCapture === void 0) { useCapture = this.captureForType(eventType); } if (typeof handler !== "function") { throw new TypeError("Handler must be a type of Function"); } root = this.rootElement; listenerMap = this.listenerMap[useCapture ? 1 : 0]; if (!listenerMap[eventType]) { if (root) { root.addEventListener(eventType, this.handle, useCapture); } listenerMap[eventType] = []; } if (!selector) { matcherParam = null; matcher = matchesRoot.bind(this); } else if (/^[a-z]+$/i.test(selector)) { matcherParam = selector; matcher = matchesTag; } else if (/^#[a-z0-9\-_]+$/i.test(selector)) { matcherParam = selector.slice(1); matcher = matchesId; } else { matcherParam = selector; matcher = Element.prototype.matches; } listenerMap[eventType].push({ selector, handler, matcher, matcherParam }); return this; }; Delegate.prototype.off = function(eventType, selector, handler, useCapture) { let i; let listener; let listenerMap; let listenerList; let singleEventType; if (typeof selector === "function") { useCapture = handler; handler = selector; selector = null; } if (useCapture === void 0) { this.off(eventType, selector, handler, true); this.off(eventType, selector, handler, false); return this; } listenerMap = this.listenerMap[useCapture ? 1 : 0]; if (!eventType) { for (singleEventType in listenerMap) { if (listenerMap.hasOwnProperty(singleEventType)) { this.off(singleEventType, selector, handler); } } return this; } listenerList = listenerMap[eventType]; if (!listenerList || !listenerList.length) { return this; } for (i = listenerList.length - 1; i >= 0; i--) { listener = listenerList[i]; if ((!selector || selector === listener.selector) && (!handler || handler === listener.handler)) { this._removedListeners.push(listener); listenerList.splice(i, 1); } } if (!listenerList.length) { delete listenerMap[eventType]; if (this.rootElement) { this.rootElement.removeEventListener(eventType, this.handle, useCapture); } } return this; }; Delegate.prototype.handle = function(event) { let i; let l; const type = event.type; let root; let phase; let listener; let returned; let listenerList = []; let target; const eventIgnore = "ftLabsDelegateIgnore"; if (event[eventIgnore] === true) { return; } target = event.target; if (target.nodeType === 3) { target = target.parentNode; } if (target.correspondingUseElement) { target = target.correspondingUseElement; } root = this.rootElement; phase = event.eventPhase || (event.target !== event.currentTarget ? 3 : 2); switch (phase) { case 1: listenerList = this.listenerMap[1][type]; break; case 2: if (this.listenerMap[0] && this.listenerMap[0][type]) { listenerList = listenerList.concat(this.listenerMap[0][type]); } if (this.listenerMap[1] && this.listenerMap[1][type]) { listenerList = listenerList.concat(this.listenerMap[1][type]); } break; case 3: listenerList = this.listenerMap[0][type]; break; } let toFire = []; l = listenerList.length; while (target && l) { for (i = 0; i < l; i++) { listener = listenerList[i]; if (!listener) { break; } if (target.tagName && ["button", "input", "select", "textarea"].indexOf(target.tagName.toLowerCase()) > -1 && target.hasAttribute("disabled")) { toFire = []; } else if (listener.matcher.call(target, listener.matcherParam, target)) { toFire.push([event, target, listener]); } } if (target === root) { break; } l = listenerList.length; target = target.parentElement || target.parentNode; if (target instanceof HTMLDocument) { break; } } let ret; for (i = 0; i < toFire.length; i++) { if (this._removedListeners.indexOf(toFire[i][2]) > -1) { continue; } returned = this.fire.apply(this, toFire[i]); if (returned === false) { toFire[i][0][eventIgnore] = true; toFire[i][0].preventDefault(); ret = false; break; } } return ret; }; Delegate.prototype.fire = function(event, target, listener) { return listener.handler.call(target, event, target); }; function matchesTag(tagName, element) { return tagName.toLowerCase() === element.tagName.toLowerCase(); } function matchesRoot(selector, element) { if (this.rootElement === window) { return element === document || element === document.documentElement || element === window; } return this.rootElement === element; } function matchesId(id, element) { return id === element.id; } Delegate.prototype.destroy = function() { this.off(); this.root(); }; var main_default = Delegate; // js/components/input-binding-manager.js var InputBindingManager = class { constructor() { this.delegateElement = new main_default(document.body); this.delegateElement.on("change", "[data-bind-value]", this._onValueChanged.bind(this)); } _onValueChanged(event, target) { const boundElement = document.getElementById(target.getAttribute("data-bind-value")); if (boundElement) { if (target.tagName === "SELECT") { target = target.options[target.selectedIndex]; } boundElement.innerHTML = target.hasAttribute("title") ? target.getAttribute("title") : target.value; } } }; // js/helper/event.js function triggerEvent(element, name, data = {}) { element.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: data })); } function triggerNonBubblingEvent(element, name, data = {}) { element.dispatchEvent(new CustomEvent(name, { bubbles: false, detail: data })); } // js/custom-element/custom-html-element.js var CustomHTMLElement = class extends HTMLElement { constructor() { super(); this._hasSectionReloaded = false; if (Shopify.designMode) { this.rootDelegate.on("shopify:section:select", (event) => { const parentSection = this.closest(".shopify-section"); if (event.target === parentSection && event.detail.load) { this._hasSectionReloaded = true; } }); } } get rootDelegate() { return this._rootDelegate = this._rootDelegate || new main_default(document.documentElement); } get delegate() { return this._delegate = this._delegate || new main_default(this); } showLoadingBar() { triggerEvent(document.documentElement, "theme:loading:start"); } hideLoadingBar() { triggerEvent(document.documentElement, "theme:loading:end"); } untilVisible(intersectionObserverOptions = { rootMargin: "30px 0px", threshold: 0 }) { const onBecameVisible = () => { this.classList.add("became-visible"); this.style.opacity = "1"; }; return new Promise((resolve) => { if (window.IntersectionObserver) { this.intersectionObserver = new IntersectionObserver((event) => { if (event[0].isIntersecting) { this.intersectionObserver.disconnect(); requestAnimationFrame(() => { resolve(); onBecameVisible(); }); } }, intersectionObserverOptions); this.intersectionObserver.observe(this); } else { resolve(); onBecameVisible(); } }); } disconnectedCallback() { var _a; this.delegate.destroy(); this.rootDelegate.destroy(); (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect(); delete this._delegate; delete this._rootDelegate; } }; // node_modules/tabbable/dist/index.esm.js var candidateSelectors = ["input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])', "details>summary:first-of-type", "details"]; var candidateSelector = /* @__PURE__ */ candidateSelectors.join(","); var matches = typeof Element === "undefined" ? function() { } : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; var getCandidates = function getCandidates2(el, includeContainer, filter) { var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector)); if (includeContainer && matches.call(el, candidateSelector)) { candidates.unshift(el); } candidates = candidates.filter(filter); return candidates; }; var isContentEditable = function isContentEditable2(node) { return node.contentEditable === "true"; }; var getTabindex = function getTabindex2(node) { var tabindexAttr = parseInt(node.getAttribute("tabindex"), 10); if (!isNaN(tabindexAttr)) { return tabindexAttr; } if (isContentEditable(node)) { return 0; } if ((node.nodeName === "AUDIO" || node.nodeName === "VIDEO" || node.nodeName === "DETAILS") && node.getAttribute("tabindex") === null) { return 0; } return node.tabIndex; }; var sortOrderedTabbables = function sortOrderedTabbables2(a, b) { return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex; }; var isInput = function isInput2(node) { return node.tagName === "INPUT"; }; var isHiddenInput = function isHiddenInput2(node) { return isInput(node) && node.type === "hidden"; }; var isDetailsWithSummary = function isDetailsWithSummary2(node) { var r = node.tagName === "DETAILS" && Array.prototype.slice.apply(node.children).some(function(child) { return child.tagName === "SUMMARY"; }); return r; }; var getCheckedRadio = function getCheckedRadio2(nodes, form) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].checked && nodes[i].form === form) { return nodes[i]; } } }; var isTabbableRadio = function isTabbableRadio2(node) { if (!node.name) { return true; } var radioScope = node.form || node.ownerDocument; var queryRadios = function queryRadios2(name) { return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]'); }; var radioSet; if (typeof window !== "undefined" && typeof window.CSS !== "undefined" && typeof window.CSS.escape === "function") { radioSet = queryRadios(window.CSS.escape(node.name)); } else { try { radioSet = queryRadios(node.name); } catch (err) { console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", err.message); return false; } } var checked = getCheckedRadio(radioSet, node.form); return !checked || checked === node; }; var isRadio = function isRadio2(node) { return isInput(node) && node.type === "radio"; }; var isNonTabbableRadio = function isNonTabbableRadio2(node) { return isRadio(node) && !isTabbableRadio(node); }; var isHidden = function isHidden2(node, displayCheck) { if (getComputedStyle(node).visibility === "hidden") { return true; } var isDirectSummary = matches.call(node, "details>summary:first-of-type"); var nodeUnderDetails = isDirectSummary ? node.parentElement : node; if (matches.call(nodeUnderDetails, "details:not([open]) *")) { return true; } if (!displayCheck || displayCheck === "full") { while (node) { if (getComputedStyle(node).display === "none") { return true; } node = node.parentElement; } } else if (displayCheck === "non-zero-area") { var _node$getBoundingClie = node.getBoundingClientRect(), width = _node$getBoundingClie.width, height = _node$getBoundingClie.height; return width === 0 && height === 0; } return false; }; var isDisabledFromFieldset = function isDisabledFromFieldset2(node) { if (isInput(node) || node.tagName === "SELECT" || node.tagName === "TEXTAREA" || node.tagName === "BUTTON") { var parentNode = node.parentElement; while (parentNode) { if (parentNode.tagName === "FIELDSET" && parentNode.disabled) { for (var i = 0; i < parentNode.children.length; i++) { var child = parentNode.children.item(i); if (child.tagName === "LEGEND") { if (child.contains(node)) { return false; } return true; } } return true; } parentNode = parentNode.parentElement; } } return false; }; var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable2(options, node) { if (node.disabled || isHiddenInput(node) || isHidden(node, options.displayCheck) || isDetailsWithSummary(node) || isDisabledFromFieldset(node)) { return false; } return true; }; var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable2(options, node) { if (!isNodeMatchingSelectorFocusable(options, node) || isNonTabbableRadio(node) || getTabindex(node) < 0) { return false; } return true; }; var tabbable = function tabbable2(el, options) { options = options || {}; var regularTabbables = []; var orderedTabbables = []; var candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options)); candidates.forEach(function(candidate, i) { var candidateTabindex = getTabindex(candidate); if (candidateTabindex === 0) { regularTabbables.push(candidate); } else { orderedTabbables.push({ documentOrder: i, tabIndex: candidateTabindex, node: candidate }); } }); var tabbableNodes = orderedTabbables.sort(sortOrderedTabbables).map(function(a) { return a.node; }).concat(regularTabbables); return tabbableNodes; }; var focusableCandidateSelector = /* @__PURE__ */ candidateSelectors.concat("iframe").join(","); var isFocusable = function isFocusable2(node, options) { options = options || {}; if (!node) { throw new Error("No node provided"); } if (matches.call(node, focusableCandidateSelector) === false) { return false; } return isNodeMatchingSelectorFocusable(options, node); }; // node_modules/focus-trap/dist/focus-trap.esm.js function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function(sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function(key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function(key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var activeFocusTraps = function() { var trapQueue = []; return { activateTrap: function activateTrap(trap) { if (trapQueue.length > 0) { var activeTrap = trapQueue[trapQueue.length - 1]; if (activeTrap !== trap) { activeTrap.pause(); } } var trapIndex = trapQueue.indexOf(trap); if (trapIndex === -1) { trapQueue.push(trap); } else { trapQueue.splice(trapIndex, 1); trapQueue.push(trap); } }, deactivateTrap: function deactivateTrap(trap) { var trapIndex = trapQueue.indexOf(trap); if (trapIndex !== -1) { trapQueue.splice(trapIndex, 1); } if (trapQueue.length > 0) { trapQueue[trapQueue.length - 1].unpause(); } } }; }(); var isSelectableInput = function isSelectableInput2(node) { return node.tagName && node.tagName.toLowerCase() === "input" && typeof node.select === "function"; }; var isEscapeEvent = function isEscapeEvent2(e) { return e.key === "Escape" || e.key === "Esc" || e.keyCode === 27; }; var isTabEvent = function isTabEvent2(e) { return e.key === "Tab" || e.keyCode === 9; }; var delay = function delay2(fn) { return setTimeout(fn, 0); }; var findIndex = function findIndex2(arr, fn) { var idx = -1; arr.every(function(value, i) { if (fn(value)) { idx = i; return false; } return true; }); return idx; }; var valueOrHandler = function valueOrHandler2(value) { for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { params[_key - 1] = arguments[_key]; } return typeof value === "function" ? value.apply(void 0, params) : value; }; var getActualTarget = function getActualTarget2(event) { return event.target.shadowRoot && typeof event.composedPath === "function" ? event.composedPath()[0] : event.target; }; var createFocusTrap = function createFocusTrap2(elements, userOptions) { var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document; var config = _objectSpread2({ returnFocusOnDeactivate: true, escapeDeactivates: true, delayInitialFocus: true }, userOptions); var state = { containers: [], tabbableGroups: [], nodeFocusedBeforeActivation: null, mostRecentlyFocusedNode: null, active: false, paused: false, delayInitialFocusTimer: void 0 }; var trap; var getOption = function getOption2(configOverrideOptions, optionName, configOptionName) { return configOverrideOptions && configOverrideOptions[optionName] !== void 0 ? configOverrideOptions[optionName] : config[configOptionName || optionName]; }; var containersContain = function containersContain2(element) { return !!(element && state.containers.some(function(container) { return container.contains(element); })); }; var getNodeForOption = function getNodeForOption2(optionName) { var optionValue = config[optionName]; if (typeof optionValue === "function") { for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { params[_key2 - 1] = arguments[_key2]; } optionValue = optionValue.apply(void 0, params); } if (!optionValue) { if (optionValue === void 0 || optionValue === false) { return optionValue; } throw new Error("`".concat(optionName, "` was specified but was not a node, or did not return a node")); } var node = optionValue; if (typeof optionValue === "string") { node = doc.querySelector(optionValue); if (!node) { throw new Error("`".concat(optionName, "` as selector refers to no known node")); } } return node; }; var getInitialFocusNode = function getInitialFocusNode2() { var node = getNodeForOption("initialFocus"); if (node === false) { return false; } if (node === void 0) { if (containersContain(doc.activeElement)) { node = doc.activeElement; } else { var firstTabbableGroup = state.tabbableGroups[0]; var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode; node = firstTabbableNode || getNodeForOption("fallbackFocus"); } } if (!node) { throw new Error("Your focus-trap needs to have at least one focusable element"); } return node; }; var updateTabbableNodes = function updateTabbableNodes2() { state.tabbableGroups = state.containers.map(function(container) { var tabbableNodes = tabbable(container); if (tabbableNodes.length > 0) { return { container, firstTabbableNode: tabbableNodes[0], lastTabbableNode: tabbableNodes[tabbableNodes.length - 1] }; } return void 0; }).filter(function(group) { return !!group; }); if (state.tabbableGroups.length <= 0 && !getNodeForOption("fallbackFocus")) { throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times"); } }; var tryFocus = function tryFocus2(node) { if (node === false) { return; } if (node === doc.activeElement) { return; } if (!node || !node.focus) { tryFocus2(getInitialFocusNode()); return; } node.focus({ preventScroll: !!config.preventScroll }); state.mostRecentlyFocusedNode = node; if (isSelectableInput(node)) { node.select(); } }; var getReturnFocusNode = function getReturnFocusNode2(previousActiveElement) { var node = getNodeForOption("setReturnFocus", previousActiveElement); return node ? node : node === false ? false : previousActiveElement; }; var checkPointerDown = function checkPointerDown2(e) { var target = getActualTarget(e); if (containersContain(target)) { return; } if (valueOrHandler(config.clickOutsideDeactivates, e)) { trap.deactivate({ returnFocus: config.returnFocusOnDeactivate && !isFocusable(target) }); return; } if (valueOrHandler(config.allowOutsideClick, e)) { return; } e.preventDefault(); }; var checkFocusIn = function checkFocusIn2(e) { var target = getActualTarget(e); var targetContained = containersContain(target); if (targetContained || target instanceof Document) { if (targetContained) { state.mostRecentlyFocusedNode = target; } } else { e.stopImmediatePropagation(); tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); } }; var checkTab = function checkTab2(e) { var target = getActualTarget(e); updateTabbableNodes(); var destinationNode = null; if (state.tabbableGroups.length > 0) { var containerIndex = findIndex(state.tabbableGroups, function(_ref) { var container = _ref.container; return container.contains(target); }); if (containerIndex < 0) { if (e.shiftKey) { destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode; } else { destinationNode = state.tabbableGroups[0].firstTabbableNode; } } else if (e.shiftKey) { var startOfGroupIndex = findIndex(state.tabbableGroups, function(_ref2) { var firstTabbableNode = _ref2.firstTabbableNode; return target === firstTabbableNode; }); if (startOfGroupIndex < 0 && state.tabbableGroups[containerIndex].container === target) { startOfGroupIndex = containerIndex; } if (startOfGroupIndex >= 0) { var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1; var destinationGroup = state.tabbableGroups[destinationGroupIndex]; destinationNode = destinationGroup.lastTabbableNode; } } else { var lastOfGroupIndex = findIndex(state.tabbableGroups, function(_ref3) { var lastTabbableNode = _ref3.lastTabbableNode; return target === lastTabbableNode; }); if (lastOfGroupIndex < 0 && state.tabbableGroups[containerIndex].container === target) { lastOfGroupIndex = containerIndex; } if (lastOfGroupIndex >= 0) { var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1; var _destinationGroup = state.tabbableGroups[_destinationGroupIndex]; destinationNode = _destinationGroup.firstTabbableNode; } } } else { destinationNode = getNodeForOption("fallbackFocus"); } if (destinationNode) { e.preventDefault(); tryFocus(destinationNode); } }; var checkKey = function checkKey2(e) { if (isEscapeEvent(e) && valueOrHandler(config.escapeDeactivates, e) !== false) { e.preventDefault(); trap.deactivate(); return; } if (isTabEvent(e)) { checkTab(e); return; } }; var checkClick = function checkClick2(e) { if (valueOrHandler(config.clickOutsideDeactivates, e)) { return; } var target = getActualTarget(e); if (containersContain(target)) { return; } if (valueOrHandler(config.allowOutsideClick, e)) { return; } e.preventDefault(); e.stopImmediatePropagation(); }; var addListeners = function addListeners2() { if (!state.active) { return; } activeFocusTraps.activateTrap(trap); state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function() { tryFocus(getInitialFocusNode()); }) : tryFocus(getInitialFocusNode()); doc.addEventListener("focusin", checkFocusIn, true); doc.addEventListener("mousedown", checkPointerDown, { capture: true, passive: false }); doc.addEventListener("touchstart", checkPointerDown, { capture: true, passive: false }); doc.addEventListener("click", checkClick, { capture: true, passive: false }); doc.addEventListener("keydown", checkKey, { capture: true, passive: false }); return trap; }; var removeListeners = function removeListeners2() { if (!state.active) { return; } doc.removeEventListener("focusin", checkFocusIn, true); doc.removeEventListener("mousedown", checkPointerDown, true); doc.removeEventListener("touchstart", checkPointerDown, true); doc.removeEventListener("click", checkClick, true); doc.removeEventListener("keydown", checkKey, true); return trap; }; trap = { activate: function activate(activateOptions) { if (state.active) { return this; } var onActivate = getOption(activateOptions, "onActivate"); var onPostActivate = getOption(activateOptions, "onPostActivate"); var checkCanFocusTrap = getOption(activateOptions, "checkCanFocusTrap"); if (!checkCanFocusTrap) { updateTabbableNodes(); } state.active = true; state.paused = false; state.nodeFocusedBeforeActivation = doc.activeElement; if (onActivate) { onActivate(); } var finishActivation = function finishActivation2() { if (checkCanFocusTrap) { updateTabbableNodes(); } addListeners(); if (onPostActivate) { onPostActivate(); } }; if (checkCanFocusTrap) { checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation); return this; } finishActivation(); return this; }, deactivate: function deactivate(deactivateOptions) { if (!state.active) { return this; } clearTimeout(state.delayInitialFocusTimer); state.delayInitialFocusTimer = void 0; removeListeners(); state.active = false; state.paused = false; activeFocusTraps.deactivateTrap(trap); var onDeactivate = getOption(deactivateOptions, "onDeactivate"); var onPostDeactivate = getOption(deactivateOptions, "onPostDeactivate"); var checkCanReturnFocus = getOption(deactivateOptions, "checkCanReturnFocus"); if (onDeactivate) { onDeactivate(); } var returnFocus = getOption(deactivateOptions, "returnFocus", "returnFocusOnDeactivate"); var finishDeactivation = function finishDeactivation2() { delay(function() { if (returnFocus) { tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)); } if (onPostDeactivate) { onPostDeactivate(); } }); }; if (returnFocus && checkCanReturnFocus) { checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation); return this; } finishDeactivation(); return this; }, pause: function pause() { if (state.paused || !state.active) { return this; } state.paused = true; removeListeners(); return this; }, unpause: function unpause() { if (!state.paused || !state.active) { return this; } state.paused = false; updateTabbableNodes(); addListeners(); return this; }, updateContainerElements: function updateContainerElements(containerElements) { var elementsAsArray = [].concat(containerElements).filter(Boolean); state.containers = elementsAsArray.map(function(element) { return typeof element === "string" ? doc.querySelector(element) : element; }); if (state.active) { updateTabbableNodes(); } return this; } }; trap.updateContainerElements(elements); return trap; }; // js/helper/section.js function filterShopifyEvent(event, domElement, callback) { let executeCallback = false; if (event.type.includes("shopify:section")) { if (domElement.hasAttribute("section") && domElement.getAttribute("section") === event.detail.sectionId) { executeCallback = true; } } else if (event.type.includes("shopify:block") && event.target === domElement) { executeCallback = true; } if (executeCallback) { callback(event); } } // js/custom-element/behavior/openable-element.js var OpenableElement = class extends CustomHTMLElement { static get observedAttributes() { return ["open"]; } constructor() { super(); if (Shopify.designMode) { this.rootDelegate.on("shopify:section:select", (event) => filterShopifyEvent(event, this, () => this.open = true)); this.rootDelegate.on("shopify:section:deselect", (event) => filterShopifyEvent(event, this, () => this.open = false)); } if (this.hasAttribute("append-body")) { const existingNode = document.getElementById(this.id); this.removeAttribute("append-body"); if (existingNode && existingNode !== this) { existingNode.replaceWith(this.cloneNode(true)); this.remove(); } else { document.body.appendChild(this); } } } connectedCallback() { this.delegate.on("click", ".openable__overlay", () => this.open = false); this.delegate.on("click", '[data-action="close"]', (event) => { event.stopPropagation(); this.open = false; }); } get requiresLoading() { return this.hasAttribute("href"); } get open() { return this.hasAttribute("open"); } set open(value) { if (value) { (async () => { await this._load(); this.clientWidth; this.setAttribute("open", ""); })(); } else { this.removeAttribute("open"); } } get shouldTrapFocus() { return true; } get returnFocusOnDeactivate() { return !this.hasAttribute("return-focus") || this.getAttribute("return-focus") === "true"; } get focusTrap() { return this._focusTrap = this._focusTrap || createFocusTrap(this, { fallbackFocus: this, initialFocus: this.hasAttribute("initial-focus-selector") ? this.getAttribute("initial-focus-selector") : void 0, clickOutsideDeactivates: (event) => !(event.target.hasAttribute("aria-controls") && event.target.getAttribute("aria-controls") === this.id), allowOutsideClick: (event) => event.target.hasAttribute("aria-controls") && event.target.getAttribute("aria-controls") === this.id, returnFocusOnDeactivate: this.returnFocusOnDeactivate, onDeactivate: () => this.open = false, preventScroll: true }); } attributeChangedCallback(name, oldValue, newValue) { switch (name) { case "open": if (oldValue === null && newValue === "") { if (this.shouldTrapFocus) { setTimeout(() => this.focusTrap.activate(), 150); } triggerEvent(this, "openable-element:open"); } else if (newValue === null) { if (this.shouldTrapFocus) { this.focusTrap.deactivate(); } triggerEvent(this, "openable-element:close"); } } } async _load() { if (!this.requiresLoading) { return; } triggerNonBubblingEvent(this, "openable-element:load:start"); const response = await fetch(this.getAttribute("href")); const element = document.createElement("div"); element.innerHTML = await response.text(); // this.innerHTML = element.querySelector(this.tagName.toLowerCase()).innerHTML; $(this).html(element.querySelector(this.tagName.toLowerCase()).innerHTML); this.removeAttribute("href"); triggerNonBubblingEvent(this, "openable-element:load:end"); } }; window.customElements.define("openable-element", OpenableElement); // js/custom-element/behavior/collapsible-content.js var CollapsibleContent = class extends OpenableElement { constructor() { super(); this.ignoreNextTransition = this.open; this.addEventListener("shopify:block:select", () => this.open = true); this.addEventListener("shopify:block:deselect", () => this.open = false); } get animateItems() { return this.hasAttribute("animate-items"); } attributeChangedCallback(name) { if (this.ignoreNextTransition) { return this.ignoreNextTransition = false; } switch (name) { case "open": this.style.overflow = "hidden"; const keyframes = { height: ["0px", `${this.scrollHeight}px`], visibility: ["hidden", "visible"] }; if (this.animateItems) { keyframes["opacity"] = this.open ? [0, 0] : [0, 1]; } this.animate(keyframes, { duration: 500, direction: this.open ? "normal" : "reverse", easing: "cubic-bezier(0.75, 0, 0.175, 1)" }).onfinish = () => { this.style.overflow = this.open ? "visible" : "hidden"; }; if (this.animateItems && this.open) { this.animate({ opacity: [0, 1], transform: ["translateY(10px)", "translateY(0)"] }, { duration: 250, delay: 250, easing: "cubic-bezier(0.75, 0, 0.175, 1)" }); } triggerEvent(this, this.open ? "openable-element:open" : "openable-element:close"); } } }; window.customElements.define("collapsible-content", CollapsibleContent); // js/custom-element/behavior/confirm-button.js var ConfirmButton = class extends HTMLButtonElement { connectedCallback() { this.addEventListener("click", (event) => { if (!window.confirm(this.getAttribute("data-message") || "Are you sure you wish to do this?")) { event.preventDefault(); } }); } }; window.customElements.define("confirm-button", ConfirmButton, { extends: "button" }); // js/mixin/loader-button.js var LoaderButtonMixin = { _prepareButton() { this.originalContent = this.innerHTML; this._startTransitionPromise = null; this.innerHTML = ` ${this.innerHTML} `; this.textElement = this.firstElementChild; this.spinnerElement = this.lastElementChild; window.addEventListener("pagehide", () => this.removeAttribute("aria-busy")); }, _startTransition() { const textAnimation = this.textElement.animate({ opacity: [1, 0], transform: ["translateY(0)", "translateY(-10px)"] }, { duration: 75, easing: "ease", fill: "forwards" }); this.spinnerElement.hidden = false; const spinnerAnimation = this.spinnerElement.animate({ opacity: [0, 1], transform: ["translate(-50%, 0%)", "translate(-50%, -50%)"] }, { duration: 75, delay: 75, easing: "ease", fill: "forwards" }); this._startTransitionPromise = Promise.all([ new Promise((resolve) => textAnimation.onfinish = () => resolve()), new Promise((resolve) => spinnerAnimation.onfinish = () => resolve()) ]); }, async _endTransition() { if (!this._startTransitionPromise) { return; } await this._startTransitionPromise; this.spinnerElement.animate({ opacity: [1, 0], transform: ["translate(-50%, -50%)", "translate(-50%, -100%)"] }, { duration: 75, delay: 100, easing: "ease", fill: "forwards" }).onfinish = () => this.spinnerElement.hidden = true; this.textElement.animate({ opacity: [0, 1], transform: ["translateY(10px)", "translateY(0)"] }, { duration: 75, delay: 175, easing: "ease", fill: "forwards" }); this._startTransitionPromise = null; } }; // js/custom-element/behavior/loader-button.js var LoaderButton = class extends HTMLButtonElement { static get observedAttributes() { return ["aria-busy"]; } constructor() { super(); this.addEventListener("click", (event) => { if (this.type === "submit" && this.form && this.form.checkValidity() && !this.form.hasAttribute("is")) { if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { event.preventDefault(); this.setAttribute("aria-busy", "true"); setTimeout(() => this.form.submit(), 250); } else { this.setAttribute("aria-busy", "true"); } } }); } connectedCallback() { this._prepareButton(); } disconnectedCallback() { this.innerHTML = this.originalContent; } attributeChangedCallback(property, oldValue, newValue) { if (property === "aria-busy") { if (newValue === "true") { this._startTransition(); } else { this._endTransition(); } } } }; Object.assign(LoaderButton.prototype, LoaderButtonMixin); window.customElements.define("loader-button", LoaderButton, { extends: "button" }); // js/custom-element/behavior/page-pagination.js var PagePagination = class extends CustomHTMLElement { connectedCallback() { if (this.hasAttribute("ajax")) { this.delegate.on("click", "a", this._onLinkClicked.bind(this)); } } _onLinkClicked(event, target) { event.preventDefault(); const url = new URL(window.location.href); url.searchParams.set("page", target.getAttribute("data-page")); triggerEvent(this, "pagination:page-changed", { url: url.toString() }); } }; window.customElements.define("page-pagination", PagePagination); // js/custom-element/behavior/toggle-button.js var ToggleButton = class extends HTMLButtonElement { static get observedAttributes() { return ["aria-expanded", "aria-busy"]; } constructor() { super(); if (this.hasAttribute("loader")) { this._prepareButton(); } this.addEventListener("click", this._onButtonClick.bind(this)); this.rootDelegate = new main_default(document.documentElement); } _onButtonClick() { this.isExpanded = !this.isExpanded; } connectedCallback() { document.addEventListener("openable-element:close", (event) => { if (this.controlledElement === event.target) { this.isExpanded = false; event.stopPropagation(); } }); document.addEventListener("openable-element:open", (event) => { if (this.controlledElement === event.target) { this.isExpanded = true; event.stopPropagation(); } }); this.rootDelegate.on("openable-element:load:start", `#${this.getAttribute("aria-controls")}`, () => { if (this.classList.contains("button")) { this.setAttribute("aria-busy", "true"); } else if (this.offsetParent !== null) { triggerEvent(document.documentElement, "theme:loading:start"); } }, true); this.rootDelegate.on("openable-element:load:end", `#${this.getAttribute("aria-controls")}`, () => { if (this.classList.contains("button")) { this.removeAttribute("aria-busy"); } else if (this.offsetParent !== null) { triggerEvent(document.documentElement, "theme:loading:end"); } }, true); } disconnectedCallback() { this.rootDelegate.destroy(); } get isExpanded() { return this.getAttribute("aria-expanded") === "true"; } set isExpanded(value) { this.setAttribute("aria-expanded", value ? "true" : "false"); } get controlledElement() { return document.getElementById(this.getAttribute("aria-controls")); } attributeChangedCallback(name, oldValue, newValue) { switch (name) { case "aria-expanded": if (oldValue === "false" && newValue === "true") { this.controlledElement.open = true; } else if (oldValue === "true" && newValue === "false") { this.controlledElement.open = false; } break; case "aria-busy": if (this.hasAttribute("loader")) { if (newValue === "true") { this._startTransition(); } else { this._endTransition(); } } break; } } }; Object.assign(ToggleButton.prototype, LoaderButtonMixin); window.customElements.define("toggle-button", ToggleButton, { extends: "button" }); // js/custom-element/behavior/toggle-link.js var ToggleLink = class extends HTMLAnchorElement { static get observedAttributes() { return ["aria-expanded"]; } constructor() { super(); this.addEventListener("click", (event) => { event.preventDefault(); this.isExpanded = !this.isExpanded; }); this.rootDelegate = new main_default(document.documentElement); } connectedCallback() { this.rootDelegate.on("openable-element:close", `#${this.getAttribute("aria-controls")}`, (event) => { if (this.controlledElement === event.target) { this.isExpanded = false; } }, true); this.rootDelegate.on("openable-element:open", `#${this.getAttribute("aria-controls")}`, (event) => { if (this.controlledElement === event.target) { this.isExpanded = true; } }, true); } disconnectedCallback() { this.rootDelegate.destroy(); } get isExpanded() { return this.getAttribute("aria-expanded") === "true"; } set isExpanded(value) { this.setAttribute("aria-expanded", value ? "true" : "false"); } get controlledElement() { return document.querySelector(`#${this.getAttribute("aria-controls")}`); } attributeChangedCallback(name, oldValue, newValue) { switch (name) { case "aria-expanded": if (oldValue === "false" && newValue === "true") { this.controlledElement.open = true; } else if (oldValue === "true" && newValue === "false") { this.controlledElement.open = false; } } } }; window.customElements.define("toggle-link", ToggleLink, { extends: "a" }); // js/custom-element/behavior/page-dots.js var PageDots = class extends CustomHTMLElement { connectedCallback() { this.buttons = Array.from(this.querySelectorAll("button")); this.delegate.on("click", "button", (event, target) => { this._dispatchEvent(this.buttons.indexOf(target)); }); if (this.hasAttribute("animation-timer")) { this.delegate.on("animationend", (event) => { if (event.elapsedTime > 0) { this._dispatchEvent((this.selectedIndex + 1 + this.buttons.length) % this.buttons.length); } }); } } get selectedIndex() { return this.buttons.findIndex((button) => button.getAttribute("aria-current") === "true"); } set selectedIndex(selectedIndex) { this.buttons.forEach((button, index) => button.setAttribute("aria-current", selectedIndex === index ? "true" : "false")); if (this.hasAttribute("align-selected")) { const selectedItem = this.buttons[selectedIndex], windowHalfWidth = window.innerWidth / 2, boundingRect = selectedItem.getBoundingClientRect(), scrollableElement = this._findFirstScrollableElement(this.parentElement); if (scrollableElement) { scrollableElement.scrollTo({ behavior: "smooth", left: scrollableElement.scrollLeft + (boundingRect.left - windowHalfWidth) + boundingRect.width / 2 }); } } } _dispatchEvent(index) { if (index !== this.selectedIndex) { this.dispatchEvent(new CustomEvent("page-dots:changed", { bubbles: true, detail: { index } })); } } _findFirstScrollableElement(item, currentDepth = 0) { if (item === null || currentDepth > 3) { return null; } return item.scrollWidth > item.clientWidth ? item : this._findFirstScrollableElement(item.parentElement, currentDepth + 1); } }; window.customElements.define("page-dots", PageDots); // js/custom-element/behavior/prev-next-buttons.js var PrevNextButtons = class extends HTMLElement { connectedCallback() { this.prevButton = this.querySelector("button:first-of-type"); this.nextButton = this.querySelector("button:last-of-type"); this.prevButton.addEventListener("click", () => this.prevButton.dispatchEvent(new CustomEvent("prev-next:prev", { bubbles: true }))); this.nextButton.addEventListener("click", () => this.nextButton.dispatchEvent(new CustomEvent("prev-next:next", { bubbles: true }))); } set isPrevDisabled(value) { this.prevButton.disabled = value; } set isNextDisabled(value) { this.nextButton.disabled = value; } }; var PrevButton = class extends HTMLButtonElement { connectedCallback() { this.addEventListener("click", () => this.dispatchEvent(new CustomEvent("prev-next:prev", { bubbles: true }))); } }; var NextButton = class extends HTMLButtonElement { connectedCallback() { this.addEventListener("click", () => this.dispatchEvent(new CustomEvent("prev-next:next", { bubbles: true }))); } }; window.customElements.define("prev-next-buttons", PrevNextButtons); window.customElements.define("prev-button", PrevButton, { extends: "button" }); window.customElements.define("next-button", NextButton, { extends: "button" }); // js/helper/dimensions.js function getStickyHeaderOffset() { const documentStyles = getComputedStyle(document.documentElement); return parseInt(documentStyles.getPropertyValue("--header-height") || 0) * parseInt(documentStyles.getPropertyValue("--enable-sticky-header") || 0) + parseInt(documentStyles.getPropertyValue("--announcement-bar-height") || 0) * parseInt(documentStyles.getPropertyValue("--enable-sticky-announcement-bar") || 0); } // js/custom-element/behavior/safe-sticky.js var SafeSticky = class extends HTMLElement { connectedCallback() { this.lastKnownY = window.scrollY; this.currentTop = 0; this.hasPendingRaf = false; window.addEventListener("scroll", this._checkPosition.bind(this)); } get initialTopOffset() { return getStickyHeaderOffset() + (parseInt(this.getAttribute("offset")) || 0); } _checkPosition() { if (this.hasPendingRaf) { return; } this.hasPendingRaf = true; requestAnimationFrame(() => { let bounds = this.getBoundingClientRect(), maxTop = bounds.top + window.scrollY - this.offsetTop + this.initialTopOffset, minTop = this.clientHeight - window.innerHeight; if (window.scrollY < this.lastKnownY) { this.currentTop -= window.scrollY - this.lastKnownY; } else { this.currentTop += this.lastKnownY - window.scrollY; } this.currentTop = Math.min(Math.max(this.currentTop, -minTop), maxTop, this.initialTopOffset); this.lastKnownY = window.scrollY; this.style.top = `${this.currentTop}px`; this.hasPendingRaf = false; }); } }; window.customElements.define("safe-sticky", SafeSticky); // js/helper/throttle.js function throttle(callback, delay3 = 15) { let throttleTimeout = null, storedEvent = null; const throttledEventHandler = (event) => { storedEvent = event; const shouldHandleEvent = !throttleTimeout; if (shouldHandleEvent) { callback(storedEvent); storedEvent = null; throttleTimeout = setTimeout(() => { throttleTimeout = null; if (storedEvent) { throttledEventHandler(storedEvent); } }, delay3); } }; return throttledEventHandler; } // js/custom-element/behavior/scroll-spy.js var ScrollSpy = class extends HTMLElement { connectedCallback() { this._createSvg(); this.elementsToObserve = Array.from(this.querySelectorAll("a")).map((linkElement) => document.querySelector(linkElement.getAttribute("href"))); this.navListItems = Array.from(this.querySelectorAll("li")); this.navItems = this.navListItems.map((listItem) => { const anchor = listItem.firstElementChild, targetID = anchor && anchor.getAttribute("href").slice(1), target = document.getElementById(targetID); return { listItem, anchor, target }; }).filter((item) => item.target); this.drawPath(); window.addEventListener("scroll", throttle(this.markVisibleSection.bind(this), 25)); window.addEventListener("orientationchange", () => { window.addEventListener("resize", () => { this.drawPath(); this.markVisibleSection(); }, { once: true }); }); this.markVisibleSection(); } _createSvg() { this.navPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElement.insertAdjacentElement("beforeend", this.navPath); this.insertAdjacentElement("beforeend", svgElement); this.lastPathStart = this.lastPathEnd = null; } drawPath() { let path = [], pathIndent; this.navItems.forEach((item, i) => { const x = item.anchor.offsetLeft - 5, y = item.anchor.offsetTop, height = item.anchor.offsetHeight; if (i === 0) { path.push("M", x, y, "L", x, y + height); item.pathStart = 0; } else { if (pathIndent !== x) { path.push("L", pathIndent, y); } path.push("L", x, y); this.navPath.setAttribute("d", path.join(" ")); item.pathStart = this.navPath.getTotalLength() || 0; path.push("L", x, y + height); } pathIndent = x; this.navPath.setAttribute("d", path.join(" ")); item.pathEnd = this.navPath.getTotalLength(); }); } syncPath() { const someElsAreVisible = () => this.querySelectorAll(".is-visible").length > 0, thisElIsVisible = (el) => el.classList.contains("is-visible"), pathLength = this.navPath.getTotalLength(); let pathStart = pathLength, pathEnd = 0; this.navItems.forEach((item) => { if (thisElIsVisible(item.listItem)) { pathStart = Math.min(item.pathStart, pathStart); pathEnd = Math.max(item.pathEnd, pathEnd); } }); if (someElsAreVisible() && pathStart < pathEnd) { if (pathStart !== this.lastPathStart || pathEnd !== this.lastPathEnd) { const dashArray = `1 ${pathStart} ${pathEnd - pathStart} ${pathLength}`; this.navPath.style.setProperty("stroke-dashoffset", "1"); this.navPath.style.setProperty("stroke-dasharray", dashArray); this.navPath.style.setProperty("opacity", "1"); } } else { this.navPath.style.setProperty("opacity", "0"); } this.lastPathStart = pathStart; this.lastPathEnd = pathEnd; } markVisibleSection() { this.navListItems.forEach((item) => item.classList.remove("is-visible")); for (const [index, elementToObserve] of this.elementsToObserve.entries()) { const boundingClientRect = elementToObserve.getBoundingClientRect(); if (boundingClientRect.top > getStickyHeaderOffset() || index === this.elementsToObserve.length - 1) { this.querySelector(`a[href="#${elementToObserve.id}"]`).parentElement.classList.add("is-visible"); break; } } this.syncPath(); } }; window.customElements.define("scroll-spy", ScrollSpy); // js/custom-element/behavior/scroll-shadow.js var template = ` `; var Updater = class { constructor(targetElement) { this.scheduleUpdate = throttle(() => this.update(targetElement, getComputedStyle(targetElement))); this.resizeObserver = new ResizeObserver(this.scheduleUpdate.bind(this)); } start(element) { if (this.element) { this.stop(); } if (element) { element.addEventListener("scroll", this.scheduleUpdate); this.resizeObserver.observe(element); this.element = element; } } stop() { if (!this.element) { return; } this.element.removeEventListener("scroll", this.scheduleUpdate); this.resizeObserver.unobserve(this.element); this.element = null; } update(targetElement, style) { if (!this.element) { return; } const maxSize = style.getPropertyValue("--scroll-shadow-size") ? parseInt(style.getPropertyValue("--scroll-shadow-size")) : 0; const scroll = { top: Math.max(this.element.scrollTop, 0), bottom: Math.max(this.element.scrollHeight - this.element.offsetHeight - this.element.scrollTop, 0), left: Math.max(this.element.scrollLeft, 0), right: Math.max(this.element.scrollWidth - this.element.offsetWidth - this.element.scrollLeft, 0) }; requestAnimationFrame(() => { for (const position of ["top", "bottom", "left", "right"]) { targetElement.style.setProperty(`--${position}`, `${scroll[position] > maxSize ? maxSize : scroll[position]}px`); } }); } }; var ScrollShadow = class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }).innerHTML = template; this.updater = new Updater(this.shadowRoot.lastElementChild); } connectedCallback() { this.shadowRoot.querySelector("slot").addEventListener("slotchange", () => this.start()); this.start(); } disconnectedCallback() { this.updater.stop(); } start() { this.updater.start(this.firstElementChild); } }; if ("ResizeObserver" in window) { window.customElements.define("scroll-shadow", ScrollShadow); } // js/custom-element/behavior/share-toggle-button.js var ShareToggleButton = class extends ToggleButton { _onButtonClick() { if (window.matchMedia(window.themeVariables.breakpoints.phone).matches && navigator.share) { navigator.share({ title: this.hasAttribute("share-title") ? this.getAttribute("share-title") : document.title, url: this.hasAttribute("share-url") ? this.getAttribute("share-url") : window.location.href }); } else { super._onButtonClick(); } } }; window.customElements.define("share-toggle-button", ShareToggleButton, { extends: "button" }); // js/custom-element/ui/carousel.js var NativeCarousel = class extends CustomHTMLElement { connectedCallback() { this.items = Array.from(this.querySelectorAll("native-carousel-item")); this.pageDotsElements = Array.from(this.querySelectorAll("page-dots")); this.prevNextButtonsElements = Array.from(this.querySelectorAll("prev-next-buttons")); if (this.items.length > 1) { this.addEventListener("prev-next:prev", this.prev.bind(this)); this.addEventListener("prev-next:next", this.next.bind(this)); this.addEventListener("page-dots:changed", (event) => this.select(event.detail.index, true)); if (Shopify.designMode) { this.addEventListener("shopify:block:select", (event) => this.select(event.target.index, !event.detail.load)); } } const scrollerElement = this.items[0].parentElement; this.intersectionObserver = new IntersectionObserver(this._onVisibilityChanged.bind(this), { root: scrollerElement, rootMargin: `${scrollerElement.clientHeight}px 0px`, threshold: 0.8 }); this.items.forEach((item) => this.intersectionObserver.observe(item)); } disconnectedCallback() { super.disconnectedCallback(); this.intersectionObserver.disconnect(); } get selectedIndex() { return this.items.findIndex((item) => item.selected); } prev(shouldAnimate = true) { this.select(Math.max(this.selectedIndex - 1, 0), shouldAnimate); } next(shouldAnimate = true) { this.select(Math.min(this.selectedIndex + 1, this.items.length - 1), shouldAnimate); } select(index, shouldAnimate = true) { const clampIndex = Math.max(0, Math.min(index, this.items.length)); const selectedElement = this.items[clampIndex]; this._adjustNavigationForElement(selectedElement); if (shouldAnimate) { this.items.forEach((item) => this.intersectionObserver.unobserve(item)); setInterval(() => { this.items.forEach((item) => this.intersectionObserver.observe(item)); }, 800); } this.items.forEach((item, loopIndex) => item.selected = loopIndex === clampIndex); const direction = window.themeVariables.settings.direction === "ltr" ? 1 : -1; selectedElement.parentElement.scrollTo({ left: direction * (selectedElement.clientWidth * clampIndex), behavior: shouldAnimate ? "smooth" : "auto" }); } _adjustNavigationForElement(selectedElement) { this.items.forEach((item) => item.selected = selectedElement === item); this.pageDotsElements.forEach((pageDot) => pageDot.selectedIndex = selectedElement.index); this.prevNextButtonsElements.forEach((prevNextButton) => { prevNextButton.isPrevDisabled = selectedElement.index === 0; prevNextButton.isNextDisabled = selectedElement.index === this.items.length - 1; }); } _onVisibilityChanged(entries) { for (let entry of entries) { if (entry.isIntersecting) { this._adjustNavigationForElement(entry.target); break; } } } }; var NativeCarouselItem = class extends CustomHTMLElement { static get observedAttributes() { return ["hidden"]; } get index() { return [...this.parentNode.children].indexOf(this); } get selected() { return !this.hasAttribute("hidden"); } set selected(value) { this.hidden = !value; } }; window.customElements.define("native-carousel-item", NativeCarouselItem); window.customElements.define("native-carousel", NativeCarousel); // js/custom-element/ui/drag-cursor.js var DragCursor = class extends HTMLElement { connectedCallback() { this.scrollableElement = this.parentElement; this.scrollableElement.addEventListener("mouseenter", this._onMouseEnter.bind(this)); this.scrollableElement.addEventListener("mousemove", this._onMouseMove.bind(this)); this.scrollableElement.addEventListener("mouseleave", this._onMouseLeave.bind(this)); this.innerHTML = ` `; } _onMouseEnter(event) { this.removeAttribute("hidden"); this._positionCursor(event); } _onMouseLeave() { this.setAttribute("hidden", ""); } _onMouseMove(event) { this.toggleAttribute("hidden", event.target.tagName === "BUTTON" || event.target.tagName === "A"); this._positionCursor(event); } _positionCursor(event) { const elementBoundingRect = this.scrollableElement.getBoundingClientRect(); const x = event.clientX - elementBoundingRect.x; const y = event.clientY - elementBoundingRect.y; this.style.transform = `translate(${x - this.clientWidth / 2}px, ${y - this.clientHeight / 2}px)`; } }; window.customElements.define("drag-cursor", DragCursor); // js/custom-element/ui/scrollable-content.js var ScrollableContent = class extends CustomHTMLElement { connectedCallback() { if (this.draggable) { this._setupDraggability(); } this._checkScrollability(); window.addEventListener("resize", this._checkScrollability.bind(this)); this.addEventListener("scroll", throttle(this._calculateProgress.bind(this), 15)); } get draggable() { return this.hasAttribute("draggable"); } _setupDraggability() { this.insertAdjacentHTML("afterend", ''); const mediaQuery = matchMedia("(hover: none)"); mediaQuery.addListener(this._onMediaChanges.bind(this)); if (!mediaQuery.matches) { this._attachDraggableListeners(); } } _attachDraggableListeners() { this.delegate.on("mousedown", this._onMouseDown.bind(this)); this.delegate.on("mousemove", this._onMouseMove.bind(this)); this.delegate.on("mouseup", this._onMouseUp.bind(this)); } _removeDraggableListeners() { this.delegate.off("mousedown"); this.delegate.off("mousemove"); this.delegate.off("mouseup"); } _checkScrollability() { this.classList.toggle("is-scrollable", this.scrollWidth > this.offsetWidth); } _calculateProgress() { const scrollLeft = this.scrollLeft * (window.themeVariables.settings.direction === "ltr" ? 1 : -1); const progress = Math.max(0, Math.min(1, scrollLeft / (this.scrollWidth - this.clientWidth))) * 100; triggerEvent(this, "scrollable-content:progress", { progress }); } _onMediaChanges(event) { if (!event.matches) { this._attachDraggableListeners(); } else { this._removeDraggableListeners(); } } _onMouseDown(event) { if (event.target && event.target.nodeName === "IMG") { event.preventDefault(); } this.startX = event.clientX + this.scrollLeft; this.diffX = 0; this.drag = true; } _onMouseMove(event) { if (this.drag) { this.diffX = this.startX - (event.clientX + this.scrollLeft); this.scrollLeft += this.diffX; } } _onMouseUp() { this.drag = false; let start = 1; let animate = () => { let step = Math.sinh(start); if (step <= 0) { window.cancelAnimationFrame(animate); } else { this.scrollLeft += this.diffX * step; start -= 0.03; window.requestAnimationFrame(animate); } }; animate(); } }; window.customElements.define("scrollable-content", ScrollableContent); // js/custom-element/ui/loading-bar.js var LoadingBar = class extends CustomHTMLElement { constructor() { super(); this.rootDelegate.on("theme:loading:start", this.show.bind(this)); this.rootDelegate.on("theme:loading:end", this.hide.bind(this)); this.delegate.on("transitionend", this._onTransitionEnd.bind(this)); } show() { this.classList.add("is-visible"); this.style.transform = "scaleX(0.4)"; } hide() { this.style.transform = "scaleX(1)"; this.classList.add("is-finished"); } _onTransitionEnd(event) { if (event.propertyName === "transform" && this.classList.contains("is-finished")) { this.classList.remove("is-visible"); this.classList.remove("is-finished"); this.style.transform = "scaleX(0)"; } } }; window.customElements.define("loading-bar", LoadingBar); // js/custom-element/ui/split-lines.js var SplitLines = class extends HTMLElement { connectedCallback() { this.originalContent = this.textContent; this.lastWidth = window.innerWidth; this.hasBeenSplitted = false; window.addEventListener("resize", this._onResize.bind(this)); } [Symbol.asyncIterator]() { return { splitPromise: this.split.bind(this), index: 0, async next() { const lines = await this.splitPromise(); if (this.index !== lines.length) { return { done: false, value: lines[this.index++] }; } else { return { done: true }; } } }; } split(force = false) { if (this.childElementCount > 0 && !force) { return Promise.resolve(Array.from(this.children)); } this.hasBeenSplitted = true; return new Promise((resolve) => { requestAnimationFrame(() => { this.innerHTML = this.originalContent.replace(/./g, "$&").replace(/\s/g, " "); const bounds = {}; Array.from(this.children).forEach((child) => { const rect = parseInt(child.getBoundingClientRect().top); bounds[rect] = (bounds[rect] || "") + child.textContent; }); this.innerHTML = Object.values(bounds).map((item) => `${item.trim()}`).join(""); this.style.opacity = this.hasAttribute("reveal") ? 1 : null; this.style.visibility = this.hasAttribute("reveal-visibility") ? "visible" : null; resolve(Array.from(this.children)); }); }); } async _onResize() { if (this.lastWidth === window.innerWidth || !this.hasBeenSplitted) { return; } await this.split(true); this.dispatchEvent(new CustomEvent("split-lines:re-split", { bubbles: true })); this.lastWidth = window.innerWidth; } }; window.customElements.define("split-lines", SplitLines); // js/custom-element/ui/popover.js var PopoverContent = class extends OpenableElement { connectedCallback() { super.connectedCallback(); this.delegate.on("click", ".popover__overlay", () => this.open = false); } attributeChangedCallback(name, oldValue, newValue) { super.attributeChangedCallback(name, oldValue, newValue); switch (name) { case "open": document.documentElement.classList.toggle("lock-mobile", this.open); } } }; window.customElements.define("popover-content", PopoverContent); class CurrencyForm extends HTMLElement{ constructor(){ super(); const button = this.querySelector("#currency-selector-btn"); const listWrapper = this.querySelector(".currency-list-wrapper"); const ul = this.querySelector("ul"); if (!button || !ul || !listWrapper) return; listWrapper.style.display = "none"; button.onclick = function () { const ulIsShow = listWrapper.style.display === "block"; listWrapper.style.display = ulIsShow ? "none" : "block"; } ul.onclick = function (event) { event = event || window.event; var target = event.target; if (target.nodeName === "LI") { listWrapper.style.display = "none"; } } document.onclick = function (event) { var tDom = event.target; const ulIsShow = listWrapper.style.display === "block"; if (ul!==tDom && !ul.contains(tDom) && button!==tDom && !button.contains(tDom) && ulIsShow) { listWrapper.style.display = "none"; } } } } customElements.define('currency-form', CurrencyForm); // js/custom-element/ui/tabs-nav.js var TabsNav = class extends HTMLElement { connectedCallback() { this.buttons = Array.from(this.querySelectorAll("button[aria-controls]")); this.scrollerElement = this.querySelector(".tabs-nav__scroller"); this.buttons.forEach((button) => button.addEventListener("click", () => this.selectButton(button))); this.addEventListener("shopify:block:select", (event) => this.selectButton(event.target, !event.detail.load)); this.positionElement = document.createElement("span"); this.positionElement.classList.add("tabs-nav__position"); this.buttons[0].parentElement.insertAdjacentElement("afterend", this.positionElement); window.addEventListener("resize", this._onWindowResized.bind(this)); this._adjustNavigationPosition(); if (this.hasArrows) { this._handleArrows(); } } get hasArrows() { return this.hasAttribute("arrows"); } get selectedTabIndex() { return this.buttons.findIndex((button) => button.getAttribute("aria-expanded") === "true"); } get selectedButton() { return this.buttons.find((button) => button.getAttribute("aria-expanded") === "true"); } selectButton(button, animate = true) { if (!this.buttons.includes(button) || this.selectedButton === button) { return; } const from = document.getElementById(this.selectedButton.getAttribute("aria-controls")), to = document.getElementById(button.getAttribute("aria-controls")); if (animate) { this._transitionContent(from, to); } else { from.hidden = true; to.hidden = false; } this.selectedButton.setAttribute("aria-expanded", "false"); button.setAttribute("aria-expanded", "true"); triggerEvent(this, "tabs-nav:changed", { button }); this._adjustNavigationPosition(); } addButton(button) { button.addEventListener("click", () => this.selectButton(button)); button.setAttribute("aria-expanded", "false"); // this.buttons[this.buttons.length - 1].insertAdjacentElement("afterend", button); this.buttons.push(button); this._adjustNavigationPosition(false); } _transitionContent(from, to) { from.animate({ opacity: [1, 0] }, { duration: 250, easing: "ease" }).onfinish = () => { from.hidden = true; to.hidden = false; to.animate({ opacity: [0, 1] }, { duration: 250, easing: "ease" }); }; } _onWindowResized() { this._adjustNavigationPosition(); } _adjustNavigationPosition(shouldAnimate = true) { const scale = this.selectedButton.clientWidth / this.positionElement.parentElement.clientWidth, translate = this.selectedButton.offsetLeft / this.positionElement.parentElement.clientWidth / scale, windowHalfWidth = this.scrollerElement.clientWidth / 2; this.scrollerElement.scrollTo({ behavior: shouldAnimate ? "smooth" : "auto", left: this.selectedButton.offsetLeft - windowHalfWidth + this.selectedButton.clientWidth / 2 }); if (!shouldAnimate) { this.positionElement.style.transition = "none"; } this.positionElement.style.setProperty("--scale", scale); this.positionElement.style.setProperty("--translate", `${translate * 100}%`); this.positionElement.clientWidth; requestAnimationFrame(() => { this.positionElement.classList.add("is-initialized"); this.positionElement.style.transition = null; }); } _handleArrows() { const arrowsContainer = this.querySelector(".tabs-nav__arrows"); arrowsContainer.firstElementChild.addEventListener("click", () => { this.selectButton(this.buttons[Math.max(this.selectedTabIndex - 1, 0)]); }); arrowsContainer.lastElementChild.addEventListener("click", () => { this.selectButton(this.buttons[Math.min(this.selectedTabIndex + 1, this.buttons.length - 1)]); }); } }; window.customElements.define("tabs-nav", TabsNav); // js/helper/library-loader.js var LibraryLoader = class { static load(libraryName) { const STATUS_REQUESTED = "requested", STATUS_LOADED = "loaded"; const library = this.libraries[libraryName]; if (!library) { return; } if (library.status === STATUS_REQUESTED) { return library.promise; } if (library.status === STATUS_LOADED) { return Promise.resolve(); } let promise; if (library.type === "script") { promise = new Promise((resolve, reject) => { let tag = document.createElement("script"); tag.id = library.tagId; tag.src = library.src; tag.onerror = reject; tag.onload = () => { library.status = STATUS_LOADED; resolve(); }; document.body.appendChild(tag); }); } else { promise = new Promise((resolve, reject) => { let tag = document.createElement("link"); tag.id = library.tagId; tag.href = library.src; tag.rel = "stylesheet"; tag.type = "text/css"; tag.onerror = reject; tag.onload = () => { library.status = STATUS_LOADED; resolve(); }; document.body.appendChild(tag); }); } library.promise = promise; library.status = STATUS_REQUESTED; return promise; } }; __publicField(LibraryLoader, "libraries", { flickity: { tagId: "flickity", src: window.themeVariables.libs.flickity, type: "script" }, photoswipe: { tagId: "photoswipe", src: window.themeVariables.libs.photoswipe, type: "script" }, qrCode: { tagId: "qrCode", src: window.themeVariables.libs.qrCode, type: "script" }, modelViewerUiStyles: { tagId: "shopify-model-viewer-ui-styles", src: "https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css", type: "link" } }); // js/custom-element/ui/qr-code.js var QrCode = class extends HTMLElement { async connectedCallback() { await LibraryLoader.load("qrCode"); new window.QRCode(this, { text: this.getAttribute("identifier"), width: 200, height: 200 }); } }; window.customElements.define("qr-code", QrCode); // js/custom-element/ui/country-selector.js var CountrySelector = class extends HTMLSelectElement { connectedCallback() { this.provinceElement = document.getElementById(this.getAttribute("aria-owns")); this.addEventListener("change", this._updateProvinceVisibility.bind(this)); if (this.hasAttribute("data-default")) { for (let i = 0; i !== this.options.length; ++i) { if (this.options[i].text === this.getAttribute("data-default")) { this.selectedIndex = i; break; } } } this._updateProvinceVisibility(); const provinceSelectElement = this.provinceElement.tagName === "SELECT" ? this.provinceElement : this.provinceElement.querySelector("select"); if (provinceSelectElement.hasAttribute("data-default")) { for (let i = 0; i !== provinceSelectElement.options.length; ++i) { if (provinceSelectElement.options[i].text === provinceSelectElement.getAttribute("data-default")) { provinceSelectElement.selectedIndex = i; break; } } } } _updateProvinceVisibility() { const selectedOption = this.options[this.selectedIndex]; if (!selectedOption) { return; } let provinces = JSON.parse(selectedOption.getAttribute("data-provinces") || "[]"), provinceSelectElement = this.provinceElement.tagName === "SELECT" ? this.provinceElement : this.provinceElement.querySelector("select"); provinceSelectElement.innerHTML = ""; if (provinces.length === 0) { this.provinceElement.hidden = true; return; } provinces.forEach((data) => { provinceSelectElement.options.add(new Option(data[1], data[0])); }); this.provinceElement.hidden = false; } }; window.customElements.define("country-selector", CountrySelector, { extends: "select" }); // js/custom-element/ui/modal.js var ModalContent = class extends OpenableElement { connectedCallback() { super.connectedCallback(); if (this.appearAfterDelay && !(this.onlyOnce && this.hasAppearedOnce)) { setTimeout(() => this.open = true, this.apparitionDelay); } this.delegate.on("click", ".modal__overlay", () => this.open = false); } get appearAfterDelay() { return this.hasAttribute("apparition-delay"); } get apparitionDelay() { return parseInt(this.getAttribute("apparition-delay") || 0) * 1e3; } get onlyOnce() { return this.hasAttribute("only-once"); } get hasAppearedOnce() { return localStorage.getItem("theme:popup-appeared") !== null; } attributeChangedCallback(name, oldValue, newValue) { super.attributeChangedCallback(name, oldValue, newValue); switch (name) { case "open": document.documentElement.classList.toggle("lock-all", this.open); if (this.open) { localStorage.setItem("theme:popup-appeared", true); } } } }; window.customElements.define("modal-content", ModalContent); // js/custom-element/ui/price-range.js var PriceRange = class extends HTMLElement { connectedCallback() { this.rangeLowerBound = this.querySelector(".price-range__range-group input:first-child"); this.rangeHigherBound = this.querySelector(".price-range__range-group input:last-child"); this.textInputLowerBound = this.querySelector(".price-range__input:first-child input"); this.textInputHigherBound = this.querySelector(".price-range__input:last-child input"); this.textInputLowerBound.addEventListener("focus", () => this.textInputLowerBound.select()); this.textInputHigherBound.addEventListener("focus", () => this.textInputHigherBound.select()); this.textInputLowerBound.addEventListener("change", (event) => { event.target.value = Math.max(Math.min(parseInt(event.target.value), parseInt(this.textInputHigherBound.value || event.target.max) - 1), event.target.min); this.rangeLowerBound.value = event.target.value; this.rangeLowerBound.parentElement.style.setProperty("--range-min", `${parseInt(this.rangeLowerBound.value) / parseInt(this.rangeLowerBound.max) * 100}%`); }); this.textInputHigherBound.addEventListener("change", (event) => { event.target.value = Math.min(Math.max(parseInt(event.target.value), parseInt(this.textInputLowerBound.value || event.target.min) + 1), event.target.max); this.rangeHigherBound.value = event.target.value; this.rangeHigherBound.parentElement.style.setProperty("--range-max", `${parseInt(this.rangeHigherBound.value) / parseInt(this.rangeHigherBound.max) * 100}%`); }); this.rangeLowerBound.addEventListener("change", (event) => { this.textInputLowerBound.value = event.target.value; this.textInputLowerBound.dispatchEvent(new Event("change", { bubbles: true })); }); this.rangeHigherBound.addEventListener("change", (event) => { this.textInputHigherBound.value = event.target.value; this.textInputHigherBound.dispatchEvent(new Event("change", { bubbles: true })); }); this.rangeLowerBound.addEventListener("input", (event) => { triggerEvent(this, "facet:abort-loading"); event.target.value = Math.min(parseInt(event.target.value), parseInt(this.textInputHigherBound.value || event.target.max) - 1); event.target.parentElement.style.setProperty("--range-min", `${parseInt(event.target.value) / parseInt(event.target.max) * 100}%`); this.textInputLowerBound.value = event.target.value; }); this.rangeHigherBound.addEventListener("input", (event) => { triggerEvent(this, "facet:abort-loading"); event.target.value = Math.max(parseInt(event.target.value), parseInt(this.textInputLowerBound.value || event.target.min) + 1); event.target.parentElement.style.setProperty("--range-max", `${parseInt(event.target.value) / parseInt(event.target.max) * 100}%`); this.textInputHigherBound.value = event.target.value; }); } }; window.customElements.define("price-range", PriceRange); // js/custom-element/ui/link-bar.js var LinkBar = class extends HTMLElement { connectedCallback() { const selectedItem = this.querySelector(".link-bar__link-item--selected"); if (selectedItem) { requestAnimationFrame(() => { selectedItem.style.scrollSnapAlign = "none"; }); } } }; window.customElements.define("link-bar", LinkBar); // js/helper/media-features.js var MediaFeatures = class { static prefersReducedMotion() { return window.matchMedia("(prefers-reduced-motion: reduce)").matches; } static supportsHover() { return window.matchMedia("(pointer: fine)").matches; } }; // js/custom-element/ui/flickity-carousel.js var FlickityCarousel = class extends CustomHTMLElement { constructor() { super(); if (this.childElementCount === 1) { return; } this.addEventListener("flickity:ready", this._preloadNextImage.bind(this)); this.addEventListener("flickity:slide-changed", this._preloadNextImage.bind(this)); this._createFlickity(); } async disconnectedCallback() { if (this.flickity) { const flickityInstance = await this.flickity; flickityInstance.destroy(); } } get flickityConfig() { return JSON.parse(this.getAttribute("flickity-config")); } get flickityInstance() { return this.flickity; } async next() { (await this.flickityInstance).next(); } async previous() { (await this.flickityInstance).previous(); } async select(indexOrSelector) { (await this.flickityInstance).selectCell(indexOrSelector); } async setDraggable(draggable) { const flickityInstance = await this.flickity; flickityInstance.options.draggable = draggable; flickityInstance.updateDraggable(); } async reload() { const flickityInstance = await this.flickity; flickityInstance.destroy(); if (this.flickityConfig["cellSelector"]) { Array.from(this.children).sort((a, b) => parseInt(a.getAttribute("data-original-position")) > parseInt(b.getAttribute("data-original-position")) ? 1 : -1).forEach((node) => this.appendChild(node)); } this._createFlickity(); } async _createFlickity() { this.flickity = new Promise(async (resolve) => { await LibraryLoader.load("flickity"); await this.untilVisible({ rootMargin: "400px", threshold: 0 }); const flickityInstance = new window.ThemeFlickity(this, { ...this.flickityConfig, ...{ rightToLeft: window.themeVariables.settings.direction === "rtl", accessibility: MediaFeatures.supportsHover(), on: { ready: (event) => triggerEvent(this, "flickity:ready", event), change: (event) => triggerEvent(this, "flickity:slide-changed", event), settle: (event) => triggerEvent(this, "flickity:slide-settled", event) } } }); resolve(flickityInstance); }); if (this.hasAttribute("click-nav")) { const flickityInstance = await this.flickityInstance; flickityInstance.on("staticClick", this._onStaticClick.bind(this)); this.addEventListener("mousemove", this._onMouseMove.bind(this)); } } async _onStaticClick(event, pointer, cellElement) { const flickityInstance = await this.flickityInstance, isVideoOrModelType = flickityInstance.selectedElement.hasAttribute("data-media-type") && ["video", "external_video", "model"].includes(flickityInstance.selectedElement.getAttribute("data-media-type")); if (!cellElement || isVideoOrModelType || window.matchMedia(window.themeVariables.breakpoints.phone).matches) { return; } const flickityViewport = flickityInstance.viewport, boundingRect = flickityViewport.getBoundingClientRect(), halfEdge = Math.floor(boundingRect.right - boundingRect.width / 2); if (pointer.clientX > halfEdge) { flickityInstance.next(); } else { flickityInstance.previous(); } } async _onMouseMove(event) { const flickityInstance = await this.flickityInstance, isVideoOrModelType = flickityInstance.selectedElement.hasAttribute("data-media-type") && ["video", "external_video", "model"].includes(flickityInstance.selectedElement.getAttribute("data-media-type")); this.classList.toggle("is-hovering-right", event.offsetX > this.clientWidth / 2 && !isVideoOrModelType); this.classList.toggle("is-hovering-left", event.offsetX <= this.clientWidth / 2 && !isVideoOrModelType); } async _preloadNextImage() { var _a; const flickityInstance = await this.flickity; if (flickityInstance.selectedElement.nextElementSibling) { (_a = flickityInstance.selectedElement.nextElementSibling.querySelector("img")) == null ? void 0 : _a.setAttribute("loading", "eager"); } } }; window.customElements.define("flickity-carousel", FlickityCarousel); // js/helper/dom.js function getSiblings(element, filter, includeSelf = false) { let siblings = []; let currentElement = element; while (currentElement = currentElement.previousElementSibling) { if (!filter || currentElement.matches(filter)) { siblings.push(currentElement); } } if (includeSelf) { siblings.push(element); } currentElement = element; while (currentElement = currentElement.nextElementSibling) { if (!filter || currentElement.matches(filter)) { siblings.push(currentElement); } } return siblings; } async function resolveAsyncIterator(target) { const processedTarget = []; if (!(target != null && typeof target[Symbol.iterator] === "function")) { target = [target]; } for (const targetItem of target) { if (typeof targetItem[Symbol.asyncIterator] === "function") { for await (const awaitTarget of targetItem) { processedTarget.push(awaitTarget); } } else { processedTarget.push(targetItem); } } return processedTarget; } // js/custom-element/ui/flickity-controls.js var FlickityControls = class extends CustomHTMLElement { async connectedCallback() { this.flickityCarousel.addEventListener("flickity:ready", this._onSlideChanged.bind(this, false)); this.flickityCarousel.addEventListener("flickity:slide-changed", this._onSlideChanged.bind(this, true)); this.delegate.on("click", '[data-action="prev"]', () => this.flickityCarousel.previous()); this.delegate.on("click", '[data-action="next"]', () => this.flickityCarousel.next()); this.delegate.on("click", '[data-action="select"]', (event, target) => this.flickityCarousel.select(`#${target.getAttribute("aria-controls")}`)); } get flickityCarousel() { return this._flickityCarousel = this._flickityCarousel || document.getElementById(this.getAttribute("controls")); } async _onSlideChanged(animate = true) { let flickityInstance = await this.flickityCarousel.flickityInstance, activeItems = Array.from(this.querySelectorAll(`[aria-controls="${flickityInstance.selectedElement.id}"]`)); activeItems.forEach((activeItem) => { activeItem.setAttribute("aria-current", "true"); getSiblings(activeItem).forEach((sibling) => sibling.removeAttribute("aria-current")); requestAnimationFrame(() => { if (activeItem.offsetParent && activeItem.offsetParent !== this) { const windowHalfHeight = activeItem.offsetParent.clientHeight / 2, windowHalfWidth = activeItem.offsetParent.clientWidth / 2; activeItem.offsetParent.scrollTo({ behavior: animate ? "smooth" : "auto", top: activeItem.offsetTop - windowHalfHeight + activeItem.clientHeight / 2, left: activeItem.offsetLeft - windowHalfWidth + activeItem.clientWidth / 2 }); } }); }); } }; window.customElements.define("flickity-controls", FlickityControls); // js/custom-element/ui/external-video.js var ExternalVideo = class extends CustomHTMLElement { constructor() { super(); this.hasLoaded = false; (async () => { if (this.autoPlay) { await this.untilVisible({ rootMargin: "300px", threshold: 0 }); this.play(); } else { this.addEventListener("click", this.play.bind(this), { once: true }); } })(); } get autoPlay() { return this.hasAttribute("autoplay"); } get provider() { return this.getAttribute("provider"); } async play() { if (!this.hasLoaded) { await this._setupPlayer(); } if (this.provider === "youtube") { this.querySelector("iframe").contentWindow.postMessage(JSON.stringify({ event: "command", func: "playVideo", args: "" }), "*"); } else if (this.provider === "vimeo") { this.querySelector("iframe").contentWindow.postMessage(JSON.stringify({ method: "play" }), "*"); } } pause() { if (!this.hasLoaded) { return; } if (this.provider === "youtube") { this.querySelector("iframe").contentWindow.postMessage(JSON.stringify({ event: "command", func: "pauseVideo", args: "" }), "*"); } else if (this.provider === "vimeo") { this.querySelector("iframe").contentWindow.postMessage(JSON.stringify({ method: "pause" }), "*"); } } _setupPlayer() { if (this._setupPromise) { return this._setupPromise; } return this._setupPromise = new Promise((resolve) => { const template2 = this.querySelector("template"), node = template2.content.firstElementChild.cloneNode(true); node.onload = () => { this.hasLoaded = true; resolve(); }; if (this.autoPlay) { template2.replaceWith(node); } else { this.innerHTML = ""; this.appendChild(node); } }); } }; window.customElements.define("external-video", ExternalVideo); // js/helper/product-loader.js var ProductLoader = class { static load(productHandle) { if (!productHandle) { return; } if (this.loadedProducts[productHandle]) { return this.loadedProducts[productHandle]; } this.loadedProducts[productHandle] = new Promise(async (resolve) => { const response = await fetch(`${window.themeVariables.routes.rootUrlWithoutSlash}/products/${productHandle}.js`); const responseAsJson = await response.json(); resolve(responseAsJson); }); return this.loadedProducts[productHandle]; } }; __publicField(ProductLoader, "loadedProducts", {}); // js/custom-element/ui/model-media.js var ModelMedia = class extends HTMLElement { constructor() { super(); LibraryLoader.load("modelViewerUiStyles"); window.Shopify.loadFeatures([ { name: "shopify-xr", version: "1.0", onLoad: this._setupShopifyXr.bind(this) }, { name: "model-viewer-ui", version: "1.0", onLoad: () => { this.modelUi = new window.Shopify.ModelViewerUI(this.firstElementChild, { focusOnPlay: false }); const modelViewer = this.querySelector("model-viewer"); modelViewer.addEventListener("shopify_model_viewer_ui_toggle_play", () => { modelViewer.dispatchEvent(new CustomEvent("model:played", { bubbles: true })); }); modelViewer.addEventListener("shopify_model_viewer_ui_toggle_pause", () => { modelViewer.dispatchEvent(new CustomEvent("model:paused", { bubbles: true })); }); } } ]); } disconnectedCallback() { var _a; (_a = this.modelUi) == null ? void 0 : _a.destroy(); } play() { if (this.modelUi) { this.modelUi.play(); } } pause() { if (this.modelUi) { this.modelUi.pause(); } } async _setupShopifyXr() { if (!window.ShopifyXR) { document.addEventListener("shopify_xr_initialized", this._setupShopifyXr.bind(this)); } else { const product = await ProductLoader.load(this.getAttribute("product-handle")); const models = product["media"].filter((media) => media["media_type"] === "model"); window.ShopifyXR.addModels(models); window.ShopifyXR.setupXRElements(); } } }; window.customElements.define("model-media", ModelMedia); // js/custom-element/ui/native-video.js var NativeVideo = class extends HTMLElement { constructor() { super(); this.hasLoaded = false; if (this.autoPlay) { this.play(); } else { this.addEventListener("click", this.play.bind(this), { once: true }); } } get autoPlay() { return this.hasAttribute("autoplay"); } play() { if (!this.hasLoaded) { this._replaceContent(); } this.querySelector("video").play(); } pause() { if (this.hasLoaded) { this.querySelector("video").pause(); } } _replaceContent() { const node = this.querySelector("template").content.firstElementChild.cloneNode(true); this.innerHTML = ""; this.appendChild(node); this.firstElementChild.addEventListener("play", () => { this.dispatchEvent(new CustomEvent("video:played", { bubbles: true })); }); this.firstElementChild.addEventListener("pause", () => { this.dispatchEvent(new CustomEvent("video:paused", { bubbles: true })); }); this.hasLoaded = true; } }; window.customElements.define("native-video", NativeVideo); // js/custom-element/ui/combo-box.js var ComboBox = class extends OpenableElement { connectedCallback() { super.connectedCallback(); this.options = Array.from(this.querySelectorAll('[role="option"]')); this.delegate.on("click", '[role="option"]', this._onValueClicked.bind(this)); this.delegate.on("keydown", '[role="listbox"]', this._onKeyDown.bind(this)); this.delegate.on("change", "select", this._onValueChanged.bind(this)); this.delegate.on("click", ".combo-box__overlay", () => this.open = false); if (this.hasAttribute("fit-toggle")) { const maxWidth = Math.max(...this.options.map((item) => item.clientWidth)), control = document.querySelector(`[aria-controls="${this.id}"]`); if (control) { control.style.setProperty("--largest-option-width", `${maxWidth + 2}px`); } } } get nativeSelect() { return this.querySelector("select"); } set selectedValue(value) { this.options.forEach((option) => { option.setAttribute("aria-selected", option.getAttribute("value") === value ? "true" : "false"); }); } attributeChangedCallback(name, oldValue, newValue) { super.attributeChangedCallback(name, oldValue, newValue); switch (name) { case "open": if (this.open) { const boundingRect = this.getBoundingClientRect(); this.classList.toggle("combo-box--top", boundingRect.top >= window.innerHeight / 2 * 1.5); setTimeout(() => this.focusTrap.activate(), 150); } else { this.focusTrap.deactivate(); setTimeout(() => this.classList.remove("combo-box--top"), 200); } document.documentElement.classList.toggle("lock-mobile", this.open); } } _onValueClicked(event, target) { this.selectedValue = target.value; this.nativeSelect.value = target.value; this.nativeSelect.dispatchEvent(new Event("change", { bubbles: true })); this.open = false; } _onValueChanged(event, target) { Array.from(this.nativeSelect.options).forEach((option) => option.toggleAttribute("selected", target.value === option.value)); this.selectedValue = target.value; } _onKeyDown(event) { var _a, _b; if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); if (event.key === "ArrowDown") { (_a = document.activeElement.nextElementSibling) == null ? void 0 : _a.focus(); } else { (_b = document.activeElement.previousElementSibling) == null ? void 0 : _b.focus(); } } } }; window.customElements.define("combo-box", ComboBox); // js/custom-element/ui/quantity-selector.js var QuantitySelector = class extends CustomHTMLElement { connectedCallback() { this.inputElement = this.querySelector("input"); this.delegate.on("click", "button:first-child", () => this.inputElement.quantity = this.inputElement.quantity - 1); this.delegate.on("click", "button:last-child", () => this.inputElement.quantity = this.inputElement.quantity + 1); } }; window.customElements.define("quantity-selector", QuantitySelector); // js/custom-element/ui/input-number.js var InputNumber = class extends HTMLInputElement { connectedCallback() { this.addEventListener("input", this._onValueInput.bind(this)); this.addEventListener("change", this._onValueChanged.bind(this)); this.addEventListener("keydown", this._onKeyDown.bind(this)); } get quantity() { return parseInt(this.value); } set quantity(quantity) { const isNumeric = (typeof quantity === "number" || typeof quantity === "string" && quantity.trim() !== "") && !isNaN(quantity); if (quantity === "") { return; } if (!isNumeric || quantity < 0) { quantity = parseInt(quantity) || 1; } this.value = Math.max(this.min || 1, Math.min(quantity, this.max || Number.MAX_VALUE)).toString(); this.size = Math.max(this.value.length + 1, 2); } _onValueInput() { this.quantity = this.value; } _onValueChanged() { if (this.value === "") { this.quantity = 1; } } _onKeyDown(event) { event.stopPropagation(); if (event.key === "ArrowUp") { this.quantity = this.quantity + 1; } else if (event.key === "ArrowDown") { this.quantity = this.quantity - 1; } } }; window.customElements.define("input-number", InputNumber, { extends: "input" }); // js/custom-element/section/announcement-bar/announcement-bar.js var AnnouncementBar = class extends CustomHTMLElement { async connectedCallback() { await customElements.whenDefined("announcement-bar-item"); this.items = Array.from(this.querySelectorAll("announcement-bar-item")); this.hasPendingTransition = false; this.delegate.on("click", '[data-action="prev"]', this.previous.bind(this)); this.delegate.on("click", '[data-action="next"]', this.next.bind(this)); if (this.autoPlay) { this.delegate.on("announcement-bar:content:open", this._pausePlayer.bind(this)); this.delegate.on("announcement-bar:content:close", this._startPlayer.bind(this)); } if (window.ResizeObserver) { this.resizeObserver = new ResizeObserver(this._updateCustomProperties.bind(this)); this.resizeObserver.observe(this); } if (this.autoPlay) { this._startPlayer(); } if (Shopify.designMode) { this.delegate.on("shopify:block:select", (event) => this.select(event.target.index, false)); } } get autoPlay() { return this.hasAttribute("auto-play"); } get selectedIndex() { return this.items.findIndex((item) => item.selected); } previous() { this.select((this.selectedIndex - 1 + this.items.length) % this.items.length); } next() { this.select((this.selectedIndex + 1 + this.items.length) % this.items.length); } async select(index, animate = true) { if (this.selectedIndex === index || this.hasPendingTransition) { return; } if (this.autoPlay) { this._pausePlayer(); } this.hasPendingTransition = true; await this.items[this.selectedIndex].deselect(animate); await this.items[index].select(animate); this.hasPendingTransition = false; if (this.autoPlay) { this._startPlayer(); } } _pausePlayer() { clearInterval(this._interval); } _startPlayer() { this._interval = setInterval(this.next.bind(this), parseInt(this.getAttribute("cycle-speed")) * 1e3); } _updateCustomProperties(entries) { entries.forEach((entry) => { if (entry.target === this) { const height = entry.borderBoxSize ? entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.borderBoxSize.blockSize : entry.target.clientHeight; document.documentElement.style.setProperty("--announcement-bar-height", `${height}px`); } }); } }; window.customElements.define("announcement-bar", AnnouncementBar); // js/custom-element/section/announcement-bar/item.js var AnnouncementBarItem = class extends CustomHTMLElement { connectedCallback() { if (this.hasContent) { this.contentElement = this.querySelector(".announcement-bar__content"); this.delegate.on("click", '[data-action="open-content"]', this.openContent.bind(this)); this.delegate.on("click", '[data-action="close-content"]', this.closeContent.bind(this)); if (Shopify.designMode) { this.addEventListener("shopify:block:select", this.openContent.bind(this)); this.addEventListener("shopify:block:deselect", this.closeContent.bind(this)); } } } get index() { return [...this.parentNode.children].indexOf(this); } get hasContent() { return this.hasAttribute("has-content"); } get selected() { return !this.hasAttribute("hidden"); } get focusTrap() { return this._trapFocus = this._trapFocus || createFocusTrap(this.contentElement.querySelector(".announcement-bar__content-inner"), { fallbackFocus: this, clickOutsideDeactivates: (event) => !(event.target.tagName === "BUTTON"), allowOutsideClick: (event) => event.target.tagName === "BUTTON", onDeactivate: this.closeContent.bind(this), preventScroll: true }); } async select(animate = true) { this.removeAttribute("hidden"); await new Promise((resolve) => { this.animate({ transform: ["translateY(8px)", "translateY(0)"], opacity: [0, 1] }, { duration: animate ? 150 : 0, easing: "ease-in-out" }).onfinish = resolve; }); } async deselect(animate = true) { await this.closeContent(); await new Promise((resolve) => { this.animate({ transform: ["translateY(0)", "translateY(-8px)"], opacity: [1, 0] }, { duration: animate ? 150 : 0, easing: "ease-in-out" }).onfinish = resolve; }); this.setAttribute("hidden", ""); } async openContent() { if (this.hasContent) { this.contentElement.addEventListener("transitionend", () => this.focusTrap.activate(), { once: true }); this.contentElement.removeAttribute("hidden"); document.documentElement.classList.add("lock-all"); this.dispatchEvent(new CustomEvent("announcement-bar:content:open", { bubbles: true })); } } async closeContent() { if (!this.hasContent || this.contentElement.hasAttribute("hidden")) { return Promise.resolve(); } await new Promise((resolve) => { this.contentElement.addEventListener("transitionend", () => resolve(), { once: true }); this.contentElement.setAttribute("hidden", ""); this.focusTrap.deactivate(); document.documentElement.classList.remove("lock-all"); this.dispatchEvent(new CustomEvent("announcement-bar:content:close", { bubbles: true })); }); } }; window.customElements.define("announcement-bar-item", AnnouncementBarItem); // js/custom-element/section/search/search-page.js var SearchPage = class extends HTMLElement { connectedCallback() { this.facetToolbar = document.getElementById("mobile-facet-toolbar"); this.tabsNav = document.getElementById("search-tabs-nav"); this.tabsNav.addEventListener("tabs-nav:changed", this._onCategoryChanged.bind(this)); this._completeSearch(); } get terms() { return this.getAttribute("terms"); } get completeFor() { return JSON.parse(this.getAttribute("complete-for")).filter((item) => !(item === "")); } async _completeSearch() { const promisesList = []; this.completeFor.forEach((item) => { promisesList.push(fetch(`${window.themeVariables.routes.searchUrl}?section_id=${this.getAttribute("section-id")}&q=${this.terms}&type=${item}&options[prefix]=last&options[unavailable_products]=${window.themeVariables.settings.searchUnavailableProducts}`)); }); const responses = await Promise.all(promisesList); await Promise.all(responses.map(async (response) => { const div = document.createElement("div"); div.innerHTML = await response.text(); const categoryResultDiv = div.querySelector(".main-search__category-result"), tabNavItem = div.querySelector("#search-tabs-nav .tabs-nav__item"); if (categoryResultDiv) { categoryResultDiv.setAttribute("hidden", ""); this.insertAdjacentElement("beforeend", categoryResultDiv); this.tabsNav.addButton(tabNavItem); } })); } _onCategoryChanged(event) { const button = event.detail.button; this.facetToolbar.classList.toggle("is-collapsed", button.getAttribute("data-type") !== "product"); } }; window.customElements.define("search-page", SearchPage); // js/custom-element/section/footer/cookie-bar.js var CookieBar = class extends CustomHTMLElement { connectedCallback() { if (window.Shopify && window.Shopify.designMode) { this.rootDelegate.on("shopify:section:select", (event) => filterShopifyEvent(event, this, () => this.open = true)); this.rootDelegate.on("shopify:section:deselect", (event) => filterShopifyEvent(event, this, () => this.open = false)); } this.delegate.on("click", '[data-action~="accept-policy"]', this._acceptPolicy.bind(this)); this.delegate.on("click", '[data-action~="decline-policy"]', this._declinePolicy.bind(this)); window.Shopify.loadFeatures([{ name: "consent-tracking-api", version: "0.1", onLoad: this._onCookieBarSetup.bind(this) }]); } set open(value) { this.toggleAttribute("hidden", !value); } _onCookieBarSetup() { if (window.Shopify.customerPrivacy.shouldShowGDPRBanner()) { this.open = true; } } _acceptPolicy() { window.Shopify.customerPrivacy.setTrackingConsent(true, () => this.open = false); } _declinePolicy() { window.Shopify.customerPrivacy.setTrackingConsent(false, () => this.open = false); } }; window.customElements.define("cookie-bar", CookieBar); // js/custom-element/section/product-recommendations/product-recommendations.js var ProductRecommendations = class extends HTMLElement { async connectedCallback() { if (!this.hasAttribute("use-automatic-recommendations")) { return; } const response = await fetch(`${window.themeVariables.routes.productRecommendationsUrl}?product_id=${this.productId}&limit=${this.recommendationsCount}§ion_id=${this.sectionId}`); const div = document.createElement("div"); div.innerHTML = await response.text(); const productRecommendationsElement = div.querySelector("product-recommendations"); if (productRecommendationsElement.hasChildNodes()) { this.innerHTML = productRecommendationsElement.innerHTML; } } get productId() { return this.getAttribute("product-id"); } get sectionId() { return this.getAttribute("section-id"); } get recommendationsCount() { return parseInt(this.getAttribute("recommendations-count") || 4); } }; window.customElements.define("product-recommendations", ProductRecommendations); // js/custom-element/section/product-recommendations/recently-viewed-products.js var RecentlyViewedProducts = class extends HTMLElement { async connectedCallback() { if (this.searchQueryString === "") { return; } const response = await fetch(`${window.themeVariables.routes.searchUrl}?type=product&q=${this.searchQueryString}§ion_id=${this.sectionId}`); const div = document.createElement("div"); div.innerHTML = await response.text(); const recentlyViewedProductsElement = div.querySelector("recently-viewed-products"); if (recentlyViewedProductsElement.hasChildNodes()) { this.innerHTML = recentlyViewedProductsElement.innerHTML; } } get searchQueryString() { const items = JSON.parse(localStorage.getItem("theme:recently-viewed-products") || "[]"); if (this.hasAttribute("exclude-product-id") && items.includes(parseInt(this.getAttribute("exclude-product-id")))) { items.splice(items.indexOf(parseInt(this.getAttribute("exclude-product-id"))), 1); } return items.map((item) => "id:" + item).slice(0, this.productsCount).join(" OR "); } get sectionId() { return this.getAttribute("section-id"); } get productsCount() { return this.getAttribute("products-count") || 4; } }; window.customElements.define("recently-viewed-products", RecentlyViewedProducts); // js/helper/image.js function getSizedMediaUrl(media, size) { let src = '/cdn-cgi/image/format=auto/'+(typeof media === "string" ? media : media["preview_image"] ? (media["preview_image"]["src"] || media["preview_image"]["original_src"]) : media["url"]); if (size === null) { return src; } if (size === "master") { return src.replace(/http(s)?:/, ""); } const match = src.match(/\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif|webp)(\?v=\d+)?$/i); if (match) { const prefix = src.split(match[0]); const suffix = match[0]; // return (prefix[0] + "_" + size + suffix).replace(/http(s)?:/, ""); return (prefix[0] + suffix).replace(/http(s)?:/, ""); } else { return null; } } function getMediaSrcset(media, sizeList) { let srcset = [], supportedSizes = typeof media === "string" ? sizeList : getSupportedSizes(media, sizeList); supportedSizes.forEach((supportedSize) => { srcset.push(`${getSizedMediaUrl(media, supportedSize + "x")} ${supportedSize}w`); }); return srcset.join(","); } function getSupportedSizes(media, desiredSizes) { let supportedSizes = [], mediaWidth = media["preview_image"]["width"]; desiredSizes.forEach((width) => { if (mediaWidth >= width) { supportedSizes.push(width); } }); return supportedSizes; } function imageLoaded(image) { return new Promise((resolve) => { if (!image || image.tagName !== "IMG" || image.complete) { resolve(); } else { image.onload = () => resolve(); } }); } // js/helper/animation.js var CustomAnimation = class { constructor(effect) { this._effect = effect; this._playState = "idle"; this._finished = Promise.resolve(); } get finished() { return this._finished; } get animationEffects() { return this._effect instanceof CustomKeyframeEffect ? [this._effect] : this._effect.animationEffects; } cancel() { this.animationEffects.forEach((animationEffect) => animationEffect.cancel()); } finish() { this.animationEffects.forEach((animationEffect) => animationEffect.finish()); } play() { this._playState = "running"; this._effect.play(); this._finished = this._effect.finished; this._finished.then(() => { this._playState = "finished"; }, (rejection) => { this._playState = "idle"; }); } }; var CustomKeyframeEffect = class { constructor(target, keyframes, options = {}) { if (!target) { return; } if ("Animation" in window) { this._animation = new Animation(new KeyframeEffect(target, keyframes, options)); } else { options["fill"] = "forwards"; this._animation = target.animate(keyframes, options); this._animation.pause(); } this._animation.addEventListener("finish", () => { target.style.opacity = keyframes.hasOwnProperty("opacity") ? keyframes["opacity"][keyframes["opacity"].length - 1] : null; target.style.visibility = keyframes.hasOwnProperty("visibility") ? keyframes["visibility"][keyframes["visibility"].length - 1] : null; }); } get finished() { if (!this._animation) { return Promise.resolve(); } return this._animation.finished ? this._animation.finished : new Promise((resolve) => this._animation.onfinish = resolve); } play() { if (this._animation) { this._animation.startTime = null; this._animation.play(); } } cancel() { if (this._animation) { this._animation.cancel(); } } finish() { if (this._animation) { this._animation.finish(); } } }; var GroupEffect = class { constructor(childrenEffects) { this._childrenEffects = childrenEffects; this._finished = Promise.resolve(); } get finished() { return this._finished; } get animationEffects() { return this._childrenEffects.flatMap((effect) => { return effect instanceof CustomKeyframeEffect ? effect : effect.animationEffects; }); } }; var ParallelEffect = class extends GroupEffect { play() { const promises = []; for (const effect of this._childrenEffects) { effect.play(); promises.push(effect.finished); } this._finished = Promise.all(promises); } }; var SequenceEffect = class extends GroupEffect { play() { this._finished = new Promise(async (resolve, reject) => { try { for (const effect of this._childrenEffects) { effect.play(); await effect.finished; } resolve(); } catch (exception) { reject(); } }); } }; // js/custom-element/section/slideshow/slideshow-item.js var SlideshowItem = class extends HTMLElement { async connectedCallback() { this._pendingAnimations = []; this.addEventListener("split-lines:re-split", (event) => { Array.from(event.target.children).forEach((line) => line.style.visibility = this.selected ? "visible" : "hidden"); }); if (MediaFeatures.prefersReducedMotion()) { this.setAttribute("reveal-visibility", ""); Array.from(this.querySelectorAll("[reveal], [reveal-visibility]")).forEach((item) => { item.removeAttribute("reveal"); item.removeAttribute("reveal-visibility"); }); } } get index() { return [...this.parentNode.children].indexOf(this); } get selected() { return !this.hasAttribute("hidden"); } async transitionToLeave(transitionType, shouldAnimate = true) { if (transitionType !== "reveal") { this.setAttribute("hidden", ""); } this._pendingAnimations.forEach((animation2) => animation2.cancel()); this._pendingAnimations = []; let animation = null, textElements = await resolveAsyncIterator(this.querySelectorAll("split-lines, .button-group, .button-wrapper")), imageElements = Array.from(this.querySelectorAll(".slideshow__image-wrapper")); switch (transitionType) { case "sweep": animation = new CustomAnimation(new SequenceEffect([ new CustomKeyframeEffect(this, { visibility: ["visible", "hidden"] }, { duration: 500 }), new ParallelEffect(textElements.map((item) => { return new CustomKeyframeEffect(item, { opacity: [1, 0], visibility: ["visible", "hidden"] }); })) ])); break; case "fade": animation = new CustomAnimation(new CustomKeyframeEffect(this, { opacity: [1, 0], visibility: ["visible", "hidden"] }, { duration: 250, easing: "ease-in-out" })); break; case "reveal": animation = new CustomAnimation(new SequenceEffect([ new ParallelEffect(textElements.reverse().map((item) => { return new CustomKeyframeEffect(item, { opacity: [1, 0], visibility: ["visible", "hidden"] }, { duration: 250, easing: "ease-in-out" }); })), new ParallelEffect(imageElements.map((item) => { if (!item.classList.contains("slideshow__image-wrapper--secondary")) { return new CustomKeyframeEffect(item, { visibility: ["visible", "hidden"], clipPath: ["inset(0 0 0 0)", "inset(0 0 100% 0)"] }, { duration: 450, easing: "cubic-bezier(0.99, 0.01, 0.50, 0.94)" }); } else { return new CustomKeyframeEffect(item, { visibility: ["visible", "hidden"], clipPath: ["inset(0 0 0 0)", "inset(100% 0 0 0)"] }, { duration: 450, easing: "cubic-bezier(0.99, 0.01, 0.50, 0.94)" }); } })) ])); break; } await this._executeAnimation(animation, shouldAnimate); if (transitionType === "reveal") { this.setAttribute("hidden", ""); } } async transitionToEnter(transitionType, shouldAnimate = true, reverseDirection = false) { this.removeAttribute("hidden"); await this._untilReady(); let animation = null, textElements = await resolveAsyncIterator(this.querySelectorAll("split-lines, .button-group, .button-wrapper")), imageElements = Array.from(this.querySelectorAll(".slideshow__image-wrapper")); switch (transitionType) { case "sweep": animation = new CustomAnimation(new SequenceEffect([ new CustomKeyframeEffect(this, { visibility: ["hidden", "visible"], clipPath: reverseDirection ? ["inset(0 100% 0 0)", "inset(0 0 0 0)"] : ["inset(0 0 0 100%)", "inset(0 0 0 0)"] }, { duration: 500, easing: "cubic-bezier(1, 0, 0, 1)" }), new ParallelEffect(textElements.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], visibility: ["hidden", "visible"], clipPath: ["inset(0 0 100% 0)", "inset(0 0 0 0)"], transform: ["translateY(100%)", "translateY(0)"] }, { duration: 450, delay: 100 * index, easing: "cubic-bezier(0.5, 0.06, 0.01, 0.99)" }); })) ])); break; case "fade": animation = new CustomAnimation(new CustomKeyframeEffect(this, { opacity: [0, 1], visibility: ["hidden", "visible"] }, { duration: 250, easing: "ease-in-out" })); break; case "reveal": animation = new CustomAnimation(new SequenceEffect([ new ParallelEffect(imageElements.map((item) => { if (!item.classList.contains("slideshow__image-wrapper--secondary")) { return new CustomKeyframeEffect(item, { visibility: ["hidden", "visible"], clipPath: ["inset(0 0 100% 0)", "inset(0 0 0 0)"] }, { duration: 450, delay: 100, easing: "cubic-bezier(0.5, 0.06, 0.01, 0.99)" }); } else { return new CustomKeyframeEffect(item, { visibility: ["hidden", "visible"], clipPath: ["inset(100% 0 0 0)", "inset(0 0 0 0)"] }, { duration: 450, delay: 100, easing: "cubic-bezier(0.5, 0.06, 0.01, 0.99)" }); } })), new ParallelEffect(textElements.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], visibility: ["hidden", "visible"], clipPath: ["inset(0 0 100% 0)", "inset(0 0 0 0)"], transform: ["translateY(100%)", "translateY(0)"] }, { duration: 450, delay: 100 * index, easing: "cubic-bezier(0.5, 0.06, 0.01, 0.99)" }); })) ])); break; } return this._executeAnimation(animation, shouldAnimate); } async _executeAnimation(animation, shouldAnimate) { this._pendingAnimations.push(animation); shouldAnimate ? animation.play() : animation.finish(); return animation.finished; } async _untilReady() { return Promise.all(this._getVisibleImages().map((image) => imageLoaded(image))); } _preloadImages() { this._getVisibleImages().forEach((image) => { image.setAttribute("loading", "eager"); }); } _getVisibleImages() { return Array.from(this.querySelectorAll("img")).filter((image) => { return getComputedStyle(image.parentElement).display !== "none"; }); } }; window.customElements.define("slide-show-item", SlideshowItem); // js/mixin/vertical-scroll-blocker.js var VerticalScrollBlockerMixin = { _blockVerticalScroll(threshold = 18) { this.addEventListener("touchstart", (event) => { this.firstTouchClientX = event.touches[0].clientX; }); this.addEventListener("touchmove", (event) => { const touchClientX = event.touches[0].clientX - this.firstTouchClientX; if (Math.abs(touchClientX) > threshold) { event.preventDefault(); } }, { passive: false }); } }; // js/custom-element/section/slideshow/slideshow.js var Slideshow = class extends CustomHTMLElement { connectedCallback() { this.items = Array.from(this.querySelectorAll("slide-show-item")); this.pageDots = this.querySelector("page-dots"); this.isTransitioning = false; if (this.items.length > 1) { if (Shopify.designMode) { this.addEventListener("shopify:block:deselect", this.startPlayer.bind(this)); this.addEventListener("shopify:block:select", (event) => { this.pausePlayer(); this.intersectionObserver.disconnect(); if (!(!event.detail.load && event.target.selected)) { this.select(event.target.index, !event.detail.load); } }); } this.addEventListener("swiperight", this.previous.bind(this)); this.addEventListener("swipeleft", this.next.bind(this)); this.addEventListener("page-dots:changed", (event) => this.select(event.detail.index)); this._blockVerticalScroll(); } this._setupVisibility(); } get selectedIndex() { return this.items.findIndex((item) => item.selected); } get transitionType() { return MediaFeatures.prefersReducedMotion() ? "fade" : this.getAttribute("transition-type"); } async _setupVisibility() { await this.untilVisible(); await this.items[this.selectedIndex].transitionToEnter(this.transitionType).catch((error) => { }); this.startPlayer(); } previous() { this.select((this.selectedIndex - 1 + this.items.length) % this.items.length, true, true); } next() { this.select((this.selectedIndex + 1 + this.items.length) % this.items.length, true, false); } async select(index, shouldTransition = true, reverseDirection = false) { if (this.transitionType === "reveal" && this.isTransitioning) { return; } this.isTransitioning = true; const previousItem = this.items[this.selectedIndex], newItem = this.items[index]; this.items[(newItem.index + 1) % this.items.length]._preloadImages(); if (previousItem && previousItem !== newItem) { if (this.transitionType !== "reveal") { previousItem.transitionToLeave(this.transitionType, shouldTransition); } else { await previousItem.transitionToLeave(this.transitionType, shouldTransition); } } if (this.pageDots) { this.pageDots.selectedIndex = newItem.index; } await newItem.transitionToEnter(this.transitionType, shouldTransition, reverseDirection).catch((error) => { }); this.isTransitioning = false; } pausePlayer() { this.style.setProperty("--section-animation-play-state", "paused"); } startPlayer() { if (this.hasAttribute("auto-play")) { this.style.setProperty("--section-animation-play-state", "running"); } } }; Object.assign(Slideshow.prototype, VerticalScrollBlockerMixin); window.customElements.define("slide-show", Slideshow); // js/custom-element/section/image-with-text/image-with-text-item.js var ImageWithTextItem = class extends HTMLElement { get index() { return [...this.parentNode.children].indexOf(this); } get selected() { return !this.hasAttribute("hidden"); } get hasAttachedImage() { return this.hasAttribute("attached-image"); } async transitionToEnter(shouldAnimate = true) { this.removeAttribute("hidden"); const textWrapper = this.querySelector(".image-with-text__text-wrapper"), headings = await resolveAsyncIterator(this.querySelectorAll(".image-with-text__content split-lines")); const animation = new CustomAnimation(new SequenceEffect([ new ParallelEffect(headings.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 0.2, 1], transform: ["translateY(100%)", "translateY(0)"], clipPath: ["inset(0 0 100% 0)", "inset(0 0 0 0)"] }, { duration: 850, delay: 120 * index, easing: "cubic-bezier(0.5, 0.06, 0.01, 0.99)" }); })), new CustomKeyframeEffect(textWrapper, { opacity: [0, 1] }, { duration: 300 }) ])); shouldAnimate ? animation.play() : animation.finish(); return animation.finished; } async transitionToLeave(shouldAnimate = true) { const elements = await resolveAsyncIterator(this.querySelectorAll(".image-with-text__text-wrapper, .image-with-text__content split-lines")); const animation = new CustomAnimation(new ParallelEffect(elements.map((item) => { return new CustomKeyframeEffect(item, { opacity: [1, 0] }, { duration: 200 }); }))); shouldAnimate ? animation.play() : animation.finish(); await animation.finished; this.setAttribute("hidden", ""); } }; window.customElements.define("image-with-text-item", ImageWithTextItem); // js/custom-element/section/image-with-text/image-with-text.js var ImageWithText = class extends CustomHTMLElement { connectedCallback() { this.items = Array.from(this.querySelectorAll("image-with-text-item")); this.imageItems = Array.from(this.querySelectorAll(".image-with-text__image")); this.pageDots = this.querySelector("page-dots"); this.hasPendingTransition = false; if (this.items.length > 1) { this.addEventListener("page-dots:changed", (event) => this.select(event.detail.index)); if (Shopify.designMode) { this.addEventListener("shopify:block:deselect", this.startPlayer.bind(this)); this.addEventListener("shopify:block:select", (event) => { this.intersectionObserver.disconnect(); this.pausePlayer(); this.select(event.target.index, !event.detail.load); }); } } this._setupVisibility(); } async _setupVisibility() { await this.untilVisible(); if (this.hasAttribute("reveal-on-scroll")) { await this.transitionImage(this.selectedIndex); this.select(this.selectedIndex); } this.startPlayer(); } get selectedIndex() { return this.items.findIndex((item) => item.selected); } async select(index, shouldAnimate = true) { if (this.hasPendingTransition) { return; } this.hasPendingTransition = true; if (this.items[index].hasAttachedImage || !shouldAnimate) { await this.transitionImage(index, shouldAnimate); } if (this.selectedIndex !== index) { await this.items[this.selectedIndex].transitionToLeave(shouldAnimate); } if (this.pageDots) { this.pageDots.selectedIndex = index; } await this.items[index].transitionToEnter(shouldAnimate); this.hasPendingTransition = false; } async transitionImage(index, shouldAnimate = true) { const activeImage = this.imageItems.find((item) => !item.hasAttribute("hidden")), nextImage = this.imageItems.find((item) => item.id === this.items[index].getAttribute("attached-image")) || activeImage; activeImage.setAttribute("hidden", ""); nextImage.removeAttribute("hidden"); await imageLoaded(nextImage); const animation = new CustomAnimation(new CustomKeyframeEffect(nextImage, { visibility: ["hidden", "visible"], clipPath: ["inset(0 0 0 100%)", "inset(0 0 0 0)"] }, { duration: 600, easing: "cubic-bezier(1, 0, 0, 1)" })); shouldAnimate ? animation.play() : animation.finish(); } pausePlayer() { this.style.setProperty("--section-animation-play-state", "paused"); } startPlayer() { this.style.setProperty("--section-animation-play-state", "running"); } }; window.customElements.define("image-with-text", ImageWithText); // js/custom-element/section/testimonials/testimonial-item.js var TestimonialItem = class extends CustomHTMLElement { connectedCallback() { this.addEventListener("split-lines:re-split", (event) => { Array.from(event.target.children).forEach((line) => line.style.visibility = this.selected ? "visible" : "hidden"); }); } get index() { return [...this.parentNode.children].indexOf(this); } get selected() { return !this.hasAttribute("hidden"); } async transitionToLeave(shouldAnimate = true) { const textLines = await resolveAsyncIterator(this.querySelectorAll("split-lines, .testimonial__author")), animation = new CustomAnimation(new ParallelEffect(textLines.reverse().map((item, index) => { return new CustomKeyframeEffect(item, { visibility: ["visible", "hidden"], clipPath: ["inset(0 0 0 0)", "inset(0 0 100% 0)"], transform: ["translateY(0)", "translateY(100%)"] }, { duration: 350, delay: 60 * index, easing: "cubic-bezier(0.68, 0.00, 0.77, 0.00)" }); }))); shouldAnimate ? animation.play() : animation.finish(); await animation.finished; this.setAttribute("hidden", ""); } async transitionToEnter(shouldAnimate = true) { const textLines = await resolveAsyncIterator(this.querySelectorAll("split-lines, .testimonial__author")), animation = new CustomAnimation(new ParallelEffect(textLines.map((item, index) => { return new CustomKeyframeEffect(item, { visibility: ["hidden", "visible"], clipPath: ["inset(0 0 100% 0)", "inset(0 0 0px 0)"], transform: ["translateY(100%)", "translateY(0)"] }, { duration: 550, delay: 120 * index, easing: "cubic-bezier(0.23, 1, 0.32, 1)" }); }))); this.removeAttribute("hidden"); shouldAnimate ? animation.play() : animation.finish(); return animation.finished; } }; window.customElements.define("testimonial-item", TestimonialItem); // js/custom-element/section/testimonials/testimonial-list.js var TestimonialList = class extends CustomHTMLElement { connectedCallback() { this.items = Array.from(this.querySelectorAll("testimonial-item")); this.pageDots = this.querySelector("page-dots"); this.hasPendingTransition = false; if (this.items.length > 1) { this.addEventListener("swiperight", this.previous.bind(this)); this.addEventListener("swipeleft", this.next.bind(this)); this.addEventListener("prev-next:prev", this.previous.bind(this)); this.addEventListener("prev-next:next", this.next.bind(this)); this.addEventListener("page-dots:changed", (event) => this.select(event.detail.index)); if (Shopify.designMode) { this.addEventListener("shopify:block:select", (event) => { var _a; (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect(); if (event.detail.load || !event.target.selected) { this.select(event.target.index, !event.detail.load); } }); } this._blockVerticalScroll(); } if (this.hasAttribute("reveal-on-scroll")) { this._setupVisibility(); } } get selectedIndex() { return this.items.findIndex((item) => item.selected); } async _setupVisibility() { await this.untilVisible(); this.items[this.selectedIndex].transitionToEnter(); } previous() { this.select((this.selectedIndex - 1 + this.items.length) % this.items.length); } next() { this.select((this.selectedIndex + 1 + this.items.length) % this.items.length); } async select(index, shouldAnimate = true) { if (this.hasPendingTransition) { return; } this.hasPendingTransition = true; await this.items[this.selectedIndex].transitionToLeave(shouldAnimate); if (this.pageDots) { this.pageDots.selectedIndex = index; } await this.items[index].transitionToEnter(shouldAnimate); this.hasPendingTransition = false; } }; Object.assign(TestimonialList.prototype, VerticalScrollBlockerMixin); window.customElements.define("testimonial-list", TestimonialList); // js/custom-element/section/shop-the-look/shop-the-look-item.js var ShopTheLookItem = class extends HTMLElement { get index() { return [...this.parentNode.children].indexOf(this); } get selected() { return !this.hasAttribute("hidden"); } async transitionToLeave(shouldAnimate = true) { this.setAttribute("hidden", ""); const animation = new CustomAnimation(new CustomKeyframeEffect(this, { visibility: ["visible", "hidden"] }, { duration: 500 })); shouldAnimate ? animation.play() : animation.finish(); return animation.finished; } async transitionToEnter(shouldAnimate = true) { this.removeAttribute("hidden"); const dots = Array.from(this.querySelectorAll(".shop-the-look__dot")); dots.forEach((dot) => dot.style.opacity = 0); const animation = new CustomAnimation(new SequenceEffect([ new ParallelEffect(Array.from(this.querySelectorAll(".shop-the-look__image")).map((item) => { return new CustomKeyframeEffect(item, { opacity: [1, 1] }, { duration: 0 }); })), new CustomKeyframeEffect(this, { visibility: ["hidden", "visible"], zIndex: [0, 1], clipPath: ["inset(0 0 0 100%)", "inset(0 0 0 0)"] }, { duration: 500, easing: "cubic-bezier(1, 0, 0, 1)" }), new ParallelEffect(dots.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: ["scale(0)", "scale(1)"] }, { duration: 120, delay: 75 * index, easing: "ease-in-out" }); })) ])); shouldAnimate ? animation.play() : animation.finish(); await animation.finished; if (window.matchMedia(window.themeVariables.breakpoints.tabletAndUp).matches) { const firstPopover = this.querySelector(".shop-the-look__product-wrapper .shop-the-look__dot"); firstPopover == null ? void 0 : firstPopover.setAttribute("aria-expanded", "true"); } } }; window.customElements.define("shop-the-look-item", ShopTheLookItem); // js/custom-element/section/shop-the-look/shop-the-look-nav.js var ShopTheLookNav = class extends CustomHTMLElement { connectedCallback() { this.shopTheLook = this.closest("shop-the-look"); this.inTransition = false; this.pendingTransition = false; this.pendingTransitionTo = null; this.delegate.on("click", '[data-action="prev"]', () => this.shopTheLook.previous()); this.delegate.on("click", '[data-action="next"]', () => this.shopTheLook.next()); } transitionToIndex(selectedIndex, nextIndex, shouldAnimate = true) { const indexElements = Array.from(this.querySelectorAll(".shop-the-look__counter-page-transition")), currentElement = indexElements[selectedIndex], nextElement = indexElements[nextIndex]; if (this.inTransition) { this.pendingTransition = true; this.pendingTransitionTo = nextIndex; return; } this.inTransition = true; currentElement.animate({ transform: ["translateY(0)", "translateY(-100%)"] }, { duration: shouldAnimate ? 1e3 : 0, easing: "cubic-bezier(1, 0, 0, 1)" }).onfinish = () => { currentElement.setAttribute("hidden", ""); this.inTransition = false; if (this.pendingTransition && this.pendingTransitionTo !== nextIndex) { this.pendingTransition = false; this.transitionToIndex(nextIndex, this.pendingTransitionTo, shouldAnimate); this.pendingTransitionTo = null; } }; nextElement.removeAttribute("hidden"); nextElement.animate({ transform: ["translateY(100%)", "translateY(0)"] }, { duration: shouldAnimate ? 1e3 : 0, easing: "cubic-bezier(1, 0, 0, 1)" }); } }; window.customElements.define("shop-the-look-nav", ShopTheLookNav); // js/custom-element/section/shop-the-look/shop-the-look.js var ShopTheLook = class extends CustomHTMLElement { connectedCallback() { this.lookItems = Array.from(this.querySelectorAll("shop-the-look-item")); this.nav = this.querySelector("shop-the-look-nav"); this.hasPendingTransition = false; if (this.hasAttribute("reveal-on-scroll")) { this._setupVisibility(); } if (this.lookItems.length > 1 && Shopify.designMode) { this.addEventListener("shopify:block:select", async (event) => { this.intersectionObserver.disconnect(); await this.select(event.target.index, !event.detail.load); this.nav.animate({ opacity: [0, 1], transform: ["translateY(30px)", "translateY(0)"] }, { duration: 0, fill: "forwards", easing: "ease-in-out" }); }); } } get selectedIndex() { return this.lookItems.findIndex((item) => item.selected); } async _setupVisibility() { await this.untilVisible(); const images = Array.from(this.lookItems[this.selectedIndex].querySelectorAll(".shop-the-look__image")); for (let image of images) { if (image.offsetParent !== null) { await imageLoaded(image); } } await this.lookItems[this.selectedIndex].transitionToEnter(); if (this.nav) { this.nav.animate({ opacity: [0, 1], transform: ["translateY(30px)", "translateY(0)"] }, { duration: 150, fill: "forwards", easing: "ease-in-out" }); } } previous() { this.select((this.selectedIndex - 1 + this.lookItems.length) % this.lookItems.length); } next() { this.select((this.selectedIndex + 1 + this.lookItems.length) % this.lookItems.length); } async select(index, animate = true) { const currentLook = this.lookItems[this.selectedIndex], nextLook = this.lookItems[index]; if (this.hasPendingTransition) { return; } this.hasPendingTransition = true; if (currentLook !== nextLook) { this.nav.transitionToIndex(this.selectedIndex, index, animate); currentLook.transitionToLeave(); } nextLook.transitionToEnter(animate); this.hasPendingTransition = false; } }; window.customElements.define("shop-the-look", ShopTheLook); // js/custom-element/section/collection-list/collection-list.js var CollectionList = class extends CustomHTMLElement { async connectedCallback() { this.items = Array.from(this.querySelectorAll(".list-collections__item")); if (this.hasAttribute("scrollable")) { this.scroller = this.querySelector(".list-collections__scroller"); this.addEventListener("prev-next:prev", this.previous.bind(this)); this.addEventListener("prev-next:next", this.next.bind(this)); this.addEventListener("shopify:block:select", (event) => event.target.scrollIntoView({ block: "nearest", inline: "center", behavior: event.detail.load ? "auto" : "smooth" })); } if (this.hasAttribute("reveal-on-scroll")) { this._setupVisibility(); } } async _setupVisibility() { await this.untilVisible(); const prefersReducedMotion = MediaFeatures.prefersReducedMotion(); const animation = new CustomAnimation(new ParallelEffect(this.items.map((item, index) => { return new SequenceEffect([ new CustomKeyframeEffect(item.querySelector(".list-collections__item-image"), { opacity: [0, 1], transform: [`scale(${prefersReducedMotion ? 1 : 1.1})`, "scale(1)"] }, { duration: 250, delay: prefersReducedMotion ? 0 : 150 * index, easing: "cubic-bezier(0.65, 0, 0.35, 1)" }), new ParallelEffect(Array.from(item.querySelectorAll(".list-collections__item-info [reveal]")).map((textItem, subIndex) => { return new CustomKeyframeEffect(textItem, { opacity: [0, 1], clipPath: [`inset(${prefersReducedMotion ? "0 0 0 0" : "0 0 100% 0"})`, "inset(0 0 0 0)"], transform: [`translateY(${prefersReducedMotion ? 0 : "100%"})`, "translateY(0)"] }, { duration: 200, delay: prefersReducedMotion ? 0 : 150 * index + 150 * subIndex, easing: "cubic-bezier(0.5, 0.06, 0.01, 0.99)" }); })) ]); }))); this._hasSectionReloaded ? animation.finish() : animation.play(); } previous() { const directionFlip = window.themeVariables.settings.direction === "ltr" ? 1 : -1; this.scroller.scrollBy({ left: -this.items[0].clientWidth * directionFlip, behavior: "smooth" }); } next() { const directionFlip = window.themeVariables.settings.direction === "ltr" ? 1 : -1; this.scroller.scrollBy({ left: this.items[0].clientWidth * directionFlip, behavior: "smooth" }); } }; window.customElements.define("collection-list", CollectionList); // js/custom-element/section/product-list/product-list.js var ProductList = class extends CustomHTMLElement { constructor() { super(); this.productListInner = this.querySelector(".product-list__inner"); this.productItems = Array.from(this.querySelectorAll("product-item")); } connectedCallback() { this.addEventListener("prev-next:prev", this.previous.bind(this)); this.addEventListener("prev-next:next", this.next.bind(this)); if (!this.hidden && this.staggerApparition) { this._staggerProductsApparition(); } } get staggerApparition() { return this.hasAttribute("stagger-apparition"); } get apparitionAnimation() { return this._animation = this._animation || new CustomAnimation(new ParallelEffect(this.productItems.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: [`translateY(${MediaFeatures.prefersReducedMotion() ? 0 : window.innerWidth < 1e3 ? 35 : 60}px)`, "translateY(0)"] }, { duration: 600, delay: MediaFeatures.prefersReducedMotion() ? 0 : 100 * index - Math.min(3 * index * index, 100 * index), easing: "ease" }); }))); } previous(event) { const directionFlip = window.themeVariables.settings.direction === "ltr" ? 1 : -1, columnGap = parseInt(getComputedStyle(this).getPropertyValue("--product-list-column-gap")); event.target.nextElementSibling.removeAttribute("disabled"); event.target.toggleAttribute("disabled", this.productListInner.scrollLeft * directionFlip - (this.productListInner.clientWidth + columnGap) <= 0); this.productListInner.scrollBy({ left: -(this.productListInner.clientWidth + columnGap) * directionFlip, behavior: "smooth" }); } next(event) { const directionFlip = window.themeVariables.settings.direction === "ltr" ? 1 : -1, columnGap = parseInt(getComputedStyle(this).getPropertyValue("--product-list-column-gap")); event.target.previousElementSibling.removeAttribute("disabled"); event.target.toggleAttribute("disabled", this.productListInner.scrollLeft * directionFlip + (this.productListInner.clientWidth + columnGap) * 2 >= this.productListInner.scrollWidth); this.productListInner.scrollBy({ left: (this.productListInner.clientWidth + columnGap) * directionFlip, behavior: "smooth" }); } attributeChangedCallback(name) { var _a, _b; if (!this.staggerApparition) { return; } switch (name) { case "hidden": if (!this.hidden) { this.productListInner.scrollLeft = 0; this.productListInner.parentElement.scrollLeft = 0; (_a = this.querySelector(".prev-next-button--prev")) == null ? void 0 : _a.setAttribute("disabled", ""); (_b = this.querySelector(".prev-next-button--next")) == null ? void 0 : _b.removeAttribute("disabled"); this._staggerProductsApparition(); } else { this.apparitionAnimation.finish(); } } } async _staggerProductsApparition() { this.productItems.forEach((item) => item.style.opacity = 0); await this.untilVisible({ threshold: this.clientHeight > 0 ? Math.min(50 / this.clientHeight, 1) : 0 }); this.apparitionAnimation.play(); } }; __publicField(ProductList, "observedAttributes", ["hidden"]); window.customElements.define("product-list", ProductList); // js/custom-element/section/logo-list/logo-list.js var LogoList = class extends CustomHTMLElement { async connectedCallback() { this.items = Array.from(this.querySelectorAll(".logo-list__item")); this.logoListScrollable = this.querySelector(".logo-list__list"); if (this.items.length > 1) { this.addEventListener("prev-next:prev", this.previous.bind(this)); this.addEventListener("prev-next:next", this.next.bind(this)); } if (this.hasAttribute("reveal-on-scroll")) { this._setupVisibility(); } } async _setupVisibility() { await this.untilVisible({ rootMargin: "50px 0px", threshold: 0 }); const animation = new CustomAnimation(new ParallelEffect(this.items.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: [`translateY(${MediaFeatures.prefersReducedMotion() ? 0 : "30px"})`, "translateY(0)"] }, { duration: 300, delay: MediaFeatures.prefersReducedMotion() ? 0 : 100 * index, easing: "ease" }); }))); this._hasSectionReloaded ? animation.finish() : animation.play(); } previous(event) { const directionFlip = window.themeVariables.settings.direction === "ltr" ? 1 : -1; event.target.nextElementSibling.removeAttribute("disabled"); event.target.toggleAttribute("disabled", this.logoListScrollable.scrollLeft * directionFlip - (this.logoListScrollable.clientWidth + 24) <= 0); this.logoListScrollable.scrollBy({ left: -(this.logoListScrollable.clientWidth + 24) * directionFlip, behavior: "smooth" }); } next(event) { const directionFlip = window.themeVariables.settings.direction === "ltr" ? 1 : -1; event.target.previousElementSibling.removeAttribute("disabled"); event.target.toggleAttribute("disabled", this.logoListScrollable.scrollLeft * directionFlip + (this.logoListScrollable.clientWidth + 24) * 2 >= this.logoListScrollable.scrollWidth); this.logoListScrollable.scrollBy({ left: (this.logoListScrollable.clientWidth + 24) * directionFlip, behavior: "smooth" }); } }; window.customElements.define("logo-list", LogoList); // js/custom-element/section/blog/blog-post-navigation.js var BlogPostNavigation = class extends HTMLElement { connectedCallback() { window.addEventListener("scroll", throttle(this._updateProgressBar.bind(this), 15)); } get hasNextArticle() { return this.hasAttribute("has-next-article"); } _updateProgressBar() { const stickyHeaderOffset = getStickyHeaderOffset(), marginCompensation = window.matchMedia(window.themeVariables.breakpoints.pocket).matches ? 40 : 80, articleNavBoundingBox = this.getBoundingClientRect(), articleMainPartBoundingBox = this.parentElement.getBoundingClientRect(), difference = articleMainPartBoundingBox.bottom - (articleNavBoundingBox.bottom - marginCompensation), progress = Math.max(-1 * (difference / (articleMainPartBoundingBox.height + marginCompensation) - 1), 0); this.classList.toggle("is-visible", articleMainPartBoundingBox.top < stickyHeaderOffset && articleMainPartBoundingBox.bottom > stickyHeaderOffset + this.clientHeight - marginCompensation); if (this.hasNextArticle) { if (progress > 0.8) { this.classList.add("article__nav--show-next"); } else { this.classList.remove("article__nav--show-next"); } } this.style.setProperty("--transform", `${progress}`); } }; window.customElements.define("blog-post-navigation", BlogPostNavigation); // js/custom-element/section/multi-column/multi-column.js var MultiColumn = class extends CustomHTMLElement { connectedCallback() { if (!this.hasAttribute("stack")) { this.multiColumnInner = this.querySelector(".multi-column__inner"); this.addEventListener("prev-next:prev", this.previous.bind(this)); this.addEventListener("prev-next:next", this.next.bind(this)); if (Shopify.designMode) { this.addEventListener("shopify:block:select", (event) => { event.target.scrollIntoView({ inline: "center", block: "nearest", behavior: event.detail.load ? "auto" : "smooth" }); }); } } if (this.hasAttribute("stagger-apparition")) { this._setupVisibility(); } } async _setupVisibility() { await this.untilVisible({ threshold: Math.min(50 / this.clientHeight, 1) }); const prefersReducedMotion = MediaFeatures.prefersReducedMotion(); const animation = new CustomAnimation(new ParallelEffect(Array.from(this.querySelectorAll(".multi-column__item")).map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: [`translateY(${MediaFeatures.prefersReducedMotion() ? 0 : window.innerWidth < 1e3 ? 35 : 60}px)`, "translateY(0)"] }, { duration: 600, delay: prefersReducedMotion ? 0 : 100 * index, easing: "ease" }); }))); this._hasSectionReloaded ? animation.finish() : animation.play(); } previous(event) { const directionFlip = window.themeVariables.settings.direction === "ltr" ? 1 : -1, columnGap = parseInt(getComputedStyle(this).getPropertyValue("--multi-column-column-gap")); event.target.nextElementSibling.removeAttribute("disabled"); event.target.toggleAttribute("disabled", this.multiColumnInner.scrollLeft * directionFlip - (this.multiColumnInner.clientWidth + columnGap) <= 0); this.multiColumnInner.scrollBy({ left: -(this.multiColumnInner.clientWidth + columnGap) * directionFlip, behavior: "smooth" }); } next(event) { const directionFlip = window.themeVariables.settings.direction === "ltr" ? 1 : -1, columnGap = parseInt(getComputedStyle(this).getPropertyValue("--multi-column-column-gap")); event.target.previousElementSibling.removeAttribute("disabled"); event.target.toggleAttribute("disabled", this.multiColumnInner.scrollLeft * directionFlip + (this.multiColumnInner.clientWidth + columnGap) * 2 >= this.multiColumnInner.scrollWidth); this.multiColumnInner.scrollBy({ left: (this.multiColumnInner.clientWidth + columnGap) * directionFlip, behavior: "smooth" }); } }; window.customElements.define("multi-column", MultiColumn); // js/custom-element/section/gallery/gallery-list.js var GalleryList = class extends HTMLElement { connectedCallback() { this.listItems = Array.from(this.querySelectorAll("gallery-item")); this.scrollBarElement = this.querySelector(".gallery__progress-bar"); this.listWrapperElement = this.querySelector(".gallery__list-wrapper"); if (this.listItems.length > 1) { this.addEventListener("scrollable-content:progress", this._updateProgressBar.bind(this)); this.addEventListener("prev-next:prev", this.previous.bind(this)); this.addEventListener("prev-next:next", this.next.bind(this)); if (Shopify.designMode) { this.addEventListener("shopify:block:select", (event) => this.select(event.target.index, !event.detail.load)); } } } previous() { this.select([...this.listItems].reverse().find((item) => item.isOnLeftHalfPartOfScreen).index); } next() { this.select(this.listItems.findIndex((item) => item.isOnRightHalfPartOfScreen)); } select(index, animate = true) { const boundingRect = this.listItems[index].getBoundingClientRect(); this.listWrapperElement.scrollBy({ behavior: animate ? "smooth" : "auto", left: Math.floor(boundingRect.left - window.innerWidth / 2 + boundingRect.width / 2) }); } _updateProgressBar(event) { var _a; (_a = this.scrollBarElement) == null ? void 0 : _a.style.setProperty("--transform", `${event.detail.progress}%`); } }; window.customElements.define("gallery-list", GalleryList); // js/custom-element/section/gallery/gallery-item.js var GalleryItem = class extends HTMLElement { get index() { return [...this.parentNode.children].indexOf(this); } get isOnRightHalfPartOfScreen() { if (window.themeVariables.settings.direction === "ltr") { return this.getBoundingClientRect().left > window.innerWidth / 2; } else { return this.getBoundingClientRect().right < window.innerWidth / 2; } } get isOnLeftHalfPartOfScreen() { if (window.themeVariables.settings.direction === "ltr") { return this.getBoundingClientRect().right < window.innerWidth / 2; } else { return this.getBoundingClientRect().left > window.innerWidth / 2; } } }; window.customElements.define("gallery-item", GalleryItem); // js/custom-element/section/image-with-text-overlay/image-with-text-overlay.js var ImageWithTextOverlay = class extends CustomHTMLElement { connectedCallback() { if (this.hasAttribute("parallax") && !MediaFeatures.prefersReducedMotion()) { this._hasPendingRaF = false; this._onScrollListener = this._onScroll.bind(this); window.addEventListener("scroll", this._onScrollListener); } if (this.hasAttribute("reveal-on-scroll")) { this._setupVisibility(); } } disconnectedCallback() { super.disconnectedCallback(); if (this._onScrollListener) { window.removeEventListener("scroll", this._onScrollListener); } } async _setupVisibility() { await this.untilVisible(); const image = this.querySelector(".image-overlay__image"), headings = await resolveAsyncIterator(this.querySelectorAll("split-lines")), prefersReducedMotion = MediaFeatures.prefersReducedMotion(); await imageLoaded(image); const innerEffect = [ new CustomKeyframeEffect(image, { opacity: [0, 1], transform: [`scale(${prefersReducedMotion ? 1 : 1.1})`, "scale(1)"] }, { duration: 500, easing: "cubic-bezier(0.65, 0, 0.35, 1)" }), new ParallelEffect(headings.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 0.2, 1], transform: [`translateY(${prefersReducedMotion ? 0 : "100%"})`, "translateY(0)"], clipPath: [`inset(${prefersReducedMotion ? "0 0 0 0" : "0 0 100% 0"})`, "inset(0 0 0 0)"] }, { duration: 300, delay: prefersReducedMotion ? 0 : 120 * index, easing: "cubic-bezier(0.5, 0.06, 0.01, 0.99)" }); })), new CustomKeyframeEffect(this.querySelector(".image-overlay__text-container"), { opacity: [0, 1] }, { duration: 300 }) ]; const animation = prefersReducedMotion ? new CustomAnimation(new ParallelEffect(innerEffect)) : new CustomAnimation(new SequenceEffect(innerEffect)); this._hasSectionReloaded ? animation.finish() : animation.play(); } _onScroll() { if (this._hasPendingRaF) { return; } this._hasPendingRaF = true; requestAnimationFrame(() => { const boundingRect = this.getBoundingClientRect(), speedFactor = 3, contentElement = this.querySelector(".image-overlay__content-wrapper"), imageElement = this.querySelector(".image-overlay__image"), boundingRectBottom = boundingRect.bottom, boundingRectHeight = boundingRect.height, stickyHeaderOffset = getStickyHeaderOffset(); if (contentElement) { contentElement.style.opacity = Math.max(1 - speedFactor * (1 - Math.min(boundingRectBottom / boundingRectHeight, 1)), 0).toString(); } if (imageElement) { imageElement.style.transform = `translateY(${100 - Math.max(1 - (1 - Math.min(boundingRectBottom / (boundingRectHeight + stickyHeaderOffset), 1)), 0) * 100}px)`; } this._hasPendingRaF = false; }); } }; window.customElements.define("image-with-text-overlay", ImageWithTextOverlay); // js/custom-element/section/image-with-text-block/image-with-text-block.js var ImageWithTextBlock = class extends CustomHTMLElement { async connectedCallback() { if (this.hasAttribute("reveal-on-scroll")) { this._setupVisibility(); } } async _setupVisibility() { await this.untilVisible(); const images = Array.from(this.querySelectorAll(".image-with-text-block__image[reveal]")), headings = await resolveAsyncIterator(this.querySelectorAll("split-lines")), prefersReducedMotion = MediaFeatures.prefersReducedMotion(); for (const image of images) { if (image.offsetParent !== null) { await imageLoaded(image); } } const innerEffect = [ new ParallelEffect(images.map((item) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: [`scale(${prefersReducedMotion ? 1 : 1.1})`, "scale(1)"] }, { duration: 500, easing: "cubic-bezier(0.65, 0, 0.35, 1)" }); })), new CustomKeyframeEffect(this.querySelector(".image-with-text-block__content"), { opacity: [0, 1], transform: [`translateY(${prefersReducedMotion ? 0 : "60px"})`, "translateY(0)"] }, { duration: 150, easing: "ease-in-out" }), new ParallelEffect(headings.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 0.2, 1], transform: [`translateY(${prefersReducedMotion ? 0 : "100%"})`, "translateY(0)"], clipPath: [`inset(${prefersReducedMotion ? "0 0 0 0" : "0 0 100% 0"})`, "inset(0 0 0 0)"] }, { duration: 300, delay: prefersReducedMotion ? 0 : 120 * index, easing: "cubic-bezier(0.5, 0.06, 0.01, 0.99)" }); })), new CustomKeyframeEffect(this.querySelector(".image-with-text-block__text-container"), { opacity: [0, 1] }, { duration: 300 }) ]; const animation = prefersReducedMotion ? new CustomAnimation(new ParallelEffect(innerEffect)) : new CustomAnimation(new SequenceEffect(innerEffect)); this._hasSectionReloaded ? animation.finish() : animation.play(); } }; window.customElements.define("image-with-text-block", ImageWithTextBlock); // js/custom-element/section/blog/article-list.js var ArticleList = class extends CustomHTMLElement { async connectedCallback() { this.articleItems = Array.from(this.querySelectorAll(".article-item")); if (this.staggerApparition) { await this.untilVisible({ threshold: this.clientHeight > 0 ? Math.min(50 / this.clientHeight, 1) : 0 }); const animation = new CustomAnimation(new ParallelEffect(this.articleItems.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: [`translateY(${MediaFeatures.prefersReducedMotion() ? 0 : window.innerWidth < 1e3 ? 35 : 60}px)`, "translateY(0)"] }, { duration: 600, delay: MediaFeatures.prefersReducedMotion() ? 0 : 100 * index - Math.min(3 * index * index, 100 * index), easing: "ease" }); }))); this._hasSectionReloaded ? animation.finish() : animation.play(); } } get staggerApparition() { return this.hasAttribute("stagger-apparition"); } }; window.customElements.define("article-list", ArticleList); // js/custom-element/section/blog/blog-post-header.js var BlogPostHeader = class extends HTMLElement { async connectedCallback() { const image = this.querySelector(".article__image"); if (MediaFeatures.prefersReducedMotion()) { image.removeAttribute("reveal"); } else { await imageLoaded(image); image.animate({ opacity: [0, 1], transform: ["scale(1.1)", "scale(1)"] }, { duration: 500, fill: "forwards", easing: "cubic-bezier(0.65, 0, 0.35, 1)" }); } } }; window.customElements.define("blog-post-header", BlogPostHeader); // js/custom-element/section/search/predictive-search-input.js var PredictiveSearchInput = class extends HTMLInputElement { connectedCallback() { this.addEventListener("click", () => document.getElementById(this.getAttribute("aria-controls")).open = true); } }; window.customElements.define("predictive-search-input", PredictiveSearchInput, { extends: "input" }); // js/custom-element/ui/drawer.js var DrawerContent = class extends OpenableElement { connectedCallback() { super.connectedCallback(); if (this.hasAttribute("reverse-breakpoint")) { this.originalDirection = this.classList.contains("drawer--from-left") ? "left" : "right"; const matchMedia2 = window.matchMedia(this.getAttribute("reverse-breakpoint")); matchMedia2.addListener(this._checkReverseOpeningDirection.bind(this)); this._checkReverseOpeningDirection(matchMedia2); } this.delegate.on("click", ".drawer__overlay", () => this.open = false); } attributeChangedCallback(name, oldValue, newValue) { super.attributeChangedCallback(name, oldValue, newValue); switch (name) { case "open": document.documentElement.classList.toggle("lock-all", this.open); } } _checkReverseOpeningDirection(match) { this.classList.remove("drawer--from-left"); if (this.originalDirection === "left" && !match.matches || this.originalDirection !== "left" && match.matches) { this.classList.add("drawer--from-left"); } } }; window.customElements.define("drawer-content", DrawerContent); // js/custom-element/section/search/predictive-search-drawer.js var PredictiveSearchDrawer = class extends DrawerContent { connectedCallback() { super.connectedCallback(); this.inputElement = this.querySelector('[name="q"]'); this.drawerContentElement = this.querySelector(".drawer__content"); this.drawerFooterElement = this.querySelector(".drawer__footer"); this.loadingStateElement = this.querySelector(".predictive-search__loading-state"); this.resultsElement = this.querySelector(".predictive-search__results"); this.menuListElement = this.querySelector(".predictive-search__menu-list"); this.delegate.on("input", '[name="q"]', this._debounce(this._onSearch.bind(this), 200)); this.delegate.on("click", '[data-action="reset-search"]', this._startNewSearch.bind(this)); } async _onSearch(event, target) { if (event.key === "Enter") { return; } if (this.abortController) { this.abortController.abort(); } this.drawerContentElement.classList.remove("drawer__content--center"); this.drawerFooterElement.hidden = true; if (target.value === "") { this.loadingStateElement.hidden = true; this.resultsElement.hidden = true; this.menuListElement ? this.menuListElement.hidden = false : ""; } else { this.drawerContentElement.classList.add("drawer__content--center"); this.loadingStateElement.hidden = false; this.resultsElement.hidden = true; this.menuListElement ? this.menuListElement.hidden = true : ""; let searchResults = {}; try { this.abortController = new AbortController(); // if (this._supportPredictiveApi()) {//header的搜索功能 if (true) { searchResults = await this._doPredictiveSearch(target.value); } else { searchResults = await this._doLiquidSearch(target.value); } } catch (e) { if (e.name === "AbortError") { return; } } this.loadingStateElement.hidden = true; this.resultsElement.hidden = false; this.menuListElement ? this.menuListElement.hidden = true : ""; if (searchResults.hasResults) { this.drawerFooterElement.hidden = false; this.drawerContentElement.classList.remove("drawer__content--center"); } this.resultsElement.innerHTML = searchResults.html; } } async _doPredictiveSearch(term) { const response = await fetch(`${window.themeVariables.routes.predictiveSearchUrl}?q=${encodeURIComponent(term)}&resources[limit]=10&resources[type]=${window.themeVariables.settings.searchMode}&resources[options[unavailable_products]]=${window.themeVariables.settings.searchUnavailableProducts}&resources[options[fields]]=title,body,product_type,variants.title,variants.sku,vendor§ion_id=predictive-search`, { signal: this.abortController.signal }); const div = document.createElement("div"); div.innerHTML = await response.text(); return { hasResults: div.querySelector(".predictive-search__results-categories") !== null, html: div.firstElementChild.innerHTML }; } async _doLiquidSearch(term) { let promises = [], supportedTypes = window.themeVariables.settings.searchMode.split(",").filter((item) => item !== "collection"); supportedTypes.forEach((searchType) => { promises.push(fetch(`${window.themeVariables.routes.searchUrl}?section_id=predictive-search-compatibility&q=${term}&type=${searchType}&options[unavailable_products]=${window.themeVariables.settings.searchUnavailableProducts}&options[prefix]=last`, { signal: this.abortController.signal })); }); let results = await Promise.all(promises), resultsByCategories = {}; for (const [index, value] of results.entries()) { const resultAsText = await value.text(); const fakeDiv = document.createElement("div"); fakeDiv.innerHTML = resultAsText; fakeDiv.innerHTML = fakeDiv.firstElementChild.innerHTML; if (fakeDiv.childElementCount > 0) { resultsByCategories[supportedTypes[index]] = fakeDiv.innerHTML; } } if (Object.keys(resultsByCategories).length > 0) { const entries = Object.entries(resultsByCategories), keys = Object.keys(resultsByCategories); let html = `
`; for (let [type, value] of entries) { html += ` `; } html += `
`; html += '
'; for (let [type, value] of entries) { html += `
${value}
`; } html += "
"; return { hasResults: true, html }; } else { return { hasResults: false, html: `

${window.themeVariables.strings.searchNoResults}

` }; } } _startNewSearch() { this.inputElement.value = ""; this.inputElement.focus(); const event = new Event("input", { bubbles: true, cancelable: true }); this.inputElement.dispatchEvent(event); } _supportPredictiveApi() { const shopifyFeatureRequests = JSON.parse(document.getElementById("shopify-features").innerHTML); return shopifyFeatureRequests["predictiveSearch"]; } _debounce(fn, delay3) { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay3); }; } }; window.customElements.define("predictive-search-drawer", PredictiveSearchDrawer); // js/custom-element/section/timeline/timeline.js var Timeline = class extends HTMLElement { connectedCallback() { this.prevNextButtons = this.querySelector("prev-next-buttons"); this.pageDots = this.querySelector("page-dots"); this.scrollBarElement = this.querySelector(".timeline__progress-bar"); this.listWrapperElement = this.querySelector(".timeline__list-wrapper"); this.listItemElements = Array.from(this.querySelectorAll(".timeline__item")); this.isScrolling = false; if (this.listItemElements.length > 1) { this.addEventListener("prev-next:prev", this.previous.bind(this)); this.addEventListener("prev-next:next", this.next.bind(this)); this.addEventListener("page-dots:changed", (event) => this.select(event.detail.index)); if (Shopify.designMode) { this.addEventListener("shopify:block:select", (event) => { this.select([...event.target.parentNode.children].indexOf(event.target), !event.detail.load); }); } this.itemIntersectionObserver = new IntersectionObserver(this._onItemObserved.bind(this), { threshold: 0.4 }); const mediaQuery = window.matchMedia(window.themeVariables.breakpoints.pocket); mediaQuery.addListener(this._onMediaChanged.bind(this)); this._onMediaChanged(mediaQuery); } } get selectedIndex() { return this.listItemElements.findIndex((item) => !item.hasAttribute("hidden")); } previous() { this.select(Math.max(0, this.selectedIndex - 1)); } next() { this.select(Math.min(this.selectedIndex + 1, this.listItemElements.length - 1)); } select(index, animate = true) { const listItemElement = this.listItemElements[index], boundingRect = listItemElement.getBoundingClientRect(); if (animate) { this.isScrolling = true; setTimeout(() => this.isScrolling = false, 800); } if (window.matchMedia(window.themeVariables.breakpoints.pocket).matches) { this.listWrapperElement.scrollTo({ behavior: animate ? "smooth" : "auto", left: this.listItemElements[0].clientWidth * index }); } else { this.listWrapperElement.scrollBy({ behavior: animate ? "smooth" : "auto", left: Math.floor(boundingRect.left - window.innerWidth / 2 + boundingRect.width / 2) }); } this._onItemSelected(index); } _onItemSelected(index) { var _a; const listItemElement = this.listItemElements[index]; listItemElement.removeAttribute("hidden", "false"); getSiblings(listItemElement).forEach((item) => item.setAttribute("hidden", "")); this.prevNextButtons.isPrevDisabled = index === 0; this.prevNextButtons.isNextDisabled = index === this.listItemElements.length - 1; this.pageDots.selectedIndex = index; (_a = this.scrollBarElement) == null ? void 0 : _a.style.setProperty("--transform", `${100 / (this.listItemElements.length - 1) * index}%`); } _onItemObserved(entries) { if (this.isScrolling) { return; } entries.forEach((entry) => { if (entry.isIntersecting) { this._onItemSelected([...entry.target.parentNode.children].indexOf(entry.target)); } }); } _onMediaChanged(event) { if (event.matches) { this.listItemElements.forEach((item) => this.itemIntersectionObserver.observe(item)); } else { this.listItemElements.forEach((item) => this.itemIntersectionObserver.unobserve(item)); } } }; window.customElements.define("time-line", Timeline); // js/custom-element/section/press/press-list.js var PressList = class extends CustomHTMLElement { connectedCallback() { this.pressItemsWrapper = this.querySelector(".press-list__wrapper"); this.pressItems = Array.from(this.querySelectorAll("press-item")); this.pageDots = this.querySelector("page-dots"); if (this.pressItems.length > 1) { if (Shopify.designMode) { this.addEventListener("shopify:block:select", (event) => { var _a; (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect(); if (event.detail.load || !event.target.selected) { this.select(event.target.index, !event.detail.load); } }); } this.pressItemsWrapper.addEventListener("swiperight", this.previous.bind(this)); this.pressItemsWrapper.addEventListener("swipeleft", this.next.bind(this)); this.addEventListener("page-dots:changed", (event) => this.select(event.detail.index)); this._blockVerticalScroll(); } if (this.hasAttribute("reveal-on-scroll")) { this._setupVisibility(); } } async _setupVisibility() { await this.untilVisible(); this.pressItems[this.selectedIndex].transitionToEnter(); } get selectedIndex() { return this.pressItems.findIndex((item) => item.selected); } previous() { this.select((this.selectedIndex - 1 + this.pressItems.length) % this.pressItems.length); } next() { this.select((this.selectedIndex + 1 + this.pressItems.length) % this.pressItems.length); } async select(index, shouldAnimate = true) { const previousItem = this.pressItems[this.selectedIndex], newItem = this.pressItems[index]; await previousItem.transitionToLeave(shouldAnimate); this.pageDots.selectedIndex = index; await newItem.transitionToEnter(shouldAnimate); } }; Object.assign(PressList.prototype, VerticalScrollBlockerMixin); window.customElements.define("press-list", PressList); // js/custom-element/section/press/press-item.js var PressItem = class extends HTMLElement { connectedCallback() { this.addEventListener("split-lines:re-split", (event) => { Array.from(event.target.children).forEach((line) => line.style.visibility = this.selected ? "visible" : "hidden"); }); } get index() { return [...this.parentNode.children].indexOf(this); } get selected() { return !this.hasAttribute("hidden"); } async transitionToLeave(shouldAnimate = true) { const textLines = await resolveAsyncIterator(this.querySelectorAll("split-lines")), animation = new CustomAnimation(new ParallelEffect(textLines.reverse().map((item, index) => { return new CustomKeyframeEffect(item, { visibility: ["visible", "hidden"], clipPath: ["inset(0 0 0 0)", "inset(0 0 100% 0)"], transform: ["translateY(0)", "translateY(100%)"] }, { duration: 350, delay: 60 * index, easing: "cubic-bezier(0.68, 0.00, 0.77, 0.00)" }); }))); shouldAnimate ? animation.play() : animation.finish(); await animation.finished; this.setAttribute("hidden", ""); } async transitionToEnter(shouldAnimate = true) { this.removeAttribute("hidden"); const textLines = await resolveAsyncIterator(this.querySelectorAll("split-lines, .testimonial__author")), animation = new CustomAnimation(new ParallelEffect(textLines.map((item, index) => { return new CustomKeyframeEffect(item, { visibility: ["hidden", "visible"], clipPath: ["inset(0 0 100% 0)", "inset(0 0 0px 0)"], transform: ["translateY(100%)", "translateY(0)"] }, { duration: 550, delay: 120 * index, easing: "cubic-bezier(0.23, 1, 0.32, 1)" }); }))); shouldAnimate ? animation.play() : animation.finish(); return animation.finished; } }; window.customElements.define("press-item", PressItem); // js/custom-element/section/header/desktop-navigation.js var DesktopNavigation = class extends CustomHTMLElement { connectedCallback() { this.openingTimeout = null; this.currentMegaMenu = null; this.delegate.on("mouseenter", ".has-dropdown", (event, target) => { if (event.target === target && event.relatedTarget !== null) { this.openDropdown(target); } }, true); this.delegate.on("click", ".header__linklist-link[aria-expanded], .nav-dropdown__link[aria-expanded]", (event, target) => { if (window.matchMedia("(hover: hover)").matches || target.getAttribute("aria-expanded") === "true") { return; } event.preventDefault(); this.openDropdown(target.parentElement); }); this.delegate.on("shopify:block:select", (event) => this.openDropdown(event.target.parentElement)); this.delegate.on("shopify:block:deselect", (event) => this.closeDropdown(event.target.parentElement)); } openDropdown(parentElement) { const menuItem = parentElement.querySelector("[aria-controls]"), dropdown = parentElement.querySelector(`#${menuItem.getAttribute("aria-controls")}`); this.currentMegaMenu = dropdown.classList.contains("mega-menu") ? dropdown : null; let openingTimeout = setTimeout(() => { if (menuItem.getAttribute("aria-expanded") === "true") { return; } menuItem.setAttribute("aria-expanded", "true"); dropdown.removeAttribute("hidden"); if (dropdown.classList.contains("mega-menu") && !MediaFeatures.prefersReducedMotion()) { const items = Array.from(dropdown.querySelectorAll(".mega-menu__column, .mega-menu__image-push")); items.forEach((item) => { item.getAnimations().forEach((animation2) => animation2.cancel()); item.style.opacity = 0; }); const animation = new CustomAnimation(new ParallelEffect(items.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: ["translateY(20px)", "translateY(0)"] }, { duration: 250, delay: 100 + 60 * index, easing: "cubic-bezier(0.65, 0, 0.35, 1)" }); }))); animation.play(); } const leaveListener = (event) => { if (event.relatedTarget !== null) { this.closeDropdown(parentElement); parentElement.removeEventListener("mouseleave", leaveListener); } }; parentElement.addEventListener("mouseleave", leaveListener); openingTimeout = null; this.dispatchEvent(new CustomEvent("desktop-nav:dropdown:open", { bubbles: true })); }, 100); parentElement.addEventListener("mouseleave", () => { if (openingTimeout) { clearTimeout(openingTimeout); } }, { once: true }); } closeDropdown(parentElement) { const menuItem = parentElement.querySelector("[aria-controls]"), dropdown = parentElement.querySelector(`#${menuItem.getAttribute("aria-controls")}`); requestAnimationFrame(() => { dropdown.classList.add("is-closing"); menuItem.setAttribute("aria-expanded", "false"); setTimeout(() => { dropdown.setAttribute("hidden", ""); clearTimeout(this.openingTimeout); dropdown.classList.remove("is-closing"); }, dropdown.classList.contains("mega-menu") && this.currentMegaMenu !== dropdown ? 250 : 0); this.dispatchEvent(new CustomEvent("desktop-nav:dropdown:close", { bubbles: true })); }); } }; window.customElements.define("desktop-navigation", DesktopNavigation); // js/custom-element/section/header/mobile-navigation.js var MobileNavigation = class extends DrawerContent { get apparitionAnimation() { if (this._apparitionAnimation) { return this._apparitionAnimation; } if (!MediaFeatures.prefersReducedMotion()) { const navItems = Array.from(this.querySelectorAll('.mobile-nav__item[data-level="1"]')), effects = []; effects.push(new ParallelEffect(navItems.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: ["translateX(-40px)", "translateX(0)"] }, { duration: 300, delay: 300 + 120 * index - Math.min(2 * index * index, 120 * index), easing: "cubic-bezier(0.25, 1, 0.5, 1)" }); }))); const bottomBar = this.querySelector(".drawer__footer"); if (bottomBar) { effects.push(new CustomKeyframeEffect(bottomBar, { opacity: [0, 1], transform: ["translateY(100%)", "translateY(0)"] }, { duration: 300, delay: 500 + Math.max(125 * navItems.length - 25 * navItems.length, 25), easing: "cubic-bezier(0.25, 1, 0.5, 1)" })); } return this._apparitionAnimation = new CustomAnimation(new ParallelEffect(effects)); } } attributeChangedCallback(name, oldValue, newValue) { super.attributeChangedCallback(name, oldValue, newValue); switch (name) { case "open": if (this.open && this.apparitionAnimation) { Array.from(this.querySelectorAll('.mobile-nav__item[data-level="1"], .drawer__footer')).forEach((item) => item.style.opacity = 0); this.apparitionAnimation.play(); } triggerEvent(this, this.open ? "mobile-nav:open" : "mobile-nav:close"); } } }; window.customElements.define("mobile-navigation", MobileNavigation); // js/custom-element/section/header/store-header.js var StoreHeader = class extends CustomHTMLElement { connectedCallback() { if (window.ResizeObserver) { this.resizeObserver = new ResizeObserver(this._updateCustomProperties.bind(this)); this.resizeObserver.observe(this); this.resizeObserver.observe(this.querySelector(".header__wrapper")); } if (this.isTransparent) { this.isTransparencyDetectionLocked = false; this.delegate.on("desktop-nav:dropdown:open", () => this.lockTransparency = true); this.delegate.on("desktop-nav:dropdown:close", () => this.lockTransparency = false); this.rootDelegate.on("mobile-nav:open", () => this.lockTransparency = true); this.rootDelegate.on("mobile-nav:close", () => this.lockTransparency = false); this.delegate.on("mouseenter", this._checkTransparentHeader.bind(this), true); this.delegate.on("mouseleave", this._checkTransparentHeader.bind(this)); if (this.isSticky) { this._checkTransparentHeader(); this._onWindowScrollListener = throttle(this._checkTransparentHeader.bind(this), 100); window.addEventListener("scroll", this._onWindowScrollListener); } } } disconnectedCallback() { super.disconnectedCallback(); if (window.ResizeObserver) { this.resizeObserver.disconnect(); } if (this.isTransparent && this.isSticky) { window.removeEventListener("scroll", this._onWindowScrollListener); } } get isSticky() { return this.hasAttribute("sticky"); } get isTransparent() { return this.hasAttribute("transparent"); } get transparentHeaderThreshold() { return 25; } set lockTransparency(value) { this.isTransparencyDetectionLocked = value; this._checkTransparentHeader(); } _updateCustomProperties(entries) { entries.forEach((entry) => { if (entry.target === this) { const height = entry.borderBoxSize ? entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.borderBoxSize.blockSize : entry.target.clientHeight; document.documentElement.style.setProperty("--header-height", `${height}px`); } if (entry.target.classList.contains("header__wrapper")) { const heightWithoutNav = entry.borderBoxSize ? entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.borderBoxSize.blockSize : entry.target.clientHeight; document.documentElement.style.setProperty("--header-height-without-bottom-nav", `${heightWithoutNav}px`); } }); } _checkTransparentHeader(event) { if (this.isTransparencyDetectionLocked || window.scrollY > this.transparentHeaderThreshold || event && event.type === "mouseenter") { this.classList.remove("header--transparent"); } else { this.classList.add("header--transparent"); } } }; window.customElements.define("store-header", StoreHeader); // js/custom-element/section/product/image-zoom.js var PhotoSwipeUi = class { constructor(pswp) { this.photoSwipeInstance = pswp; this.delegate = new main_default(this.photoSwipeInstance.scrollWrap); this.maxSpreadZoom = window.themeVariables.settings.mobileZoomFactor || 2; this.pswpUi = this.photoSwipeInstance.scrollWrap.querySelector(".pswp__ui"); this.delegate.on("click", '[data-action="pswp-close"]', this._close.bind(this)); this.delegate.on("click", '[data-action="pswp-prev"]', this._goToPrev.bind(this)); this.delegate.on("click", '[data-action="pswp-next"]', this._goToNext.bind(this)); this.delegate.on("click", '[data-action="pswp-move-to"]', this._moveTo.bind(this)); this.photoSwipeInstance.listen("close", this._onPswpClosed.bind(this)); this.photoSwipeInstance.listen("doubleTap", this._onPswpDoubleTap.bind(this)); this.photoSwipeInstance.listen("beforeChange", this._onPswpBeforeChange.bind(this)); this.photoSwipeInstance.listen("initialZoomInEnd", this._onPswpInitialZoomInEnd.bind(this)); this.photoSwipeInstance.listen("initialZoomOut", this._onPswpInitialZoomOut.bind(this)); this.photoSwipeInstance.listen("parseVerticalMargin", this._onPswpParseVerticalMargin.bind(this)); this.delegate.on("pswpTap", ".pswp__img", this._onPswpTap.bind(this)); } init() { const prevNextButtons = this.pswpUi.querySelector(".pswp__prev-next-buttons"), dotsNavWrapper = this.pswpUi.querySelector(".pswp__dots-nav-wrapper"); if (this.photoSwipeInstance.items.length <= 1) { prevNextButtons.style.display = "none"; dotsNavWrapper.style.display = "none"; return; } prevNextButtons.style.display = ""; dotsNavWrapper.style.display = ""; let dotsNavHtml = ""; this.photoSwipeInstance.items.forEach((item, index) => { dotsNavHtml += ` `; }); dotsNavWrapper.querySelector(".pswp__dots-nav-wrapper .dots-nav").innerHTML = dotsNavHtml; } _close() { this.photoSwipeInstance.close(); } _goToPrev() { this.photoSwipeInstance.prev(); } _goToNext() { this.photoSwipeInstance.next(); } _moveTo(event, target) { this.photoSwipeInstance.goTo([...target.parentNode.children].indexOf(target)); } _onPswpClosed() { this.delegate.off("pswpTap"); } _onPswpDoubleTap(point) { const initialZoomLevel = this.photoSwipeInstance.currItem.initialZoomLevel; if (this.photoSwipeInstance.getZoomLevel() !== initialZoomLevel) { this.photoSwipeInstance.zoomTo(initialZoomLevel, point, 333); } else { this.photoSwipeInstance.zoomTo(initialZoomLevel < 0.7 ? 1 : this.maxSpreadZoom, point, 333); } } _onPswpTap(event) { if (event.detail.pointerType === "mouse") { this.photoSwipeInstance.toggleDesktopZoom(event.detail.releasePoint); } } _onPswpBeforeChange() { if (this.photoSwipeInstance.items.length <= 1) { return; } const activeDot = this.photoSwipeInstance.scrollWrap.querySelector(`.dots-nav__item:nth-child(${this.photoSwipeInstance.getCurrentIndex() + 1})`); activeDot.setAttribute("aria-current", "true"); getSiblings(activeDot).forEach((item) => item.removeAttribute("aria-current")); } _onPswpInitialZoomInEnd() { var _a; (_a = this.pswpUi) == null ? void 0 : _a.classList.remove("pswp__ui--hidden"); } _onPswpInitialZoomOut() { var _a; (_a = this.pswpUi) == null ? void 0 : _a.classList.add("pswp__ui--hidden"); } _onPswpParseVerticalMargin(item) { item.vGap.bottom = this.photoSwipeInstance.items.length <= 1 || window.matchMedia(window.themeVariables.breakpoints.lapAndUp).matches ? 0 : 60; } }; var ProductImageZoom = class extends OpenableElement { connectedCallback() { super.connectedCallback(); this.mediaElement = this.closest(".product__media"); this.maxSpreadZoom = window.themeVariables.settings.mobileZoomFactor || 2; LibraryLoader.load("photoswipe"); } disconnectedCallback() { var _a; super.disconnectedCallback(); (_a = this.photoSwipeInstance) == null ? void 0 : _a.destroy(); } async attributeChangedCallback(name, oldValue, newValue) { super.attributeChangedCallback(name, oldValue, newValue); switch (name) { case "open": if (this.open) { await LibraryLoader.load("photoswipe"); this._openPhotoSwipe(); } } } async _openPhotoSwipe() { const items = await this._buildItems(); this.photoSwipeInstance = new window.ThemePhotoSwipe(this, PhotoSwipeUi, items, { index: items.findIndex((item) => item.selected), maxSpreadZoom: this.maxSpreadZoom, loop: false, allowPanToNext: false, closeOnScroll: false, closeOnVerticalDrag: MediaFeatures.supportsHover(), showHideOpacity: true, arrowKeys: true, history: false, getThumbBoundsFn: () => { const thumbnail = this.mediaElement.querySelector(".product__media-item.is-selected"), pageYScroll = window.pageYOffset || document.documentElement.scrollTop, rect = thumbnail.getBoundingClientRect(); return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }; }, getDoubleTapZoom: (isMouseClick, item) => { if (isMouseClick) { return item.w > item.h ? 1.6 : 1; } else { return item.initialZoomLevel < 0.7 ? 1 : 1.33; } } }); let lastWidth = null; this.photoSwipeInstance.updateSize = new Proxy(this.photoSwipeInstance.updateSize, { apply: (target, thisArg, argArray) => { if (lastWidth !== window.innerWidth) { target(arguments); lastWidth = window.innerWidth; } } }); this.photoSwipeInstance.listen("close", () => { this.open = false; }); this.photoSwipeInstance.init(); } async _buildItems() { const activeImages = Array.from(this.mediaElement.querySelectorAll('.product__media-item[data-media-type="image"]:not(.is-filtered)')), product = await ProductLoader.load(this.getAttribute("product-handle")); return Promise.resolve(activeImages.map((item) => { const matchedMedia = product["media"].find((media) => media.id === parseInt(item.getAttribute("data-media-id"))), supportedSizes = getSupportedSizes(matchedMedia, [200, 300, 400, 500, 600, 700, 800, 1e3, 1200, 1400, 1600, 1800, 2e3, 2200, 2400, 2600, 2800, 3e3]), desiredWidth = Math.min(supportedSizes[supportedSizes.length - 1], window.innerWidth); return { selected: item.classList.contains("is-selected"), src: getSizedMediaUrl(matchedMedia, `${Math.ceil(Math.min(desiredWidth * window.devicePixelRatio * this.maxSpreadZoom, 3e3))}x`), msrc: item.firstElementChild.currentSrc, originalMedia: matchedMedia, w: desiredWidth, h: parseInt(desiredWidth / matchedMedia["aspect_ratio"]) }; })); } }; window.customElements.define("product-image-zoom", ProductImageZoom); // js/custom-element/section/product/inventory.js var ProductInventory = class extends HTMLElement { connectedCallback() { var _a; const scriptTag = this.querySelector("script"); if (!scriptTag) { return; } this.inventories = JSON.parse(scriptTag.innerHTML); (_a = document.getElementById(this.getAttribute("form-id"))) == null ? void 0 : _a.addEventListener("variant:changed", this._onVariantChanged.bind(this)); } _onVariantChanged(event) { var _a; (_a = this.querySelector("span")) == null ? void 0 : _a.remove(); if (event.detail.variant && this.inventories[event.detail.variant["id"]] !== "") { this.hidden = false; this.insertAdjacentHTML("afterbegin", this.inventories[event.detail.variant["id"]]); } else { this.hidden = true; } } }; window.customElements.define("product-inventory", ProductInventory); // js/custom-element/section/product/payment-container.js var PaymentContainer = class extends HTMLElement { connectedCallback() { var _a; (_a = document.getElementById(this.getAttribute("form-id"))) == null ? void 0 : _a.addEventListener("variant:changed", this._onVariantChanged.bind(this)); if (Shopify.designMode && Shopify.PaymentButton) { Shopify.PaymentButton.init(); } } _onVariantChanged(event) { this._updateAddToCartButton(event.detail.variant); this._updateDynamicCheckoutButton(event.detail.variant); } _updateAddToCartButton(variant) { let addToCartButtonElement = this.querySelector("[data-product-add-to-cart-button]"); if (!addToCartButtonElement) { return; } let addToCartButtonText = ""; addToCartButtonElement.classList.remove("button--primary", "button--secondary", "button--ternary"); if (!variant) { addToCartButtonElement.setAttribute("disabled", "disabled"); addToCartButtonElement.classList.add("button--ternary"); addToCartButtonText = window.themeVariables.strings.productFormUnavailable; } else { if (variant["available"]) { addToCartButtonElement.removeAttribute("disabled"); addToCartButtonElement.classList.add(addToCartButtonElement.hasAttribute("data-use-primary") ? "button--primary" : "button--secondary"); addToCartButtonText = addToCartButtonElement.getAttribute("data-button-content"); } else { addToCartButtonElement.setAttribute("disabled", "disabled"); addToCartButtonElement.classList.add("button--ternary"); addToCartButtonText = window.themeVariables.strings.productFormSoldOut; } } if (addToCartButtonElement.getAttribute("is") === "loader-button") { addToCartButtonElement.firstElementChild.innerHTML = addToCartButtonText; } else { addToCartButtonElement.innerHTML = addToCartButtonText; } } _updateDynamicCheckoutButton(variant) { let paymentButtonElement = this.querySelector(".shopify-payment-button"); if (!paymentButtonElement) { return; } paymentButtonElement.style.display = !variant || !variant["available"] ? "none" : "block"; } }; window.customElements.define("product-payment-container", PaymentContainer); // js/custom-element/section/product/payment-terms.js var PaymentTerms = class extends CustomHTMLElement { connectedCallback() { var _a; (_a = document.getElementById(this.getAttribute("form-id"))) == null ? void 0 : _a.addEventListener("variant:changed", this._onVariantChanged.bind(this)); } _onVariantChanged(event) { const variant = event.detail.variant; if (variant) { const idElement = this.querySelector('[name="id"]'); idElement.value = variant["id"]; idElement.dispatchEvent(new Event("change", { bubbles: true })); } } }; window.customElements.define("product-payment-terms", PaymentTerms); // js/custom-element/section/product/product-form.js var ProductForm = class extends HTMLFormElement { connectedCallback() { this.id.disabled = false; if (window.themeVariables.settings.cartType === "page" || window.themeVariables.settings.pageType === "cart") { return; } this.addEventListener("submit", this._onSubmit.bind(this)); } async _onSubmit(event) { event.preventDefault(); if (!this.checkValidity()) { this.reportValidity(); return; } const submitButtons = Array.from(this.elements).filter((button) => button.type === "submit"); submitButtons.forEach((submitButton) => { submitButton.setAttribute("disabled", "disabled"); submitButton.setAttribute("aria-busy", "true"); }); const productForm = new FormData(this); productForm.append("sections", ["mini-cart"]); productForm.delete("option1"); productForm.delete("option2"); productForm.delete("option3"); const response = await fetch(`${window.themeVariables.routes.cartAddUrl}.js`, { body: productForm, method: "POST", headers: { "X-Requested-With": "XMLHttpRequest" } }); submitButtons.forEach((submitButton) => { submitButton.removeAttribute("disabled"); submitButton.removeAttribute("aria-busy"); }); const responseJson = await response.json(); if (response.ok) { this.dispatchEvent(new CustomEvent("variant:added", { bubbles: true, detail: { variant: responseJson.hasOwnProperty("items") ? responseJson["items"][0] : responseJson } })); fetch(`${window.themeVariables.routes.cartUrlApi}.js`).then(async (response2) => { const cartContent = await response2.json(); document.documentElement.dispatchEvent(new CustomEvent("cart:updated", { bubbles: true, detail: { cart: cartContent } })); cartContent["sections"] = responseJson["sections"]; document.documentElement.dispatchEvent(new CustomEvent("cart:refresh", { bubbles: true, detail: { cart: cartContent, openMiniCart: window.themeVariables.settings.cartType === "drawer" && this.closest(".drawer") === null } })); }); } this.dispatchEvent(new CustomEvent("cart-notification:show", { bubbles: true, cancelable: true, detail: { status: response.ok ? "success" : "error", error: responseJson["description"] || "" } })); } }; window.customElements.define("product-form", ProductForm, { extends: "form" }); // js/custom-element/section/product/product-media.js var ProductMedia = class extends CustomHTMLElement { async connectedCallback() { var _a; this.mainCarousel = this.querySelector("flickity-carousel"); if (this.hasAttribute("reveal-on-scroll")) { this._setupVisibility(); } if (this.mainCarousel.childElementCount === 1) { return; } this.selectedVariantMediaId = null; this.viewInSpaceElement = this.querySelector("[data-shopify-model3d-id]"); this.zoomButton = this.querySelector(".product__zoom-button"); this.product = await ProductLoader.load(this.getAttribute("product-handle")); (_a = document.getElementById(this.getAttribute("form-id"))) == null ? void 0 : _a.addEventListener("variant:changed", this._onVariantChanged.bind(this)); this.mainCarousel.addEventListener("model:played", () => this.mainCarousel.setDraggable(false)); this.mainCarousel.addEventListener("model:paused", () => this.mainCarousel.setDraggable(true)); this.mainCarousel.addEventListener("video:played", () => this.mainCarousel.setDraggable(false)); this.mainCarousel.addEventListener("video:paused", () => this.mainCarousel.setDraggable(true)); this.mainCarousel.addEventListener("flickity:ready", this._onFlickityReady.bind(this)); this.mainCarousel.addEventListener("flickity:slide-changed", this._onFlickityChanged.bind(this)); this.mainCarousel.addEventListener("flickity:slide-settled", this._onFlickitySettled.bind(this)); this._onFlickityReady(); } get thumbnailsPosition() { return window.matchMedia(window.themeVariables.breakpoints.pocket).matches ? "bottom" : this.getAttribute("thumbnails-position"); } async _setupVisibility() { await this.untilVisible(); const flickityInstance = await this.mainCarousel.flickityInstance, image = flickityInstance ? flickityInstance.selectedElement.querySelector("img") : this.querySelector(".product__media-image-wrapper img"), prefersReducedMotion = MediaFeatures.prefersReducedMotion(); await imageLoaded(image); const animation = new CustomAnimation(new ParallelEffect([ new CustomKeyframeEffect(image, { opacity: [0, 1], transform: [`scale(${prefersReducedMotion ? 1 : 1.1})`, "scale(1)"] }, { duration: 500, easing: "cubic-bezier(0.65, 0, 0.35, 1)" }), new ParallelEffect(Array.from(this.querySelectorAll(".product__thumbnail-item:not(.is-filtered)")).map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: this.thumbnailsPosition === "left" ? [`translateY(${prefersReducedMotion ? 0 : "40px"})`, "translateY(0)"] : [`translateX(${prefersReducedMotion ? 0 : "50px"})`, "translateX(0)"] }, { duration: 250, delay: prefersReducedMotion ? 0 : 100 * index, easing: "cubic-bezier(0.75, 0, 0.175, 1)" }); })) ])); this._hasSectionReloaded ? animation.finish() : animation.play(); } async _onVariantChanged(event) { const variant = event.detail.variant; const filteredMediaIds = []; let shouldReload = false; this.product["media"].forEach((media) => { var _a; let matchMedia2 = variant["featured_media"] && media["id"] === variant["featured_media"]["id"]; if ((_a = media["alt"]) == null ? void 0 : _a.includes("#")) { shouldReload = true; if (!matchMedia2) { const altParts = media["alt"].split("#"), mediaGroupParts = altParts.pop().split("_"); this.product["options"].forEach((option) => { if (option["name"].toLowerCase() === mediaGroupParts[0].toLowerCase()) { if (variant["options"][option["position"] - 1].toLowerCase() !== mediaGroupParts[1].trim().toLowerCase()) { filteredMediaIds.push(media["id"]); } } }); } } }); const currentlyFilteredIds = [...new Set(Array.from(this.querySelectorAll(".is-filtered[data-media-id]")).map((item) => parseInt(item.getAttribute("data-media-id"))))]; if (currentlyFilteredIds.some((value) => !filteredMediaIds.includes(value))) { const selectedMediaId = variant["featured_media"] ? variant["featured_media"]["id"] : this.product["media"].map((item) => item.id).filter((item) => !filteredMediaIds.includes(item))[0]; Array.from(this.querySelectorAll("[data-media-id]")).forEach((item) => { item.classList.toggle("is-filtered", filteredMediaIds.includes(parseInt(item.getAttribute("data-media-id")))); item.classList.toggle("is-selected", selectedMediaId === parseInt(item.getAttribute("data-media-id"))); item.classList.toggle("is-initial-selected", selectedMediaId === parseInt(item.getAttribute("data-media-id"))); }); this.mainCarousel.reload(); } else { if (!event.detail.variant["featured_media"] || this.selectedVariantMediaId === event.detail.variant["featured_media"]["id"]) { return; } this.mainCarousel.select(`[data-media-id="${event.detail.variant["featured_media"]["id"]}"]`); } this.selectedVariantMediaId = event.detail.variant["featured_media"] ? event.detail.variant["featured_media"]["id"] : null; } async _onFlickityReady() { const flickityInstance = await this.mainCarousel.flickityInstance; if (["video", "external_video"].includes(flickityInstance.selectedElement.getAttribute("data-media-type")) && this.hasAttribute("autoplay-video")) { flickityInstance.selectedElement.firstElementChild.play(); } } async _onFlickityChanged() { const flickityInstance = await this.mainCarousel.flickityInstance; flickityInstance.cells.forEach((item) => { if (["external_video", "video", "model"].includes(item.element.getAttribute("data-media-type"))) { item.element.firstElementChild.pause(); } }); } async _onFlickitySettled() { const flickityInstance = await this.mainCarousel.flickityInstance, selectedSlide = flickityInstance.selectedElement; if (this.zoomButton) { this.zoomButton.hidden = selectedSlide.getAttribute("data-media-type") !== "image"; } if (this.viewInSpaceElement) { this.viewInSpaceElement.setAttribute("data-shopify-model3d-id", this.viewInSpaceElement.getAttribute("data-shopify-model3d-default-id")); } switch (selectedSlide.getAttribute("data-media-type")) { case "model": this.viewInSpaceElement.setAttribute("data-shopify-model3d-id", selectedSlide.getAttribute("data-media-id")); selectedSlide.firstElementChild.play(); break; case "external_video": case "video": if (this.hasAttribute("autoplay-video")) { selectedSlide.firstElementChild.play(); } break; } } }; window.customElements.define("product-media", ProductMedia); // js/helper/currency.js function formatMoney(cents, format = "") { if (typeof cents === "string") { cents = cents.replace(".", ""); } const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/, formatString = format || window.themeVariables.settings.moneyFormat; const placeholderRegexG = /\{\{\s*(\w+)\s*\}\}/g; function defaultTo(value2, defaultValue) { return value2 == null || value2 !== value2 ? defaultValue : value2; } function formatWithDelimiters(number, precision, thousands, decimal) { return number; precision = defaultTo(precision, 2); thousands = defaultTo(thousands, ","); decimal = defaultTo(decimal, "."); if (isNaN(number) || number == null) { return 0; } number = (number / 100).toFixed(precision); let parts = number.split("."), dollarsAmount = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + thousands), centsAmount = parts[1] ? decimal + parts[1] : ""; return dollarsAmount + centsAmount; } let value = ""; switch (formatString.match(placeholderRegex)[1]) { case "amount": value = formatWithDelimiters(cents, 2); break; case "amount_no_decimals": value = formatWithDelimiters(cents, 0); break; case "amount_with_space_separator": value = formatWithDelimiters(cents, 2, " ", "."); break; case "amount_with_comma_separator": value = formatWithDelimiters(cents, 2, ".", ","); break; case "amount_with_apostrophe_separator": value = formatWithDelimiters(cents, 2, "'", "."); break; case "amount_no_decimals_with_comma_separator": value = formatWithDelimiters(cents, 0, ".", ","); break; case "amount_no_decimals_with_space_separator": value = formatWithDelimiters(cents, 0, " "); break; case "amount_no_decimals_with_apostrophe_separator": value = formatWithDelimiters(cents, 0, "'"); break; } if (formatString.indexOf("with_comma_separator") !== -1) { return formatString.replace(placeholderRegexG, value); } else { return formatString.replace(placeholderRegexG, value); } } // js/custom-element/section/product/product-meta.js var ProductMeta = class extends HTMLElement { connectedCallback() { var _a; (_a = document.getElementById(this.getAttribute("form-id"))) == null ? void 0 : _a.addEventListener("variant:changed", this._onVariantChanged.bind(this)); } get priceClass() { return this.getAttribute("price-class") || ""; } get unitPriceClass() { return this.getAttribute("unit-price-class") || ""; } _onVariantChanged(event) { this._updateLabels(event.detail.variant); this._updatePrices(event.detail.variant); this._updateSku(event.detail.variant); } _updateLabels(variant) { let productLabelList = this.querySelector("[data-product-label-list]"); if (!productLabelList) { return; } if (!variant) { productLabelList.innerHTML = ""; } else { productLabelList.innerHTML = ""; if (!variant["available"]) { productLabelList.innerHTML = `${window.themeVariables.strings.collectionSoldOut}`; } else if (variant["compare_at_price"] > variant["price"]) { let savings = ""; if (window.themeVariables.settings.discountMode === "percentage") { savings = `${Math.round((variant["compare_at_price"] - variant["price"]) * 100 / variant["compare_at_price"])}%`; } else { savings = formatMoney(variant["compare_at_price"] - variant["price"]); } productLabelList.innerHTML = `${window.themeVariables.strings.collectionDiscount.replace("@savings@", savings)}`; } } } _updatePrices(variant) { let productPrices = this.querySelector("[data-product-price-list]"), currencyFormat = window.themeVariables.settings.currencyCodeEnabled ? window.themeVariables.settings.moneyWithCurrencyFormat : window.themeVariables.settings.moneyFormat; if (!productPrices) { return; } if (!variant) { productPrices.style.display = "none"; } else { productPrices.innerHTML = ""; if (variant["compare_at_price"] > variant["price"]) { productPrices.innerHTML += `${window.themeVariables.strings.productSalePrice}${formatMoney(variant["price"], currencyFormat)}`; productPrices.innerHTML += `${window.themeVariables.strings.productRegularPrice}${formatMoney(variant["compare_at_price"], currencyFormat)}`; } else { productPrices.innerHTML += `${window.themeVariables.strings.productSalePrice}${formatMoney(variant["price"], currencyFormat)}`; } if (variant["unit_price_measurement"]) { let referenceValue = ""; if (variant["unit_price_measurement"]["reference_value"] !== 1) { referenceValue = `${variant["unit_price_measurement"]["reference_value"]}`; } productPrices.innerHTML += `
${formatMoney(variant["unit_price"])} / ${referenceValue} ${variant["unit_price_measurement"]["reference_unit"]}
`; } productPrices.style.display = ""; } } _updateSku(variant) { let productSku = this.querySelector("[data-product-sku-container]"); if (!productSku) { return; } let productSkuNumber = productSku.querySelector("[data-product-sku-number]"); if (!variant || !variant["sku"]) { productSku.style.display = "none"; } else { productSkuNumber.innerHTML = variant["sku"]; productSku.style.display = ""; } } }; window.customElements.define("product-meta", ProductMeta); // js/custom-element/section/product-list/quick-buy-drawer.js var QuickBuyDrawer = class extends DrawerContent { connectedCallback() { super.connectedCallback(); this.delegate.on("variant:changed", this._onVariantChanged.bind(this)); } async _load() { await super._load(); this.imageElement = this.querySelector(".quick-buy-product__image"); if (window.Shopify && window.Shopify.PaymentButton) { window.Shopify.PaymentButton.init(); } } _onVariantChanged(event) { const variant = event.detail.variant; if (variant) { Array.from(this.querySelectorAll(`[href*="/products"]`)).forEach((link) => { const url = new URL(link.href); url.searchParams.set("variant", variant["id"]); link.setAttribute("href", url.toString()); }); } if (!this.imageElement || !variant || !variant["featured_media"]) { return; } const featuredMedia = variant["featured_media"]; if (featuredMedia["alt"]) { this.imageElement.setAttribute("alt", featuredMedia["alt"]); } this.imageElement.setAttribute("width", featuredMedia["preview_image"]["width"]); this.imageElement.setAttribute("height", featuredMedia["preview_image"]["height"]); this.imageElement.setAttribute("src", getSizedMediaUrl(featuredMedia, "342x")); this.imageElement.setAttribute("srcset", getMediaSrcset(featuredMedia, [114, 228, 342])); } }; window.customElements.define("quick-buy-drawer", QuickBuyDrawer); // js/custom-element/section/product-list/quick-buy-popover.js var QuickBuyPopover = class extends PopoverContent { connectedCallback() { super.connectedCallback(); this.delegate.on("variant:changed", this._onVariantChanged.bind(this)); this.delegate.on("variant:added", () => this.open = false); } async _load() { await super._load(); this.imageElement = this.querySelector(".quick-buy-product__image"); } _onVariantChanged(event) { const variant = event.detail.variant; if (variant) { Array.from(this.querySelectorAll(`[href*="/products"]`)).forEach((link) => { const url = new URL(link.href); url.searchParams.set("variant", variant["id"]); link.setAttribute("href", url.toString()); }); } if (!this.imageElement || !variant || !variant["featured_media"]) { return; } const featuredMedia = variant["featured_media"]; if (featuredMedia["alt"]) { this.imageElement.setAttribute("alt", featuredMedia["alt"]); } this.imageElement.setAttribute("width", featuredMedia["preview_image"]["width"]); this.imageElement.setAttribute("height", featuredMedia["preview_image"]["height"]); this.imageElement.setAttribute("src", getSizedMediaUrl(featuredMedia, "195x")); this.imageElement.setAttribute("srcset", getMediaSrcset(featuredMedia, [65, 130, 195])); } }; window.customElements.define("quick-buy-popover", QuickBuyPopover); // js/custom-element/section/product/store-pickup.js var StorePickup = class extends HTMLElement { connectedCallback() { var _a; (_a = document.getElementById(this.getAttribute("form-id"))) == null ? void 0 : _a.addEventListener("variant:changed", this._onVariantChanged.bind(this)); } _onVariantChanged(event) { if (!event.detail.variant) { this.innerHTML = ""; } else { this._renderForVariant(event.detail.variant["id"]); } } async _renderForVariant(id) { //不知道干嘛的,接口404 先注释掉 // const response = await fetch(`${window.themeVariables.routes.rootUrlWithoutSlash}/variants/${id}?section_id=store-availability`), div = document.createElement("div"); // div.innerHTML = await response.text(); // this.innerHTML = div.firstElementChild.innerHTML.trim(); } }; window.customElements.define("store-pickup", StorePickup); // js/custom-element/section/product/variants.js var ProductVariants = class extends CustomHTMLElement { async connectedCallback() { this.masterSelector = document.getElementById(this.getAttribute("form-id")).id; this.optionSelectors = Array.from(this.querySelectorAll("[data-selector-type]")); if (!this.masterSelector) { console.warn(`The variant selector for product with handle ${this.productHandle} is not linked to any product form.`); return; } this.product = await ProductLoader.load(this.productHandle); this.delegate.on("change", '[name^="option"]', this._onOptionChanged.bind(this)); this.masterSelector.addEventListener("change", this._onMasterSelectorChanged.bind(this)); this._updateDisableSelectors(); this.selectVariant(this.selectedVariant["id"]); } get selectedVariant() { return this._getVariantById(parseInt(this.masterSelector.value)); } get productHandle() { return this.getAttribute("handle"); } get hideSoldOutVariants() { return this.hasAttribute("hide-sold-out-variants"); } get updateUrl() { return this.hasAttribute("update-url"); } selectVariant(id) { var _a; if (!this._isVariantSelectable(this._getVariantById(id))) { id = this._getFirstMatchingAvailableOrSelectableVariant()["id"]; } if (((_a = this.selectedVariant) == null ? void 0 : _a.id) === id) { return; } this.masterSelector.value = id; this.masterSelector.dispatchEvent(new Event("change", { bubbles: true })); if (this.updateUrl && history.replaceState) { const newUrl = new URL(window.location.href); if (id) { newUrl.searchParams.set("variant", id); } else { newUrl.searchParams.delete("variant"); } window.history.replaceState({ path: newUrl.toString() }, "", newUrl.toString()); } this._updateDisableSelectors(); triggerEvent(this.masterSelector.form, "variant:changed", { variant: this.selectedVariant }); } _onOptionChanged() { var _a; this.selectVariant((_a = this._getVariantFromOptions()) == null ? void 0 : _a.id); } _onMasterSelectorChanged() { var _a; const options = ((_a = this.selectedVariant) == null ? void 0 : _a.options) || []; options.forEach((value, index) => { let input = this.querySelector(`input[name="option${index + 1}"][value="${CSS.escape(value)}"], select[name="option${index + 1}"]`), triggerChangeEvent = false; if (input.tagName === "SELECT") { triggerChangeEvent = input.value !== value; input.value = value; } else if (input.tagName === "INPUT") { triggerChangeEvent = !input.checked && input.value === value; input.checked = input.value === value; } if (triggerChangeEvent) { input.dispatchEvent(new Event("change", { bubbles: true })); } }); } _getVariantById(id) { return this.product["variants"].find((variant) => variant["id"] === id); } _getVariantFromOptions() { const options = this._getSelectedOptionValues(); return this.product["variants"].find((variant) => { return variant["options"].every((value, index) => value === options[index]); }); } _isVariantSelectable(variant) { if (!variant) { return false; } else { return variant["available"] || !this.hideSoldOutVariants && !variant["available"]; } } _getFirstMatchingAvailableOrSelectableVariant() { let options = this._getSelectedOptionValues(), matchedVariant = null, slicedCount = 0; do { options.pop(); slicedCount += 1; matchedVariant = this.product["variants"].find((variant) => { if (this.hideSoldOutVariants) { return variant["available"] && variant["options"].slice(0, variant["options"].length - slicedCount).every((value, index) => value === options[index]); } else { return variant["options"].slice(0, variant["options"].length - slicedCount).every((value, index) => value === options[index]); } }); } while (!matchedVariant && options.length > 0); return matchedVariant; } _getSelectedOptionValues() { const options = []; Array.from(this.querySelectorAll('input[name^="option"]:checked, select[name^="option"]')).forEach((option) => options.push(option.value)); return options; } _updateDisableSelectors() { const selectedVariant = this.selectedVariant; if (!selectedVariant) { return; } const applyClassToSelector = (selector, valueIndex, available, hasAtLeastOneCombination) => { let selectorType = selector.getAttribute("data-selector-type"), cssSelector = ""; switch (selectorType) { case "color": cssSelector = `.color-swatch:nth-child(${valueIndex + 1})`; break; case "variant-image": cssSelector = `.variant-swatch:nth-child(${valueIndex + 1})`; break; case "block": cssSelector = `.block-swatch:nth-child(${valueIndex + 1})`; break; case "dropdown": cssSelector = `.combo-box__option-item:nth-child(${valueIndex + 1})`; break; } selector.querySelector(cssSelector).toggleAttribute("hidden", !hasAtLeastOneCombination); if (this.hideSoldOutVariants) { selector.querySelector(cssSelector).toggleAttribute("hidden", !available); } else { selector.querySelector(cssSelector).classList.toggle("is-disabled", !available); } }; if (this.optionSelectors && this.optionSelectors[0]) { this.product["options"][0]["values"].forEach((value, valueIndex) => { const hasAtLeastOneCombination = this.product["variants"].some((variant) => variant["option1"] === value && variant), hasAvailableVariant = this.product["variants"].some((variant) => variant["option1"] === value && variant["available"]); applyClassToSelector(this.optionSelectors[0], valueIndex, hasAvailableVariant, hasAtLeastOneCombination); if (this.optionSelectors[1]) { this.product["options"][1]["values"].forEach((value2, valueIndex2) => { const hasAtLeastOneCombination2 = this.product["variants"].some((variant) => variant["option2"] === value2 && variant["option1"] === selectedVariant["option1"] && variant), hasAvailableVariant2 = this.product["variants"].some((variant) => variant["option2"] === value2 && variant["option1"] === selectedVariant["option1"] && variant["available"]); applyClassToSelector(this.optionSelectors[1], valueIndex2, hasAvailableVariant2, hasAtLeastOneCombination2); if (this.optionSelectors[2]) { this.product["options"][2]["values"].forEach((value3, valueIndex3) => { const hasAtLeastOneCombination3 = this.product["variants"].some((variant) => variant["option3"] === value3 && variant["option1"] === selectedVariant["option1"] && variant["option2"] === selectedVariant["option2"] && variant), hasAvailableVariant3 = this.product["variants"].some((variant) => variant["option3"] === value3 && variant["option1"] === selectedVariant["option1"] && variant["option2"] === selectedVariant["option2"] && variant["available"]); applyClassToSelector(this.optionSelectors[2], valueIndex3, hasAvailableVariant3, hasAtLeastOneCombination3); }); } }); } }); } } }; window.customElements.define("product-variants", ProductVariants); // js/custom-element/section/product-list/product-item.js var ProductItem = class extends CustomHTMLElement { connectedCallback() { this.primaryImageList = Array.from(this.querySelectorAll(".product-item__primary-image")); this.delegate.on("change", ".product-item-meta__swatch-list .color-swatch__radio", this._onColorSwatchChanged.bind(this)); this.delegate.on("mouseenter", ".product-item-meta__swatch-list .color-swatch__item", this._onColorSwatchHovered.bind(this), true); } async _onColorSwatchChanged(event, target) { Array.from(this.querySelectorAll(`[href*="/products"]`)).forEach((link) => { let url; if (link.tagName === "A") { url = new URL(link.href); } else { url = new URL(link.getAttribute("href"), `https://${window.themeVariables.routes.host}`); } url.searchParams.set("variant", target.getAttribute("data-variant-id")); link.setAttribute("href", url.toString()); }); if (target.hasAttribute("data-variant-featured-media")) { const newImage = this.primaryImageList.find((image) => image.getAttribute("data-media-id") === target.getAttribute("data-variant-featured-media")); newImage.setAttribute("loading", "eager"); const onImageLoaded = newImage.complete ? Promise.resolve() : new Promise((resolve) => newImage.onload = resolve); await onImageLoaded; newImage.removeAttribute("hidden"); let properties = {}; if (Array.from(newImage.parentElement.classList).some((item) => ["aspect-ratio--short", "aspect-ratio--tall", "aspect-ratio--square"].includes(item))) { properties = [ { clipPath: "polygon(0 0, 0 0, 0 100%, 0% 100%)", transform: "translate(calc(-50% - 20px), -50%)", zIndex: 1, offset: 0 }, { clipPath: "polygon(0 0, 20% 0, 5% 100%, 0 100%)", transform: "translate(calc(-50% - 20px), -50%)", zIndex: 1, offset: 0.3 }, { clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)", transform: "translate(-50%, -50%)", zIndex: 1, offset: 1 } ]; } else { properties = [ { clipPath: "polygon(0 0, 0 0, 0 100%, 0% 100%)", transform: "translateX(-20px)", zIndex: 1, offset: 0 }, { clipPath: "polygon(0 0, 20% 0, 5% 100%, 0 100%)", transform: "translateX(-20px)", zIndex: 1, offset: 0.3 }, { clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)", transform: "translateX(0px)", zIndex: 1, offset: 1 } ]; } await newImage.animate(properties, { duration: 500, easing: "ease-in-out" }).finished; this.primaryImageList.filter((image) => image.classList.contains("product-item__primary-image") && image !== newImage).forEach((image) => image.setAttribute("hidden", "")); } } _onColorSwatchHovered(event, target) { const input = target.previousElementSibling; if (input.hasAttribute("data-variant-featured-media")) { const newImage = this.primaryImageList.find((image) => image.getAttribute("data-media-id") === input.getAttribute("data-variant-featured-media")); newImage.setAttribute("loading", "eager"); } } }; window.customElements.define("product-item", ProductItem); // js/custom-element/section/product-facet/product-facet.js var ProductFacet = class extends CustomHTMLElement { connectedCallback() { this.delegate.on("pagination:page-changed", this._rerender.bind(this)); this.delegate.on("facet:criteria-changed", this._rerender.bind(this)); this.delegate.on("facet:abort-loading", this._abort.bind(this)); } async _rerender(event) { history.replaceState({}, "", event.detail.url); this._abort(); this.showLoadingBar(); const url = new URL(window.location); url.searchParams.set("section_id", this.getAttribute("section-id")); try { this.abortController = new AbortController(); const response = await fetch(url.toString(), { signal: this.abortController.signal }); const responseAsText = await response.text(); const fakeDiv = document.createElement("div"); fakeDiv.innerHTML = responseAsText; this.querySelector("#facet-main").innerHTML = fakeDiv.querySelector("#facet-main").innerHTML; const activeFilterList = Array.from(fakeDiv.querySelectorAll(".product-facet__active-list")), toolbarItem = document.querySelector(".mobile-toolbar__item--filters"); if (toolbarItem) { toolbarItem.classList.toggle("has-filters", activeFilterList.length > 0); } const filtersTempDiv = fakeDiv.querySelector("#facet-filters"); if (filtersTempDiv) { const previousScrollTop = this.querySelector("#facet-filters .drawer__content").scrollTop; Array.from(this.querySelectorAll("#facet-filters-form .collapsible-toggle[aria-controls]")).forEach((filterToggle) => { const filtersTempDivToggle = filtersTempDiv.querySelector(`[aria-controls="${filterToggle.getAttribute("aria-controls")}"]`), isExpanded = filterToggle.getAttribute("aria-expanded") === "true"; filtersTempDivToggle.setAttribute("aria-expanded", isExpanded ? "true" : "false"); filtersTempDivToggle.nextElementSibling.toggleAttribute("open", isExpanded); filtersTempDivToggle.nextElementSibling.style.overflow = isExpanded ? "visible" : ""; }); this.querySelector("#facet-filters").innerHTML = filtersTempDiv.innerHTML; this.querySelector("#facet-filters .drawer__content").scrollTop = previousScrollTop; } const scrollTo = this.querySelector(".product-facet__meta-bar") || this.querySelector(".product-facet__product-list") || this.querySelector(".product-facet__main"); requestAnimationFrame(() => { scrollTo.scrollIntoView({ block: "start", behavior: "smooth" }); }); this.hideLoadingBar(); } catch (e) { if (e.name === "AbortError") { return; } } } _abort() { if (this.abortController) { this.abortController.abort(); } } }; window.customElements.define("product-facet", ProductFacet); // js/custom-element/section/facet/facet-filters.js var FacetFilters = class extends DrawerContent { connectedCallback() { super.connectedCallback(); this.delegate.on("change", '[name^="filter."]', this._onFilterChanged.bind(this)); this.rootDelegate.on("click", '[data-action="clear-filters"]', this._onFiltersCleared.bind(this)); if (this.alwaysVisible) { this.matchMedia = window.matchMedia(window.themeVariables.breakpoints.pocket); this.matchMedia.addListener(this._adjustDrawer.bind(this)); this._adjustDrawer(this.matchMedia); } } get alwaysVisible() { return this.hasAttribute("always-visible"); } _onFiltersCleared(event, target) { event.preventDefault(); triggerEvent(this, "facet:criteria-changed", { url: target.href }); } _onFilterChanged() { const formData = new FormData(this.querySelector("#facet-filters-form")); const searchParamsAsString = new URLSearchParams(formData).toString(); triggerEvent(this, "facet:criteria-changed", { url: `${window.location.pathname}?${searchParamsAsString}` }); } _adjustDrawer(match) { this.classList.toggle("drawer", match.matches); this.classList.toggle("drawer--from-left", match.matches); } }; window.customElements.define("facet-filters", FacetFilters); // js/custom-element/section/facet/sort-by-popover.js var SortByPopover = class extends PopoverContent { connectedCallback() { super.connectedCallback(); this.delegate.on("change", '[name="sort_by"]', this._onSortChanged.bind(this)); } _onSortChanged(event, target) { const currentUrl = new URL(location.href); currentUrl.searchParams.set("sort_by", target.value); currentUrl.searchParams.delete("page"); this.open = false; this.dispatchEvent(new CustomEvent("facet:criteria-changed", { bubbles: true, detail: { url: currentUrl.toString() } })); } }; window.customElements.define("sort-by-popover", SortByPopover); // js/custom-element/section/cart/cart-count.js var CartCount = class extends CustomHTMLElement { connectedCallback() { this.rootDelegate.on("cart:updated", (event) => this.innerText = event.detail.cart["item_count"]); this.rootDelegate.on("cart:refresh", (event) => this.innerText = event.detail.cart["item_count"]); } }; window.customElements.define("cart-count", CartCount); // js/custom-element/section/cart/cart-drawer.js var CartDrawer = class extends DrawerContent { connectedCallback() { super.connectedCallback(); this.nextReplacementDelay = 0; this.rootDelegate.on("cart:refresh", this._rerenderCart.bind(this)); this.addEventListener("variant:added", () => this.nextReplacementDelay = 600); } async _rerenderCart(event) { var _a; let cartContent = null, html = ""; if (event.detail && event.detail["cart"] && event.detail["cart"]["sections"]) { cartContent = event.detail["cart"]; html = event.detail["cart"]["sections"]["mini-cart"]; } else { const response = await fetch(`${window.themeVariables.routes.cartUrl}?section_id=${this.getAttribute("section")}`); html = await response.text(); } const fakeDiv = document.createElement("div"); fakeDiv.innerHTML = html; setTimeout(async () => { var _a2; const previousPosition = this.querySelector(".drawer__content").scrollTop; if (cartContent && cartContent["item_count"] === 0) { const animation = new CustomAnimation(new ParallelEffect(Array.from(this.querySelectorAll(".drawer__content, .drawer__footer")).map((item) => { return new CustomKeyframeEffect(item, { opacity: [1, 0] }, { duration: 250, easing: "ease-in" }); }))); animation.play(); await animation.finished; } this.innerHTML = fakeDiv.querySelector("cart-drawer").innerHTML; if (cartContent && cartContent["item_count"] === 0) { this.querySelector(".drawer__content").animate({ opacity: [0, 1], transform: ["translateY(40px)", "translateY(0)"] }, { duration: 450, easing: "cubic-bezier(0.33, 1, 0.68, 1)" }); } else { this.querySelector(".drawer__content").scrollTop = previousPosition; } if ((_a2 = event == null ? void 0 : event.detail) == null ? void 0 : _a2.openMiniCart) { this.clientWidth; this.open = true; } }, ((_a = event == null ? void 0 : event.detail) == null ? void 0 : _a.replacementDelay) || this.nextReplacementDelay); this.nextReplacementDelay = 0; } async attributeChangedCallback(name, oldValue, newValue) { super.attributeChangedCallback(name, oldValue, newValue); switch (name) { case "open": if (this.open) { this.querySelector(".drawer__content").scrollTop = 0; if (!MediaFeatures.prefersReducedMotion()) { const lineItems = Array.from(this.querySelectorAll(".line-item")), recommendationsInner = this.querySelector(".mini-cart__recommendations-inner"), bottomBar = this.querySelector(".drawer__footer"), effects = []; if (recommendationsInner && window.matchMedia(window.themeVariables.breakpoints.pocket).matches) { lineItems.push(recommendationsInner); } lineItems.forEach((item) => item.style.opacity = 0); recommendationsInner ? recommendationsInner.style.opacity = 0 : null; bottomBar ? bottomBar.style.opacity = 0 : null; effects.push(new ParallelEffect(lineItems.map((item, index) => { return new CustomKeyframeEffect(item, { opacity: [0, 1], transform: ["translateX(40px)", "translateX(0)"] }, { duration: 400, delay: 400 + 120 * index - Math.min(2 * index * index, 120 * index), easing: "cubic-bezier(0.25, 1, 0.5, 1)" }); }))); if (bottomBar) { effects.push(new CustomKeyframeEffect(bottomBar, { opacity: [0, 1], transform: ["translateY(100%)", "translateY(0)"] }, { duration: 300, delay: 400, easing: "cubic-bezier(0.25, 1, 0.5, 1)" })); } if (recommendationsInner && !window.matchMedia(window.themeVariables.breakpoints.pocket).matches) { effects.push(new CustomKeyframeEffect(recommendationsInner, { opacity: [0, 1], transform: ["translateX(100%)", "translateX(0)"] }, { duration: 250, delay: 400 + Math.max(120 * lineItems.length - 25 * lineItems.length, 25), easing: "cubic-bezier(0.25, 1, 0.5, 1)" })); } let animation = new CustomAnimation(new ParallelEffect(effects)); animation.play(); } } } } }; window.customElements.define("cart-drawer", CartDrawer); // js/custom-element/section/cart/cart-drawer-recommendations.js var _CartDrawerRecommendations = class extends HTMLElement { async connectedCallback() { if (!_CartDrawerRecommendations.recommendationsCache[this.productId]) { _CartDrawerRecommendations.recommendationsCache[this.productId] = fetch(`${window.themeVariables.routes.productRecommendationsUrl}?product_id=${this.productId}&limit=10§ion_id=${this.sectionId}`); } const response = await _CartDrawerRecommendations.recommendationsCache[this.productId]; const div = document.createElement("div"); div.innerHTML = await response.clone().text(); const productRecommendationsElement = div.querySelector("cart-drawer-recommendations"); if (productRecommendationsElement && productRecommendationsElement.hasChildNodes()) { this.innerHTML = productRecommendationsElement.innerHTML; } else { this.hidden = true; } } get productId() { return this.getAttribute("product-id"); } get sectionId() { return this.getAttribute("section-id"); } }; var CartDrawerRecommendations = _CartDrawerRecommendations; __publicField(CartDrawerRecommendations, "recommendationsCache", {}); window.customElements.define("cart-drawer-recommendations", CartDrawerRecommendations); // js/custom-element/section/cart/cart-note.js var CartNote = class extends HTMLTextAreaElement { connectedCallback() { this.addEventListener("change", this._onNoteChanged.bind(this)); } get ownedToggle() { return this.hasAttribute("aria-owns") ? document.getElementById(this.getAttribute("aria-owns")) : null; } async _onNoteChanged() { if (this.ownedToggle) { this.ownedToggle.innerHTML = this.value === "" ? window.themeVariables.strings.cartAddOrderNote : window.themeVariables.strings.cartEditOrderNote; } const response = await fetch(`${window.themeVariables.routes.cartUrl}/update.js`, { body: JSON.stringify({ note: this.value }), credentials: "same-origin", method: "POST", headers: { "Content-Type": "application/json" } }); const cartContent = await response.json(); document.documentElement.dispatchEvent(new CustomEvent("cart:updated", { bubbles: true, detail: { cart: cartContent } })); } }; window.customElements.define("cart-note", CartNote, { extends: "textarea" }); // js/custom-element/section/cart/free-shipping-bar.js var FreeShippingBar = class extends HTMLElement { connectedCallback() { document.documentElement.addEventListener("cart:updated", this._onCartUpdated.bind(this)); } get threshold() { return parseFloat(this.getAttribute("threshold")); } _onCartUpdated(event) { this.style.setProperty("--progress", Math.min(parseFloat(event.detail["cart"]["total_price"]) / this.threshold, 1)); } }; window.customElements.define("free-shipping-bar", FreeShippingBar); // js/custom-element/section/cart/item-quantity.js var LineItemQuantity = class extends CustomHTMLElement { connectedCallback() { this.delegate.on("click", "a", this._onQuantityLinkClicked.bind(this)); this.delegate.on("change", "input", this._onQuantityChanged.bind(this)); } _onQuantityLinkClicked(event, target) { event.preventDefault(); this._updateFromLink(target.href); } _onQuantityChanged(event, target) { this._updateFromLink(`${window.themeVariables.routes.cartChangeUrl}?quantity=${target.value}&line=${target.getAttribute("data-line")}`); } async _updateFromLink(link) { if (window.themeVariables.settings.pageType === "cart") { window.location.href = link; return; } const changeUrl = new URL(link, `https://${window.themeVariables.routes.host}`), searchParams = changeUrl.searchParams, line = searchParams.get("line"), id = searchParams.get("id"), quantity = parseInt(searchParams.get("quantity")); this.dispatchEvent(new CustomEvent("line-item-quantity:change:start", { bubbles: true, detail: { newLineQuantity: quantity } })); const response = await fetch(`${window.themeVariables.routes.cartChangeUrl}.js`, { body: JSON.stringify({ line, id, quantity, sections: ["mini-cart"] }), credentials: "same-origin", method: "POST", headers: { "Content-Type": "application/json" } }); const cartContent = await response.json(); this.dispatchEvent(new CustomEvent("line-item-quantity:change:end", { bubbles: true, detail: { cart: cartContent, newLineQuantity: quantity } })); document.documentElement.dispatchEvent(new CustomEvent("cart:updated", { bubbles: true, detail: { cart: cartContent } })); document.documentElement.dispatchEvent(new CustomEvent("cart:refresh", { bubbles: true, detail: { cart: cartContent, replacementDelay: quantity === 0 ? 600 : 750 } })); } }; window.customElements.define("line-item-quantity", LineItemQuantity); // js/custom-element/section/cart/line-item.js var LineItem = class extends HTMLElement { connectedCallback() { this.lineItemLoader = this.querySelector(".line-item__loader"); this.addEventListener("line-item-quantity:change:start", this._onQuantityStart.bind(this)); this.addEventListener("line-item-quantity:change:end", this._onQuantityEnd.bind(this)); } _onQuantityStart() { if (!this.lineItemLoader) { return; } this.lineItemLoader.hidden = false; this.lineItemLoader.firstElementChild.hidden = false; this.lineItemLoader.lastElementChild.hidden = true; } async _onQuantityEnd(event) { if (event.detail.cart["item_count"] === 0) { return; } if (this.lineItemLoader) { await this.lineItemLoader.firstElementChild.animate({ opacity: [1, 0], transform: ["translateY(0)", "translateY(-10px)"] }, 75).finished; this.lineItemLoader.firstElementChild.hidden = true; if (event.detail.newLineQuantity === 0) { await this.animate({ opacity: [1, 0], height: [`${this.clientHeight}px`, 0] }, { duration: 300, easing: "ease" }).finished; this.remove(); } else { this.lineItemLoader.lastElementChild.hidden = false; await this.lineItemLoader.lastElementChild.animate({ opacity: [0, 1], transform: ["translateY(10px)", "translateY(0)"] }, { duration: 75, endDelay: 300 }).finished; this.lineItemLoader.hidden = true; } } } }; window.customElements.define("line-item", LineItem); // js/custom-element/section/cart/notification.js var CartNotification = class extends CustomHTMLElement { connectedCallback() { this.rootDelegate.on("cart-notification:show", this._onShow.bind(this), !this.hasAttribute("global")); this.delegate.on("click", '[data-action="close"]', (event) => { event.stopPropagation(); this.hidden = true; }); this.addEventListener("mouseenter", this.stopTimer.bind(this)); this.addEventListener("mouseleave", this.startTimer.bind(this)); window.addEventListener("pagehide", () => this.hidden = true); } set hidden(value) { if (!value) { this.startTimer(); } else { this.stopTimer(); } this.toggleAttribute("hidden", value); } get isInsideDrawer() { return this.classList.contains("cart-notification--drawer"); } stopTimer() { clearTimeout(this._timeout); } startTimer() { this._timeout = setTimeout(() => this.hidden = true, 3e3); } _onShow(event) { if (this.isInsideDrawer && !this.closest(".drawer").open) { return; } if (this.hasAttribute("global") && event.detail.status === "success" && window.themeVariables.settings.cartType === "drawer") { return; } event.stopPropagation(); let closeButtonHtml = ""; if (!this.isInsideDrawer) { closeButtonHtml = ` `; } if (event.detail.status === "success") { this.classList.remove("cart-notification--error"); this.innerHTML = `
${window.themeVariables.strings.cartItemAdded} ${window.themeVariables.strings.cartItemAddedShort} ${window.themeVariables.strings.cartViewCart}
${closeButtonHtml}
`; } else { this.classList.add("cart-notification--error"); this.innerHTML = `
${event.detail.error}
${closeButtonHtml}
`; } this.clientHeight; this.hidden = false; } }; window.customElements.define("cart-notification", CartNotification); // js/custom-element/section/cart/shipping-estimator.js var ShippingEstimator = class extends HTMLElement { connectedCallback() { this.submitButton = this.querySelector('[type="button"]'); this.submitButton.addEventListener("click", this._estimateShipping.bind(this)); } async _estimateShipping() { const zip = this.querySelector('[name="shipping-estimator[zip]"]').value, country = this.querySelector('[name="shipping-estimator[country]"]').value, province = this.querySelector('[name="shipping-estimator[province]"]').value; this.submitButton.setAttribute("aria-busy", "true"); const prepareResponse = await fetch(`${window.themeVariables.routes.cartUrl}/prepare_shipping_rates.json?shipping_address[zip]=${zip}&shipping_address[country]=${country}&shipping_address[province]=${province}`, { method: "POST" }); if (prepareResponse.ok) { const shippingRates = await this._getAsyncShippingRates(zip, country, province); this._formatShippingRates(shippingRates); } else { const jsonError = await prepareResponse.json(); this._formatError(jsonError); } this.submitButton.removeAttribute("aria-busy"); } async _getAsyncShippingRates(zip, country, province) { const response = await fetch(`${window.themeVariables.routes.cartUrl}/async_shipping_rates.json?shipping_address[zip]=${zip}&shipping_address[country]=${country}&shipping_address[province]=${province}`); const responseAsText = await response.text(); if (responseAsText === "null") { return this._getAsyncShippingRates(zip, country, province); } else { return JSON.parse(responseAsText)["shipping_rates"]; } } _formatShippingRates(shippingRates) { var _a; (_a = this.querySelector(".shipping-estimator__results")) == null ? void 0 : _a.remove(); let formattedShippingRates = ""; shippingRates.forEach((shippingRate) => { formattedShippingRates += `
  • ${shippingRate["presentment_name"]}: ${formatMoney(parseFloat(shippingRate["price"]) * 100)}
  • `; }); const html = `

    ${shippingRates.length === 0 ? window.themeVariables.strings.shippingEstimatorNoResults : shippingRates.length === 1 ? window.themeVariables.strings.shippingEstimatorOneResult : window.themeVariables.strings.shippingEstimatorMultipleResults}

    ${formattedShippingRates === "" ? "" : ``}
    `; this.insertAdjacentHTML("beforeend", html); } _formatError(errors) { var _a; (_a = this.querySelector(".shipping-estimator__results")) == null ? void 0 : _a.remove(); let formattedShippingRates = ""; Object.keys(errors).forEach((errorKey) => { formattedShippingRates += `
  • ${errorKey} ${errors[errorKey]}
  • `; }); const html = `

    ${window.themeVariables.strings.shippingEstimatorError}

    `; this.insertAdjacentHTML("beforeend", html); } }; window.customElements.define("shipping-estimator", ShippingEstimator); // js/custom-element/section/product/review-link.js var ReviewLink = class extends HTMLAnchorElement { constructor() { super(); this.addEventListener("click", this._onClick.bind(this)); } _onClick() { const shopifyReviewsElement = document.getElementById("shopify-product-reviews"); if (!shopifyReviewsElement) { return; } if (window.matchMedia(window.themeVariables.breakpoints.pocket).matches) { shopifyReviewsElement.closest("collapsible-content").open = true; } else { document.querySelector(`[aria-controls="${shopifyReviewsElement.closest(".product-tabs__tab-item-wrapper").id}"]`).click(); } } }; window.customElements.define("review-link", ReviewLink, { extends: "a" }); // js/custom-element/section/product/sticky-form.js var ProductStickyForm = class extends HTMLElement { connectedCallback() { var _a; (_a = document.getElementById(this.getAttribute("form-id"))) == null ? void 0 : _a.addEventListener("variant:changed", this._onVariantChanged.bind(this)); this.imageElement = this.querySelector(".product-sticky-form__image"); this.priceElement = this.querySelector(".product-sticky-form__price"); this.unitPriceElement = this.querySelector(".product-sticky-form__unit-price"); this._setupVisibilityObservers(); } disconnectedCallback() { this.intersectionObserver.disconnect(); } set hidden(value) { this.toggleAttribute("hidden", value); if (value) { document.documentElement.style.removeProperty("--cart-notification-offset"); } else { document.documentElement.style.setProperty("--cart-notification-offset", `${this.clientHeight}px`); } } _onVariantChanged(event) { const variant = event.detail.variant, currencyFormat = window.themeVariables.settings.currencyCodeEnabled ? window.themeVariables.settings.moneyWithCurrencyFormat : window.themeVariables.settings.moneyFormat; if (!variant) { return; } if (this.priceElement) { this.priceElement.innerHTML = formatMoney(variant["price"], currencyFormat); } if (this.unitPriceElement) { this.unitPriceElement.style.display = variant["unit_price_measurement"] ? "block" : "none"; if (variant["unit_price_measurement"]) { let referenceValue = ""; if (variant["unit_price_measurement"]["reference_value"] !== 1) { referenceValue = `${variant["unit_price_measurement"]["reference_value"]}`; } this.unitPriceElement.innerHTML = `
    ${formatMoney(variant["unit_price"])} / ${referenceValue} ${variant["unit_price_measurement"]["reference_unit"]}
    `; } } if (!this.imageElement || !variant || !variant["featured_media"]) { return; } const featuredMedia = variant["featured_media"]; if (featuredMedia["alt"]) { this.imageElement.setAttribute("alt", featuredMedia["alt"]); } this.imageElement.setAttribute("width", featuredMedia["preview_image"]["width"]); this.imageElement.setAttribute("height", featuredMedia["preview_image"]["height"]); this.imageElement.setAttribute("src", getSizedMediaUrl(featuredMedia, "165x")); this.imageElement.setAttribute("srcset", getMediaSrcset(featuredMedia, [55, 110, 165])); } _setupVisibilityObservers() { const paymentContainerElement = document.getElementById("MainPaymentContainer"), footerElement = document.querySelector(".shopify-section--footer"), stickyHeaderOffset = getStickyHeaderOffset(); this._isFooterVisible = this._isPaymentContainerPassed = false; this.intersectionObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.target === footerElement) { this._isFooterVisible = entry.intersectionRatio > 0; } if (entry.target === paymentContainerElement) { const boundingRect = paymentContainerElement.getBoundingClientRect(); this._isPaymentContainerPassed = entry.intersectionRatio === 0 && boundingRect.top + boundingRect.height <= stickyHeaderOffset; } }); if (window.matchMedia(window.themeVariables.breakpoints.pocket).matches) { this.hidden = !this._isPaymentContainerPassed || this._isFooterVisible; } else { this.hidden = !this._isPaymentContainerPassed; } }, { rootMargin: `-${stickyHeaderOffset}px 0px 0px 0px` }); this.intersectionObserver.observe(paymentContainerElement); this.intersectionObserver.observe(footerElement); } }; window.customElements.define("product-sticky-form", ProductStickyForm); // js/index.js (() => { new InputBindingManager(); })(); (() => { if (Shopify.designMode) { document.addEventListener("shopify:section:load", () => { if (window.SPR) { window.SPR.initDomEls(); window.SPR.loadProducts(); } }); } window.SPRCallbacks = { onFormSuccess: (event, info) => { document.getElementById(`form_${info.id}`).classList.add("spr-form--success"); } }; })(); (() => { let previousClientWidth = window.visualViewport ? window.visualViewport.width : document.documentElement.clientWidth; let setViewportProperty = () => { const clientWidth = window.visualViewport ? window.visualViewport.width : document.documentElement.clientWidth, clientHeight = window.visualViewport ? window.visualViewport.height : document.documentElement.clientHeight; if (clientWidth === previousClientWidth) { return; } requestAnimationFrame(() => { document.documentElement.style.setProperty("--window-height", clientHeight + "px"); previousClientWidth = clientWidth; }); }; setViewportProperty(); if (window.visualViewport) { window.visualViewport.addEventListener("resize", setViewportProperty); } else { window.addEventListener("resize", setViewportProperty); } })(); (() => { let documentDelegate = new main_default(document.body); documentDelegate.on("keyup", 'input:not([type="checkbox"]):not([type="radio"]), textarea', (event, target) => { target.classList.toggle("is-filled", target.value !== ""); }); documentDelegate.on("change", "select", (event, target) => { target.parentNode.classList.toggle("is-filled", target.value !== ""); }); })(); (() => { document.querySelectorAll(".rte table").forEach((table) => { table.outerHTML = '
    ' + table.outerHTML + "
    "; }); document.querySelectorAll(".rte iframe").forEach((iframe) => { if (iframe.src.indexOf("youtube") !== -1 || iframe.src.indexOf("youtu.be") !== -1 || iframe.src.indexOf("vimeo") !== -1) { iframe.outerHTML = '
    ' + iframe.outerHTML + "
    "; } }); })(); (() => { let documentDelegate = new main_default(document.documentElement); documentDelegate.on("click", "[data-smooth-scroll]", (event, target) => { const elementToScroll = document.querySelector(target.getAttribute("href")); if (elementToScroll) { event.preventDefault(); elementToScroll.scrollIntoView({ behavior: "smooth", block: "start" }); } }); })(); (() => { document.addEventListener("keyup", function(event) { if (event.key === "Tab") { document.body.classList.remove("no-focus-outline"); document.body.classList.add("focus-outline"); } }); })(); })(); /*! * focus-trap 6.7.1 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE */ /*! * tabbable 5.2.1 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE */