@eturnity/eturnity_reusable_components 8.22.12 → 8.22.13

package/dist/main.es20.js

@@ -1,101 +1,543 @@
-import _sfc_main$1 from "./main.es372.js";
-import styled from "./main.es7.js";
 import "./main.es3.js";
+import _sfc_main$1 from "./main.es24.js";
+import styled from "./main.es7.js";
+import theme from "./main.es8.js";
 import _export_sfc from "./main.es11.js";
-import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, renderList, Fragment, createElementVNode as createBaseVNode, createTextVNode, createVNode } from "./main.es6.js";
-import { toDisplayString } from "./main.es16.js";
-const Wrapper = styled.div`
-    display: block;
-    text-align: center;
-    justify-items: center;
+import { computed, onMounted, onUnmounted, watch, nextTick, resolveComponent, openBlock, createBlock, withCtx, createElementVNode as createBaseVNode, createVNode, createElementBlock, createTextVNode, createCommentVNode, Fragment, renderSlot, Teleport } from "./main.es6.js";
+import { toDisplayString, normalizeStyle } from "./main.es21.js";
+import { ref } from "./main.es16.js";
+const TextOverlayAttrs = {
+  appTheme: String,
+  image: Boolean,
+  width: Number
+};
+const TextOverlay = styled("div", TextOverlayAttrs)`
+    color: ${(props) => props.image ? props.theme.colors.grey1 : props.theme.colors.black};
+    font-size: ${(props) => props.image ? "12px" : "13px"};
+    border-radius: 4px;
+    padding: 10px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    width: ${(props) => props.width ? `${props.width}px` : "100%"};
+    box-shadow: ${(props) => props.image ? "0 2px 10px rgba(0, 0, 0, 0.1)" : "none"};
+
+    a {
+      color: ${(props) => props.theme.colors.blue};
+    }
+
+    img + span {
+      margin-top: 10px;
+      display: block;
+    }
+  `;
+const PageContainer = styled("div")`
+    display: ${(props) => props.type === "dot" ? "unset" : "inline-block"};
+    position: relative;
+  `;
+const TextWrapper = styled("div")`
+    z-index: 9999999999;
+    position: absolute;
+  `;
+const OverlayImage = styled("img")`
     width: 100%;
-    background-color: #ccc;
+    height: auto;
   `;
-const IconWrapper = styled.div`
-    display: inline-flex;
-    flex-direction: column;
-    background-color: white;
-    border-radius: 6px;
-    padding: 10px;
-    width: 220px;
-    text-align: center;
-    margin: 10px;
+const Dot = styled("div")`
+    width: 5px;
+    height: 5px;
+    background-color: ${(props) => props.color};
+    border-radius: 50%;
+  `;
+const IconWrapperAttrs = {
+  backgroundColor: String,
+  borderRadius: String,
+  padding: String,
+  hoveredIcon: Boolean,
+  isActive: Boolean,
+  isDisabled: Boolean
+};
+const IconWrapper = styled("div", IconWrapperAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    white-space: nowrap;
+    background-color: ${(props) => props.backgroundColor};
+    border-radius: ${(props) => props.hoveredIcon ? "6px" : props.borderRadius};
+    padding: ${(props) => props.padding};
+    width: ${(props) => props.hoveredIcon ? "32px" : ""};
+    height: ${(props) => props.hoveredIcon ? "32px" : ""};
+    cursor: pointer;
+    background-color: ${(props) => props.isActive ? props.theme.colors.transparentWhite2 : ""};
+    cursor: ${(props) => props.isDisabled ? "not-allowed" : "pointer"};
+    &:hover {
+      background-color: ${(props) => props.hoveredIcon ? props.theme.colors.transparentWhite2 : ""};
+    }
+  `;
+const LabelWrapperAttrs = {
+  size: String,
+  color: String
+};
+const LabelWrapper = styled("div", LabelWrapperAttrs)`
+    font-size: ${(props) => props.size};
+    color: ${(props) => props.color};
   `;
 const _sfc_main = {
-  name: "CollectionComponent",
+  name: "InfoText",
   components: {
-    RCIcon: _sfc_main$1,
+    IconComponent: _sfc_main$1,
+    TextOverlay,
+    // Arrow,
+    Dot,
+    PageContainer,
+    TextWrapper,
+    OverlayImage,
     IconWrapper,
-    Wrapper
+    LabelWrapper
   },
   props: {
-    size: {
+    text: {
+      required: false,
+      default: "",
+      type: String
+    },
+    isActive: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    labelText: {
       required: false,
+      default: "",
+      type: String
+    },
+    size: {
       type: String,
-      default: "30px"
+      default: "14px"
     },
-    color: {
+    infoPosition: {
       required: false,
+      default: null,
+      type: String
+    },
+    maxWidth: {
+      default: "400px",
+      type: String
+    },
+    openTrigger: {
       type: String,
-      default: "white"
+      default: "onHover",
+      validator: (value) => ["onHover", "onClick"].includes(value)
     },
-    hoveredColor: {
+    buttonType: {
+      type: String,
+      default: "regular",
+      validator: (value) => ["regular", "error"].includes(value)
+    },
+    image: {
+      type: String,
+      default: ""
+    },
+    iconName: {
+      type: String,
+      default: "info"
+    },
+    iconColor: {
+      type: String,
+      default: null,
+      required: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    dotColor: {
+      type: String,
       required: false,
+      default: theme.semanticColors.blue[400]
+    },
+    type: {
+      type: String,
+      required: false,
+      default: "info"
+      // info, dot
+    },
+    appTheme: {
       type: String,
-      default: "grey"
+      default: "light",
+      // light or dark
+      required: false
+    },
+    labelAlign: {
+      type: String,
+      default: "right",
+      required: false
+    },
+    backgroundColor: {
+      type: String,
+      default: "",
+      required: false
+    },
+    contentBackgroundColor: {
+      type: String,
+      default: "",
+      required: false
+    },
+    borderRadius: {
+      type: String,
+      default: "",
+      required: false
+    },
+    padding: {
+      type: String,
+      default: "",
+      required: false
+    },
+    labelSize: {
+      type: String,
+      default: "12px",
+      required: false
+    },
+    noIcon: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    hoveredIcon: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    hideInfoText: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
-  data() {
-    return {
-      iconList: []
+  setup(props) {
+    const isVisible = ref(false);
+    const container = ref(null);
+    const icon = ref(null);
+    const infoBox = ref(null);
+    const textContent = ref(null);
+    const infoImage = ref(null);
+    const infoBoxWidth = ref(0);
+    const infoBoxHeight = ref(0);
+    const boxStyle = ref({});
+    const arrowStyle = ref({});
+    const wrapperStyle = ref({});
+    const isMobile = ref(window.innerWidth <= 768);
+    const textStyle = computed(() => ({
+      fontSize: props.image ? "12px" : "13px",
+      color: props.image ? theme.colors.grey1 : props.appTheme === "dark" ? theme.colors.black : theme.colors.white,
+      textAlign: props.image ? "right" : "left"
+    }));
+    const calculatePosition = (width) => {
+      if (!icon.value || !width)
+        return {};
+      const iconRect = icon.value.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const windowWidth = window.innerWidth;
+      const spaceBelow = windowHeight - iconRect.bottom - 10;
+      const spaceAbove = iconRect.top - 10;
+      const spaceRight = windowWidth - iconRect.right - 10;
+      const spaceLeft = iconRect.left - 10;
+      const positions = [{
+        position: "bottom",
+        space: spaceBelow
+      }, {
+        position: "top",
+        space: spaceAbove
+      }, {
+        position: "right",
+        space: spaceRight
+      }, {
+        position: "left",
+        space: spaceLeft
+      }].sort((a, b) => b.space - a.space);
+      const bestPosition = props.infoPosition ? props.infoPosition : positions[0].position;
+      let top, left, arrowPosition;
+      switch (bestPosition) {
+        case "bottom":
+          top = Math.round(iconRect.bottom + 10);
+          left = Math.round(Math.min(iconRect.left, windowWidth - width - 10));
+          arrowPosition = {
+            left: `${Math.round(Math.min(Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2), width - 18))}px`,
+            top: "-7px",
+            bottom: "auto",
+            transform: "rotate(180deg)"
+          };
+          break;
+        case "top":
+          top = Math.round(iconRect.top - infoBoxHeight.value - 10);
+          left = Math.round(Math.min(iconRect.left, windowWidth - width - 10));
+          arrowPosition = {
+            left: `${Math.round(Math.min(Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2), width - 18))}px`,
+            top: "auto",
+            bottom: "-7px",
+            transform: "none"
+          };
+          break;
+        case "right":
+          top = Math.round(Math.max(Math.min(iconRect.top - (infoBoxHeight.value - iconRect.height) / 2, windowHeight - infoBoxHeight.value - 10), 10));
+          left = Math.round(iconRect.right + 10);
+          arrowPosition = {
+            left: "-7px",
+            top: `${Math.round(Math.min(Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2), infoBoxHeight.value - 18))}px`,
+            bottom: "auto",
+            transform: "rotate(90deg)"
+          };
+          break;
+        case "left":
+          top = Math.round(Math.max(Math.min(iconRect.top - (infoBoxHeight.value - iconRect.height) / 2, windowHeight - infoBoxHeight.value - 10), 10));
+          left = Math.round(iconRect.left - width - 10);
+          arrowPosition = {
+            left: "auto",
+            right: "-7px",
+            top: `${Math.round(Math.min(Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2), infoBoxHeight.value - 18))}px`,
+            bottom: "auto",
+            transform: "rotate(-90deg)"
+          };
+          break;
+      }
+      arrowStyle.value = arrowPosition;
+      wrapperStyle.value = {
+        position: "fixed",
+        top: `${top}px`,
+        left: `${left}px`,
+        transform: "none",
+        width: `${width}px`
+      };
+      return {
+        width: "100%",
+        maxWidth: props.maxWidth,
+        overflowY: "auto",
+        backgroundColor: props.contentBackgroundColor ? props.contentBackgroundColor : props.image ? theme.colors.white : props.appTheme === "light" ? theme.colors.black : theme.colors.grey5
+      };
     };
-  },
-  // mounted() {
-  //   this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
-  // },
-  async mounted() {
-    const icons = /* @__PURE__ */ Object.assign({ "../../assets/svgIcons/2d_active.svg": () => import("./main.es24.js"), "../../assets/svgIcons/2d_inactive.svg": () => import("./main.es25.js"), "../../assets/svgIcons/3d_active.svg": () => import("./main.es26.js"), "../../assets/svgIcons/3d_inactive.svg": () => import("./main.es27.js"), "../../assets/svgIcons/ac_power.svg": () => import("./main.es28.js"), "../../assets/svgIcons/accept.svg": () => import("./main.es29.js"), "../../assets/svgIcons/activate_panels_active.svg": () => import("./main.es30.js"), "../../assets/svgIcons/activate_panels_inactive.svg": () => import("./main.es31.js"), "../../assets/svgIcons/add_icon-1.svg": () => import("./main.es32.js"), "../../assets/svgIcons/add_icon.svg": () => import("./main.es33.js"), "../../assets/svgIcons/add_plus.svg": () => import("./main.es34.js"), "../../assets/svgIcons/address_book.svg": () => import("./main.es35.js"), "../../assets/svgIcons/adjust_roof.svg": () => import("./main.es36.js"), "../../assets/svgIcons/after_sale_as_a_service.svg": () => import("./main.es37.js"), "../../assets/svgIcons/align_panel.svg": () => import("./main.es38.js"), "../../assets/svgIcons/all_good.svg": () => import("./main.es39.js"), "../../assets/svgIcons/anchor.svg": () => import("./main.es40.js"), "../../assets/svgIcons/angle_active.svg": () => import("./main.es41.js"), "../../assets/svgIcons/angle_inactive.svg": () => import("./main.es42.js"), "../../assets/svgIcons/area_active.svg": () => import("./main.es43.js"), "../../assets/svgIcons/area_inactive.svg": () => import("./main.es44.js"), "../../assets/svgIcons/areas_tool.svg": () => import("./main.es45.js"), "../../assets/svgIcons/arrow_down.svg": () => import("./main.es46.js"), "../../assets/svgIcons/arrow_down_unfilled.svg": () => import("./main.es47.js"), "../../assets/svgIcons/arrow_left.svg": () => import("./main.es48.js"), "../../assets/svgIcons/arrow_long_left.svg": () => import("./main.es49.js"), "../../assets/svgIcons/arrow_long_right.svg": () => import("./main.es50.js"), "../../assets/svgIcons/arrow_right.svg": () => import("./main.es51.js"), "../../assets/svgIcons/arrow_up.svg": () => import("./main.es52.js"), "../../assets/svgIcons/arrow_up_unfilled.svg": () => import("./main.es53.js"), "../../assets/svgIcons/attachment.svg": () => import("./main.es54.js"), "../../assets/svgIcons/base_layer.svg": () => import("./main.es55.js"), "../../assets/svgIcons/battery.svg": () => import("./main.es56.js"), "../../assets/svgIcons/bell.svg": () => import("./main.es57.js"), "../../assets/svgIcons/bell_alt.svg": () => import("./main.es58.js"), "../../assets/svgIcons/bexio.svg": () => import("./main.es59.js"), "../../assets/svgIcons/bold.svg": () => import("./main.es60.js"), "../../assets/svgIcons/bom.svg": () => import("./main.es61.js"), "../../assets/svgIcons/bom_generation.svg": () => import("./main.es62.js"), "../../assets/svgIcons/bookmaker.svg": () => import("./main.es63.js"), "../../assets/svgIcons/bubble.svg": () => import("./main.es64.js"), "../../assets/svgIcons/bug.svg": () => import("./main.es65.js"), "../../assets/svgIcons/buildings.svg": () => import("./main.es66.js"), "../../assets/svgIcons/bullet_list.svg": () => import("./main.es67.js"), "../../assets/svgIcons/calendar.svg": () => import("./main.es68.js"), "../../assets/svgIcons/calendar_icon.svg": () => import("./main.es69.js"), "../../assets/svgIcons/call.svg": () => import("./main.es70.js"), "../../assets/svgIcons/camera.svg": () => import("./main.es71.js"), "../../assets/svgIcons/car.svg": () => import("./main.es72.js"), "../../assets/svgIcons/cart.svg": () => import("./main.es73.js"), "../../assets/svgIcons/charger_icon_white.svg": () => import("./main.es74.js"), "../../assets/svgIcons/chassis_ground_symbol.svg": () => import("./main.es75.js"), "../../assets/svgIcons/checkbox.svg": () => import("./main.es76.js"), "../../assets/svgIcons/checkmark.svg": () => import("./main.es77.js"), "../../assets/svgIcons/checkmark_white.svg": () => import("./main.es78.js"), "../../assets/svgIcons/clear_formatting.svg": () => import("./main.es79.js"), "../../assets/svgIcons/clenergy.svg": () => import("./main.es80.js"), "../../assets/svgIcons/clickable_info.svg": () => import("./main.es81.js"), "../../assets/svgIcons/clickable_info_white.svg": () => import("./main.es82.js"), "../../assets/svgIcons/clip.svg": () => import("./main.es83.js"), "../../assets/svgIcons/clock.svg": () => import("./main.es84.js"), "../../assets/svgIcons/clock_full.svg": () => import("./main.es85.js"), "../../assets/svgIcons/close.svg": () => import("./main.es86.js"), "../../assets/svgIcons/co_branding.svg": () => import("./main.es87.js"), "../../assets/svgIcons/collapse.svg": () => import("./main.es88.js"), "../../assets/svgIcons/collapse_all.svg": () => import("./main.es89.js"), "../../assets/svgIcons/collections.svg": () => import("./main.es90.js"), "../../assets/svgIcons/compass.svg": () => import("./main.es91.js"), "../../assets/svgIcons/component_library.svg": () => import("./main.es92.js"), "../../assets/svgIcons/consumption_tariffs.svg": () => import("./main.es93.js"), "../../assets/svgIcons/context_menu-1.svg": () => import("./main.es94.js"), "../../assets/svgIcons/context_menu-2.svg": () => import("./main.es95.js"), "../../assets/svgIcons/context_menu.svg": () => import("./main.es96.js"), "../../assets/svgIcons/context_menu_tabs.svg": () => import("./main.es97.js"), "../../assets/svgIcons/copy.svg": () => import("./main.es98.js"), "../../assets/svgIcons/cross.svg": () => import("./main.es99.js"), "../../assets/svgIcons/current_variant.svg": () => import("./main.es100.js"), "../../assets/svgIcons/customer.svg": () => import("./main.es101.js"), "../../assets/svgIcons/dashboard.svg": () => import("./main.es102.js"), "../../assets/svgIcons/data_transfer.svg": () => import("./main.es103.js"), "../../assets/svgIcons/dc_power.svg": () => import("./main.es104.js"), "../../assets/svgIcons/deadline.svg": () => import("./main.es105.js"), "../../assets/svgIcons/deal_flow.svg": () => import("./main.es106.js"), "../../assets/svgIcons/delete.svg": () => import("./main.es107.js"), "../../assets/svgIcons/delete_area_active.svg": () => import("./main.es108.js"), "../../assets/svgIcons/delete_area_inactive.svg": () => import("./main.es109.js"), "../../assets/svgIcons/direction_active-1.svg": () => import("./main.es110.js"), "../../assets/svgIcons/direction_active.svg": () => import("./main.es111.js"), "../../assets/svgIcons/direction_arrow.svg": () => import("./main.es112.js"), "../../assets/svgIcons/direction_inactive.svg": () => import("./main.es113.js"), "../../assets/svgIcons/dislike.svg": () => import("./main.es114.js"), "../../assets/svgIcons/distance_tool.svg": () => import("./main.es115.js"), "../../assets/svgIcons/distances_active.svg": () => import("./main.es116.js"), "../../assets/svgIcons/distances_inactive.svg": () => import("./main.es117.js"), "../../assets/svgIcons/distort_tool.svg": () => import("./main.es118.js"), "../../assets/svgIcons/distort_tool2.svg": () => import("./main.es119.js"), "../../assets/svgIcons/document.svg": () => import("./main.es120.js"), "../../assets/svgIcons/documents.svg": () => import("./main.es121.js"), "../../assets/svgIcons/documents_landscape.svg": () => import("./main.es122.js"), "../../assets/svgIcons/double_arrow_long.svg": () => import("./main.es123.js"), "../../assets/svgIcons/downarrow.svg": () => import("./main.es124.js"), "../../assets/svgIcons/download.svg": () => import("./main.es125.js"), "../../assets/svgIcons/drag_icon.svg": () => import("./main.es126.js"), "../../assets/svgIcons/draggable_corner.svg": () => import("./main.es127.js"), "../../assets/svgIcons/draw_tool.svg": () => import("./main.es128.js"), "../../assets/svgIcons/duplicate-1.svg": () => import("./main.es129.js"), "../../assets/svgIcons/duplicate-2.svg": () => import("./main.es130.js"), "../../assets/svgIcons/duplicate.svg": () => import("./main.es131.js"), "../../assets/svgIcons/e-mobility_configurator.svg": () => import("./main.es132.js"), "../../assets/svgIcons/e_signature.svg": () => import("./main.es133.js"), "../../assets/svgIcons/ed_ac.svg": () => import("./main.es134.js"), "../../assets/svgIcons/ed_ac_path.svg": () => import("./main.es135.js"), "../../assets/svgIcons/ed_acgrid.svg": () => import("./main.es136.js"), "../../assets/svgIcons/ed_acgrid_old.svg": () => import("./main.es137.js"), "../../assets/svgIcons/ed_arrow_both.svg": () => import("./main.es138.js"), "../../assets/svgIcons/ed_arrow_left.svg": () => import("./main.es139.js"), "../../assets/svgIcons/ed_arrow_right.svg": () => import("./main.es140.js"), "../../assets/svgIcons/ed_battery.svg": () => import("./main.es141.js"), "../../assets/svgIcons/ed_batteryacinverter.svg": () => import("./main.es142.js"), "../../assets/svgIcons/ed_batteryintegratedinverter.svg": () => import("./main.es143.js"), "../../assets/svgIcons/ed_cirquitbreaker.svg": () => import("./main.es144.js"), "../../assets/svgIcons/ed_cirquitbreaker_magnetic.svg": () => import("./main.es145.js"), "../../assets/svgIcons/ed_cirquitbreaker_thermal.svg": () => import("./main.es146.js"), "../../assets/svgIcons/ed_cirquitbreaker_thermal_magnetic.svg": () => import("./main.es147.js"), "../../assets/svgIcons/ed_consumption.svg": () => import("./main.es148.js"), "../../assets/svgIcons/ed_dc.svg": () => import("./main.es149.js"), "../../assets/svgIcons/ed_disconnector.svg": () => import("./main.es150.js"), "../../assets/svgIcons/ed_disconnector_fuse.svg": () => import("./main.es151.js"), "../../assets/svgIcons/ed_disconnector_fuse_switch.svg": () => import("./main.es152.js"), "../../assets/svgIcons/ed_disconnector_loadbreak_switch.svg": () => import("./main.es153.js"), "../../assets/svgIcons/ed_disconnector_switch.svg": () => import("./main.es154.js"), "../../assets/svgIcons/ed_disconnector_switch_auto_release.svg": () => import("./main.es155.js"), "../../assets/svgIcons/ed_energymanagement_rectangle.svg": () => import("./main.es156.js"), "../../assets/svgIcons/ed_evcharger.svg": () => import("./main.es157.js"), "../../assets/svgIcons/ed_flexiblecomponent_circle.svg": () => import("./main.es158.js"), "../../assets/svgIcons/ed_flexiblecomponent_square.svg": () => import("./main.es159.js"), "../../assets/svgIcons/ed_fuse.svg": () => import("./main.es160.js"), "../../assets/svgIcons/ed_ground.svg": () => import("./main.es161.js"), "../../assets/svgIcons/ed_heatpump.svg": () => import("./main.es162.js"), "../../assets/svgIcons/ed_icon_battery.svg": () => import("./main.es163.js"), "../../assets/svgIcons/ed_icon_circle.svg": () => import("./main.es164.js"), "../../assets/svgIcons/ed_icon_heatpump.svg": () => import("./main.es165.js"), "../../assets/svgIcons/ed_icon_inverter.svg": () => import("./main.es166.js"), "../../assets/svgIcons/ed_icon_m.svg": () => import("./main.es167.js"), "../../assets/svgIcons/ed_icon_optimizer.svg": () => import("./main.es168.js"), "../../assets/svgIcons/ed_icon_optimizer_path.svg": () => import("./main.es169.js"), "../../assets/svgIcons/ed_integratedbatteryinverter.svg": () => import("./main.es170.js"), "../../assets/svgIcons/ed_inverter-blank.svg": () => import("./main.es171.js"), "../../assets/svgIcons/ed_mainsconnection.svg": () => import("./main.es172.js"), "../../assets/svgIcons/ed_meter-blank.svg": () => import("./main.es173.js"), "../../assets/svgIcons/ed_meter_arrowleft.svg": () => import("./main.es174.js"), "../../assets/svgIcons/ed_meter_arrowright.svg": () => import("./main.es175.js"), "../../assets/svgIcons/ed_meter_bidirectional.svg": () => import("./main.es176.js"), "../../assets/svgIcons/ed_networkandsystemprotection_double.svg": () => import("./main.es177.js"), "../../assets/svgIcons/ed_networkandsystemprotection_single.svg": () => import("./main.es178.js"), "../../assets/svgIcons/ed_pvpanel (Stroke).svg": () => import("./main.es179.js"), "../../assets/svgIcons/ed_pvpanel.svg": () => import("./main.es180.js"), "../../assets/svgIcons/ed_rcd.svg": () => import("./main.es181.js"), "../../assets/svgIcons/ed_rcd_simple.svg": () => import("./main.es182.js"), "../../assets/svgIcons/ed_spd.svg": () => import("./main.es183.js"), "../../assets/svgIcons/ed_stringwithoptimizer.svg": () => import("./main.es184.js"), "../../assets/svgIcons/ed_stringwithoutoptimizer.svg": () => import("./main.es185.js"), "../../assets/svgIcons/ed_transformer.svg": () => import("./main.es186.js"), "../../assets/svgIcons/edit.svg": () => import("./main.es187.js"), "../../assets/svgIcons/edit_button.svg": () => import("./main.es188.js"), "../../assets/svgIcons/edit_stroke.svg": () => import("./main.es189.js"), "../../assets/svgIcons/efs.svg": () => import("./main.es190.js"), "../../assets/svgIcons/electricity_tariff.svg": () => import("./main.es191.js"), "../../assets/svgIcons/email.svg": () => import("./main.es192.js"), "../../assets/svgIcons/ems-1.svg": () => import("./main.es193.js"), "../../assets/svgIcons/ems.svg": () => import("./main.es194.js"), "../../assets/svgIcons/end_of_the_list.svg": () => import("./main.es195.js"), "../../assets/svgIcons/energy_meter.svg": () => import("./main.es196.js"), "../../assets/svgIcons/erase.svg": () => import("./main.es197.js"), "../../assets/svgIcons/erase_white.svg": () => import("./main.es198.js"), "../../assets/svgIcons/expand.svg": () => import("./main.es199.js"), "../../assets/svgIcons/expand_all.svg": () => import("./main.es200.js"), "../../assets/svgIcons/export_document.svg": () => import("./main.es201.js"), "../../assets/svgIcons/external_icon.svg": () => import("./main.es202.js"), "../../assets/svgIcons/fav_icon.svg": () => import("./main.es203.js"), "../../assets/svgIcons/filter.svg": () => import("./main.es204.js"), "../../assets/svgIcons/finance.svg": () => import("./main.es205.js"), "../../assets/svgIcons/financing_for_pv-1.svg": () => import("./main.es206.js"), "../../assets/svgIcons/financing_for_pv-2.svg": () => import("./main.es207.js"), "../../assets/svgIcons/financing_for_pv.svg": () => import("./main.es208.js"), "../../assets/svgIcons/finish-1.svg": () => import("./main.es209.js"), "../../assets/svgIcons/finish.svg": () => import("./main.es210.js"), "../../assets/svgIcons/flatten.svg": () => import("./main.es211.js"), "../../assets/svgIcons/flatten_roof.svg": () => import("./main.es212.js"), "../../assets/svgIcons/flip_horizontally.svg": () => import("./main.es213.js"), "../../assets/svgIcons/folder.svg": () => import("./main.es214.js"), "../../assets/svgIcons/free_technology.svg": () => import("./main.es215.js"), "../../assets/svgIcons/ground_symbol.svg": () => import("./main.es216.js"), "../../assets/svgIcons/handle.svg": () => import("./main.es217.js"), "../../assets/svgIcons/heat_calc.svg": () => import("./main.es218.js"), "../../assets/svgIcons/heat_pump.svg": () => import("./main.es219.js"), "../../assets/svgIcons/heating_system.svg": () => import("./main.es220.js"), "../../assets/svgIcons/height_equalize.svg": () => import("./main.es221.js"), "../../assets/svgIcons/height_snap.svg": () => import("./main.es222.js"), "../../assets/svgIcons/house.svg": () => import("./main.es223.js"), "../../assets/svgIcons/house_3d-1.svg": () => import("./main.es224.js"), "../../assets/svgIcons/house_3d.svg": () => import("./main.es225.js"), "../../assets/svgIcons/house_sun.svg": () => import("./main.es226.js"), "../../assets/svgIcons/hybrid.svg": () => import("./main.es227.js"), "../../assets/svgIcons/inclination.svg": () => import("./main.es228.js"), "../../assets/svgIcons/info.svg": () => import("./main.es229.js"), "../../assets/svgIcons/initial_situation.svg": () => import("./main.es230.js"), "../../assets/svgIcons/integrations.svg": () => import("./main.es231.js"), "../../assets/svgIcons/intro-tour-1.svg": () => import("./main.es232.js"), "../../assets/svgIcons/intro-tour.svg": () => import("./main.es233.js"), "../../assets/svgIcons/inverter.svg": () => import("./main.es234.js"), "../../assets/svgIcons/italic.svg": () => import("./main.es235.js"), "../../assets/svgIcons/k2.svg": () => import("./main.es236.js"), "../../assets/svgIcons/kanban_view.svg": () => import("./main.es237.js"), "../../assets/svgIcons/key.svg": () => import("./main.es238.js"), "../../assets/svgIcons/lake.svg": () => import("./main.es239.js"), "../../assets/svgIcons/layers_close.svg": () => import("./main.es240.js"), "../../assets/svgIcons/layers_open.svg": () => import("./main.es241.js"), "../../assets/svgIcons/lead_marketplace.svg": () => import("./main.es242.js"), "../../assets/svgIcons/lead_provider.svg": () => import("./main.es243.js"), "../../assets/svgIcons/legend.svg": () => import("./main.es244.js"), "../../assets/svgIcons/length_2d.svg": () => import("./main.es245.js"), "../../assets/svgIcons/length_3d.svg": () => import("./main.es246.js"), "../../assets/svgIcons/length_calculator.svg": () => import("./main.es247.js"), "../../assets/svgIcons/length_in_2d_active.svg": () => import("./main.es248.js"), "../../assets/svgIcons/length_in_2d_inctive.svg": () => import("./main.es249.js"), "../../assets/svgIcons/light_bulb.svg": () => import("./main.es250.js"), "../../assets/svgIcons/like.svg": () => import("./main.es251.js"), "../../assets/svgIcons/line_graph.svg": () => import("./main.es252.js"), "../../assets/svgIcons/local_subsidies.svg": () => import("./main.es253.js"), "../../assets/svgIcons/location.svg": () => import("./main.es254.js"), "../../assets/svgIcons/lock.svg": () => import("./main.es255.js"), "../../assets/svgIcons/logout.svg": () => import("./main.es256.js"), "../../assets/svgIcons/loop.svg": () => import("./main.es257.js"), "../../assets/svgIcons/low-vegetation.svg": () => import("./main.es258.js"), "../../assets/svgIcons/lunch.svg": () => import("./main.es259.js"), "../../assets/svgIcons/magic_tool.svg": () => import("./main.es260.js"), "../../assets/svgIcons/map_icon.svg": () => import("./main.es261.js"), "../../assets/svgIcons/map_settings.svg": () => import("./main.es262.js"), "../../assets/svgIcons/margin_tool.svg": () => import("./main.es263.js"), "../../assets/svgIcons/meeting.svg": () => import("./main.es264.js"), "../../assets/svgIcons/module.svg": () => import("./main.es265.js"), "../../assets/svgIcons/move_copy.svg": () => import("./main.es266.js"), "../../assets/svgIcons/move_down.svg": () => import("./main.es267.js"), "../../assets/svgIcons/move_left.svg": () => import("./main.es268.js"), "../../assets/svgIcons/move_right.svg": () => import("./main.es269.js"), "../../assets/svgIcons/move_up.svg": () => import("./main.es270.js"), "../../assets/svgIcons/new_area_inactive.svg": () => import("./main.es271.js"), "../../assets/svgIcons/next.svg": () => import("./main.es272.js"), "../../assets/svgIcons/normal-tg.svg": () => import("./main.es273.js"), "../../assets/svgIcons/normal-vegetation.svg": () => import("./main.es274.js"), "../../assets/svgIcons/not_equal_to.svg": () => import("./main.es275.js"), "../../assets/svgIcons/numbered_list.svg": () => import("./main.es276.js"), "../../assets/svgIcons/obstacle_tool.svg": () => import("./main.es277.js"), "../../assets/svgIcons/obstacle_tool_origin.svg": () => import("./main.es278.js"), "../../assets/svgIcons/offset_tool.svg": () => import("./main.es279.js"), "../../assets/svgIcons/opacity.svg": () => import("./main.es280.js"), "../../assets/svgIcons/open-tg.svg": () => import("./main.es281.js"), "../../assets/svgIcons/optimizer.svg": () => import("./main.es282.js"), "../../assets/svgIcons/order.svg": () => import("./main.es283.js"), "../../assets/svgIcons/outline_tool.svg": () => import("./main.es284.js"), "../../assets/svgIcons/pan_tool.svg": () => import("./main.es285.js"), "../../assets/svgIcons/panels_tool.svg": () => import("./main.es286.js"), "../../assets/svgIcons/pause.svg": () => import("./main.es287.js"), "../../assets/svgIcons/pen_tool.svg": () => import("./main.es288.js"), "../../assets/svgIcons/picker_tool.svg": () => import("./main.es289.js"), "../../assets/svgIcons/picture.svg": () => import("./main.es290.js"), "../../assets/svgIcons/pin.svg": () => import("./main.es291.js"), "../../assets/svgIcons/play.svg": () => import("./main.es292.js"), "../../assets/svgIcons/plus_button.svg": () => import("./main.es293.js"), "../../assets/svgIcons/presentation.svg": () => import("./main.es294.js"), "../../assets/svgIcons/preview.svg": () => import("./main.es295.js"), "../../assets/svgIcons/previous.svg": () => import("./main.es296.js"), "../../assets/svgIcons/profile-1.svg": () => import("./main.es297.js"), "../../assets/svgIcons/profile.svg": () => import("./main.es298.js"), "../../assets/svgIcons/profitability.svg": () => import("./main.es299.js"), "../../assets/svgIcons/project_analysis.svg": () => import("./main.es300.js"), "../../assets/svgIcons/project_settings.svg": () => import("./main.es301.js"), "../../assets/svgIcons/protected-tg.svg": () => import("./main.es302.js"), "../../assets/svgIcons/pv.svg": () => import("./main.es303.js"), "../../assets/svgIcons/question_mark.svg": () => import("./main.es304.js"), "../../assets/svgIcons/question_mark_white.svg": () => import("./main.es305.js"), "../../assets/svgIcons/quotations.svg": () => import("./main.es306.js"), "../../assets/svgIcons/rectangle.svg": () => import("./main.es307.js"), "../../assets/svgIcons/redo.svg": () => import("./main.es308.js"), "../../assets/svgIcons/refresh.svg": () => import("./main.es309.js"), "../../assets/svgIcons/reorder_string.svg": () => import("./main.es310.js"), "../../assets/svgIcons/resizer.svg": () => import("./main.es311.js"), "../../assets/svgIcons/roof_layer.svg": () => import("./main.es312.js"), "../../assets/svgIcons/rotate_tool.svg": () => import("./main.es313.js"), "../../assets/svgIcons/rotate_view.svg": () => import("./main.es314.js"), "../../assets/svgIcons/ruler_tool.svg": () => import("./main.es315.js"), "../../assets/svgIcons/run_simulation.svg": () => import("./main.es316.js"), "../../assets/svgIcons/save.svg": () => import("./main.es317.js"), "../../assets/svgIcons/scaling_tool.svg": () => import("./main.es318.js"), "../../assets/svgIcons/sea.svg": () => import("./main.es319.js"), "../../assets/svgIcons/search.svg": () => import("./main.es320.js"), "../../assets/svgIcons/security.svg": () => import("./main.es321.js"), "../../assets/svgIcons/settings.svg": () => import("./main.es322.js"), "../../assets/svgIcons/show_in_a_new_tab.svg": () => import("./main.es323.js"), "../../assets/svgIcons/smartphone.svg": () => import("./main.es324.js"), "../../assets/svgIcons/solar_calc.svg": () => import("./main.es325.js"), "../../assets/svgIcons/solarmarkt.svg": () => import("./main.es326.js"), "../../assets/svgIcons/sorting.svg": () => import("./main.es327.js"), "../../assets/svgIcons/split.svg": () => import("./main.es328.js"), "../../assets/svgIcons/star.svg": () => import("./main.es329.js"), "../../assets/svgIcons/start_of_the_list.svg": () => import("./main.es330.js"), "../../assets/svgIcons/strikethrough.svg": () => import("./main.es331.js"), "../../assets/svgIcons/string_design.svg": () => import("./main.es332.js"), "../../assets/svgIcons/string_directions.svg": () => import("./main.es333.js"), "../../assets/svgIcons/subdirectory.svg": () => import("./main.es334.js"), "../../assets/svgIcons/subscriptions.svg": () => import("./main.es335.js"), "../../assets/svgIcons/subsidies-2.svg": () => import("./main.es336.js"), "../../assets/svgIcons/subsidies.svg": () => import("./main.es337.js"), "../../assets/svgIcons/subtract_icon.svg": () => import("./main.es338.js"), "../../assets/svgIcons/suitcase.svg": () => import("./main.es339.js"), "../../assets/svgIcons/summer.svg": () => import("./main.es340.js"), "../../assets/svgIcons/switch_polarity.svg": () => import("./main.es341.js"), "../../assets/svgIcons/table_view.svg": () => import("./main.es342.js"), "../../assets/svgIcons/template_icon_not_clickable.svg": () => import("./main.es343.js"), "../../assets/svgIcons/text_column_one.svg": () => import("./main.es344.js"), "../../assets/svgIcons/text_column_three.svg": () => import("./main.es345.js"), "../../assets/svgIcons/text_column_two.svg": () => import("./main.es346.js"), "../../assets/svgIcons/text_icon.svg": () => import("./main.es347.js"), "../../assets/svgIcons/transfer.svg": () => import("./main.es348.js"), "../../assets/svgIcons/transparent_warning.svg": () => import("./main.es349.js"), "../../assets/svgIcons/trim.svg": () => import("./main.es350.js"), "../../assets/svgIcons/trim_tool.svg": () => import("./main.es351.js"), "../../assets/svgIcons/truck.svg": () => import("./main.es352.js"), "../../assets/svgIcons/underlined.svg": () => import("./main.es353.js"), "../../assets/svgIcons/undo.svg": () => import("./main.es354.js"), "../../assets/svgIcons/uparrow.svg": () => import("./main.es355.js"), "../../assets/svgIcons/update.svg": () => import("./main.es356.js"), "../../assets/svgIcons/upload_avatar-1.svg": () => import("./main.es357.js"), "../../assets/svgIcons/upload_avatar.svg": () => import("./main.es358.js"), "../../assets/svgIcons/upload_image.svg": () => import("./main.es359.js"), "../../assets/svgIcons/upload_image_tool.svg": () => import("./main.es360.js"), "../../assets/svgIcons/variants.svg": () => import("./main.es361.js"), "../../assets/svgIcons/vdv.svg": () => import("./main.es362.js"), "../../assets/svgIcons/vertical_tool.svg": () => import("./main.es363.js"), "../../assets/svgIcons/virtual_storage.svg": () => import("./main.es364.js"), "../../assets/svgIcons/warning.svg": () => import("./main.es365.js"), "../../assets/svgIcons/warning_triangle.svg": () => import("./main.es366.js"), "../../assets/svgIcons/warning_triangle_white.svg": () => import("./main.es367.js"), "../../assets/svgIcons/way.svg": () => import("./main.es368.js"), "../../assets/svgIcons/wifi.svg": () => import("./main.es369.js"), "../../assets/svgIcons/winter.svg": () => import("./main.es370.js"), "../../assets/svgIcons/workflow_template.svg": () => import("./main.es371.js") });
-    for (const path in icons) {
-      const module = await icons[path]();
-      this.iconList.push({
-        pathLong: module.default,
-        pathShort: path,
-        name: path.replace(".svg", "").replace("../../assets/svgIcons/", "")
+    const showInfo = async () => {
+      isVisible.value = true;
+      await nextTick();
+      await nextTick();
+      await updatePosition();
+    };
+    const hideInfo = () => {
+      isVisible.value = false;
+      infoBoxWidth.value = 0;
+    };
+    const toggleInfo = () => {
+      isVisible.value ? hideInfo() : showInfo();
+    };
+    const handleScroll = () => {
+      if (isVisible.value) {
+        hideInfo();
+      }
+      updatePosition();
+    };
+    const isIconInView = () => {
+      if (!icon.value)
+        return false;
+      const rect = icon.value.getBoundingClientRect();
+      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+    };
+    const updatePosition = async () => {
+      if (!infoBox.value || !textContent.value)
+        return;
+      if (infoBox.value.$el) {
+        infoBox.value.$el.style.visibility = "hidden";
+        infoBox.value.$el.style.display = "block";
+      }
+      await nextTick();
+      if (!isIconInView()) {
+        if (isVisible.value)
+          hideInfo();
+        return;
+      }
+      const clone = textContent.value.cloneNode(true);
+      clone.style.position = "absolute";
+      clone.style.visibility = "hidden";
+      clone.style.width = "auto";
+      clone.style.maxWidth = "none";
+      clone.style.whiteSpace = "nowrap";
+      document.body.appendChild(clone);
+      const contentWidth = clone.offsetWidth;
+      document.body.removeChild(clone);
+      const calculatedWidth = Math.min(Math.max(contentWidth, 230), parseInt(props.maxWidth, 10));
+      infoBoxWidth.value = calculatedWidth;
+      await nextTick();
+      infoBoxHeight.value = infoBox.value.$el.offsetHeight;
+      boxStyle.value = calculatePosition(calculatedWidth);
+      if (isVisible.value && infoBox.value.$el) {
+        infoBox.value.$el.style.visibility = "visible";
+      }
+    };
+    const onImageLoad = () => {
+      if (infoImage.value) {
+        infoBoxHeight.value = infoBox.value.$el.offsetHeight;
+        updatePosition();
+      }
+    };
+    const handleClickOutside = (event) => {
+      if ((props.openTrigger === "onClick" || isMobile.value) && isVisible.value) {
+        const clickedElement = event.target;
+        if (infoBox.value && !infoBox.value.$el.contains(clickedElement) && !icon.value.contains(clickedElement)) {
+          hideInfo();
+        }
+      }
+    };
+    const handleResize = () => {
+      isMobile.value = window.innerWidth <= 768;
+      updatePosition();
+    };
+    onMounted(() => {
+      window.addEventListener("scroll", handleScroll, {
+        passive: true
       });
-    }
+      window.addEventListener("resize", handleResize);
+      document.addEventListener("scroll", handleScroll, {
+        passive: true,
+        capture: true
+      });
+      document.addEventListener("click", handleClickOutside);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+      document.removeEventListener("scroll", handleScroll, {
+        capture: true
+      });
+      document.removeEventListener("click", handleClickOutside);
+    });
+    watch(isVisible, (newValue) => {
+      if (newValue) {
+        updatePosition();
+      }
+    });
+    return {
+      isVisible,
+      boxStyle,
+      arrowStyle,
+      showInfo,
+      hideInfo,
+      toggleInfo,
+      container,
+      icon,
+      infoBox,
+      textContent,
+      infoImage,
+      infoBoxWidth,
+      infoBoxHeight,
+      wrapperStyle,
+      textStyle,
+      onImageLoad,
+      isMobile
+    };
   },
-  methods: {
-    importAll(r) {
-      r.keys().forEach((key) => this.iconList.push({
-        pathLong: r(key),
-        pathShort: key,
-        name: key.replace(".svg", "").replace("./", "")
-      }));
+  computed: {
+    computedIconColor() {
+      return this.buttonType === "error" ? theme.colors.red : theme.colors.mediumGray;
     }
   }
 };
+const _hoisted_1 = {
+  ref: "icon",
+  "data-test-id": "infoText_trigger"
+};
+const _hoisted_2 = ["innerHTML"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_RCIcon = resolveComponent("RCIcon");
+  const _component_LabelWrapper = resolveComponent("LabelWrapper");
+  const _component_Dot = resolveComponent("Dot");
+  const _component_IconComponent = resolveComponent("IconComponent");
   const _component_IconWrapper = resolveComponent("IconWrapper");
-  const _component_Wrapper = resolveComponent("Wrapper");
-  return openBlock(), createBlock(_component_Wrapper, null, {
-    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList($data.iconList, (iconItem) => {
-      return openBlock(), createBlock(_component_IconWrapper, {
-        key: iconItem.name
+  const _component_OverlayImage = resolveComponent("OverlayImage");
+  const _component_TextOverlay = resolveComponent("TextOverlay");
+  const _component_TextWrapper = resolveComponent("TextWrapper");
+  const _component_PageContainer = resolveComponent("PageContainer");
+  return openBlock(), createBlock(_component_PageContainer, {
+    ref: "container",
+    "data-test-id": "infoText_container",
+    type: $props.type,
+    onClick: _cache[0] || (_cache[0] = ($event) => {
+      ($setup.isMobile || $props.openTrigger === "onClick") && $setup.toggleInfo();
+    }),
+    onMouseenter: _cache[1] || (_cache[1] = ($event) => !$setup.isMobile && $props.openTrigger === "onHover" && $setup.showInfo()),
+    onMouseleave: _cache[2] || (_cache[2] = ($event) => !$setup.isMobile && $props.openTrigger === "onHover" && $setup.hideInfo())
+  }, {
+    default: withCtx(() => [createBaseVNode("div", _hoisted_1, [createVNode(_component_IconWrapper, {
+      "background-color": $props.backgroundColor,
+      "border-radius": $props.borderRadius,
+      "hovered-icon": $props.hoveredIcon,
+      "is-active": $props.isActive,
+      "is-disabled": $props.isDisabled,
+      padding: $props.padding
+    }, {
+      default: withCtx(() => [!_ctx.$slots.trigger ? (openBlock(), createElementBlock(Fragment, {
+        key: 0
+      }, [$props.labelText && $props.labelAlign === "left" ? (openBlock(), createBlock(_component_LabelWrapper, {
+        key: 0,
+        color: $props.iconColor || $options.computedIconColor,
+        size: $props.labelSize
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString($props.labelText), 1)]),
+        _: 1
+      }, 8, ["color", "size"])) : createCommentVNode("", true), createTextVNode(), $props.type === "dot" ? (openBlock(), createBlock(_component_Dot, {
+        key: 1,
+        color: $props.dotColor,
+        "data-test-id": "infoText_dot"
+      }, null, 8, ["color"])) : !$props.noIcon ? (openBlock(), createBlock(_component_IconComponent, {
+        key: 2,
+        color: $props.iconColor || $options.computedIconColor,
+        cursor: $props.isDisabled ? "not-allowed" : "pointer",
+        disabled: $props.isDisabled,
+        "hovered-color": $props.iconColor || $options.computedIconColor,
+        name: $props.iconName,
+        size: $props.size
+      }, null, 8, ["color", "cursor", "disabled", "hovered-color", "name", "size"])) : createCommentVNode("", true), createTextVNode(), $props.labelText && $props.labelAlign === "right" ? (openBlock(), createBlock(_component_LabelWrapper, {
+        key: 3,
+        color: $props.iconColor || $options.computedIconColor,
+        size: $props.labelSize
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString($props.labelText), 1)]),
+        _: 1
+      }, 8, ["color", "size"])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createTextVNode(), renderSlot(_ctx.$slots, "trigger")]),
+      _: 3
+    }, 8, ["background-color", "border-radius", "hovered-icon", "is-active", "is-disabled", "padding"])], 512), createTextVNode(), $setup.isVisible && !!$props.text ? (openBlock(), createBlock(Teleport, {
+      key: 0,
+      to: "body"
+    }, [createVNode(_component_TextWrapper, {
+      "data-test-id": "info_text_wrapper",
+      style: normalizeStyle($setup.wrapperStyle)
+    }, {
+      default: withCtx(() => [createVNode(_component_TextOverlay, {
+        ref: "infoBox",
+        "app-theme": $props.appTheme,
+        image: $props.image,
+        style: normalizeStyle($setup.boxStyle),
+        width: $setup.infoBoxWidth
       }, {
-        default: withCtx(() => [createBaseVNode("div", null, [createTextVNode("\n        color:" + toDisplayString($props.color) + " ", 1), createVNode(_component_RCIcon, {
-          color: $props.color,
-          "hovered-color": $props.hoveredColor,
-          name: iconItem.name,
-          size: $props.size
-        }, null, 8, ["color", "hovered-color", "name", "size"])]), createTextVNode(), createBaseVNode("h3", null, toDisplayString(iconItem.name), 1)]),
-        _: 2
-      }, 1024);
-    }), 128))]),
-    _: 1
-  });
+        default: withCtx(() => [$props.image ? (openBlock(), createBlock(_component_OverlayImage, {
+          key: 0,
+          ref: "infoImage",
+          alt: "Info Image",
+          src: $props.image,
+          onLoad: $setup.onImageLoad
+        }, null, 8, ["src", "onLoad"])) : createCommentVNode("", true), createTextVNode(), !$props.hideInfoText ? (openBlock(), createElementBlock("span", {
+          key: 1,
+          ref: "textContent",
+          style: normalizeStyle($setup.textStyle)
+        }, [renderSlot(_ctx.$slots, "default", {}, () => [createBaseVNode("span", {
+          innerHTML: $props.text
+        }, null, 8, _hoisted_2)])], 4)) : createCommentVNode("", true)]),
+        _: 3
+      }, 8, ["app-theme", "image", "style", "width"]), createTextVNode()]),
+      _: 3
+    }, 8, ["style"])])) : createCommentVNode("", true)]),
+    _: 3
+  }, 8, ["type"]);
 }
-const IconCollection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const InfoText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  IconCollection as default
+  InfoText as default
 };