sanity-plugin-all-in-one-accessibility
Version:
Website accessibility widget for improving WCAG 2.0, 2.1, 2.2 and ADA compliance!
1,150 lines • 72.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: !0 });
var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), reactBootstrap = require("react-bootstrap");
const PluginIcon = () => /* @__PURE__ */ jsxRuntime.jsx("img", { src: "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-1.svg", alt: "All in One Accessibility", height: 20, width: 20 }), aioaicontype1 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-1.svg", aioaicontype2 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-2.svg", aioaicontype3 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-3.svg", aioaicontype4 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-4.svg", aioaicontype5 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-5.svg", aioaicontype6 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-6.svg", aioaicontype7 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-7.svg", aioaicontype8 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-8.svg", aioaicontype9 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-9.svg", aioaicontype10 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-10.svg", aioaicontype11 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-11.svg", aioaicontype12 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-12.svg", aioaicontype13 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-13.svg", aioaicontype14 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-14.svg", aioaicontype15 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-15.svg", aioaicontype16 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-16.svg", aioaicontype17 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-17.svg", aioaicontype18 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-18.svg", aioaicontype19 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-19.svg", aioaicontype20 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-20.svg", aioaicontype21 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-21.svg", aioaicontype22 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-22.svg", aioaicontype23 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-23.svg", aioaicontype24 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-24.svg", aioaicontype25 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-25.svg", aioaicontype26 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-26.svg", aioaicontype27 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-27.svg", aioaicontype28 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-28.svg", aioaicontype29 = "https://sanity.skynettechnologies.us/assets/images/aioa-icon-type-29.svg", allinoneaccessibilitylogo = "https://sanity.skynettechnologies.us/assets/images/all-in-one-accessibility-logo.svg", HomePage = () => {
const [isValid, setIsValid] = react.useState(!1);
react.useState("");
const [parameters, setParameters] = react.useState({
hexaColor: "",
widget_size: "0",
position: "bottom_right",
icontype: "aioa-icon-type-1",
iconsize: "aioa-default-icon"
}), [widgetSettings, setWidgetSettings] = react.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"
}), [isSwitcherEnabled, setSwitcherEnabled] = react.useState(!1), [isSizeSwitcherEnabled, setSizeSwitcherEnabled] = react.useState(!1), [iconsize, setIconSize] = react.useState(aioaicontype1), [settingList, setSetting] = react.useState({});
react.useState(!1);
const [showSuccessMessage, setShowSuccessMessage] = react.useState(!1), [userData, setUserData] = react.useState(null);
react.useEffect(() => {
console.log("settingList (outside): ", settingList), 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"
}), settingList.Icon_Type === "aioa-icon-type-2" ? setIconSize(aioaicontype2) : settingList.Icon_Type === "aioa-icon-type-3" ? setIconSize(aioaicontype3) : setIconSize(aioaicontype1)), fetchApiData();
}, [settingList]), react.useEffect(() => {
console.log(parameters), console.log("parameters.position : ", parameters.position === "bottom_center");
}, [parameters]), react.useEffect(() => {
}, []);
const currentUser = sanity.useCurrentUser();
react.useEffect(() => {
currentUser && setUserData({
name: currentUser.name,
email: currentUser.email
});
}, [currentUser]);
const onSaveChanges = async () => {
saveData(parameters);
}, saveData = (data) => {
const formdata = new FormData(), widget_icon_size_custom = document.getElementById("widget_icon_size_custom")?.value || "", custom_position_x_value = document.getElementById("custom_position_x_value")?.value || "", custom_position_y_value = document.getElementById("custom_position_y_value")?.value || "", custom_position_left_right = document.getElementById("custom_position_left_right")?.value || "";
document.getElementById("custom_position_top_bottom")?.value;
let widget_position_right = "", widget_position_left = "", widget_position_top = "", widget_position_bottom = "";
custom_position_left_right == "To the right" ? widget_position_right = custom_position_x_value : widget_position_left = custom_position_x_value, custom_position_left_right == "To the bottom" ? widget_position_bottom = custom_position_y_value : 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 == !0 ? "1" : "0"), formdata.append("is_widget_custom_size", isSizeSwitcherEnabled == !0 ? "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), fetch("https://ada.skynettechnologies.us/api/widget-setting-update-platform", {
method: "POST",
body: formdata
}).then((response) => response.json()).then(async (response) => {
console.log("response Save Data", response), setShowSuccessMessage(!0), setTimeout(() => {
setShowSuccessMessage(!1);
}, 3e3);
}).catch((error) => console.log("error", error));
}, getAPIData = () => {
const formdata = new FormData();
formdata.append("website_url", window.location.hostname), fetch("https://ada.skynettechnologies.us/api/widget-settings", {
method: "POST",
body: formdata
}).then((response) => response.json()).then((response) => {
Object.keys(response.Data).length !== 0 ? (setIsValid(!0), 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"), setSwitcherEnabled(response.Data.is_widget_custom_position != "0"), 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)) : setIsValid(!1);
}).catch((error) => console.log("error", error));
}, onIconChange = (e) => {
switch (setParameters({ ...parameters, icontype: e.target.value }), 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() {
const username = window.location.hostname, useremail = "no-reply@" + window.location.hostname + ".com", arrDetails = {
name: username,
email: useremail,
company_name: username,
website: btoa(window.location.hostname),
package_type: "free-widget",
start_date: (/* @__PURE__ */ new Date()).toISOString(),
end_date: "",
price: "",
discount_price: "0",
platform: "sanity",
api_key: "",
is_trial_period: "",
is_free_widget: "0",
bill_address: "",
country: "",
state: "",
city: "",
post_code: "",
transaction_id: "",
subscr_id: "",
payment_source: ""
};
fetch("https://ada.skynettechnologies.us/api/get-autologin-link", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ website: window.location.hostname })
}).then((response) => {
if (!response.ok)
throw new Error(`HTTP error! status: ${response.status}`);
return getAPIData(), response.json();
}).then((result) => {
result && result.link ? getAPIData() : fetch("https://ada.skynettechnologies.us/api/add-user-domain", {
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 getAPIData(), response.json();
}).then((data) => {
data.success && getAPIData();
}).catch((error) => {
});
}).catch((error) => {
});
}
const elementStyle = {
marginTop: "0px",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column"
}, handleInput = (e) => {
e.target.value = Math.min(Math.max(Number(e.target.value), 0), 250).toString();
}, handleInput2 = (e) => {
e.target.value = Math.min(Math.max(Number(e.target.value), 0), 250).toString();
}, handleInput1 = (e) => {
e.target.value = Math.min(Math.max(Number(e.target.value), 20), 150).toString();
};
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("meta", { charSet: "utf-8" }),
/* @__PURE__ */ jsxRuntime.jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
/* @__PURE__ */ jsxRuntime.jsx("title", { children: "All In One Accessibility Sanity" }),
/* @__PURE__ */ jsxRuntime.jsx("meta", { name: "description", content: "Sanity App" }),
/* @__PURE__ */ jsxRuntime.jsx(
"link",
{
rel: "stylesheet",
type: "text/css",
href: "https://sanity.skynettechnologies.us/assets/css/style.css"
}
),
/* @__PURE__ */ jsxRuntime.jsx("div", { style: elementStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "all-in-one-accessibility-strapi-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "set-width", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "all-in-one-accessibility-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "accessibility-settings", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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__ */ jsxRuntime.jsx("h3", { children: /* @__PURE__ */ jsxRuntime.jsx("b", {}) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "all-one-accessibility-form", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form, { onSubmit: onSaveChanges, children: [
!isValid && // Conditionally render the view based on API data
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Group, { className: "mb-30 row", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Label, { className: "col-sm-12 col-form-label", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
"a",
{
href: "https://ada.skynettechnologies.us/trial-subscription",
target: "_blank",
rel: "noopener noreferrer",
children: "\xA0Upgrade\xA0"
}
),
" ",
"to the full version of All in One Accessibility Pro."
]
}
) }) }),
/* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Group, { className: "mb-30 row", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Label, { htmlFor: "inputPassword", className: "col-sm-3 col-form-label", children: "Hex color code:" }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-sm-9", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Control,
{
value: parameters.hexaColor,
className: "form-control",
id: "colorcode",
name: "colorcode",
onChange: (e) => setParameters({
...parameters,
hexaColor: e.target.value
})
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-sm-3" }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-text col-sm-9", children: "You can customize the ADA Widget color. For example: FF5733" })
] }),
/* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Group, { className: "mb-30 row", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Label, { className: "col-sm-12 col-form-label", children: "Select Widget Size:" }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-sm-12 three-col", children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Group, { className: "mb-30 row", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "icon-custom-position-wrapper mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
/* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Row, { className: "align-items-center mb-30", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Label, { className: "col-sm-12 col-form-label", children: "Enable precise accessibility widget icon position:" }) }),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Col, { xs: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check,
{
type: "switch",
id: "custom-position-switcher",
className: "custom-switcher",
checked: isSwitcherEnabled,
onChange: () => setSwitcherEnabled(!isSwitcherEnabled),
style: {
transform: "scale(1.5)"
// Increase the switch size
}
}
) })
] }),
!isSwitcherEnabled && /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Group, { className: "mb-30 row widget-position", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Label, { className: "col-sm-12 col-form-label", children: "Where would you like to place the accessibility icon on your site?:" }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-sm-12 three-col", children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
) })
] })
] }),
isSwitcherEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "custom-position-controls", children: [
/* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Row, { className: "mb-3", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Col, { xs: "auto", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.InputGroup, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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__ */ jsxRuntime.jsx(reactBootstrap.InputGroup.Text, { children: "PX" })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Col, { xs: "auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
reactBootstrap.Form.Select,
{
id: "custom_position_left_right",
"aria-label": "Position select",
value: widgetSettings.custom_position_left_right,
children: [
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "cust-pos-to-the-right", children: "To the right" }),
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "cust-pos-to-the-left", children: "To the left" })
]
}
) })
] }),
/* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Row, { className: "mb-3", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Col, { xs: "auto", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.InputGroup, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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__ */ jsxRuntime.jsx(reactBootstrap.InputGroup.Text, { children: "PX" })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Col, { xs: "auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
reactBootstrap.Form.Select,
{
id: "custom_position_top_bottom",
"aria-label": "Position select",
value: widgetSettings.custom_position_top_bottom,
children: [
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "cust-pos-to-the-lower", children: "To the bottom" }),
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "cust-pos-to-the-upper", children: "To the top" })
]
}
) })
] }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "description", children: "0 - 250px are permitted values" })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Group, { className: `icon-type-wrapper row ${isValid ? null : "d-none"}`, children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Label, { className: "fcol-sm-12 col-form-label", children: "Select icon type:" }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-sm-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row", children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-1", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-1",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-1",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype1, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-2", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-2",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-2",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype2, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-3", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-3",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-3",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype3, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-4", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-4",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-4",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype4, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-5", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-5",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-5",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype5, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-6", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-6",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-6",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype6, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-7", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-7",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-7",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype7, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-8", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-8",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-8",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype8, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-9", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-9",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-9",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype9, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-10", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-10",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-10",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype10, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-11", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-11",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-11",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype11, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-12", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-12",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-12",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype12, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-13", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-13",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-13",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype13, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-14", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-14",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-14",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype14, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-15", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-15",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-15",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype15, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-16", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-16",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-16",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype16, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-17", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-17",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-17",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype17, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-18", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-18",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-18",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype18, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-19", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-19",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-19",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype19, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-20", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-20",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-20",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype20, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-21", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-21",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-21",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype21, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-22", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-22",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-22",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype22, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-23", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-23",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-23",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype23, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-24", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-24",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-24",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype24, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-25", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-25",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-25",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype25, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-26", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-26",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-26",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype26, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-27", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-27",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-27",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype27, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-28", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-28",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-28",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype28, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-type-29", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check.Input,
{
type: "radio",
name: "aioa_icon_type",
value: "aioa-icon-type-29",
onChange: onIconChange,
checked: parameters.icontype == "aioa-icon-type-29",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: aioaicontype29, alt: "", width: "65", height: "65" }) })
] }) }) })
] }) })
] }),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Group, { className: "mb-30 row", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "icon-custom-size-wrapper mb-3", children: [
/* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Row, { className: "align-items-center mb-30", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Label, { className: "col-sm-12 col-form-label", children: "Enable icon custom size:" }) }),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Col, { xs: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Check,
{
type: "switch",
id: "custom-size-switcher",
className: "custom-switcher_inp_2",
checked: isSizeSwitcherEnabled,
onChange: () => setSizeSwitcherEnabled(!isSizeSwitcherEnabled),
style: {
transform: "scale(1.5)"
// Increase the switch size
}
}
) })
] }),
!isSizeSwitcherEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
reactBootstrap.Form.Group,
{
className: `icon-size-wrapper row ${isValid ? null : "d-none"}`,
children: [
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Label, { className: "fcol-sm-12 col-form-label", children: "Select icon size:" }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-sm-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row", children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-size-big", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: iconsize, alt: "", width: "75", height: "75" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-size-medium", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: iconsize, alt: "", width: "65", height: "65" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-size-default", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: iconsize, alt: "", width: "55", height: "55" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-size-small", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: iconsize, alt: "", width: "45", height: "45" }) })
] }) }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-auto mb-30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "js-form-item form-item js-form-type-radio form-type-radio js-form-item-position form-item-position", children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Form.Check, { type: "radio", id: "edit-size-extra-small", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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",
className: "form-radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Check.Label, { className: "option", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Image, { src: iconsize, alt: "", width: "35", height: "35" }) })
] }) }) })
] }) })
]
}
),
isSizeSwitcherEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "custom-size-controls mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Row, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.Col, { xs: "auto", className: "controls", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Form.Label,
{
htmlFor: "widget_icon_size_custom",
className: "fcol-sm-12 col-form-label",
children: "Select exact icon size:"
}
),
/* @__PURE__ */ jsxRuntime.jsxs(reactBootstrap.InputGroup, { className: "mb-2", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.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__ */ jsxRuntime.jsx(
reactBootstrap.InputGroup.Text,
{
style: { height: "auto" },
id: "size-value-input_1",
children: "PX"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "description", children: "20 - 150px are permitted values" })
] }) }) })
] }) }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "save-changes-btn", children: [
/* @__PURE__ */ jsxRuntime.jsx(
reactBootstrap.Button,
{
variant: "primary",
size: "lg",
id: "submit",
onClick: onSaveChanges,
className: "btn btn-primary",
children: "Save Changes"
}
),
/* @__PURE__ */ jsxRuntime.jsx(reactBootstrap.Form.Group, { className: "mt-30 row", children: showSuccessMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "success-message", children: "Settings successfully saved!" }) })
] })
] }) })
] }) }) }) }) }) })
] });
}, plugin = {
icon: PluginIcon,
name: "sanity-plugin-all-in-one-accessibility",
title: "All in One Accessibility"
}, tool = {
...plugin,
component: HomePage
}, AllinOneAccessibilityPlugin = sanity.definePlugin((options) => ({
name: "sanity-plugin-all-in-one-accessibility",
tools: (prev) => [...prev, tool]
}));
exports.AllinOneAccessibilityPlugin = AllinOneAccessibilityPlugin;
//# sourceMappingURL=index.js.map