{"ast":null,"code":"import _toConsumableArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/toConsumableArray\";\nimport _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/InputDemo.js\";\n\nimport React, { useEffect, useState } from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { InputTextarea } from 'primereact/inputtextarea';\nimport { AutoComplete } from 'primereact/autocomplete';\nimport { Calendar } from 'primereact/calendar';\nimport { Chips } from 'primereact/chips';\nimport { Slider } from 'primereact/slider';\nimport { Knob } from 'primereact/knob';\nimport { Rating } from 'primereact/rating';\nimport { ColorPicker } from 'primereact/colorpicker';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { Checkbox } from 'primereact/checkbox';\nimport { InputSwitch } from 'primereact/inputswitch';\nimport { ListBox } from 'primereact/listbox';\nimport { Dropdown } from 'primereact/dropdown';\nimport { ToggleButton } from 'primereact/togglebutton';\nimport { MultiSelect } from 'primereact/multiselect';\nimport { TreeSelect } from 'primereact/treeselect';\nimport { SelectButton } from 'primereact/selectbutton';\nimport { Button } from 'primereact/button';\nimport { InputNumber } from 'primereact/inputnumber';\nimport { CountryService } from '../service/CountryService';\nimport { NodeService } from '../service/NodeService';\nexport var InputDemo = function InputDemo() {\n var _useState = useState(''),\n _useState2 = _slicedToArray(_useState, 2),\n floatValue = _useState2[0],\n setFloatValue = _useState2[1];\n\n var _useState3 = useState(null),\n _useState4 = _slicedToArray(_useState3, 2),\n autoValue = _useState4[0],\n setAutoValue = _useState4[1];\n\n var _useState5 = useState(null),\n _useState6 = _slicedToArray(_useState5, 2),\n selectedAutoValue = _useState6[0],\n setSelectedAutoValue = _useState6[1];\n\n var _useState7 = useState([]),\n _useState8 = _slicedToArray(_useState7, 2),\n autoFilteredValue = _useState8[0],\n setAutoFilteredValue = _useState8[1];\n\n var _useState9 = useState(null),\n _useState10 = _slicedToArray(_useState9, 2),\n calendarValue = _useState10[0],\n setCalendarValue = _useState10[1];\n\n var _useState11 = useState(null),\n _useState12 = _slicedToArray(_useState11, 2),\n inputNumberValue = _useState12[0],\n setInputNumberValue = _useState12[1];\n\n var _useState13 = useState([]),\n _useState14 = _slicedToArray(_useState13, 2),\n chipsValue = _useState14[0],\n setChipsValue = _useState14[1];\n\n var _useState15 = useState(''),\n _useState16 = _slicedToArray(_useState15, 2),\n sliderValue = _useState16[0],\n setSliderValue = _useState16[1];\n\n var _useState17 = useState(null),\n _useState18 = _slicedToArray(_useState17, 2),\n ratingValue = _useState18[0],\n setRatingValue = _useState18[1];\n\n var _useState19 = useState('1976D2'),\n _useState20 = _slicedToArray(_useState19, 2),\n colorValue = _useState20[0],\n setColorValue = _useState20[1];\n\n var _useState21 = useState(20),\n _useState22 = _slicedToArray(_useState21, 2),\n knobValue = _useState22[0],\n setKnobValue = _useState22[1];\n\n var _useState23 = useState(null),\n _useState24 = _slicedToArray(_useState23, 2),\n radioValue = _useState24[0],\n setRadioValue = _useState24[1];\n\n var _useState25 = useState([]),\n _useState26 = _slicedToArray(_useState25, 2),\n checkboxValue = _useState26[0],\n setCheckboxValue = _useState26[1];\n\n var _useState27 = useState(false),\n _useState28 = _slicedToArray(_useState27, 2),\n switchValue = _useState28[0],\n setSwitchValue = _useState28[1];\n\n var _useState29 = useState(null),\n _useState30 = _slicedToArray(_useState29, 2),\n listboxValue = _useState30[0],\n setListboxValue = _useState30[1];\n\n var _useState31 = useState(null),\n _useState32 = _slicedToArray(_useState31, 2),\n dropdownValue = _useState32[0],\n setDropdownValue = _useState32[1];\n\n var _useState33 = useState(null),\n _useState34 = _slicedToArray(_useState33, 2),\n multiselectValue = _useState34[0],\n setMultiselectValue = _useState34[1];\n\n var _useState35 = useState(false),\n _useState36 = _slicedToArray(_useState35, 2),\n toggleValue = _useState36[0],\n setToggleValue = _useState36[1];\n\n var _useState37 = useState(null),\n _useState38 = _slicedToArray(_useState37, 2),\n selectButtonValue1 = _useState38[0],\n setSelectButtonValue1 = _useState38[1];\n\n var _useState39 = useState(null),\n _useState40 = _slicedToArray(_useState39, 2),\n selectButtonValue2 = _useState40[0],\n setSelectButtonValue2 = _useState40[1];\n\n var _useState41 = useState(false),\n _useState42 = _slicedToArray(_useState41, 2),\n inputGroupValue = _useState42[0],\n setInputGroupValue = _useState42[1];\n\n var _useState43 = useState(null),\n _useState44 = _slicedToArray(_useState43, 2),\n selectedNode = _useState44[0],\n setSelectedNode = _useState44[1];\n\n var _useState45 = useState(null),\n _useState46 = _slicedToArray(_useState45, 2),\n treeSelectNodes = _useState46[0],\n setTreeSelectNodes = _useState46[1];\n\n var listboxValues = [{\n name: 'New York',\n code: 'NY'\n }, {\n name: 'Rome',\n code: 'RM'\n }, {\n name: 'London',\n code: 'LDN'\n }, {\n name: 'Istanbul',\n code: 'IST'\n }, {\n name: 'Paris',\n code: 'PRS'\n }];\n var dropdownValues = [{\n name: 'New York',\n code: 'NY'\n }, {\n name: 'Rome',\n code: 'RM'\n }, {\n name: 'London',\n code: 'LDN'\n }, {\n name: 'Istanbul',\n code: 'IST'\n }, {\n name: 'Paris',\n code: 'PRS'\n }];\n var multiselectValues = [{\n name: 'Australia',\n code: 'AU'\n }, {\n name: 'Brazil',\n code: 'BR'\n }, {\n name: 'China',\n code: 'CN'\n }, {\n name: 'Egypt',\n code: 'EG'\n }, {\n name: 'France',\n code: 'FR'\n }, {\n name: 'Germany',\n code: 'DE'\n }, {\n name: 'India',\n code: 'IN'\n }, {\n name: 'Japan',\n code: 'JP'\n }, {\n name: 'Spain',\n code: 'ES'\n }, {\n name: 'United States',\n code: 'US'\n }];\n var selectButtonValues1 = [{\n name: 'Option 1',\n code: 'O1'\n }, {\n name: 'Option 2',\n code: 'O2'\n }, {\n name: 'Option 3',\n code: 'O3'\n }];\n var selectButtonValues2 = [{\n name: 'Option 1',\n code: 'O1'\n }, {\n name: 'Option 2',\n code: 'O2'\n }, {\n name: 'Option 3',\n code: 'O3'\n }];\n useEffect(function () {\n var countryService = new CountryService();\n var nodeService = new NodeService();\n countryService.getCountries().then(function (data) {\n return setAutoValue(data);\n });\n nodeService.getTreeNodes().then(function (data) {\n return setTreeSelectNodes(data);\n });\n }, []);\n\n var searchCountry = function searchCountry(event) {\n setTimeout(function () {\n if (!event.query.trim().length) {\n setAutoFilteredValue(_toConsumableArray(autoValue));\n } else {\n setAutoFilteredValue(autoValue.filter(function (country) {\n return country.name.toLowerCase().startsWith(event.query.toLowerCase());\n }));\n }\n }, 250);\n };\n\n var onCheckboxChange = function onCheckboxChange(e) {\n var selectedValue = _toConsumableArray(checkboxValue);\n\n if (e.checked) selectedValue.push(e.value);else selectedValue.splice(selectedValue.indexOf(e.value), 1);\n setCheckboxValue(selectedValue);\n };\n\n var itemTemplate = function itemTemplate(option) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 123,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"mr-2 flag flag-\".concat(option.code.toLowerCase()),\n style: {\n width: '18px',\n height: '12px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 124,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 125,\n columnNumber: 17\n }\n }, option.name));\n };\n\n var selectedItemTemplate = function selectedItemTemplate(option) {\n if (option) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"inline-flex align-items-center py-1 px-2 bg-primary text-primary border-round mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 133,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"mr-2 flag flag-\".concat(option.code.toLowerCase()),\n style: {\n width: '18px',\n height: '12px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 134,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 135,\n columnNumber: 21\n }\n }, option.name));\n }\n\n return 'Select Countries';\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid p-fluid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 144,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 145,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 146,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 147,\n columnNumber: 21\n }\n }, \"InputText\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid formgrid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 148,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 mb-2 lg:col-4 lg:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 149,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n placeholder: \"Default\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 150,\n columnNumber: 29\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 mb-2 lg:col-4 lg:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 152,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n placeholder: \"Disabled\",\n disabled: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 153,\n columnNumber: 29\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 mb-2 lg:col-4 lg:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 155,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n placeholder: \"Invalid\",\n className: \"p-invalid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 156,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 160,\n columnNumber: 21\n }\n }, \"Icons\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid formgrid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 161,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 mb-2 lg:col-4 lg:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 162,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-input-icon-left\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 163,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-user\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 164,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n placeholder: \"Username\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 165,\n columnNumber: 33\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 mb-2 lg:col-4 lg:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 168,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-input-icon-right\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 169,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n placeholder: \"Search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 170,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 171,\n columnNumber: 33\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 mb-2 lg:col-4 lg:mb-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 174,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-input-icon-left p-input-icon-right\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 175,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-user\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 176,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(InputText, {\n type: \"text\",\n placeholder: \"Search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 177,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 178,\n columnNumber: 33\n }\n })))), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 183,\n columnNumber: 21\n }\n }, \"Float Label\"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-float-label\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 184,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(InputText, {\n id: \"username\",\n type: \"text\",\n value: floatValue,\n onChange: function onChange(e) {\n return setFloatValue(e.target.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 185,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"username\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 186,\n columnNumber: 25\n }\n }, \"Username\")), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 189,\n columnNumber: 21\n }\n }, \"Textarea\"), /*#__PURE__*/React.createElement(InputTextarea, {\n placeholder: \"Your Message\",\n autoResize: true,\n rows: \"3\",\n cols: \"30\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 190,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 192,\n columnNumber: 21\n }\n }, \"AutoComplete\"), /*#__PURE__*/React.createElement(AutoComplete, {\n placeholder: \"Search\",\n id: \"dd\",\n dropdown: true,\n multiple: true,\n value: selectedAutoValue,\n onChange: function onChange(e) {\n return setSelectedAutoValue(e.value);\n },\n suggestions: autoFilteredValue,\n completeMethod: searchCountry,\n field: \"name\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 193,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 195,\n columnNumber: 21\n }\n }, \"Calendar\"), /*#__PURE__*/React.createElement(Calendar, {\n showIcon: true,\n showButtonBar: true,\n value: calendarValue,\n onChange: function onChange(e) {\n return setCalendarValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 196,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 198,\n columnNumber: 21\n }\n }, \"InputNumber\"), /*#__PURE__*/React.createElement(InputNumber, {\n value: inputNumberValue,\n onValueChange: function onValueChange(e) {\n return setInputNumberValue(e.value);\n },\n showButtons: true,\n mode: \"decimal\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 199,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 201,\n columnNumber: 21\n }\n }, \"Chips\"), /*#__PURE__*/React.createElement(Chips, {\n value: chipsValue,\n onChange: function onChange(e) {\n return setChipsValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 202,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 205,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 206,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 207,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 208,\n columnNumber: 29\n }\n }, \"Slider\"), /*#__PURE__*/React.createElement(InputText, {\n value: sliderValue,\n onChange: function onChange(e) {\n return setSliderValue(parseInt(e.target.value), 10);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 209,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(Slider, {\n value: sliderValue,\n onChange: function onChange(e) {\n return setSliderValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 210,\n columnNumber: 29\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 212,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 213,\n columnNumber: 29\n }\n }, \"Rating\"), /*#__PURE__*/React.createElement(Rating, {\n value: ratingValue,\n onChange: function onChange(e) {\n return setRatingValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 214,\n columnNumber: 29\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 216,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 217,\n columnNumber: 29\n }\n }, \"ColorPicker\"), /*#__PURE__*/React.createElement(ColorPicker, {\n value: colorValue,\n onChange: function onChange(e) {\n return setColorValue(e.value);\n },\n style: {\n width: '2rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 218,\n columnNumber: 29\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 220,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 221,\n columnNumber: 29\n }\n }, \"Knob\"), /*#__PURE__*/React.createElement(Knob, {\n value: knobValue,\n valueTemplate: \"{value}%\",\n onChange: function onChange(e) {\n return setKnobValue(e.value);\n },\n step: 10,\n min: -50,\n max: 50,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 222,\n columnNumber: 29\n }\n }))))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 228,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 229,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 230,\n columnNumber: 21\n }\n }, \"RadioButton\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 231,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 232,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 233,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"option1\",\n name: \"option\",\n value: \"Chicago\",\n checked: radioValue === 'Chicago',\n onChange: function onChange(e) {\n return setRadioValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 234,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"option1\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 235,\n columnNumber: 33\n }\n }, \"Chicago\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 238,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 239,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"option2\",\n name: \"option\",\n value: \"Los Angeles\",\n checked: radioValue === 'Los Angeles',\n onChange: function onChange(e) {\n return setRadioValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 240,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"option2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 241,\n columnNumber: 33\n }\n }, \"Los Angeles\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 244,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 245,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"option3\",\n name: \"option\",\n value: \"New York\",\n checked: radioValue === 'New York',\n onChange: function onChange(e) {\n return setRadioValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 246,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"option3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 247,\n columnNumber: 33\n }\n }, \"New York\")))), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 252,\n columnNumber: 21\n }\n }, \"Checkbox\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 253,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 254,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-checkbox\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 255,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(Checkbox, {\n inputId: \"checkOption1\",\n name: \"option\",\n value: \"Chicago\",\n checked: checkboxValue.indexOf('Chicago') !== -1,\n onChange: onCheckboxChange,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 256,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"checkOption1\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 257,\n columnNumber: 33\n }\n }, \"Chicago\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 260,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-checkbox\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 261,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(Checkbox, {\n inputId: \"checkOption2\",\n name: \"option\",\n value: \"Los Angeles\",\n checked: checkboxValue.indexOf('Los Angeles') !== -1,\n onChange: onCheckboxChange,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 262,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"checkOption2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 263,\n columnNumber: 33\n }\n }, \"Los Angeles\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 266,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-checkbox\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 267,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(Checkbox, {\n inputId: \"checkOption3\",\n name: \"option\",\n value: \"New York\",\n checked: checkboxValue.indexOf('New York') !== -1,\n onChange: onCheckboxChange,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 268,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"checkOption3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 269,\n columnNumber: 33\n }\n }, \"New York\")))), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 274,\n columnNumber: 21\n }\n }, \"Input Switch\"), /*#__PURE__*/React.createElement(InputSwitch, {\n checked: switchValue,\n onChange: function onChange(e) {\n return setSwitchValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 275,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 278,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 279,\n columnNumber: 21\n }\n }, \"Listbox\"), /*#__PURE__*/React.createElement(ListBox, {\n value: listboxValue,\n onChange: function onChange(e) {\n return setListboxValue(e.value);\n },\n options: listboxValues,\n optionLabel: \"name\",\n filter: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 280,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 282,\n columnNumber: 21\n }\n }, \"Dropdown\"), /*#__PURE__*/React.createElement(Dropdown, {\n value: dropdownValue,\n onChange: function onChange(e) {\n return setDropdownValue(e.value);\n },\n options: dropdownValues,\n optionLabel: \"name\",\n placeholder: \"Select\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 283,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 285,\n columnNumber: 21\n }\n }, \"MultiSelect\"), /*#__PURE__*/React.createElement(MultiSelect, {\n value: multiselectValue,\n onChange: function onChange(e) {\n return setMultiselectValue(e.value);\n },\n options: multiselectValues,\n optionLabel: \"name\",\n placeholder: \"Select Countries\",\n filter: true,\n itemTemplate: itemTemplate,\n selectedItemTemplate: selectedItemTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 286,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 289,\n columnNumber: 21\n }\n }, \"TreeSelect\"), /*#__PURE__*/React.createElement(TreeSelect, {\n value: selectedNode,\n onChange: function onChange(e) {\n return setSelectedNode(e.value);\n },\n options: treeSelectNodes,\n placeholder: \"Select Item\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 290,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 293,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 294,\n columnNumber: 21\n }\n }, \"ToggleButton\"), /*#__PURE__*/React.createElement(ToggleButton, {\n checked: toggleValue,\n onChange: function onChange(e) {\n return setToggleValue(e.value);\n },\n onLabel: \"Yes\",\n offLabel: \"No\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 295,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 297,\n columnNumber: 21\n }\n }, \"SelectButton\"), /*#__PURE__*/React.createElement(SelectButton, {\n value: selectButtonValue1,\n onChange: function onChange(e) {\n return setSelectButtonValue1(e.value);\n },\n options: selectButtonValues1,\n optionLabel: \"name\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 298,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 300,\n columnNumber: 21\n }\n }, \"SelectButton - Multiple\"), /*#__PURE__*/React.createElement(SelectButton, {\n value: selectButtonValue2,\n onChange: function onChange(e) {\n return setSelectButtonValue2(e.value);\n },\n options: selectButtonValues2,\n optionLabel: \"name\",\n multiple: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 301,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 305,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 306,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 307,\n columnNumber: 21\n }\n }, \"Input Groups\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid p-fluid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 308,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 309,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"p-inputgroup\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 310,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-inputgroup-addon\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 311,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-user\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 312,\n columnNumber: 37\n }\n })), /*#__PURE__*/React.createElement(InputText, {\n placeholder: \"Username\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 314,\n columnNumber: 33\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 318,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"p-inputgroup\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 319,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-inputgroup-addon\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 320,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-shopping-cart\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 320,\n columnNumber: 70\n }\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-inputgroup-addon\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 321,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-globe\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 321,\n columnNumber: 70\n }\n })), /*#__PURE__*/React.createElement(InputText, {\n placeholder: \"Price\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 322,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-inputgroup-addon\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 323,\n columnNumber: 33\n }\n }, \"$\"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-inputgroup-addon\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 324,\n columnNumber: 33\n }\n }, \".00\"))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 328,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"p-inputgroup\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 329,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(Button, {\n label: \"Search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 330,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(InputText, {\n placeholder: \"Keyword\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 331,\n columnNumber: 33\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 335,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"p-inputgroup\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 336,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-inputgroup-addon p-inputgroup-addon-checkbox\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 337,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(Checkbox, {\n checked: inputGroupValue,\n onChange: function onChange(e) {\n return setInputGroupValue(e.checked);\n },\n binary: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 338,\n columnNumber: 37\n }\n })), /*#__PURE__*/React.createElement(InputText, {\n placeholder: \"Confirm\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 340,\n columnNumber: 33\n }\n })))))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(InputDemo, comparisonFn);","map":{"version":3,"names":["React","useEffect","useState","InputText","InputTextarea","AutoComplete","Calendar","Chips","Slider","Knob","Rating","ColorPicker","RadioButton","Checkbox","InputSwitch","ListBox","Dropdown","ToggleButton","MultiSelect","TreeSelect","SelectButton","Button","InputNumber","CountryService","NodeService","InputDemo","floatValue","setFloatValue","autoValue","setAutoValue","selectedAutoValue","setSelectedAutoValue","autoFilteredValue","setAutoFilteredValue","calendarValue","setCalendarValue","inputNumberValue","setInputNumberValue","chipsValue","setChipsValue","sliderValue","setSliderValue","ratingValue","setRatingValue","colorValue","setColorValue","knobValue","setKnobValue","radioValue","setRadioValue","checkboxValue","setCheckboxValue","switchValue","setSwitchValue","listboxValue","setListboxValue","dropdownValue","setDropdownValue","multiselectValue","setMultiselectValue","toggleValue","setToggleValue","selectButtonValue1","setSelectButtonValue1","selectButtonValue2","setSelectButtonValue2","inputGroupValue","setInputGroupValue","selectedNode","setSelectedNode","treeSelectNodes","setTreeSelectNodes","listboxValues","name","code","dropdownValues","multiselectValues","selectButtonValues1","selectButtonValues2","countryService","nodeService","getCountries","then","data","getTreeNodes","searchCountry","event","setTimeout","query","trim","length","filter","country","toLowerCase","startsWith","onCheckboxChange","e","selectedValue","checked","push","value","splice","indexOf","itemTemplate","option","width","height","selectedItemTemplate","target","parseInt","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/InputDemo.js"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { InputTextarea } from 'primereact/inputtextarea';\nimport { AutoComplete } from 'primereact/autocomplete';\nimport { Calendar } from 'primereact/calendar';\nimport { Chips } from 'primereact/chips';\nimport { Slider } from 'primereact/slider';\nimport { Knob } from 'primereact/knob';\nimport { Rating } from 'primereact/rating';\nimport { ColorPicker } from 'primereact/colorpicker';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { Checkbox } from 'primereact/checkbox';\nimport { InputSwitch } from 'primereact/inputswitch';\nimport { ListBox } from 'primereact/listbox';\nimport { Dropdown } from 'primereact/dropdown';\nimport { ToggleButton } from 'primereact/togglebutton';\nimport { MultiSelect } from 'primereact/multiselect';\nimport { TreeSelect } from 'primereact/treeselect';\nimport { SelectButton } from 'primereact/selectbutton';\nimport { Button } from 'primereact/button';\nimport { InputNumber } from 'primereact/inputnumber';\nimport { CountryService } from '../service/CountryService';\nimport { NodeService } from '../service/NodeService';\n\nexport const InputDemo = () => {\n const [floatValue, setFloatValue] = useState('');\n const [autoValue, setAutoValue] = useState(null);\n const [selectedAutoValue, setSelectedAutoValue] = useState(null);\n const [autoFilteredValue, setAutoFilteredValue] = useState([]);\n const [calendarValue, setCalendarValue] = useState(null);\n const [inputNumberValue, setInputNumberValue] = useState(null);\n const [chipsValue, setChipsValue] = useState([]);\n const [sliderValue, setSliderValue] = useState('');\n const [ratingValue, setRatingValue] = useState(null);\n const [colorValue, setColorValue] = useState('1976D2');\n const [knobValue, setKnobValue] = useState(20);\n const [radioValue, setRadioValue] = useState(null);\n const [checkboxValue, setCheckboxValue] = useState([]);\n const [switchValue, setSwitchValue] = useState(false);\n const [listboxValue, setListboxValue] = useState(null);\n const [dropdownValue, setDropdownValue] = useState(null);\n const [multiselectValue, setMultiselectValue] = useState(null);\n const [toggleValue, setToggleValue] = useState(false);\n const [selectButtonValue1, setSelectButtonValue1] = useState(null);\n const [selectButtonValue2, setSelectButtonValue2] = useState(null);\n const [inputGroupValue, setInputGroupValue] = useState(false);\n const [selectedNode, setSelectedNode] = useState(null);\n const [treeSelectNodes, setTreeSelectNodes] = useState(null);\n\n const listboxValues = [\n { name: 'New York', code: 'NY' },\n { name: 'Rome', code: 'RM' },\n { name: 'London', code: 'LDN' },\n { name: 'Istanbul', code: 'IST' },\n { name: 'Paris', code: 'PRS' }\n ];\n\n const dropdownValues = [\n { name: 'New York', code: 'NY' },\n { name: 'Rome', code: 'RM' },\n { name: 'London', code: 'LDN' },\n { name: 'Istanbul', code: 'IST' },\n { name: 'Paris', code: 'PRS' }\n ];\n\n const multiselectValues = [\n { name: 'Australia', code: 'AU' },\n { name: 'Brazil', code: 'BR' },\n { name: 'China', code: 'CN' },\n { name: 'Egypt', code: 'EG' },\n { name: 'France', code: 'FR' },\n { name: 'Germany', code: 'DE' },\n { name: 'India', code: 'IN' },\n { name: 'Japan', code: 'JP' },\n { name: 'Spain', code: 'ES' },\n { name: 'United States', code: 'US' }\n ];\n\n const selectButtonValues1 = [\n { name: 'Option 1', code: 'O1' },\n { name: 'Option 2', code: 'O2' },\n { name: 'Option 3', code: 'O3' },\n ];\n\n const selectButtonValues2 = [\n { name: 'Option 1', code: 'O1' },\n { name: 'Option 2', code: 'O2' },\n { name: 'Option 3', code: 'O3' },\n ];\n\n useEffect(() => {\n const countryService = new CountryService();\n const nodeService = new NodeService();\n countryService.getCountries().then(data => setAutoValue(data));\n nodeService.getTreeNodes().then(data => setTreeSelectNodes(data));\n }, []);\n\n const searchCountry = (event) => {\n setTimeout(() => {\n if (!event.query.trim().length) {\n setAutoFilteredValue([...autoValue]);\n }\n else {\n setAutoFilteredValue(autoValue.filter((country) => {\n return country.name.toLowerCase().startsWith(event.query.toLowerCase());\n }));\n }\n }, 250);\n };\n\n const onCheckboxChange = (e) => {\n let selectedValue = [...checkboxValue];\n if (e.checked)\n selectedValue.push(e.value);\n else\n selectedValue.splice(selectedValue.indexOf(e.value), 1);\n\n setCheckboxValue(selectedValue);\n };\n\n const itemTemplate = (option) => {\n return (\n