quran/.next/server/chunks/91308.js

exports.id = 91308;
exports.ids = [91308];
exports.modules = {

/***/ 66369:
/***/ ((module) => {

// Exports
module.exports = {
	"container": "Input_container__5BNOH",
	"fixedWidth": "Input_fixedWidth__MZoNx",
	"disabled": "Input_disabled__AFA4l",
	"error": "Input_error__cfc8q",
	"success": "Input_success__qb_Ue",
	"warning": "Input_warning__KwRSJ",
	"main": "Input_main__K4bVL",
	"input": "Input_input__za7E9",
	"rtlInput": "Input_rtlInput__8Yg1Q",
	"smallContainer": "Input_smallContainer__bxyYT",
	"mediumContainer": "Input_mediumContainer__jEOpT",
	"largeContainer": "Input_largeContainer__yafZ8",
	"label": "Input_label__loZWW",
	"clearContainer": "Input_clearContainer__3LxT4",
	"prefixSuffixContainer": "Input_prefixSuffixContainer__n84F6",
	"prefix": "Input_prefix__jYhnp",
	"suffix": "Input_suffix__v_BvR"
};


/***/ }),

/***/ 91308:
/***/ ((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 */   "Jf": () => (/* binding */ InputVariant),
/* harmony export */   "ZP": () => (__WEBPACK_DEFAULT_EXPORT__),
/* harmony export */   "fz": () => (/* binding */ InputSize)
/* harmony export */ });
/* unused harmony export InputType */
/* 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 _Button_Button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(50497);
/* harmony import */ var _Input_module_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(66369);
/* harmony import */ var _Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _icons_close_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(51053);
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_Button_Button__WEBPACK_IMPORTED_MODULE_3__]);
_Button_Button__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
/* eslint-disable max-lines */ 





var InputSize;
(function(InputSize) {
    InputSize["Small"] = "small";
    InputSize["Medium"] = "medium";
    InputSize["Large"] = "large";
})(InputSize || (InputSize = {}));
var InputType;
(function(InputType) {
    InputType["Error"] = "error";
    InputType["Warning"] = "warning";
    InputType["Success"] = "success";
})(InputType || (InputType = {}));
var InputVariant;
(function(InputVariant) {
    InputVariant["Default"] = "default";
    InputVariant["Main"] = "main";
})(InputVariant || (InputVariant = {}));
const Input = ({ id , name , label , placeholder , size =InputSize.Medium , fixedWidth =true , disabled =false , clearable =false , type , variant , prefix , suffix , onClearClicked , onChange , onKeyDown , inputMode , value ="" , shouldFlipOnRTL =true , containerClassName , htmlType , isRequired , inputRef ,  })=>{
    const { 0: inputValue , 1: setInputValue  } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value);
    // listen to any change in value in-case the value gets populated after and API call.
    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
        setInputValue(value);
    }, [
        value
    ]);
    const onValueChange = (event)=>{
        const newValue = event.target.value;
        setInputValue(newValue);
        if (onChange) {
            onChange(newValue);
        }
    };
    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
        children: [
            label && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("p", {
                className: (_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().label),
                children: label
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().container), containerClassName, {
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().smallContainer)]: size === InputSize.Small,
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().mediumContainer)]: size === InputSize.Medium,
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().largeContainer)]: size === InputSize.Large,
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().fixedWidth)]: fixedWidth,
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().disabled)]: disabled,
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().error)]: type === InputType.Error,
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().success)]: type === InputType.Success,
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().warning)]: type === InputType.Warning,
                    [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().main)]: variant === InputVariant.Main
                }),
                children: [
                    prefix && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                        className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().prefix), (_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().prefixSuffixContainer)),
                        children: prefix
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                        className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().input), {
                            [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().error)]: type === InputType.Error,
                            [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().success)]: type === InputType.Success,
                            [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().warning)]: type === InputType.Warning,
                            [(_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().rtlInput)]: shouldFlipOnRTL
                        }),
                        type: htmlType,
                        required: isRequired,
                        dir: "auto",
                        id: id,
                        ref: inputRef,
                        disabled: disabled,
                        onChange: onValueChange,
                        value: inputValue,
                        onKeyDown: onKeyDown,
                        inputMode: inputMode,
                        ...placeholder && {
                            placeholder
                        },
                        ...name && {
                            name
                        }
                    }),
                    clearable ? /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                        children: inputValue && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                            className: (_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().clearContainer),
                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_Button_Button__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .ZP, {
                                shape: _Button_Button__WEBPACK_IMPORTED_MODULE_3__/* .ButtonShape.Circle */ .jL.Circle,
                                variant: _Button_Button__WEBPACK_IMPORTED_MODULE_3__/* .ButtonVariant.Ghost */ .Wu.Ghost,
                                size: _Button_Button__WEBPACK_IMPORTED_MODULE_3__/* .ButtonSize.Small */ .qE.Small,
                                onClick: onClearClicked,
                                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_icons_close_svg__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {})
                            })
                        })
                    }) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                        children: suffix && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                            className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().suffix), (_Input_module_scss__WEBPACK_IMPORTED_MODULE_5___default().prefixSuffixContainer)),
                            children: suffix
                        })
                    })
                ]
            })
        ]
    });
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Input);

__webpack_async_result__();
} catch(e) { __webpack_async_result__(e); } });

/***/ })

};
;
//# sourceMappingURL=91308.js.map