\n
\n )}\n {`Header inside viewport ${inView}.`}
\nPlain children are always rendered. Use onChange to monitor state.
\n\n *
\n * );\n * };\n * ```\n */\nexport function useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n}: IntersectionOptions = {}): InViewHookResponse {\n const unobserve = React.useRef{`Header inside viewport ${inView}.`}
\n *\\n \\n ![]()
\\n \\n \\n \\n \\n
\\n\").replace(/(^|\\n)\\s*/g, '');\n\n /**\n * @returns {boolean}\n */\n var resetOldContainer = function resetOldContainer() {\n var oldContainer = getContainer();\n if (!oldContainer) {\n return false;\n }\n oldContainer.remove();\n removeClass([document.documentElement, document.body], [swalClasses['no-backdrop'], swalClasses['toast-shown'], swalClasses['has-column']]);\n return true;\n };\n var resetValidationMessage$1 = function resetValidationMessage() {\n globalState.currentInstance.resetValidationMessage();\n };\n var addInputChangeListeners = function addInputChangeListeners() {\n var popup = getPopup();\n var input = getDirectChildByClass(popup, swalClasses.input);\n var file = getDirectChildByClass(popup, swalClasses.file);\n /** @type {HTMLInputElement} */\n var range = popup.querySelector(\".\".concat(swalClasses.range, \" input\"));\n /** @type {HTMLOutputElement} */\n var rangeOutput = popup.querySelector(\".\".concat(swalClasses.range, \" output\"));\n var select = getDirectChildByClass(popup, swalClasses.select);\n /** @type {HTMLInputElement} */\n var checkbox = popup.querySelector(\".\".concat(swalClasses.checkbox, \" input\"));\n var textarea = getDirectChildByClass(popup, swalClasses.textarea);\n input.oninput = resetValidationMessage$1;\n file.onchange = resetValidationMessage$1;\n select.onchange = resetValidationMessage$1;\n checkbox.onchange = resetValidationMessage$1;\n textarea.oninput = resetValidationMessage$1;\n range.oninput = function () {\n resetValidationMessage$1();\n rangeOutput.value = range.value;\n };\n range.onchange = function () {\n resetValidationMessage$1();\n rangeOutput.value = range.value;\n };\n };\n\n /**\n * @param {string | HTMLElement} target\n * @returns {HTMLElement}\n */\n var getTarget = function getTarget(target) {\n return typeof target === 'string' ? document.querySelector(target) : target;\n };\n\n /**\n * @param {SweetAlertOptions} params\n */\n var setupAccessibility = function setupAccessibility(params) {\n var popup = getPopup();\n popup.setAttribute('role', params.toast ? 'alert' : 'dialog');\n popup.setAttribute('aria-live', params.toast ? 'polite' : 'assertive');\n if (!params.toast) {\n popup.setAttribute('aria-modal', 'true');\n }\n };\n\n /**\n * @param {HTMLElement} targetElement\n */\n var setupRTL = function setupRTL(targetElement) {\n if (window.getComputedStyle(targetElement).direction === 'rtl') {\n addClass(getContainer(), swalClasses.rtl);\n }\n };\n\n /**\n * Add modal + backdrop + no-war message for Russians to DOM\n *\n * @param {SweetAlertOptions} params\n */\n var init = function init(params) {\n // Clean up the old popup container if it exists\n var oldContainerExisted = resetOldContainer();\n if (isNodeEnv()) {\n error('SweetAlert2 requires document to initialize');\n return;\n }\n var container = document.createElement('div');\n container.className = swalClasses.container;\n if (oldContainerExisted) {\n addClass(container, swalClasses['no-transition']);\n }\n setInnerHtml(container, sweetHTML);\n var targetElement = getTarget(params.target);\n targetElement.appendChild(container);\n setupAccessibility(params);\n setupRTL(targetElement);\n addInputChangeListeners();\n };\n\n /**\n * @param {HTMLElement | object | string} param\n * @param {HTMLElement} target\n */\n var parseHtmlToContainer = function parseHtmlToContainer(param, target) {\n // DOM element\n if (param instanceof HTMLElement) {\n target.appendChild(param);\n }\n\n // Object\n else if (_typeof(param) === 'object') {\n handleObject(param, target);\n }\n\n // Plain string\n else if (param) {\n setInnerHtml(target, param);\n }\n };\n\n /**\n * @param {any} param\n * @param {HTMLElement} target\n */\n var handleObject = function handleObject(param, target) {\n // JQuery element(s)\n if (param.jquery) {\n handleJqueryElem(target, param);\n }\n\n // For other objects use their string representation\n else {\n setInnerHtml(target, param.toString());\n }\n };\n\n /**\n * @param {HTMLElement} target\n * @param {any} elem\n */\n var handleJqueryElem = function handleJqueryElem(target, elem) {\n target.textContent = '';\n if (0 in elem) {\n for (var i = 0; (i in elem); i++) {\n target.appendChild(elem[i].cloneNode(true));\n }\n } else {\n target.appendChild(elem.cloneNode(true));\n }\n };\n\n /**\n * @returns {'webkitAnimationEnd' | 'animationend' | false}\n */\n var animationEndEvent = function () {\n // Prevent run in Node env\n if (isNodeEnv()) {\n return false;\n }\n var testEl = document.createElement('div');\n\n // Chrome, Safari and Opera\n if (typeof testEl.style.webkitAnimation !== 'undefined') {\n return 'webkitAnimationEnd';\n }\n\n // Standard syntax\n if (typeof testEl.style.animation !== 'undefined') {\n return 'animationend';\n }\n return false;\n }();\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderActions = function renderActions(instance, params) {\n var actions = getActions();\n var loader = getLoader();\n if (!actions || !loader) {\n return;\n }\n\n // Actions (buttons) wrapper\n if (!params.showConfirmButton && !params.showDenyButton && !params.showCancelButton) {\n hide(actions);\n } else {\n show(actions);\n }\n\n // Custom class\n applyCustomClass(actions, params, 'actions');\n\n // Render all the buttons\n renderButtons(actions, loader, params);\n\n // Loader\n setInnerHtml(loader, params.loaderHtml || '');\n applyCustomClass(loader, params, 'loader');\n };\n\n /**\n * @param {HTMLElement} actions\n * @param {HTMLElement} loader\n * @param {SweetAlertOptions} params\n */\n function renderButtons(actions, loader, params) {\n var confirmButton = getConfirmButton();\n var denyButton = getDenyButton();\n var cancelButton = getCancelButton();\n if (!confirmButton || !denyButton || !cancelButton) {\n return;\n }\n\n // Render buttons\n renderButton(confirmButton, 'confirm', params);\n renderButton(denyButton, 'deny', params);\n renderButton(cancelButton, 'cancel', params);\n handleButtonsStyling(confirmButton, denyButton, cancelButton, params);\n if (params.reverseButtons) {\n if (params.toast) {\n actions.insertBefore(cancelButton, confirmButton);\n actions.insertBefore(denyButton, confirmButton);\n } else {\n actions.insertBefore(cancelButton, loader);\n actions.insertBefore(denyButton, loader);\n actions.insertBefore(confirmButton, loader);\n }\n }\n }\n\n /**\n * @param {HTMLElement} confirmButton\n * @param {HTMLElement} denyButton\n * @param {HTMLElement} cancelButton\n * @param {SweetAlertOptions} params\n */\n function handleButtonsStyling(confirmButton, denyButton, cancelButton, params) {\n if (!params.buttonsStyling) {\n removeClass([confirmButton, denyButton, cancelButton], swalClasses.styled);\n return;\n }\n addClass([confirmButton, denyButton, cancelButton], swalClasses.styled);\n\n // Buttons background colors\n if (params.confirmButtonColor) {\n confirmButton.style.backgroundColor = params.confirmButtonColor;\n addClass(confirmButton, swalClasses['default-outline']);\n }\n if (params.denyButtonColor) {\n denyButton.style.backgroundColor = params.denyButtonColor;\n addClass(denyButton, swalClasses['default-outline']);\n }\n if (params.cancelButtonColor) {\n cancelButton.style.backgroundColor = params.cancelButtonColor;\n addClass(cancelButton, swalClasses['default-outline']);\n }\n }\n\n /**\n * @param {HTMLElement} button\n * @param {'confirm' | 'deny' | 'cancel'} buttonType\n * @param {SweetAlertOptions} params\n */\n function renderButton(button, buttonType, params) {\n var buttonName = /** @type {'Confirm' | 'Deny' | 'Cancel'} */capitalizeFirstLetter(buttonType);\n toggle(button, params[\"show\".concat(buttonName, \"Button\")], 'inline-block');\n setInnerHtml(button, params[\"\".concat(buttonType, \"ButtonText\")] || ''); // Set caption text\n button.setAttribute('aria-label', params[\"\".concat(buttonType, \"ButtonAriaLabel\")] || ''); // ARIA label\n\n // Add buttons custom classes\n button.className = swalClasses[buttonType];\n applyCustomClass(button, params, \"\".concat(buttonType, \"Button\"));\n }\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderCloseButton = function renderCloseButton(instance, params) {\n var closeButton = getCloseButton();\n if (!closeButton) {\n return;\n }\n setInnerHtml(closeButton, params.closeButtonHtml || '');\n\n // Custom class\n applyCustomClass(closeButton, params, 'closeButton');\n toggle(closeButton, params.showCloseButton);\n closeButton.setAttribute('aria-label', params.closeButtonAriaLabel || '');\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderContainer = function renderContainer(instance, params) {\n var container = getContainer();\n if (!container) {\n return;\n }\n handleBackdropParam(container, params.backdrop);\n handlePositionParam(container, params.position);\n handleGrowParam(container, params.grow);\n\n // Custom class\n applyCustomClass(container, params, 'container');\n };\n\n /**\n * @param {HTMLElement} container\n * @param {SweetAlertOptions['backdrop']} backdrop\n */\n function handleBackdropParam(container, backdrop) {\n if (typeof backdrop === 'string') {\n container.style.background = backdrop;\n } else if (!backdrop) {\n addClass([document.documentElement, document.body], swalClasses['no-backdrop']);\n }\n }\n\n /**\n * @param {HTMLElement} container\n * @param {SweetAlertOptions['position']} position\n */\n function handlePositionParam(container, position) {\n if (!position) {\n return;\n }\n if (position in swalClasses) {\n addClass(container, swalClasses[position]);\n } else {\n warn('The \"position\" parameter is not valid, defaulting to \"center\"');\n addClass(container, swalClasses.center);\n }\n }\n\n /**\n * @param {HTMLElement} container\n * @param {SweetAlertOptions['grow']} grow\n */\n function handleGrowParam(container, grow) {\n if (!grow) {\n return;\n }\n addClass(container, swalClasses[\"grow-\".concat(grow)]);\n }\n\n /**\n * This module contains `WeakMap`s for each effectively-\"private property\" that a `Swal` has.\n * For example, to set the private property \"foo\" of `this` to \"bar\", you can `privateProps.foo.set(this, 'bar')`\n * This is the approach that Babel will probably take to implement private methods/fields\n * https://github.com/tc39/proposal-private-methods\n * https://github.com/babel/babel/pull/7555\n * Once we have the changes from that PR in Babel, and our core class fits reasonable in *one module*\n * then we can use that language feature.\n */\n\n var privateProps = {\n innerParams: new WeakMap(),\n domCache: new WeakMap()\n };\n\n /** @type {InputClass[]} */\n var inputClasses = ['input', 'file', 'range', 'select', 'radio', 'checkbox', 'textarea'];\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderInput = function renderInput(instance, params) {\n var popup = getPopup();\n if (!popup) {\n return;\n }\n var innerParams = privateProps.innerParams.get(instance);\n var rerender = !innerParams || params.input !== innerParams.input;\n inputClasses.forEach(function (inputClass) {\n var inputContainer = getDirectChildByClass(popup, swalClasses[inputClass]);\n if (!inputContainer) {\n return;\n }\n\n // set attributes\n setAttributes(inputClass, params.inputAttributes);\n\n // set class\n inputContainer.className = swalClasses[inputClass];\n if (rerender) {\n hide(inputContainer);\n }\n });\n if (params.input) {\n if (rerender) {\n showInput(params);\n }\n // set custom class\n setCustomClass(params);\n }\n };\n\n /**\n * @param {SweetAlertOptions} params\n */\n var showInput = function showInput(params) {\n if (!params.input) {\n return;\n }\n if (!renderInputType[params.input]) {\n error(\"Unexpected type of input! Expected \".concat(Object.keys(renderInputType).join(' | '), \", got \\\"\").concat(params.input, \"\\\"\"));\n return;\n }\n var inputContainer = getInputContainer(params.input);\n var input = renderInputType[params.input](inputContainer, params);\n show(inputContainer);\n\n // input autofocus\n if (params.inputAutoFocus) {\n setTimeout(function () {\n focusInput(input);\n });\n }\n };\n\n /**\n * @param {HTMLInputElement} input\n */\n var removeAttributes = function removeAttributes(input) {\n for (var i = 0; i < input.attributes.length; i++) {\n var attrName = input.attributes[i].name;\n if (!['id', 'type', 'value', 'style'].includes(attrName)) {\n input.removeAttribute(attrName);\n }\n }\n };\n\n /**\n * @param {InputClass} inputClass\n * @param {SweetAlertOptions['inputAttributes']} inputAttributes\n */\n var setAttributes = function setAttributes(inputClass, inputAttributes) {\n var input = getInput$1(getPopup(), inputClass);\n if (!input) {\n return;\n }\n removeAttributes(input);\n for (var attr in inputAttributes) {\n input.setAttribute(attr, inputAttributes[attr]);\n }\n };\n\n /**\n * @param {SweetAlertOptions} params\n */\n var setCustomClass = function setCustomClass(params) {\n var inputContainer = getInputContainer(params.input);\n if (_typeof(params.customClass) === 'object') {\n addClass(inputContainer, params.customClass.input);\n }\n };\n\n /**\n * @param {HTMLInputElement | HTMLTextAreaElement} input\n * @param {SweetAlertOptions} params\n */\n var setInputPlaceholder = function setInputPlaceholder(input, params) {\n if (!input.placeholder || params.inputPlaceholder) {\n input.placeholder = params.inputPlaceholder;\n }\n };\n\n /**\n * @param {Input} input\n * @param {Input} prependTo\n * @param {SweetAlertOptions} params\n */\n var setInputLabel = function setInputLabel(input, prependTo, params) {\n if (params.inputLabel) {\n var label = document.createElement('label');\n var labelClass = swalClasses['input-label'];\n label.setAttribute('for', input.id);\n label.className = labelClass;\n if (_typeof(params.customClass) === 'object') {\n addClass(label, params.customClass.inputLabel);\n }\n label.innerText = params.inputLabel;\n prependTo.insertAdjacentElement('beforebegin', label);\n }\n };\n\n /**\n * @param {SweetAlertOptions['input']} inputType\n * @returns {HTMLElement}\n */\n var getInputContainer = function getInputContainer(inputType) {\n return getDirectChildByClass(getPopup(), swalClasses[inputType] || swalClasses.input);\n };\n\n /**\n * @param {HTMLInputElement | HTMLOutputElement | HTMLTextAreaElement} input\n * @param {SweetAlertOptions['inputValue']} inputValue\n */\n var checkAndSetInputValue = function checkAndSetInputValue(input, inputValue) {\n if (['string', 'number'].includes(_typeof(inputValue))) {\n input.value = \"\".concat(inputValue);\n } else if (!isPromise(inputValue)) {\n warn(\"Unexpected type of inputValue! Expected \\\"string\\\", \\\"number\\\" or \\\"Promise\\\", got \\\"\".concat(_typeof(inputValue), \"\\\"\"));\n }\n };\n\n /** @type {Record\\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n \\n \\n \").concat(content, \"
\");\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderImage = function renderImage(instance, params) {\n var image = getImage();\n if (!image) {\n return;\n }\n if (!params.imageUrl) {\n hide(image);\n return;\n }\n show(image, '');\n\n // Src, alt\n image.setAttribute('src', params.imageUrl);\n image.setAttribute('alt', params.imageAlt || '');\n\n // Width, height\n applyNumericalStyle(image, 'width', params.imageWidth);\n applyNumericalStyle(image, 'height', params.imageHeight);\n\n // Class\n image.className = swalClasses.image;\n applyCustomClass(image, params, 'image');\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderPopup = function renderPopup(instance, params) {\n var container = getContainer();\n var popup = getPopup();\n if (!container || !popup) {\n return;\n }\n\n // Width\n // https://github.com/sweetalert2/sweetalert2/issues/2170\n if (params.toast) {\n applyNumericalStyle(container, 'width', params.width);\n popup.style.width = '100%';\n var loader = getLoader();\n loader && popup.insertBefore(loader, getIcon());\n } else {\n applyNumericalStyle(popup, 'width', params.width);\n }\n\n // Padding\n applyNumericalStyle(popup, 'padding', params.padding);\n\n // Color\n if (params.color) {\n popup.style.color = params.color;\n }\n\n // Background\n if (params.background) {\n popup.style.background = params.background;\n }\n hide(getValidationMessage());\n\n // Classes\n addClasses$1(popup, params);\n };\n\n /**\n * @param {HTMLElement} popup\n * @param {SweetAlertOptions} params\n */\n var addClasses$1 = function addClasses(popup, params) {\n var showClass = params.showClass || {};\n // Default Class + showClass when updating Swal.update({})\n popup.className = \"\".concat(swalClasses.popup, \" \").concat(isVisible$1(popup) ? showClass.popup : '');\n if (params.toast) {\n addClass([document.documentElement, document.body], swalClasses['toast-shown']);\n addClass(popup, swalClasses.toast);\n } else {\n addClass(popup, swalClasses.modal);\n }\n\n // Custom class\n applyCustomClass(popup, params, 'popup');\n if (typeof params.customClass === 'string') {\n addClass(popup, params.customClass);\n }\n\n // Icon class (#1842)\n if (params.icon) {\n addClass(popup, swalClasses[\"icon-\".concat(params.icon)]);\n }\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderProgressSteps = function renderProgressSteps(instance, params) {\n var progressStepsContainer = getProgressSteps();\n if (!progressStepsContainer) {\n return;\n }\n var progressSteps = params.progressSteps,\n currentProgressStep = params.currentProgressStep;\n if (!progressSteps || progressSteps.length === 0 || currentProgressStep === undefined) {\n hide(progressStepsContainer);\n return;\n }\n show(progressStepsContainer);\n progressStepsContainer.textContent = '';\n if (currentProgressStep >= progressSteps.length) {\n warn('Invalid currentProgressStep parameter, it should be less than progressSteps.length ' + '(currentProgressStep like JS arrays starts from 0)');\n }\n progressSteps.forEach(function (step, index) {\n var stepEl = createStepElement(step);\n progressStepsContainer.appendChild(stepEl);\n if (index === currentProgressStep) {\n addClass(stepEl, swalClasses['active-progress-step']);\n }\n if (index !== progressSteps.length - 1) {\n var lineEl = createLineElement(params);\n progressStepsContainer.appendChild(lineEl);\n }\n });\n };\n\n /**\n * @param {string} step\n * @returns {HTMLLIElement}\n */\n var createStepElement = function createStepElement(step) {\n var stepEl = document.createElement('li');\n addClass(stepEl, swalClasses['progress-step']);\n setInnerHtml(stepEl, step);\n return stepEl;\n };\n\n /**\n * @param {SweetAlertOptions} params\n * @returns {HTMLLIElement}\n */\n var createLineElement = function createLineElement(params) {\n var lineEl = document.createElement('li');\n addClass(lineEl, swalClasses['progress-step-line']);\n if (params.progressStepsDistance) {\n applyNumericalStyle(lineEl, 'width', params.progressStepsDistance);\n }\n return lineEl;\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var renderTitle = function renderTitle(instance, params) {\n var title = getTitle();\n if (!title) {\n return;\n }\n showWhenInnerHtmlPresent(title);\n toggle(title, params.title || params.titleText, 'block');\n if (params.title) {\n parseHtmlToContainer(params.title, title);\n }\n if (params.titleText) {\n title.innerText = params.titleText;\n }\n\n // Custom class\n applyCustomClass(title, params, 'title');\n };\n\n /**\n * @param {SweetAlert} instance\n * @param {SweetAlertOptions} params\n */\n var render = function render(instance, params) {\n renderPopup(instance, params);\n renderContainer(instance, params);\n renderProgressSteps(instance, params);\n renderIcon(instance, params);\n renderImage(instance, params);\n renderTitle(instance, params);\n renderCloseButton(instance, params);\n renderContent(instance, params);\n renderActions(instance, params);\n renderFooter(instance, params);\n var popup = getPopup();\n if (typeof params.didRender === 'function' && popup) {\n params.didRender(popup);\n }\n };\n\n /*\n * Global function to determine if SweetAlert2 popup is shown\n */\n var isVisible = function isVisible() {\n return isVisible$1(getPopup());\n };\n\n /*\n * Global function to click 'Confirm' button\n */\n var clickConfirm = function clickConfirm() {\n var _dom$getConfirmButton;\n return (_dom$getConfirmButton = getConfirmButton()) === null || _dom$getConfirmButton === void 0 ? void 0 : _dom$getConfirmButton.click();\n };\n\n /*\n * Global function to click 'Deny' button\n */\n var clickDeny = function clickDeny() {\n var _dom$getDenyButton;\n return (_dom$getDenyButton = getDenyButton()) === null || _dom$getDenyButton === void 0 ? void 0 : _dom$getDenyButton.click();\n };\n\n /*\n * Global function to click 'Cancel' button\n */\n var clickCancel = function clickCancel() {\n var _dom$getCancelButton;\n return (_dom$getCancelButton = getCancelButton()) === null || _dom$getCancelButton === void 0 ? void 0 : _dom$getCancelButton.click();\n };\n\n /** @typedef {'cancel' | 'backdrop' | 'close' | 'esc' | 'timer'} DismissReason */\n\n /** @type {Record