exports.id = 73273; exports.ids = [73273]; exports.modules = { /***/ 69457: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); var _path, _path2; function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } var SvgBook = function SvgBook(props) { return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "feather feather-book" }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", { d: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" }))); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgBook); /***/ }), /***/ 49880: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); var _path; function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } var SvgChevronLeft = function SvgChevronLeft(props) { return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({ width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", { d: "M8.842 3.135a.5.5 0 0 1 .023.707L5.435 7.5l3.43 3.658a.5.5 0 0 1-.73.684l-3.75-4a.5.5 0 0 1 0-.684l3.75-4a.5.5 0 0 1 .707-.023Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }))); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgChevronLeft); /***/ }), /***/ 3932: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); var _path; function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } var SvgChevronRight = function SvgChevronRight(props) { return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({ width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", { d: "M6.158 3.135a.5.5 0 0 1 .707.023l3.75 4a.5.5 0 0 1 0 .684l-3.75 4a.5.5 0 1 1-.73-.684L9.566 7.5l-3.43-3.658a.5.5 0 0 1 .023-.707Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }))); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgChevronRight); /***/ }), /***/ 8674: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); var _path; function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } var SvgClock = function SvgClock(props) { return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6" }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" }))); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgClock); /***/ }), /***/ 13646: /***/ ((module) => { // Exports module.exports = { "rangeInputContainer": "ReadingGoalInput_rangeInputContainer__ZEAD_", "inputContainer": "ReadingGoalInput_inputContainer__I_R3M", "fullWidth": "ReadingGoalInput_fullWidth__MyI06", "input": "ReadingGoalInput_input__PtUNh", "label": "ReadingGoalInput_label__lxzo1" }; /***/ }), /***/ 72549: /***/ ((module) => { // Exports module.exports = { "label": "Combobox_label__0IpZG", "disabledSearch": "Combobox_disabledSearch__8rVdt", "comboboxContainer": "Combobox_comboboxContainer__kgP9M", "fixedWidth": "Combobox_fixedWidth__CVwtY", "enabled": "Combobox_enabled__N0Xzz", "select": "Combobox_select__RdEEM", "selector": "Combobox_selector__w5Qy_", "activeSelector": "Combobox_activeSelector__87gl9", "disabledSelector": "Combobox_disabledSelector__f7dH_", "hasError": "Combobox_hasError__btZox", "placeholder": "Combobox_placeholder__KxuIs", "overflow": "Combobox_overflow__wDx9g", "multiSelectSearchInput": "Combobox_multiSelectSearchInput__50i6f", "smallSearchInput": "Combobox_smallSearchInput__Fp22X", "mediumSearchInput": "Combobox_mediumSearchInput__rHPbe", "largeSearchInput": "Combobox_largeSearchInput__B6SoL", "overflowItem": "Combobox_overflowItem__3lo49", "tagContainer": "Combobox_tagContainer__2pMfb", "search": "Combobox_search__7gUOl", "fullWidth": "Combobox_fullWidth__pBxh_" }; /***/ }), /***/ 92460: /***/ ((module) => { // Exports module.exports = { "input": "ComboboxItem_input__tPkeb", "itemLabel": "ComboboxItem_itemLabel__i2tdo", "itemContainer": "ComboboxItem_itemContainer__B_pz1", "enabledItem": "ComboboxItem_enabledItem__nMWDe", "disabledItem": "ComboboxItem_disabledItem__Wk3vx", "checkedItem": "ComboboxItem_checkedItem__fltvV", "prefix": "ComboboxItem_prefix__iu_PS", "labelContainer": "ComboboxItem_labelContainer__sYcB_", "prefixContainer": "ComboboxItem_prefixContainer__bFcOl", "suffixContainer": "ComboboxItem_suffixContainer__Fof34" }; /***/ }), /***/ 47973: /***/ ((module) => { // Exports module.exports = { "comboboxBodyContainer": "ComboboxItems_comboboxBodyContainer__U8FV9", "fixedWidth": "ComboboxItems_fixedWidth__Ja9N8", "largeComboboxBodyContainer": "ComboboxItems_largeComboboxBodyContainer__yEoGv", "openedComboboxBodyContainer": "ComboboxItems_openedComboboxBodyContainer__FTC8W", "itemsContainer": "ComboboxItems_itemsContainer__gSdDs" }; /***/ }), /***/ 82601: /***/ ((module) => { // Exports module.exports = { "caretIconButton": "CaretInputIcon_caretIconButton__CFt6U", "openedCaretIconButton": "CaretInputIcon_openedCaretIconButton__xrU_c" }; /***/ }), /***/ 80899: /***/ ((module) => { // Exports module.exports = { "clearIconContainer": "ClearInputIcon_clearIconContainer__SJWTP", "icon": "ClearInputIcon_icon__m6i8c" }; /***/ }), /***/ 24899: /***/ ((module) => { // Exports module.exports = { "iconContainer": "SearchInputIcon_iconContainer__z7b2G", "icon": "SearchInputIcon_icon__t1nGp", "selectSearch": "SearchInputIcon_selectSearch__Gdqtn" }; /***/ }), /***/ 17874: /***/ ((module) => { // Exports module.exports = { "item": "Tag_item__0hGuv", "largeItem": "Tag_largeItem__hrrwN", "itemContent": "Tag_itemContent__Pxwpg", "itemRemove": "Tag_itemRemove__9cr6J" }; /***/ }), /***/ 40458: /***/ ((module) => { // Exports module.exports = { "container": "Select_container___DCC_", "withBackground": "Select_withBackground__rpdEL", "defaultStyledContainer": "Select_defaultStyledContainer__b32Mm", "smallContainer": "Select_smallContainer__L2Lff", "mediumContainer": "Select_mediumContainer__MF_Vq", "largeContainer": "Select_largeContainer___qGs0", "disabledContainer": "Select_disabledContainer__gi7YD", "arrow": "Select_arrow__WAbAk", "disabledArrow": "Select_disabledArrow__V4nEO", "select": "Select_select__BnH2G", "defaultStyledSelect": "Select_defaultStyledSelect__LmeKj", "disabledSelect": "Select_disabledSelect___R3Jd" }; /***/ }), /***/ 37326: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; // EXPORTS __webpack_require__.d(__webpack_exports__, { "Z": () => (/* binding */ ReadingGoalInput_VerseRangeInput) }); // EXTERNAL MODULE: external "react/jsx-runtime" var jsx_runtime_ = __webpack_require__(20997); // EXTERNAL MODULE: external "react" var external_react_ = __webpack_require__(16689); // EXTERNAL MODULE: external "next-translate/useTranslation" var useTranslation_ = __webpack_require__(60866); var useTranslation_default = /*#__PURE__*/__webpack_require__.n(useTranslation_); // EXTERNAL MODULE: ./src/components/ReadingGoal/ReadingGoalInput/ReadingGoalInput.module.scss var ReadingGoalInput_module = __webpack_require__(13646); var ReadingGoalInput_module_default = /*#__PURE__*/__webpack_require__.n(ReadingGoalInput_module); // EXTERNAL MODULE: ./src/contexts/DataContext.ts var DataContext = __webpack_require__(70813); // EXTERNAL MODULE: external "classnames" var external_classnames_ = __webpack_require__(59003); var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_); // EXTERNAL MODULE: external "react-hotkeys-hook" var external_react_hotkeys_hook_ = __webpack_require__(2784); // EXTERNAL MODULE: ./src/components/dls/Forms/Combobox/Combobox.module.scss var Combobox_module = __webpack_require__(72549); var Combobox_module_default = /*#__PURE__*/__webpack_require__.n(Combobox_module); // EXTERNAL MODULE: ./src/components/dls/Forms/Combobox/ComboboxItems/ComboboxItems.module.scss var ComboboxItems_module = __webpack_require__(47973); var ComboboxItems_module_default = /*#__PURE__*/__webpack_require__.n(ComboboxItems_module); // EXTERNAL MODULE: ./src/components/dls/Forms/Combobox/ComboboxItem/ComboboxItem.module.scss var ComboboxItem_module = __webpack_require__(92460); var ComboboxItem_module_default = /*#__PURE__*/__webpack_require__.n(ComboboxItem_module); ;// CONCATENATED MODULE: ./src/components/dls/Forms/Combobox/ComboboxItem/index.tsx const ComboboxItem = ({ checked , disabled , itemId , selectedItemRef , item , onItemSelectedChange , isNotFound =false , emptyMessage , })=>{ if (isNotFound) { return /*#__PURE__*/ jsx_runtime_.jsx("div", { className: external_classnames_default()((ComboboxItem_module_default()).itemContainer, (ComboboxItem_module_default()).disabledItem), children: emptyMessage }); } return /*#__PURE__*/ jsx_runtime_.jsx("label", { htmlFor: itemId, children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { ref: checked ? selectedItemRef : null, className: external_classnames_default()((ComboboxItem_module_default()).itemContainer, { [(ComboboxItem_module_default()).disabledItem]: disabled }, { [(ComboboxItem_module_default()).enabledItem]: !disabled }, { [(ComboboxItem_module_default()).checkedItem]: checked }), children: [ /*#__PURE__*/ jsx_runtime_.jsx("input", { type: "checkbox", className: (ComboboxItem_module_default()).input, id: itemId, name: item.name, disabled: disabled, checked: checked, onChange: onItemSelectedChange, "data-item-label": item.label }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("label", { htmlFor: itemId, className: external_classnames_default()((ComboboxItem_module_default()).labelContainer, { [(ComboboxItem_module_default()).itemLabel]: !disabled }), children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: (ComboboxItem_module_default()).prefixContainer, children: [ item.prefix && /*#__PURE__*/ jsx_runtime_.jsx("div", { className: (ComboboxItem_module_default()).prefix, children: item.prefix }), " ", item.label ] }), item.suffix && /*#__PURE__*/ jsx_runtime_.jsx("div", { className: (ComboboxItem_module_default()).suffixContainer, children: item.suffix }) ] }) ] }) }, itemId); }; /* harmony default export */ const Combobox_ComboboxItem = (/*#__PURE__*/(0,external_react_.memo)(ComboboxItem)); ;// CONCATENATED MODULE: ./src/components/dls/Forms/Combobox/types/ComboboxSize.ts var ComboboxSize; (function(ComboboxSize) { ComboboxSize["Small"] = "small"; ComboboxSize["Medium"] = "medium"; ComboboxSize["Large"] = "large"; })(ComboboxSize || (ComboboxSize = {})); /* harmony default export */ const types_ComboboxSize = (ComboboxSize); // EXTERNAL MODULE: ./src/hooks/useScrollToElement.ts var useScrollToElement = __webpack_require__(56748); ;// CONCATENATED MODULE: ./src/components/dls/Forms/Combobox/ComboboxItems/index.tsx const SCROLL_TO_SELECTED_ELEMENT_OPTIONS = { block: "nearest" }; const ComboboxItems = ({ isOpened , disabled , size , filteredItems , isMultiSelect , preventSelecting , emptyMessage , id , onItemSelectedChange , selectedValue , fixedWidth , })=>{ const [scrollToSelectedItem, selectedItemRef] = (0,useScrollToElement/* default */.ZP)(SCROLL_TO_SELECTED_ELEMENT_OPTIONS); // once the dropdown is opened, scroll to the selected item. (0,external_react_.useEffect)(()=>{ if (isOpened) { scrollToSelectedItem(); } }, [ isOpened, scrollToSelectedItem ]); return /*#__PURE__*/ jsx_runtime_.jsx("div", { className: external_classnames_default()((ComboboxItems_module_default()).comboboxBodyContainer, { [(ComboboxItems_module_default()).openedComboboxBodyContainer]: isOpened, [(ComboboxItems_module_default()).largeComboboxBodyContainer]: size === types_ComboboxSize.Large, [(ComboboxItems_module_default()).fixedWidth]: fixedWidth }), "aria-modal": "true", role: "dialog", children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: (ComboboxItems_module_default()).itemsContainer, role: "listbox", children: [ filteredItems.map((item)=>{ let checked = false; if (selectedValue) { if (!isMultiSelect && selectedValue === item.name) { checked = true; } else if (isMultiSelect && selectedValue[item.name] !== undefined) { checked = true; } } const isItemDisabled = disabled === true || item.disabled === true || preventSelecting; const itemId = `${id}-${item.id}`; return /*#__PURE__*/ jsx_runtime_.jsx(Combobox_ComboboxItem, { onItemSelectedChange: onItemSelectedChange, checked: checked, disabled: isItemDisabled, itemId: itemId, selectedItemRef: selectedItemRef, item: item }, itemId); }), !filteredItems.length && /*#__PURE__*/ jsx_runtime_.jsx(Combobox_ComboboxItem, { emptyMessage: emptyMessage, checked: false, disabled: true, isNotFound: true }) ] }) }); }; /* harmony default export */ const Combobox_ComboboxItems = (ComboboxItems); // EXTERNAL MODULE: ./src/components/dls/Forms/Combobox/Icons/CaretInputIcon.module.scss var CaretInputIcon_module = __webpack_require__(82601); var CaretInputIcon_module_default = /*#__PURE__*/__webpack_require__.n(CaretInputIcon_module); // EXTERNAL MODULE: ./public/icons/caret-down.svg var caret_down = __webpack_require__(85970); ;// CONCATENATED MODULE: ./src/components/dls/Forms/Combobox/Icons/CaretInputIcon.tsx const CaretInputIcon = ({ shouldShowIcon , isOpened })=>{ if (!shouldShowIcon) { return null; } return /*#__PURE__*/ jsx_runtime_.jsx("div", { className: external_classnames_default()((CaretInputIcon_module_default()).caretIconButton, { [(CaretInputIcon_module_default()).openedCaretIconButton]: isOpened }), "aria-label": "Show more", children: /*#__PURE__*/ jsx_runtime_.jsx(caret_down/* default */.Z, {}) }); }; /* harmony default export */ const Icons_CaretInputIcon = (CaretInputIcon); // EXTERNAL MODULE: ./src/components/dls/Forms/Combobox/Icons/ClearInputIcon.module.scss var ClearInputIcon_module = __webpack_require__(80899); var ClearInputIcon_module_default = /*#__PURE__*/__webpack_require__.n(ClearInputIcon_module); // EXTERNAL MODULE: ./public/icons/close.svg var icons_close = __webpack_require__(51053); ;// CONCATENATED MODULE: ./src/components/dls/Forms/Combobox/Icons/ClearInputIcon.tsx const ClearInputIcon = ({ shouldShowIcon , onClearButtonClicked })=>{ if (!shouldShowIcon) { return null; } return /*#__PURE__*/ jsx_runtime_.jsx("span", { className: (ClearInputIcon_module_default()).clearIconContainer, // eslint-disable-next-line react/no-unknown-property unselectable: "on", "aria-hidden": "true", onClick: onClearButtonClicked, children: /*#__PURE__*/ jsx_runtime_.jsx("span", { role: "img", "aria-label": "close-circle", className: (ClearInputIcon_module_default()).icon, children: /*#__PURE__*/ jsx_runtime_.jsx(icons_close/* default */.Z, {}) }) }); }; /* harmony default export */ const Icons_ClearInputIcon = (ClearInputIcon); // EXTERNAL MODULE: ./src/components/dls/Forms/Combobox/Icons/SearchInputIcon.module.scss var SearchInputIcon_module = __webpack_require__(24899); var SearchInputIcon_module_default = /*#__PURE__*/__webpack_require__.n(SearchInputIcon_module); // EXTERNAL MODULE: ./public/icons/search.svg var search = __webpack_require__(29033); ;// CONCATENATED MODULE: ./src/components/dls/Forms/Combobox/Icons/SearchInputIcon.tsx /* eslint-disable react/no-unknown-property */ const SearchInputIcon = ()=>/*#__PURE__*/ jsx_runtime_.jsx("span", { className: external_classnames_default()((SearchInputIcon_module_default()).iconContainer, (SearchInputIcon_module_default()).selectSearch), unselectable: "on", "aria-hidden": "true", children: /*#__PURE__*/ jsx_runtime_.jsx("span", { role: "img", className: (SearchInputIcon_module_default()).icon, children: /*#__PURE__*/ jsx_runtime_.jsx(search/* default */.Z, {}) }) }); /* harmony default export */ const Icons_SearchInputIcon = (SearchInputIcon); // EXTERNAL MODULE: ./src/components/dls/Forms/Combobox/Tag/Tag.module.scss var Tag_module = __webpack_require__(17874); var Tag_module_default = /*#__PURE__*/__webpack_require__.n(Tag_module); ;// CONCATENATED MODULE: ./src/components/dls/Forms/Combobox/Tag/index.tsx /* eslint-disable react/no-unknown-property */ const Tag = ({ onRemoveTagClicked , size , tag })=>/*#__PURE__*/ (0,jsx_runtime_.jsxs)("span", { className: external_classnames_default()((Tag_module_default()).item, { [(Tag_module_default()).largeItem]: size === types_ComboboxSize.Large }), children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: (Tag_module_default()).itemContent, children: tag }), /*#__PURE__*/ jsx_runtime_.jsx("span", { className: (Tag_module_default()).itemRemove, unselectable: "on", "aria-hidden": "true", onClick: (event)=>{ onRemoveTagClicked(event, tag); }, children: /*#__PURE__*/ jsx_runtime_.jsx("span", { role: "img", "aria-label": "close", className: (Tag_module_default()).icon, children: /*#__PURE__*/ jsx_runtime_.jsx(icons_close/* default */.Z, {}) }) }) ] }); /* harmony default export */ const Combobox_Tag = (/*#__PURE__*/(0,external_react_.memo)(Tag)); // EXTERNAL MODULE: ./src/hooks/useFocusElement.ts var useFocusElement = __webpack_require__(79862); // EXTERNAL MODULE: ./src/hooks/useOutsideClickDetector.ts var useOutsideClickDetector = __webpack_require__(38646); ;// CONCATENATED MODULE: ./src/components/dls/Forms/Combobox/index.tsx /* eslint-disable react/no-unknown-property */ /* eslint-disable max-lines */ /* eslint-disable jsx-a11y/role-has-required-aria-props */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ const Combobox = ({ items , placeholder ="Search..." , hasError =false , value , initialInputValue , disabled =false , clearable =true , isMultiSelect =false , emptyMessage ="No results" , tagsLimit , label , id , size =types_ComboboxSize.Medium , minimumRequiredItems =0 , onChange , fixedWidth =true , })=>{ const { 0: isOpened , 1: setIsOpened } = (0,external_react_.useState)(false); const { 0: inputValue , 1: setInputValue } = (0,external_react_.useState)(initialInputValue || ""); const { 0: selectedValue , 1: setSelectedValue } = (0,external_react_.useState)(()=>{ if (!value) { return getDefaultValue(isMultiSelect); } if (!isMultiSelect) { return value; } return convertArrayToObject(value); }); const { 0: filteredItems , 1: setFilteredItems } = (0,external_react_.useState)(items); const [focusInput, inputRef] = (0,useFocusElement/* default */.Z)(); const comboBoxRef = (0,external_react_.useRef)(null); // instead of running items.find in the closeCombobox function, we can create a map to memoize the result const valueToLabelMap = (0,external_react_.useMemo)(()=>{ const map = {}; items.forEach((item)=>{ map[item.value] = item.label; }); return map; }, [ items ]); const closeCombobox = (0,external_react_.useCallback)(()=>{ if (!isMultiSelect) { const currentValue = selectedValue; setInputValue(valueToLabelMap[currentValue] ?? currentValue); } else { setInputValue(""); } setIsOpened(false); }, [ isMultiSelect, selectedValue, valueToLabelMap ]); (0,useOutsideClickDetector/* default */.Z)(comboBoxRef, closeCombobox, isOpened); (0,external_react_hotkeys_hook_.useHotkeys)("Escape", closeCombobox, { enabled: isOpened, enableOnTags: [ "INPUT" ] }); // if there are any changes in the items, we should update the filteredItems. // this is necessary when the parent items are have initial empty value and // the actual values are fetched remotely and by the time they have a value, // filteredItems would have already been initialized with the initial items value // and the actual values wouldn't reflect. (0,external_react_.useEffect)(()=>{ setFilteredItems(items); }, [ items ]); // filter items when the search query changes (0,external_react_.useEffect)(()=>{ // if the search query is empty it means it has been cleared so we set the original items back. setFilteredItems(!inputValue ? items : items.filter((item)=>// we convert the search query and the item's label to lowercase first then check if the label contains a part/all of the search query. item.label.toLowerCase().includes(inputValue.toLowerCase()))); }, [ inputValue, items ]); // if there are any changes in the value, we should update the selectedValue. (0,external_react_.useEffect)(()=>{ if (!value) { setSelectedValue(getDefaultValue(isMultiSelect)); } else { setSelectedValue(isMultiSelect ? convertArrayToObject(value) : value); } }, [ value, isMultiSelect ]); // if there are any changes in the initialInputValue, we should update the inputValue. (0,external_react_.useEffect)(()=>{ setInputValue(initialInputValue); }, [ initialInputValue ]); const tags = (0,external_react_.useMemo)(()=>{ if (!isMultiSelect) { return null; } // get the labels of the selected items by looking inside items array return items.filter((item)=>Object.keys(selectedValue).includes(item.name)).map((item)=>item.label); }, [ isMultiSelect, items, selectedValue ]); /** * By default we can un-select any items. We disallow unselecting items when * we meet the the following conditions: * * 1. minimumRequiredItems has a value above 0. * 2. if it's isMultiSelect: * 2.1 there should be some selected items already. * 2.2 the number of selected items are either equal to * or below the minimum required selected items. * 3. if it's not isMultiSelect: there should already be a selected value. */ const hasMinimumRequiredItems = minimumRequiredItems > 0; const preventUnselectingItems = hasMinimumRequiredItems && (tags && tags.length <= minimumRequiredItems || !isMultiSelect && selectedValue); const invokeOnChangeCallback = (0,external_react_.useCallback)((newValue)=>{ if (onChange) { onChange(isMultiSelect ? Object.keys(newValue) : newValue, id); } }, [ id, isMultiSelect, onChange ]); /** * We detect whether we should allow to delete the last selected tag when clicking * the backspace key based on the following conditions: * * 1. it it's multiSelect. * 2. The input value doesn't have a value otherwise, backspace key should be used to remove the input value and not the present tags. * 3. We at least have 1 tag present. * 4. We allow un-selecting items. */ (0,external_react_hotkeys_hook_.useHotkeys)("Backspace", ()=>{ setSelectedValue((prevSelectedValue)=>{ const newSelectedValues = { ...prevSelectedValue }; const lastTag = Object.keys(newSelectedValues).pop(); delete newSelectedValues[lastTag]; invokeOnChangeCallback(newSelectedValues); return newSelectedValues; }); }, { enabled: isOpened && isMultiSelect && !inputValue && !!tags.length && !preventUnselectingItems, enableOnTags: [ "INPUT" ] }, [ invokeOnChangeCallback ]); const onSelectorClicked = ()=>{ setIsOpened((prevIsOpened)=>!prevIsOpened); // we need to focus on the input field whenever the user clicks anywhere inside the component. if (isMultiSelect) { focusInput(); } }; /** * Handle when an item is selected. * * @param {ChangeEvent} event */ const onItemSelectedChange = (0,external_react_.useCallback)((event)=>{ const { itemLabel } = event.target.dataset; const selectedItemName = event.target.name; const isUnSelect = !event.currentTarget.checked; /* only change the selected value if: 1. we are selecting. 2. we are un-selecting and we are not prevented from un-selecting. */ const shouldProcessChange = !isUnSelect || isUnSelect && !preventUnselectingItems; if (isMultiSelect) { if (shouldProcessChange) { setSelectedValue((prevSelectedValues)=>{ const newSelectedValues = { ...prevSelectedValues }; if (isUnSelect) { delete newSelectedValues[selectedItemName]; } else { newSelectedValues[selectedItemName] = true; } invokeOnChangeCallback(newSelectedValues); return newSelectedValues; }); } setInputValue(""); // reset the input value even if it's selecting. } else if (shouldProcessChange) { setInputValue(isUnSelect ? "" : itemLabel); setSelectedValue(()=>{ const newSelectedValue = isUnSelect ? "" : selectedItemName; invokeOnChangeCallback(newSelectedValue); return newSelectedValue; }); } setIsOpened(false); // close the items container }, [ preventUnselectingItems, invokeOnChangeCallback, isMultiSelect ]); /** * Handle when the user searches for an item. * * @param {React.FormEvent} event * @returns {void} */ const onInputValueChange = (event)=>{ const newInputValue = event.currentTarget.value; setInputValue(newInputValue); setIsOpened(true); }; /** * Handle when the clear button is clicked. * We will reset the input value, the selected value * and the filtered items. * * @param {React.MouseEvent} event */ const onClearButtonClicked = (event)=>{ event.stopPropagation(); /* Don't allow the clearing of the selected items when: 1. it's multiSelect. 2. has minimum required items set. This is done to avoid clearing all items while the minimum amount of items that should be selected is set. */ if (!(hasMinimumRequiredItems && isMultiSelect)) { setInputValue(""); // if it's allowed to un-select items. if (!preventUnselectingItems) { setSelectedValue(()=>{ const defaultSelectedValue = getDefaultValue(isMultiSelect); invokeOnChangeCallback(defaultSelectedValue); return defaultSelectedValue; }); } } }; /** * Handle when removing a tag. * * @param {React.MouseEvent} event * @param {string} tag */ const onRemoveTagClicked = (0,external_react_.useCallback)((event, tag)=>{ event.stopPropagation(); // if it's allowed to un-select items. if (!preventUnselectingItems) { const toBeRemovedTag = items.find((item)=>item.label === tag); setSelectedValue((prevSelectedValues)=>{ const newSelectedValues = { ...prevSelectedValues }; delete newSelectedValues[toBeRemovedTag.name]; invokeOnChangeCallback(newSelectedValues); return newSelectedValues; }); } }, [ invokeOnChangeCallback, items, preventUnselectingItems ]); const shouldShowCaret = !isMultiSelect && !inputValue || isMultiSelect && !inputValue && !tags.length; const shouldShowClear = clearable && !shouldShowCaret; // if we should prevent selecting when the tags limit has been reached. const preventSelecting = tagsLimit && tags && tags.length >= tagsLimit; return /*#__PURE__*/ (0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [ label && /*#__PURE__*/ jsx_runtime_.jsx("p", { className: (Combobox_module_default()).label, children: label }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { ref: comboBoxRef, className: external_classnames_default()((Combobox_module_default()).comboboxContainer, { [(Combobox_module_default()).enabled]: !disabled, [(Combobox_module_default()).fixedWidth]: fixedWidth }), children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { onClick: onSelectorClicked, className: external_classnames_default()((Combobox_module_default()).select, { [(Combobox_module_default()).disabledSearch]: disabled }), children: [ /*#__PURE__*/ jsx_runtime_.jsx(Icons_SearchInputIcon, {}), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: external_classnames_default()((Combobox_module_default()).selector, { [(Combobox_module_default()).disabledSelector]: disabled, [(Combobox_module_default()).activeSelector]: !disabled && !hasError && isOpened, [(Combobox_module_default()).hasError]: hasError }), children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: external_classnames_default()({ [(Combobox_module_default()).overflow]: isMultiSelect, [(Combobox_module_default()).fullWidth]: !isMultiSelect }), children: [ isMultiSelect && tags.map((tag)=>/*#__PURE__*/ jsx_runtime_.jsx("div", { className: external_classnames_default()((Combobox_module_default()).overflowItem, (Combobox_module_default()).tagContainer), children: /*#__PURE__*/ jsx_runtime_.jsx(Combobox_Tag, { tag: tag, onRemoveTagClicked: onRemoveTagClicked, size: size }) }, tag)), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: (Combobox_module_default()).overflowItem, children: /*#__PURE__*/ jsx_runtime_.jsx("div", { className: external_classnames_default()((Combobox_module_default()).search, { [(Combobox_module_default()).fullWidth]: !isMultiSelect }), style: { ...isMultiSelect && inputValue && { width: `${inputValue.length}rem` } }, children: /*#__PURE__*/ jsx_runtime_.jsx("input", { ref: inputRef, autoComplete: "off", type: "search", className: external_classnames_default()((Combobox_module_default()).multiSelectSearchInput, { [(Combobox_module_default()).smallSearchInput]: size === types_ComboboxSize.Small, [(Combobox_module_default()).mediumSearchInput]: size === types_ComboboxSize.Medium, [(Combobox_module_default()).largeSearchInput]: size === types_ComboboxSize.Large }), role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpened, "aria-owns": id, "aria-autocomplete": "list", onChange: onInputValueChange, value: inputValue, disabled: disabled, readOnly: false, unselectable: "on", ...!isMultiSelect && { placeholder } }) }) }) ] }), isMultiSelect && !tags.length && !inputValue && /*#__PURE__*/ jsx_runtime_.jsx("span", { className: (Combobox_module_default()).placeholder, children: placeholder }) ] }), /*#__PURE__*/ jsx_runtime_.jsx(Icons_CaretInputIcon, { isOpened: isOpened, shouldShowIcon: shouldShowCaret }), /*#__PURE__*/ jsx_runtime_.jsx(Icons_ClearInputIcon, { shouldShowIcon: shouldShowClear, onClearButtonClicked: onClearButtonClicked }) ] }), /*#__PURE__*/ jsx_runtime_.jsx(Combobox_ComboboxItems, { onItemSelectedChange: onItemSelectedChange, isOpened: isOpened, disabled: disabled, size: size, filteredItems: filteredItems, isMultiSelect: isMultiSelect, preventSelecting: preventSelecting, selectedValue: selectedValue, id: id, emptyMessage: emptyMessage, fixedWidth: fixedWidth }) ] }) ] }); }; /** * Get the default value based on the type: * * - if it's multi-select, it's an empty object. * - if it's single-select, it's an empty string. * * @param {boolean} isMultiSelect * @returns {Value} */ const getDefaultValue = (isMultiSelect)=>isMultiSelect ? {} : ""; /** * Convert the initial values array of strings to an object. * * @param {InitialSelectedItems} array * @returns {MultiSelectValue} */ const convertArrayToObject = (array)=>{ const multiSelectValue = {}; array.forEach((selectedItem)=>{ multiSelectValue[selectedItem] = true; }); return multiSelectValue; }; /* harmony default export */ const Forms_Combobox = (Combobox); // EXTERNAL MODULE: ./types/Range.ts var Range = __webpack_require__(70725); // EXTERNAL MODULE: ./src/utils/generators.ts var generators = __webpack_require__(49184); // EXTERNAL MODULE: ./src/utils/verse.ts var verse = __webpack_require__(44519); ;// CONCATENATED MODULE: ./src/components/ReadingGoal/ReadingGoalInput/VerseRangeInput.tsx /* eslint-disable max-lines */ const VerseRangeInput = ({ rangeStartVerse , rangeEndVerse , onRangeChange , logChange })=>{ const { t , lang } = useTranslation_default()("reading-goal"); const chaptersData = (0,external_react_.useContext)(DataContext/* default */.Z); const { 0: startChapter , 1: setStartChapter } = (0,external_react_.useState)(rangeStartVerse ? (0,verse/* getChapterNumberFromKey */.Tc)(rangeStartVerse).toString() : undefined); const { 0: endChapter , 1: setEndChapter } = (0,external_react_.useState)(rangeEndVerse ? (0,verse/* getChapterNumberFromKey */.Tc)(rangeEndVerse).toString() : undefined); const chapterOptions = (0,external_react_.useMemo)(()=>(0,generators/* generateChapterOptions */.IU)(chaptersData, lang), [ chaptersData, lang ]); const startingVerseOptions = (0,external_react_.useMemo)(()=>(0,generators/* generateVerseOptions */.ZK)(chaptersData, t, lang, startChapter), [ t, lang, chaptersData, startChapter ]); const endingVerseOptions = (0,external_react_.useMemo)(()=>(0,generators/* generateVerseOptions */.ZK)(chaptersData, t, lang, endChapter), [ t, lang, chaptersData, endChapter ]); // useEffect(() => { // if (!rangeStartVerse) { // setStartChapter(undefined); // } // }, [rangeStartVerse]); // useEffect(() => { // if (!rangeEndVerse) { // setEndChapter(undefined); // } // }, [rangeEndVerse]); const endingVerse = (0,external_react_.useMemo)(()=>{ if (!rangeEndVerse) return undefined; return (0,verse/* getVerseNumberFromKey */.tR)(rangeEndVerse).toString(); }, [ rangeEndVerse ]); const startingVerse = (0,external_react_.useMemo)(()=>{ if (!rangeStartVerse) return undefined; return (0,verse/* getVerseNumberFromKey */.tR)(rangeStartVerse).toString(); }, [ rangeStartVerse ]); // eslint-disable-next-line react-func/max-lines-per-function const onChapterChange = (chapterPosition)=>(chapterId)=>{ const isStartChapter = chapterPosition === Range/* RangeItemPosition.Start */.EQ.Start; const oldChapterId = isStartChapter ? startChapter : endChapter; const setChapter = isStartChapter ? setStartChapter : setEndChapter; if (!chapterId || chapterId !== oldChapterId) { onRangeChange(isStartChapter ? { startVerse: null, endVerse: rangeEndVerse } : { startVerse: rangeStartVerse, endVerse: null }); } // if the current value is null, we don't need to log it const currentVerse = isStartChapter ? rangeStartVerse : rangeEndVerse; if (currentVerse && logChange) { logChange(isStartChapter ? "start_verse" : "end_verse", { currentValue: currentVerse, newValue: null }, { chapter: chapterId || null, verse: (isStartChapter ? startingVerse : endingVerse) || null }); } if (!chapterId) { setChapter(undefined); } else { setChapter(chapterId); } }; const startChapterOptions = (0,external_react_.useMemo)(()=>{ if (!endChapter) return chapterOptions; const endChapterIdx = Number(endChapter) - 1; return chapterOptions.slice(0, endChapterIdx + 1); }, [ chapterOptions, endChapter ]); const endChapterOptions = (0,external_react_.useMemo)(()=>{ if (!startChapter) return chapterOptions; const startChapterIdx = Number(startChapter) - 1; return chapterOptions.slice(startChapterIdx); }, [ chapterOptions, startChapter ]); const onVerseChange = (versePosition)=>(verseId)=>{ const isStartVerse = versePosition === Range/* RangeItemPosition.Start */.EQ.Start; const newVerseKey = verseId ? (0,verse/* makeVerseKey */.u)(isStartVerse ? startChapter : endChapter, verseId) : null; onRangeChange(isStartVerse ? { startVerse: newVerseKey, endVerse: rangeEndVerse } : { startVerse: rangeStartVerse, endVerse: newVerseKey }); if (logChange) { logChange(isStartVerse ? "start_verse" : "end_verse", { currentValue: isStartVerse ? rangeStartVerse : rangeEndVerse, newValue: newVerseKey }, { chapter: (isStartVerse ? startChapter : endChapter) || null, verse: verseId || null }); } }; const getInitialInputValue = (inputType)=>{ if (inputType === Range/* RangeItem.StartingChapter */.JF.StartingChapter || inputType === Range/* RangeItem.EndingChapter */.JF.EndingChapter) { const chapterId = inputType === Range/* RangeItem.StartingChapter */.JF.StartingChapter ? startChapter : endChapter; if (!chapterId) return undefined; return chapterOptions[Number(chapterId) - 1]?.label; } const verseId = inputType === Range/* RangeItem.StartingVerse */.JF.StartingVerse ? startingVerse : endingVerse; if (!verseId) return ""; const verseOptions = inputType === Range/* RangeItem.StartingVerse */.JF.StartingVerse ? startingVerseOptions : endingVerseOptions; return verseOptions[Number(verseId) - 1]?.label; }; return /*#__PURE__*/ (0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: (ReadingGoalInput_module_default()).rangeInputContainer, children: [ /*#__PURE__*/ jsx_runtime_.jsx("div", { children: /*#__PURE__*/ jsx_runtime_.jsx(Forms_Combobox, { id: "start-chapter", size: types_ComboboxSize.Large, fixedWidth: false, label: /*#__PURE__*/ jsx_runtime_.jsx("p", { className: (ReadingGoalInput_module_default()).label, children: t("starting-chapter") }), items: startChapterOptions, value: startChapter, initialInputValue: getInitialInputValue(Range/* RangeItem.StartingChapter */.JF.StartingChapter), onChange: onChapterChange(Range/* RangeItemPosition.Start */.EQ.Start) }) }), /*#__PURE__*/ jsx_runtime_.jsx("div", { children: /*#__PURE__*/ jsx_runtime_.jsx(Forms_Combobox, { id: "starting-verse", size: types_ComboboxSize.Large, fixedWidth: false, disabled: !startChapter, label: /*#__PURE__*/ jsx_runtime_.jsx("p", { className: (ReadingGoalInput_module_default()).label, children: t("starting-verse") }), items: startingVerseOptions, value: startingVerse, initialInputValue: getInitialInputValue(Range/* RangeItem.StartingVerse */.JF.StartingVerse), onChange: onVerseChange(Range/* RangeItemPosition.Start */.EQ.Start) }) }) ] }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: (ReadingGoalInput_module_default()).rangeInputContainer, children: [ /*#__PURE__*/ jsx_runtime_.jsx("div", { children: /*#__PURE__*/ jsx_runtime_.jsx(Forms_Combobox, { id: "end-chapter", size: types_ComboboxSize.Large, fixedWidth: false, label: /*#__PURE__*/ jsx_runtime_.jsx("p", { className: (ReadingGoalInput_module_default()).label, children: t("ending-chapter") }), items: endChapterOptions, value: endChapter, initialInputValue: getInitialInputValue(Range/* RangeItem.EndingChapter */.JF.EndingChapter), onChange: onChapterChange(Range/* RangeItemPosition.End */.EQ.End) }) }), /*#__PURE__*/ jsx_runtime_.jsx("div", { children: /*#__PURE__*/ jsx_runtime_.jsx(Forms_Combobox, { id: "end-verse", size: types_ComboboxSize.Large, fixedWidth: false, label: /*#__PURE__*/ jsx_runtime_.jsx("p", { className: (ReadingGoalInput_module_default()).label, children: t("ending-verse") }), items: endingVerseOptions, value: endingVerse, disabled: !endChapter, initialInputValue: getInitialInputValue(Range/* RangeItem.EndingVerse */.JF.EndingVerse), onChange: onVerseChange(Range/* RangeItemPosition.End */.EQ.End) }) }) ] }) ] }); }; /* harmony default export */ const ReadingGoalInput_VerseRangeInput = (VerseRangeInput); /***/ }), /***/ 93272: /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(59003); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(60866); /* harmony import */ var next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(13646); /* harmony import */ var _ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9__); /* harmony import */ var _VerseRangeInput__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(37326); /* harmony import */ var _dls_Forms_Input__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(91308); /* harmony import */ var _dls_Forms_Select__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(58087); /* harmony import */ var _types_auth_Goal__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(63196); /* harmony import */ var _utils_generators__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(49184); var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_dls_Forms_Input__WEBPACK_IMPORTED_MODULE_5__]); _dls_Forms_Input__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0]; /* eslint-disable react-func/max-lines-per-function */ /* eslint-disable max-lines */ const ReadingGoalInput = ({ type , rangeStartVerse , rangeEndVerse , pages , seconds , onRangeChange , onPagesChange , onSecondsChange , widthFull =true , logChange , })=>{ const { t , lang } = next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3___default()("reading-goal"); const timeOptions = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>(0,_utils_generators__WEBPACK_IMPORTED_MODULE_8__/* .generateTimeOptions */ .Ph)(t, lang), [ t, lang ]); if (type === _types_auth_Goal__WEBPACK_IMPORTED_MODULE_7__/* .GoalType.RANGE */ .lC.RANGE) { return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_VerseRangeInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, { rangeStartVerse: rangeStartVerse, rangeEndVerse: rangeEndVerse, onRangeChange: onRangeChange, logChange: logChange }); } if (type === _types_auth_Goal__WEBPACK_IMPORTED_MODULE_7__/* .GoalType.PAGES */ .lC.PAGES) { return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (_ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9___default().inputContainer), children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", { htmlFor: "pages", className: (_ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9___default().label), children: t("goal-types.pages.title") }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Forms_Input__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .ZP, { id: "pages", containerClassName: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9___default().input), widthFull && (_ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9___default().fullWidth)), size: _dls_Forms_Input__WEBPACK_IMPORTED_MODULE_5__/* .InputSize.Large */ .fz.Large, value: pages.toString(), fixedWidth: false, htmlType: "number", // prevent users from entering decimal value onKeyDown: (e)=>e.key === "." && e.preventDefault(), inputMode: "numeric", onChange: (p)=>{ const parsedPages = Number(p); onPagesChange(parsedPages); logChange("pages", { currentValue: pages, newValue: parsedPages }); } }) ] }); } return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (_ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9___default().inputContainer), children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", { htmlFor: "seconds", className: (_ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9___default().label), children: t("goal-types.time.title") }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Forms_Select__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, { id: "seconds", name: "seconds", size: _dls_Forms_Select__WEBPACK_IMPORTED_MODULE_6__/* .SelectSize.Large */ .h.Large, className: (_ReadingGoalInput_module_scss__WEBPACK_IMPORTED_MODULE_9___default().input), options: timeOptions, value: seconds.toString(), onChange: (s)=>{ const parsedSeconds = Number(s); onSecondsChange(parsedSeconds); logChange("seconds", { currentValue: seconds, newValue: parsedSeconds }); } }) ] }); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ReadingGoalInput); __webpack_async_result__(); } catch(e) { __webpack_async_result__(e); } }); /***/ }), /***/ 27097: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "I": () => (/* binding */ isValidVerseRange), /* harmony export */ "w": () => (/* binding */ validateReadingGoalData) /* harmony export */ }); /* harmony import */ var _utils_validator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(41051); /* harmony import */ var _utils_verse__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(44519); /* harmony import */ var types_auth_Goal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(63196); /* eslint-disable import/prefer-default-export */ const SECONDS_LIMIT = 4 * 60 * 60; // 4 hours const MIN_SECONDS = 60; // 1 minute /** * A utility function to validate the reading goal data * * @param {ChaptersData} chaptersData * @param {ReadingGoalPayload} payload * @returns {boolean} is the payload valid */ const validateReadingGoalData = (chaptersData, { type , pages , seconds , range }, mushafId)=>{ // if the user selected a pages goal and didn't enter a valid amount of pages, disable the next button if (type === types_auth_Goal__WEBPACK_IMPORTED_MODULE_2__/* .GoalType.PAGES */ .lC.PAGES && !(0,_utils_validator__WEBPACK_IMPORTED_MODULE_0__/* .isValidPageNumber */ .vU)(pages, mushafId)) return false; // if the user selected a time goal and didn't enter a valid amount of seconds, disable the next button // in theory, this should never happen because the input is a select, but just in case if (type === types_auth_Goal__WEBPACK_IMPORTED_MODULE_2__/* .GoalType.TIME */ .lC.TIME && (Number.isNaN(seconds) || seconds > SECONDS_LIMIT || seconds < MIN_SECONDS)) { return false; } // if the user selected a range goal and didn't enter a valid range, disable the next button if (type === types_auth_Goal__WEBPACK_IMPORTED_MODULE_2__/* .GoalType.RANGE */ .lC.RANGE) { return isValidVerseRange(chaptersData, range); } return true; }; /** * Check wether the ranges are valid or not. * * @param {ChaptersData} chaptersData * @param {Range} range * @returns {boolean} */ const isValidVerseRange = (chaptersData, range)=>{ if (!range?.startVerse || !range?.endVerse) return false; if (!(0,_utils_validator__WEBPACK_IMPORTED_MODULE_0__/* .isValidVerseKey */ .CG)(chaptersData, range.startVerse) || !(0,_utils_validator__WEBPACK_IMPORTED_MODULE_0__/* .isValidVerseKey */ .CG)(chaptersData, range.endVerse)) { return false; } // check if the starting verse key is greater than the ending verse key const [startingChapter, startingVerse] = (0,_utils_verse__WEBPACK_IMPORTED_MODULE_1__/* .getVerseAndChapterNumbersFromKey */ .bV)(range.startVerse); const [endingChapter, endingVerse] = (0,_utils_verse__WEBPACK_IMPORTED_MODULE_1__/* .getVerseAndChapterNumbersFromKey */ .bV)(range.endVerse); // if it's the same Surah but in reverse order if (startingChapter === endingChapter && Number(startingVerse) > Number(endingVerse)) { return false; } // if it's the range Surahs are in reverse order if (Number(startingChapter) > Number(endingChapter)) { return false; } return true; }; /***/ }), /***/ 58087: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__), /* harmony export */ "h": () => (/* binding */ SelectSize) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(59003); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _Select_module_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(40458); /* harmony import */ var _Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4__); /* harmony import */ var _icons_caret_down_svg__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(85970); var SelectSize; (function(SelectSize) { SelectSize["Small"] = "small"; SelectSize["Medium"] = "medium"; SelectSize["Large"] = "large"; })(SelectSize || (SelectSize = {})); const Select = ({ name , id , onChange , options , value , disabled =false , required =false , size =SelectSize.Medium , placeholder ="Select an option" , defaultStyle =true , className , withBackground =true , })=>{ const onSelectChange = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((e)=>{ if (onChange) { onChange(e.target.value); } }, [ onChange ]); return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().container), { [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().defaultStyledContainer)]: defaultStyle, [className]: className, [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().disabledContainer)]: disabled, [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().smallContainer)]: size === SelectSize.Small, [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().mediumContainer)]: size === SelectSize.Medium, [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().largeContainer)]: size === SelectSize.Large, [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().withBackground)]: withBackground }), children: [ /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", { className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().select), { [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().defaultStyledSelect)]: defaultStyle, [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().disabledSelect)]: disabled }), name: name, id: id, onChange: onSelectChange, disabled: disabled, required: required, ...value ? { value } : { defaultValue: "" }, children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }), options.map((option)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", { value: option.value, disabled: option.disabled || false, children: option.label }, option.value)) ] }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().arrow), { [(_Select_module_scss__WEBPACK_IMPORTED_MODULE_4___default().disabledArrow)]: disabled }), children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_icons_caret_down_svg__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {}) }) ] }); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Select); /***/ }), /***/ 23830: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6022); /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _redux_slices_QuranReader_styles__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(62093); /* harmony import */ var _utils_api__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4917); /** * Instead of repeating using multiple selectors to get the MushafId * in multiple components, we are introducing this hook to keep it DRY. * * TODO: apply it to everywhere using the mushafId * * @returns {Mushaf} */ const useGetMushaf = ()=>{ const quranFont = (0,react_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(_redux_slices_QuranReader_styles__WEBPACK_IMPORTED_MODULE_1__/* .selectQuranFont */ .Ho, react_redux__WEBPACK_IMPORTED_MODULE_0__.shallowEqual); const mushafLines = (0,react_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(_redux_slices_QuranReader_styles__WEBPACK_IMPORTED_MODULE_1__/* .selectQuranMushafLines */ .z$, react_redux__WEBPACK_IMPORTED_MODULE_0__.shallowEqual); const { mushaf } = (0,_utils_api__WEBPACK_IMPORTED_MODULE_2__/* .getMushafId */ .$P)(quranFont, mushafLines); return mushaf; }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useGetMushaf); /***/ }), /***/ 56748: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Oz": () => (/* binding */ useScrollToElement), /* harmony export */ "ZP": () => (__WEBPACK_DEFAULT_EXPORT__), /* harmony export */ "gZ": () => (/* binding */ SMOOTH_SCROLL_TO_TOP), /* harmony export */ "lT": () => (/* binding */ SCROLL_TO_NEAREST_ELEMENT), /* harmony export */ "nv": () => (/* binding */ SMOOTH_SCROLL_TO_CENTER) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /** * A hook that scrolls to a specific element in the DOM. * The scrolling will only happen when executeScroll function * is invoked. * * @param {ScrollIntoViewOptions} options * @returns {[() => void, RefObject]} */ const useScrollToElement = (options)=>{ const elementRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); // a function that will be invoked by the component using this hook to scroll to the element being referenced (if found). const executeScroll = ()=>{ // only scroll when the ref has a value if (elementRef.current) { elementRef.current.scrollIntoView(options); } }; return [ executeScroll, elementRef ]; }; const SMOOTH_SCROLL_TO_CENTER = { block: "center", behavior: "smooth" }; const SMOOTH_SCROLL_TO_TOP = { block: "start", behavior: "smooth" }; const SCROLL_TO_NEAREST_ELEMENT = { block: "nearest" }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useScrollToElement); /***/ }), /***/ 49184: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "IU": () => (/* binding */ generateChapterOptions), /* harmony export */ "Ph": () => (/* binding */ generateTimeOptions), /* harmony export */ "ZK": () => (/* binding */ generateVerseOptions), /* harmony export */ "zQ": () => (/* binding */ generateDurationDaysOptions) /* harmony export */ }); /* harmony import */ var _utils_chapter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(95892); /* harmony import */ var _utils_datetime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(76410); /* harmony import */ var _utils_locale__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24709); /* eslint-disable import/prefer-default-export */ const TIME_OPTIONS_LIMIT = 4 * 60; // 4 hours const DURATION_DAYS_LIMIT = 365; // 1 year, 365 days /** * Generates options for the reading goal time input. * * The options are within a range of 1 minute to 4 hours. * - From 1 to 10 minutes (first 10 options), increment by 1 minute * - From > 10 minutes to 4 hours, increment by 5 minutes * * @param {Translate} t * @param {string} locale * @returns {SelectOption[]} */ const generateTimeOptions = (t, locale)=>{ // for the first 10 minutes, we want to show 1 until 10 // but after that, we want to increment by 5 minutes // and our limit is TIME_OPTIONS_LIMIT const options = new Array(10 + (TIME_OPTIONS_LIMIT - 10) / 5).fill(null)// eslint-disable-next-line @typescript-eslint/naming-convention .map((_, i)=>{ let minutes; if (i < 10) { minutes = i + 1; } else { minutes = (i - 9) * 5 + 10; } const seconds = minutes * 60; return { value: seconds, label: (0,_utils_datetime__WEBPACK_IMPORTED_MODULE_1__/* .secondsToReadableFormat */ .by)(seconds, t, locale) }; }); return options; }; /** * Generates options for the reading goal chapter input. * * @param {ChaptersData} chaptersData * @param {string} locale * @returns {DropdownItem[]} */ const generateChapterOptions = (chaptersData, locale)=>{ const data = Object.keys(chaptersData).map((chapterId)=>{ const chapter = (0,_utils_chapter__WEBPACK_IMPORTED_MODULE_0__/* .getChapterData */ .dy)(chaptersData, chapterId); const localizedChapterId = (0,_utils_locale__WEBPACK_IMPORTED_MODULE_2__/* .toLocalizedNumber */ .rQ)(Number(chapterId), locale); return { id: chapterId, name: chapterId, value: chapterId, label: `${localizedChapterId} - ${chapter.transliteratedName}` }; }); return data; }; /** * Generates verse options for a certain chapter in the reading goal verse input. * * @param {ChaptersData} chaptersData * @param {Translate} t * @param {string} locale * @param {string?} chapterId * @returns {DropdownItem[]} */ const generateVerseOptions = (chaptersData, t, locale, chapterId)=>{ if (!chapterId) return []; const chapter = (0,_utils_chapter__WEBPACK_IMPORTED_MODULE_0__/* .getChapterData */ .dy)(chaptersData, chapterId); // eslint-disable-next-line @typescript-eslint/naming-convention const options = new Array(chapter.versesCount).fill(null).map((_, index)=>{ const localizedVerseId = (0,_utils_locale__WEBPACK_IMPORTED_MODULE_2__/* .toLocalizedNumber */ .rQ)(index + 1, locale); const verseId = String(index + 1); return { id: verseId, name: verseId, value: verseId, label: `${t("common:ayah")} ${localizedVerseId}` }; }); return options; }; /** * Generates options for the reading goal duration input. * * The options are within a range of 1 day to 365 days in this format: * "1 day", "2 days", "3 days", etc... * * @param {Translate} t * @param {string} locale * @returns {SelectOption[]} */ const generateDurationDaysOptions = (t, locale)=>{ // for the first 10 days, we want to show 1 until 10 // but after that, we want to increment by 5 days // and our limit is DURATION_DAYS_LIMIT const options = new Array(10 + (DURATION_DAYS_LIMIT - 10) / 5).fill(null)// eslint-disable-next-line @typescript-eslint/naming-convention .map((_, i)=>{ let day; if (i < 10) { day = i + 1; } else { day = (i - 9) * 5 + 10; } return { value: day.toString(), label: t("reading-goal:x-days", { count: day, days: (0,_utils_locale__WEBPACK_IMPORTED_MODULE_2__/* .toLocalizedNumber */ .rQ)(day, locale) }) }; }); return options; }; /***/ }) }; ; //# sourceMappingURL=73273.js.map