payload-all-in-one-accessibility
Version:
Website accessibility widget for improving WCAG 2.0, 2.1, 2.2 and ADA compliance!
2,077 lines • 190 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState, useEffect } from 'react';
import { Form, Button, Image } from 'react-bootstrap';
import { InputGroup, FormControl, Row, Col } from 'react-bootstrap';
const aioaicontype1 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-1.svg';
const aioaicontype2 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-2.svg';
const aioaicontype3 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-3.svg';
const aioaicontype4 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-4.svg';
const aioaicontype5 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-5.svg';
const aioaicontype6 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-6.svg';
const aioaicontype7 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-7.svg';
const aioaicontype8 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-8.svg';
const aioaicontype9 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-9.svg';
const aioaicontype10 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-10.svg';
const aioaicontype11 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-11.svg';
const aioaicontype12 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-12.svg';
const aioaicontype13 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-13.svg';
const aioaicontype14 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-14.svg';
const aioaicontype15 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-15.svg';
const aioaicontype16 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-16.svg';
const aioaicontype17 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-17.svg';
const aioaicontype18 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-18.svg';
const aioaicontype19 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-19.svg';
const aioaicontype20 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-20.svg';
const aioaicontype21 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-21.svg';
const aioaicontype22 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-22.svg';
const aioaicontype23 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-23.svg';
const aioaicontype24 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-24.svg';
const aioaicontype25 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-25.svg';
const aioaicontype26 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-26.svg';
const aioaicontype27 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-27.svg';
const aioaicontype28 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-28.svg';
const aioaicontype29 = 'https://payload.skynettechnologies.us/assets/images/aioa-icon-type-29.svg';
const allinoneaccessibilitylogo = 'https://payload.skynettechnologies.us/assets/images/all-in-one-accessibility-logo.svg';
const HomePage = ()=>{
const [isValid, setIsValid] = useState(false);
const [message, setMessage] = useState('');
const [parameters, setParameters] = useState({
hexaColor: '',
widget_size: '0',
position: 'bottom_right',
icontype: 'aioa-icon-type-1',
iconsize: 'aioa-default-icon'
});
const [widgetSettings, setWidgetSettings] = useState({
widget_icon_size_custom: '',
custom_position_x_value: '',
custom_position_y_value: '',
custom_position_left_right: 'To the top',
custom_position_top_bottom: 'To the left'
});
const [isSwitcherEnabled, setSwitcherEnabled] = useState(false);
const [isSizeSwitcherEnabled, setSizeSwitcherEnabled] = useState(false);
const [iconsize, setIconSize] = useState(aioaicontype1);
const [settingList, setSetting] = useState({});
const [isChanged, setIsChanged] = useState(false);
const [showSuccessMessage, setShowSuccessMessage] = useState(false);
const [userData, setUserData] = useState(null);
useEffect(()=>{
console.log('settingList (outside): ', settingList);
if (Object.keys(settingList).length !== 0) {
console.log('Color Code', settingList['Color_Code']);
console.log('Icon Position', settingList['Icon_Position']);
console.log('Icon Type', settingList['Icon_Type']);
console.log('Icon Size', settingList['Icon_Size']);
setParameters({
hexaColor: settingList['Color_Code'],
position: settingList['Icon_Position'],
icontype: settingList['Icon_Type'],
iconsize: settingList['Icon_Size'],
widget_size: '0'
});
if (settingList['Icon_Type'] === 'aioa-icon-type-2') {
setIconSize(aioaicontype2);
} else if (settingList['Icon_Type'] === 'aioa-icon-type-3') {
setIconSize(aioaicontype3);
} else {
setIconSize(aioaicontype1);
}
}
// const user = useCurrentUser()
// console.log('user', user?.name);
// console.log('user', user?.email);
getAPIData();
}, [
settingList
]);
useEffect(()=>{
console.log(parameters);
console.log('parameters.position : ', parameters.position === 'bottom_center');
}, [
parameters
]);
useEffect(()=>{}, []);
/**
* Get All Settings from Database
*/ /**
* Save Changes is a function which used to click on Save Changes Button on UI
*/ const onSaveChanges = async ()=>{
saveData(parameters);
};
/**
* Save the data on Dashboard from Settings UI
*/ const saveData = (data)=>{
const formdata = new FormData();
const widget_icon_size_custom = document.getElementById('widget_icon_size_custom')?.value || '';
const custom_position_x_value = document.getElementById('custom_position_x_value')?.value || '';
const custom_position_y_value = document.getElementById('custom_position_y_value')?.value || '';
const custom_position_left_right = document.getElementById('custom_position_left_right')?.value || '';
const custom_position_top_bottom = document.getElementById('custom_position_top_bottom')?.value || '';
let widget_position_right = '', widget_position_left = '', widget_position_top = '', widget_position_bottom = '';
if (custom_position_left_right == 'To the right') {
widget_position_right = custom_position_x_value;
} else {
widget_position_left = custom_position_x_value;
}
if (custom_position_left_right == 'To the bottom') {
widget_position_bottom = custom_position_y_value;
} else {
widget_position_top = custom_position_y_value;
}
formdata.append('u', window.location.hostname);
formdata.append('widget_position', data.position);
formdata.append('widget_color_code', data.hexaColor);
formdata.append('widget_icon_type', data.icontype);
formdata.append('widget_icon_size', data.iconsize);
formdata.append('widget_size', data.widget_size);
formdata.append('is_widget_custom_position', isSwitcherEnabled == true ? '1' : '0');
formdata.append('is_widget_custom_size', isSizeSwitcherEnabled == true ? '1' : '0');
formdata.append('widget_icon_size_custom', widget_icon_size_custom);
formdata.append('widget_position_right', widget_position_right);
formdata.append('widget_position_left', widget_position_left);
formdata.append('widget_position_top', widget_position_top);
formdata.append('widget_position_bottom', widget_position_bottom);
/*
widget_position_right: widget_position_right,
widget_position_left: widget_position_left,
widget_position_top: widget_position_top,
widget_position_bottom: widget_position_bottom
*/ const requestOptions = {
method: 'POST',
body: formdata
};
fetch('https://ada.skynettechnologies.us/api/widget-setting-update-platform', requestOptions).then((response)=>response.json()).then(async (response)=>{
console.log('response Save Data', response);
setShowSuccessMessage(true);
setTimeout(()=>{
setShowSuccessMessage(false);
}, 3000) // Reset message after 3 seconds
;
}).catch((error)=>console.log('error', error));
};
/**
* Get API data will get all details from Dashboard API to Settings UI
*/ const getAPIData = ()=>{
const formdata = new FormData();
formdata.append('website_url', window.location.hostname);
const requestOptions = {
method: 'POST',
body: formdata
};
/*
"widget_position": "top_left",
"widget_color_code": "420083",
"widget_icon_type": "aioa-icon-type-1",
"widget_icon_size": "aioa-default-icon",
"widget_position_top": null,
"widget_position_right": 0,
"widget_position_bottom": 0,
"widget_position_left": 0,
"widget_icon_size_custom": 0,
"is_widget_custom_position": 0,
"is_widget_custom_size": 0,
"is_mobile_icon": 0,
"widget_icon_size_mobile": null,
"is_widget_custom_size_mobile": 0,
"widget_icon_size_custom_mobile": "45",
"adobe_key": null,
"payment_step": 1,
"created_at": "2024-06-10T13:27:43.000000Z",
"updated_at": "2025-03-04T13:07:11.000000Z",
"is_widget_check": 0,
"user_id": 2079,
"partner_adon_disabled_id": null,
"brand_logo": null,
"widget_size": 0,
"statement_link": null,
"ga_key": null,
"is_free_widget": 0,
"platform_widget_status": 0,
"dashboard_link": null,
"is_custome_branding": false,
"is_white_label": false,
*/ fetch('https://ada.skynettechnologies.us/api/widget-settings', requestOptions).then((response)=>response.json()).then((response)=>{
if (Object.keys(response.Data).length !== 0) {
setIsValid(true);
setParameters({
hexaColor: response.Data.widget_color_code,
position: response.Data.widget_position,
icontype: response.Data.widget_icon_type,
iconsize: response.Data.widget_icon_size,
widget_size: response.Data.widget_size
});
setSizeSwitcherEnabled(response.Data.is_widget_custom_size == '0' ? false : true);
setSwitcherEnabled(response.Data.is_widget_custom_position == '0' ? false : true);
setWidgetSettings({
widget_icon_size_custom: response.Data.widget_icon_size_custom || '',
custom_position_x_value: parseInt(response.Data.widget_position_left) > 0 ? response.Data.widget_position_left : response.Data.widget_position_right,
custom_position_y_value: parseInt(response.Data.widget_position_bottom) > 0 ? response.Data.widget_position_bottom : response.Data.widget_position_top,
custom_position_left_right: parseInt(response.Data.widget_position_left) > 0 ? 'To the left' : 'To the right',
custom_position_top_bottom: parseInt(response.Data.widget_position_bottom) > 0 ? 'To the bottom' : 'To the top'
});
console.log('setWidgetSettings : ', widgetSettings);
} else {
setIsValid(false);
}
}).catch((error)=>console.log('error', error));
};
/**
* Icon change event when user change Icon Type on Settings UI
*/ const onIconChange = (e)=>{
setParameters({
...parameters,
icontype: e.target.value
});
switch(e.target.value){
case 'aioa-icon-type-2':
setIconSize(aioaicontype2);
break;
case 'aioa-icon-type-3':
setIconSize(aioaicontype3);
break;
case 'aioa-icon-type-4':
setIconSize(aioaicontype4);
break;
case 'aioa-icon-type-5':
setIconSize(aioaicontype5);
break;
case 'aioa-icon-type-6':
setIconSize(aioaicontype6);
break;
case 'aioa-icon-type-7':
setIconSize(aioaicontype7);
break;
case 'aioa-icon-type-8':
setIconSize(aioaicontype8);
break;
case 'aioa-icon-type-9':
setIconSize(aioaicontype9);
break;
case 'aioa-icon-type-10':
setIconSize(aioaicontype10);
break;
case 'aioa-icon-type-11':
setIconSize(aioaicontype11);
break;
case 'aioa-icon-type-12':
setIconSize(aioaicontype12);
break;
case 'aioa-icon-type-13':
setIconSize(aioaicontype13);
break;
case 'aioa-icon-type-14':
setIconSize(aioaicontype14);
break;
case 'aioa-icon-type-15':
setIconSize(aioaicontype15);
break;
case 'aioa-icon-type-16':
setIconSize(aioaicontype16);
break;
case 'aioa-icon-type-17':
setIconSize(aioaicontype17);
break;
case 'aioa-icon-type-18':
setIconSize(aioaicontype18);
break;
case 'aioa-icon-type-19':
setIconSize(aioaicontype19);
break;
case 'aioa-icon-type-20':
setIconSize(aioaicontype20);
break;
case 'aioa-icon-type-21':
setIconSize(aioaicontype21);
break;
case 'aioa-icon-type-22':
setIconSize(aioaicontype22);
break;
case 'aioa-icon-type-23':
setIconSize(aioaicontype23);
break;
case 'aioa-icon-type-24':
setIconSize(aioaicontype24);
break;
case 'aioa-icon-type-25':
setIconSize(aioaicontype25);
break;
case 'aioa-icon-type-26':
setIconSize(aioaicontype26);
break;
case 'aioa-icon-type-27':
setIconSize(aioaicontype27);
break;
case 'aioa-icon-type-28':
setIconSize(aioaicontype28);
break;
case 'aioa-icon-type-29':
setIconSize(aioaicontype29);
break;
default:
setIconSize(aioaicontype1);
}
};
const onIconChange1 = (e)=>{
setParameters({
...parameters,
icontype: e.target.value
});
switch(e.target.value){
case 'aioa-icon-type-2':
setIconSize(aioaicontype2);
break;
case 'aioa-icon-type-3':
setIconSize(aioaicontype3);
break;
case 'aioa-icon-type-4':
setIconSize(aioaicontype4);
break;
case 'aioa-icon-type-5':
setIconSize(aioaicontype5);
break;
case 'aioa-icon-type-6':
setIconSize(aioaicontype6);
break;
case 'aioa-icon-type-7':
setIconSize(aioaicontype7);
break;
case 'aioa-icon-type-8':
setIconSize(aioaicontype8);
break;
case 'aioa-icon-type-9':
setIconSize(aioaicontype9);
break;
case 'aioa-icon-type-10':
setIconSize(aioaicontype10);
break;
case 'aioa-icon-type-11':
setIconSize(aioaicontype11);
break;
case 'aioa-icon-type-12':
setIconSize(aioaicontype12);
break;
case 'aioa-icon-type-13':
setIconSize(aioaicontype13);
break;
case 'aioa-icon-type-14':
setIconSize(aioaicontype14);
break;
case 'aioa-icon-type-15':
setIconSize(aioaicontype15);
break;
case 'aioa-icon-type-16':
setIconSize(aioaicontype16);
break;
case 'aioa-icon-type-17':
setIconSize(aioaicontype17);
break;
case 'aioa-icon-type-18':
setIconSize(aioaicontype18);
break;
case 'aioa-icon-type-19':
setIconSize(aioaicontype19);
break;
case 'aioa-icon-type-20':
setIconSize(aioaicontype20);
break;
case 'aioa-icon-type-21':
setIconSize(aioaicontype21);
break;
case 'aioa-icon-type-22':
setIconSize(aioaicontype22);
break;
case 'aioa-icon-type-23':
setIconSize(aioaicontype23);
break;
case 'aioa-icon-type-24':
setIconSize(aioaicontype24);
break;
case 'aioa-icon-type-25':
setIconSize(aioaicontype25);
break;
case 'aioa-icon-type-26':
setIconSize(aioaicontype26);
break;
case 'aioa-icon-type-27':
setIconSize(aioaicontype27);
break;
case 'aioa-icon-type-28':
setIconSize(aioaicontype28);
break;
case 'aioa-icon-type-29':
setIconSize(aioaicontype29);
break;
default:
setIconSize(aioaicontype1);
}
};
function fetchApiData(website_name) {
const username = userData?.name ?? '';
const useremail = userData?.email ?? '';
const packageType = 'free-widget';
const arrDetails = {
name: username,
email: useremail,
company_name: username,
website: website_name,
package_type: packageType,
start_date: new Date().toISOString(),
end_date: '',
price: '',
discount_price: '0',
platform: 'webasyst',
api_key: '',
is_trial_period: '',
is_free_widget: '0',
bill_address: '',
country: '',
state: '',
city: '',
post_code: '',
transaction_id: '',
subscr_id: '',
payment_source: ''
};
const apiUrl = 'https://ada.skynettechnologies.us/api/get-autologin-link';
fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
website: website_name
})
}).then((response)=>{
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
}).then((result)=>{
if (result && result.link) {
// Handle valid link
} else {
const secondApiUrl = 'https://ada.skynettechnologies.us/api/add-user-domain';
fetch(secondApiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(arrDetails)
}).then((response)=>{
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
}).then((data)=>{
if (data.success) {
// Handle success
} else {
// Handle error
}
}).catch((error)=>{
// Handle error
});
}
}).catch((error)=>{
// Handle error
});
}
const elementStyle = {
marginTop: '0px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
};
const labelStyle = {
backgroundColor: ''
};
const handleInput = (e)=>{
e.target.value = Math.min(Math.max(Number(e.target.value), 0), 250).toString();
};
const handleInput2 = (e)=>{
e.target.value = Math.min(Math.max(Number(e.target.value), 0), 250).toString();
};
const handleInput1 = (e)=>{
e.target.value = Math.min(Math.max(Number(e.target.value), 20), 150).toString();
};
/**
* Settings UI
*/ return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsx("meta", {
charSet: "utf-8"
}),
/*#__PURE__*/ _jsx("meta", {
name: "viewport",
content: "width=device-width, initial-scale=1"
}),
/*#__PURE__*/ _jsx("title", {
children: "All In One Accessibility payload"
}),
/*#__PURE__*/ _jsx("meta", {
name: "description",
content: "payload App"
}),
/*#__PURE__*/ _jsx("link", {
rel: "stylesheet",
type: "text/css",
href: "https://payload.skynettechnologies.us/assets/css/style.css"
}),
/*#__PURE__*/ _jsx("div", {
style: elementStyle,
children: /*#__PURE__*/ _jsx("div", {
className: "all-in-one-accessibility-strapi-container",
children: /*#__PURE__*/ _jsx("div", {
className: "container",
children: /*#__PURE__*/ _jsx("div", {
className: "set-width",
children: /*#__PURE__*/ _jsx("div", {
className: "all-in-one-accessibility-wrap",
children: /*#__PURE__*/ _jsxs("div", {
className: "accessibility-settings",
children: [
/*#__PURE__*/ _jsx(Image, {
src: allinoneaccessibilitylogo,
alt: "All in One Accessibility - Skynet Technologies",
style: {
display: 'block',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
marginLeft: 'auto',
marginRight: 'auto',
width: '50%'
}
}),
/*#__PURE__*/ _jsx("h3", {
children: /*#__PURE__*/ _jsx("b", {})
}),
/*#__PURE__*/ _jsx("div", {
className: "all-one-accessibility-form",
children: /*#__PURE__*/ _jsxs(Form, {
onSubmit: onSaveChanges,
children: [
!isValid && /*#__PURE__*/ _jsx(Form.Group, {
className: `mb-30 row`,
children: /*#__PURE__*/ _jsx(Form.Label, {
className: "col-sm-12 col-form-label",
children: /*#__PURE__*/ _jsxs("div", {
className: `form-text col-sm-12 col-form-label ${isValid ? 'd-none' : ''}`,
style: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center'
},
children: [
"Please",
' ',
/*#__PURE__*/ _jsx("a", {
href: "https://ada.skynettechnologies.us/trial-subscription",
target: "_blank",
rel: "noopener noreferrer",
children: " Upgrade "
}),
' ',
"to the full version of All in One Accessibility Pro."
]
})
})
}),
/*#__PURE__*/ _jsxs(Form.Group, {
className: `mb-30 row`,
children: [
/*#__PURE__*/ _jsx(Form.Label, {
htmlFor: "inputPassword",
className: "col-sm-3 col-form-label",
children: "Hex color code:"
}),
/*#__PURE__*/ _jsx("div", {
className: "col-sm-9",
children: /*#__PURE__*/ _jsx(Form.Control, {
value: parameters.hexaColor,
className: "form-control",
id: "colorcode",
name: "colorcode",
onChange: (e)=>setParameters({
...parameters,
hexaColor: e.target.value
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-sm-3"
}),
/*#__PURE__*/ _jsx("div", {
className: "form-text col-sm-9",
children: "You can customize the ADA Widget color. For example: FF5733"
})
]
}),
/*#__PURE__*/ _jsxs(Form.Group, {
className: `mb-30 row`,
children: [
/*#__PURE__*/ _jsx(Form.Label, {
className: "col-sm-12 col-form-label",
children: "Select Widget Size:"
}),
/*#__PURE__*/ _jsxs("div", {
className: "col-sm-12 three-col",
children: [
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-widget-size-regularsize",
label: "Regular Size",
name: "widget_size",
value: "0",
onChange: (e)=>setParameters({
...parameters,
widget_size: e.target.value
}),
checked: parameters.widget_size == '0' ? true : false,
className: "form-radio"
})
}),
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-widget-size-oversize",
label: "Over Size",
name: "widget_size",
value: "1",
onChange: (e)=>setParameters({
...parameters,
widget_size: e.target.value
}),
checked: parameters.widget_size == '1' ? true : false,
className: "form-radio"
})
})
]
})
]
}),
/*#__PURE__*/ _jsx(Form.Group, {
className: `mb-30 row`,
children: /*#__PURE__*/ _jsx("div", {
className: "icon-custom-position-wrapper mb-3",
children: /*#__PURE__*/ _jsxs("div", {
className: "mb-2",
children: [
/*#__PURE__*/ _jsxs(Row, {
className: "align-items-center mb-30",
children: [
/*#__PURE__*/ _jsx(Col, {
children: /*#__PURE__*/ _jsx(Form.Label, {
className: "col-sm-12 col-form-label",
children: "Enable precise accessibility widget icon position:"
})
}),
/*#__PURE__*/ _jsx(Col, {
xs: "auto",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "switch",
id: "custom-position-switcher",
className: "custom-switcher",
checked: isSwitcherEnabled,
onChange: ()=>setSwitcherEnabled(!isSwitcherEnabled),
style: {
transform: 'scale(1.5)'
}
})
})
]
}),
!isSwitcherEnabled && /*#__PURE__*/ _jsxs(Form.Group, {
className: `mb-30 row widget-position`,
children: [
/*#__PURE__*/ _jsx(Form.Label, {
className: "col-sm-12 col-form-label",
children: "Where would you like to place the accessibility icon on your site?:"
}),
/*#__PURE__*/ _jsxs("div", {
className: "col-sm-12 three-col",
children: [
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-position-top-left",
label: "Top left",
name: "position",
value: "top_left",
onChange: (e)=>setParameters({
...parameters,
position: e.target.value
}),
checked: parameters.position == 'top_left' ? true : false,
className: "form-radio"
})
}),
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-position-top-center",
label: "Top Center",
name: "position",
value: "top_center",
onChange: (e)=>setParameters({
...parameters,
position: e.target.value
}),
checked: parameters.position == 'top_center' ? true : false,
className: "form-radio"
})
}),
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-position-top-right",
label: "Top Right",
name: "position",
value: "top_right",
onChange: (e)=>setParameters({
...parameters,
position: e.target.value
}),
checked: parameters.position == 'top_right' ? true : false,
className: "form-radio"
})
}),
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-position-middel-left",
label: "Middle left",
name: "position",
value: "middle_left",
onChange: (e)=>setParameters({
...parameters,
position: e.target.value
}),
checked: parameters.position == 'middle_left' ? true : false,
className: "form-radio"
})
}),
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-position-middel-right",
label: "Middle Right",
name: "position",
value: "middle_right",
onChange: (e)=>setParameters({
...parameters,
position: e.target.value
}),
checked: parameters.position == 'middle_right' ? true : false,
className: "form-radio"
})
}),
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-position-bottom-left",
label: "Bottom left",
name: "position",
value: "bottom_left",
onChange: (e)=>setParameters({
...parameters,
position: e.target.value
}),
checked: parameters.position == 'bottom_left' ? true : false,
className: "form-radio"
})
}),
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-position-bottom-center",
label: "Bottom Center",
name: "position",
value: "bottom_center",
onChange: (e)=>setParameters({
...parameters,
position: e.target.value
}),
checked: parameters.position == 'bottom_center' ? true : false,
className: "form-radio"
})
}),
/*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "radio",
id: "edit-position-bottom-right",
label: "Bottom Right",
name: "position",
value: "bottom_right",
onChange: (e)=>setParameters({
...parameters,
position: e.target.value
}),
checked: parameters.position == 'bottom_right' ? true : false,
className: "form-radio"
})
})
]
})
]
}),
isSwitcherEnabled && /*#__PURE__*/ _jsxs("div", {
className: "custom-position-controls",
children: [
/*#__PURE__*/ _jsxs(Row, {
className: "mb-3",
children: [
/*#__PURE__*/ _jsx(Col, {
xs: "auto",
children: /*#__PURE__*/ _jsxs(InputGroup, {
children: [
/*#__PURE__*/ _jsx(FormControl, {
type: "number",
min: "0",
max: "250",
id: "custom_position_x_value",
"aria-label": "Value in pixels",
onInput: handleInput,
defaultValue: widgetSettings.custom_position_x_value
}),
/*#__PURE__*/ _jsx(InputGroup.Text, {
children: "PX"
})
]
})
}),
/*#__PURE__*/ _jsx(Col, {
xs: "auto",
children: /*#__PURE__*/ _jsxs(Form.Select, {
id: "custom_position_left_right",
"aria-label": "Position select",
value: widgetSettings.custom_position_left_right,
children: [
/*#__PURE__*/ _jsx("option", {
value: "cust-pos-to-the-right",
children: "To the right"
}),
/*#__PURE__*/ _jsx("option", {
value: "cust-pos-to-the-left",
children: "To the left"
})
]
})
})
]
}),
/*#__PURE__*/ _jsxs(Row, {
className: "mb-3",
children: [
/*#__PURE__*/ _jsx(Col, {
xs: "auto",
children: /*#__PURE__*/ _jsxs(InputGroup, {
children: [
/*#__PURE__*/ _jsx(FormControl, {
type: "number",
min: "0",
max: "250",
id: "custom_position_y_value",
"aria-label": "Value in pixels",
onInput: handleInput2,
defaultValue: widgetSettings.custom_position_y_value
}),
/*#__PURE__*/ _jsx(InputGroup.Text, {
children: "PX"
})
]
})
}),
/*#__PURE__*/ _jsx(Col, {
xs: "auto",
children: /*#__PURE__*/ _jsxs(Form.Select, {
id: "custom_position_top_bottom",
"aria-label": "Position select",
value: widgetSettings.custom_position_top_bottom,
children: [
/*#__PURE__*/ _jsx("option", {
value: "cust-pos-to-the-lower",
children: "To the bottom"
}),
/*#__PURE__*/ _jsx("option", {
value: "cust-pos-to-the-upper",
children: "To the top"
})
]
})
})
]
}),
/*#__PURE__*/ _jsx("div", {
className: "description",
children: "0 - 250px are permitted values"
})
]
})
]
})
})
}),
/*#__PURE__*/ _jsxs(Form.Group, {
className: `icon-type-wrapper row ${isValid ? null : 'd-none'}`,
children: [
/*#__PURE__*/ _jsx(Form.Label, {
className: "fcol-sm-12 col-form-label",
children: "Select icon type:"
}),
/*#__PURE__*/ _jsx("div", {
className: "col-sm-12",
children: /*#__PURE__*/ _jsxs("div", {
className: "row",
children: [
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-1",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-1",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-1' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype1,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-2",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-2",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-2' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype2,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-3",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-3",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-3' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype3,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-4",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-4",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-4' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype4,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-5",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-5",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-5' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype5,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-6",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-6",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-6' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype6,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-7",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-7",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-7' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype7,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-8",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-8",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-8' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype8,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-9",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-9",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-9' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype9,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-10",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-10",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-10' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype10,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-11",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-11",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-11' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype11,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-12",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-12",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-12' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype12,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-13",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-13",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-13' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype13,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-14",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-14",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-14' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype14,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-15",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-15",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-15' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype15,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-16",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-16",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-16' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype16,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-17",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-17",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-17' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype17,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-18",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-18",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-18' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype18,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-19",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-19",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-19' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype19,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-20",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-20",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-20' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype20,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-21",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-21",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-21' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype21,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-22",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-22",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-22' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype22,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-23",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-23",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-23' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype23,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-24",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-24",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-24' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype24,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-25",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-25",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-25' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype25,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-26",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-26",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-26' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype26,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-27",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-27",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-27' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype27,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-28",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-28",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-28' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype28,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-type-29",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-29",
onChange: onIconChange,
checked: parameters.icontype == 'aioa-icon-type-29' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: aioaicontype29,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
})
]
})
})
]
}),
/*#__PURE__*/ _jsx(Form.Group, {
className: `mb-30 row`,
children: /*#__PURE__*/ _jsxs("div", {
className: "icon-custom-size-wrapper mb-3",
children: [
/*#__PURE__*/ _jsxs(Row, {
className: "align-items-center mb-30",
children: [
/*#__PURE__*/ _jsx(Col, {
children: /*#__PURE__*/ _jsx(Form.Label, {
className: "col-sm-12 col-form-label",
children: "Enable icon custom size:"
})
}),
/*#__PURE__*/ _jsx(Col, {
xs: "auto",
children: /*#__PURE__*/ _jsx(Form.Check, {
type: "switch",
id: "custom-size-switcher",
className: "custom-switcher_inp_2",
checked: isSizeSwitcherEnabled,
onChange: ()=>setSizeSwitcherEnabled(!isSizeSwitcherEnabled),
style: {
transform: 'scale(1.5)'
}
})
})
]
}),
!isSizeSwitcherEnabled && /*#__PURE__*/ _jsxs(Form.Group, {
className: `icon-size-wrapper row ${isValid ? null : 'd-none'}`,
children: [
/*#__PURE__*/ _jsx(Form.Label, {
className: "fcol-sm-12 col-form-label",
children: "Select icon size:"
}),
/*#__PURE__*/ _jsx("div", {
className: "col-sm-12",
children: /*#__PURE__*/ _jsxs("div", {
className: "row",
children: [
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-size-big",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_size",
value: "aioa-big-icon",
onChange: (e)=>setParameters({
...parameters,
iconsize: e.target.value
}),
checked: parameters.iconsize == 'aioa-big-icon' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: iconsize,
alt: "",
width: "75",
height: "75"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-size-medium",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_size",
value: "aioa-medium-icon",
onChange: (e)=>setParameters({
...parameters,
iconsize: e.target.value
}),
checked: parameters.iconsize == 'aioa-medium-icon' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: iconsize,
alt: "",
width: "65",
height: "65"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-size-default",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_size",
value: "aioa-default-icon",
onChange: (e)=>setParameters({
...parameters,
iconsize: e.target.value
}),
checked: parameters.iconsize == 'aioa-default-icon' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: iconsize,
alt: "",
width: "55",
height: "55"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-size-small",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_size",
value: "aioa-small-icon",
onChange: (e)=>setParameters({
...parameters,
iconsize: e.target.value
}),
checked: parameters.iconsize == 'aioa-small-icon' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: iconsize,
alt: "",
width: "45",
height: "45"
})
})
]
})
})
}),
/*#__PURE__*/ _jsx("div", {
className: "col-auto mb-30",
children: /*#__PURE__*/ _jsx("div", {
className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position",
children: /*#__PURE__*/ _jsxs(Form.Check, {
type: "radio",
id: "edit-size-extra-small",
children: [
/*#__PURE__*/ _jsx(Form.Check.Input, {
type: "radio",
name: "aioa_icon_size",
value: "aioa-extra-small-icon",
onChange: (e)=>setParameters({
...parameters,
iconsize: e.target.value
}),
checked: parameters.iconsize == 'aioa-extra-small-icon' ? true : false,
className: "form-radio"
}),
/*#__PURE__*/ _jsx(Form.Check.Label, {
className: "option",
children: /*#__PURE__*/ _jsx(Image, {
src: iconsize,
alt: "",
width: "35",
height: "35"
})
})
]
})
})
})
]
})
})
]
}),
isSizeSwitcherEnabled && /*#__PURE__*/ _jsx("div", {
className: "custom-size-controls mt-3",
children: /*#__PURE__*/ _jsx(Row, {
children: /*#__PURE__*/ _jsxs(Col, {
xs: "auto",
className: "controls",
children: [
/*#__PURE__*/ _jsx(Form.Label, {
htmlFor: "widget_icon_size_custom",
className: "fcol-sm-12 col-form-label",
children: "Select exact icon size:"
}),
/*#__PURE__*/ _jsxs(InputGroup, {
className: "mb-2",
children: [
/*#__PURE__*/ _jsx(FormControl, {
type: "number",
id: "widget_icon_size_custom",
name: "widget_icon_size_custom",
"aria-label": "Value in pixels",
"aria-describedby": "size-value-input_1",
style: {
height: 'auto'
},
min: "20",
max: "150",
onInput: handleInput1,
defaultValue: widgetSettings.widget_icon_size_custom
}),
/*#__PURE__*/ _jsx(InputGroup.Text, {
style: {
height: 'auto'
},
id: "size-value-input_1",
children: "PX"
})
]
}),
/*#__PURE__*/ _jsx("div", {
className: "description",
children: "20 - 150px are permitted values"
})
]
})
})
})
]
})
}),
/*#__PURE__*/ _jsxs("div", {
className: "save-changes-btn",
children: [
/*#__PURE__*/ _jsx(Button, {
variant: "primary",
size: "lg",
id: "submit",
onClick: onSaveChanges,
className: "btn btn-primary",
children: "Save Changes"
}),
/*#__PURE__*/ _jsx(Form.Group, {
className: `mt-30 row`,
children: showSuccessMessage && /*#__PURE__*/ _jsx("div", {
className: "success-message",
children: "Settings successfully saved!"
})
})
]
})
]
})
})
]
})
})
})
})
})
})
]
});
};
export default HomePage;
//# sourceMappingURL=plugin.js.map