@wavemaker/react-runtime 11.14.1-rc.236

package/components/basic/anchor/index.js

@@ -0,0 +1,239 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmAnchor = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx2 = _interopRequireDefault(require("clsx"));
+var _image = _interopRequireDefault(require("next/image"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _navigation = require("next/navigation");
+var _excluded = ["caption", "iconclass", "styles", "className", "iconheight", "iconwidth", "iconmargin", "iconurl", "iconposition", "badgevalue", "listener", "hyperlink", "encodeurl", "onClick", "shortcutkey", "arialabel", "target"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Define regex outside component to avoid recreation on each render
+var GO_TO_PAGE_REGEX = /(?:\w+\?\.)?Actions(?:\?\.)?goToPage_(\w+)(?:\?\.)?invoke\(\)/;
+var DEFAULT_CLASS = "app-anchor";
+var getCurrentPageName = function getCurrentPageName(pathname) {
+  var segments = pathname.split("/").filter(Boolean);
+  return segments[segments.length - 1];
+};
+var WmAnchor = exports.WmAnchor = function WmAnchor(props) {
+  var _clsx, _listener$appLocale;
+  var _props$caption = props.caption,
+    caption = _props$caption === void 0 ? "Link" : _props$caption,
+    iconclass = props.iconclass,
+    styles = props.styles,
+    className = props.className,
+    iconheight = props.iconheight,
+    iconwidth = props.iconwidth,
+    iconmargin = props.iconmargin,
+    iconurl = props.iconurl,
+    _props$iconposition = props.iconposition,
+    iconposition = _props$iconposition === void 0 ? "left" : _props$iconposition,
+    badgevalue = props.badgevalue,
+    listener = props.listener,
+    hyperlink = props.hyperlink,
+    encodeurl = props.encodeurl,
+    onClick = props.onClick,
+    shortcutkey = props.shortcutkey,
+    arialabel = props.arialabel,
+    target = props.target,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var path = (0, _navigation.usePathname)();
+  var _useState = (0, _react.useState)(false),
+    isActive = _useState[0],
+    setIsActive = _useState[1];
+
+  // Extract navigation info from onClick
+  var navigationInfo = (0, _react.useMemo)(function () {
+    if (!onClick) return {
+      hasGoToPageExpr: false,
+      goToPageName: null,
+      isCurrentPage: false
+    };
+    var fnStr = onClick.toString();
+    var match = GO_TO_PAGE_REGEX.exec(fnStr);
+    if (!match) return {
+      hasGoToPageExpr: false,
+      goToPageName: null,
+      isCurrentPage: false
+    };
+    var pageName = match[1];
+    var currentPageName = getCurrentPageName(path);
+    return {
+      hasGoToPageExpr: true,
+      goToPageName: pageName,
+      isCurrentPage: pageName === currentPageName
+    };
+  }, [onClick, path]);
+
+  // Process hyperlink for href attribute
+  var processedHyperlink = (0, _react.useMemo)(function () {
+    if (!hyperlink) return "#";
+    var processedLink = hyperlink;
+    if (encodeurl === "true") {
+      processedLink = encodeURIComponent(processedLink);
+    }
+    if (processedLink.startsWith("www.")) {
+      processedLink = "//".concat(processedLink);
+    }
+    return processedLink;
+  }, [hyperlink, encodeurl]);
+
+  // Check if hyperlink matches current path
+  var doesHyperlinkMatchCurrentPath = (0, _react.useMemo)(function () {
+    if (!hyperlink) return false;
+    var processedLink = hyperlink;
+    if (processedLink.startsWith("www.")) {
+      processedLink = "//".concat(processedLink);
+    }
+    try {
+      if (processedLink.startsWith("/")) {
+        return path === processedLink;
+      }
+      var url = new URL(processedLink, window.location.origin);
+      return path === url.pathname;
+    } catch (_unused) {
+      return path.endsWith(processedLink);
+    }
+  }, [hyperlink, path]);
+
+  // Determine active state
+  (0, _react.useEffect)(function () {
+    var lastSegment = path.split("/").pop();
+    var activeByCaptionMatch = caption && lastSegment && lastSegment.toLowerCase() === String(caption).toLowerCase();
+    var activeByHyperlink = doesHyperlinkMatchCurrentPath;
+    var activeByNavigationExpr = navigationInfo.isCurrentPage;
+    setIsActive(activeByCaptionMatch || activeByHyperlink || activeByNavigationExpr);
+  }, [caption, path, doesHyperlinkMatchCurrentPath, navigationInfo.isCurrentPage]);
+
+  // Calculate icon position styles
+  var iconPositionStyles = (0, _react.useMemo)(function () {
+    if (iconposition === "top") {
+      return {
+        flexDirection: "column",
+        alignItems: "center"
+      };
+    }
+    return {
+      direction: iconposition === "right" ? "rtl" : "ltr"
+    };
+  }, [iconposition]);
+  var handleClick = function handleClick(e) {
+    if (!hyperlink || navigationInfo.hasGoToPageExpr) {
+      e.preventDefault();
+    }
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  function handleMouseEnter(event) {
+    var _props$onMouseEnter;
+    (_props$onMouseEnter = props.onMouseEnter) === null || _props$onMouseEnter === void 0 || _props$onMouseEnter.call(props, event, props);
+  }
+  function handleMouseLeave(event) {
+    var _props$onMouseLeave;
+    (_props$onMouseLeave = props.onMouseLeave) === null || _props$onMouseLeave === void 0 || _props$onMouseLeave.call(props, event, props);
+  }
+  function handleDoubleClick(event) {
+    var _props$onDoubleClick;
+    (_props$onDoubleClick = props.onDoubleClick) === null || _props$onDoubleClick === void 0 || _props$onDoubleClick.call(props, event, props);
+  }
+  function handleFocus(event) {
+    var _props$onFocus;
+    (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event, props);
+  }
+  function handleBlur(event) {
+    var _props$onBlur;
+    (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event, props);
+  }
+
+  // Disable context menu if no hyperlink
+  var handleContextMenu = function handleContextMenu(e) {
+    if (!hyperlink) {
+      e.preventDefault();
+    }
+  };
+  var domEvents = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.onMouseEnter && {
+    onMouseEnter: handleMouseEnter
+  }), props.onMouseLeave && {
+    onMouseLeave: handleMouseLeave
+  }), props.onDoubleClick && {
+    onDoubleClick: handleDoubleClick
+  }), props.onFocus && {
+    onFocus: handleFocus
+  }), props.onBlur && {
+    onBlur: handleBlur
+  }), props.onClick && {
+    onClick: handleClick
+  });
+  var iconstyles = {
+    height: iconheight || "auto",
+    width: iconwidth || "auto",
+    margin: iconmargin || "0 4"
+  };
+  return __jsx(_Link["default"], (0, _extends2["default"])({}, domEvents, {
+    style: _objectSpread(_objectSpread({}, iconPositionStyles), styles),
+    caption: caption,
+    role: "link",
+    tabIndex: props.tabindex,
+    className: (0, _clsx2["default"])((_clsx = {}, (0, _defineProperty2["default"])(_clsx, DEFAULT_CLASS, true), (0, _defineProperty2["default"])(_clsx, className || "", Boolean(className)), (0, _defineProperty2["default"])(_clsx, "active", isActive), _clsx)),
+    href: processedHyperlink,
+    onContextMenu: handleContextMenu,
+    accessKey: shortcutkey,
+    "aria-label": arialabel || (badgevalue && caption ? "".concat(caption, " ").concat(badgevalue) : caption) || null,
+    "aria-current": isActive ? "page" : undefined,
+    target: target,
+    title: props.hint,
+    "data-identifier": "anchor"
+  }, restProps), iconurl && __jsx(_image["default"], {
+    alt: "Image",
+    src: iconurl,
+    className: (0, _clsx2["default"])("anchor-image-icon", iconclass),
+    "aria-hidden": "true",
+    style: iconstyles,
+    width: parseInt(iconwidth || "24", 10),
+    height: parseInt(iconheight || "24", 10)
+  }), iconclass && __jsx("i", {
+    className: (0, _clsx2["default"])("app-icon", iconclass),
+    "aria-hidden": "true",
+    style: iconstyles
+  }), caption && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, "".concat(caption, " ").concat(listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_ICON)), __jsx(_Box["default"], {
+    component: "span",
+    className: "anchor-caption"
+  }, caption)), badgevalue && __jsx(_Badge["default"], {
+    component: "span",
+    sx: {
+      fontSize: "inherit",
+      "& .MuiBadge-badge": {
+        transform: "none"
+      }
+    },
+    title: String(badgevalue),
+    badgeContent: badgevalue,
+    className: "badge pull-right"
+  }));
+};
+WmAnchor.displayName = "WmAnchor";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(/*#__PURE__*/(0, _react.memo)(WmAnchor, function (prev, next) {
+  var keysToCompare = ["caption", "iconclass", "iconheight", "iconwidth", "iconurl", "iconmargin", "hyperlink", "iconposition", "badgevalue", "encodeurl", "className", "styles", "onClick", "arialabel", "target", "shortcutkey"];
+  return keysToCompare.every(function (key) {
+    return prev[key] === next[key];
+  });
+}));

package/components/basic/anchor/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/basic/audio/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _resourceUrl = require("@wavemaker/react-runtime/utils/resource-url");
+var _excluded = ["mp3format", "prefabName", "muted", "controls", "loop", "audiopreload", "audiosupportmessage", "autoplay", "hint", "arialabel", "tabindex", "styles", "className"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-audio";
+var WmAudio = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var mp3format = props.mp3format,
+    prefabName = props.prefabName,
+    muted = props.muted,
+    controls = props.controls,
+    loop = props.loop,
+    audiopreload = props.audiopreload,
+    audiosupportmessage = props.audiosupportmessage,
+    autoplay = props.autoplay,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    tabindex = props.tabindex,
+    styles = props.styles,
+    className = props.className,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var computedSrc = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(mp3format);
+  }, [mp3format, prefabName]);
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    title: hint,
+    "aria-label": arialabel,
+    tabIndex: tabindex,
+    sx: styles,
+    style: styles
+  }, restProps), __jsx("audio", {
+    title: hint,
+    src: computedSrc,
+    muted: muted,
+    controls: controls,
+    loop: loop,
+    preload: audiopreload,
+    autoPlay: autoplay
+  }, audiosupportmessage, "Your browser does not support the audio element."));
+}, function (prev, current) {
+  var keys = ["mp3format", "hint", "arialabel", "tabindex"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmAudio.displayName = "WmAudio";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmAudio);

package/components/basic/html/index.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Get dynamic styles based props
+var getStyles = function getStyles(props) {
+  var _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
+    height = props.height,
+    width = props.width,
+    horizontalalign = props.horizontalalign;
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles), height ? {
+    height: height
+  } : {}), width ? {
+    width: width
+  } : {}), horizontalalign ? {
+    textAlign: horizontalalign
+  } : {});
+};
+var WmHtml = function WmHtml(props) {
+  var name = props.name,
+    className = props.className,
+    arialabel = props.arialabel,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onTap = props.onTap,
+    onDoubletap = props.onDoubletap,
+    eventCallback = props.eventCallback,
+    forwardedRef = props.forwardedRef,
+    hint = props.hint;
+  var htmlRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    initialContentSet = _useState[0],
+    setInitialContentSet = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    boundContentAttr = _useState2[0],
+    setBoundContentAttr = _useState2[1];
+  var touchStartRef = (0, _react.useRef)(0);
+
+  // Initialize content and check for bound content
+  (0, _react.useEffect)(function () {
+    var element = htmlRef.current;
+    if (!element) return;
+
+    // Check for content.bind attribute
+    var bindAttr = element.getAttribute("content.bind");
+    setBoundContentAttr(bindAttr);
+
+    // If there's a bound content attribute, clear the content
+    if (bindAttr && !initialContentSet) {
+      setInitialContentSet(true);
+    }
+  }, [initialContentSet]);
+
+  // Event handlers with proper types
+  var handleClick = (0, _react.useCallback)(function (e) {
+    onClick === null || onClick === void 0 || onClick(e, props);
+    eventCallback === null || eventCallback === void 0 || eventCallback("click", {
+      $event: e
+    });
+  }, [onClick, props, eventCallback]);
+  var handleDoubleClick = (0, _react.useCallback)(function (e) {
+    onDoubleClick === null || onDoubleClick === void 0 || onDoubleClick(e, props);
+    eventCallback === null || eventCallback === void 0 || eventCallback("dblclick", {
+      $event: e
+    });
+  }, [onDoubleClick, props, eventCallback]);
+  var handleMouseEnter = (0, _react.useCallback)(function (e) {
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e, props);
+    eventCallback === null || eventCallback === void 0 || eventCallback("mouseenter", {
+      $event: e
+    });
+  }, [onMouseEnter, props, eventCallback]);
+  var handleMouseLeave = (0, _react.useCallback)(function (e) {
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e, props);
+    eventCallback === null || eventCallback === void 0 || eventCallback("mouseleave", {
+      $event: e
+    });
+  }, [onMouseLeave, props, eventCallback]);
+
+  // Improved touch event handling
+  var handleTouchStart = (0, _react.useCallback)(function (e) {
+    var currentTime = new Date().getTime();
+    if (onTap) {
+      onTap(e, props);
+    }
+    eventCallback === null || eventCallback === void 0 || eventCallback("tap", {
+      $event: e
+    });
+    if (currentTime - touchStartRef.current < 300) {
+      if (onDoubletap) {
+        onDoubletap(e, props);
+      }
+      eventCallback === null || eventCallback === void 0 || eventCallback("doubletap", {
+        $event: e
+      });
+    }
+    touchStartRef.current = currentTime;
+  }, [onTap, onDoubletap, props, eventCallback]);
+  var handleRefCallback = (0, _react.useCallback)(function (node) {
+    htmlRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef && node) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    var _props$onFocus;
+    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e, props);
+  }, [props === null || props === void 0 ? void 0 : props.onFocus, props]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    var _props$onBlur;
+    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e, props);
+  }, [props === null || props === void 0 ? void 0 : props.onBlur, props]);
+  var domEvents = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (props === null || props === void 0 ? void 0 : props.onFocus) && {
+    onFocus: handleFocus
+  }), (props === null || props === void 0 ? void 0 : props.onBlur) && {
+    onBlur: handleBlur
+  }), (props === null || props === void 0 ? void 0 : props.onClick) && {
+    onClick: handleClick
+  }), (props === null || props === void 0 ? void 0 : props.onDoubleClick) && {
+    onDoubleClick: handleDoubleClick
+  }), (props === null || props === void 0 ? void 0 : props.onMouseEnter) && {
+    onMouseEnter: handleMouseEnter
+  }), (props === null || props === void 0 ? void 0 : props.onMouseLeave) && {
+    onMouseLeave: handleMouseLeave
+  }), (props === null || props === void 0 ? void 0 : props.onTouchStart) && {
+    onTouchStart: handleTouchStart
+  });
+  return __jsx(_material.Box, (0, _extends2["default"])({
+    component: "div",
+    ref: handleRefCallback,
+    title: hint,
+    className: "".concat(className, " app-html-container"),
+    "data-element-type": "wm-html",
+    "data-name": name,
+    "aria-label": arialabel
+  }, domEvents, {
+    style: getStyles(props)
+  }), props.children);
+};
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmHtml);

package/components/basic/icon/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmIcon = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _label = _interopRequireDefault(require("@wavemaker/react-runtime/components/basic/label"));
+var _image = _interopRequireDefault(require("next/image"));
+var _resourceUrl = require("@wavemaker/react-runtime/utils/resource-url");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "app-icon-wrapper";
+var WmIcon = exports.WmIcon = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    listener = props.listener,
+    caption = props.caption,
+    hint = props.hint,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? "wm-sl-l sl-user" : _props$iconclass,
+    iconurl = props.iconurl,
+    prefabName = props.prefabName,
+    _props$iconposition = props.iconposition,
+    iconposition = _props$iconposition === void 0 ? "left" : _props$iconposition,
+    iconsize = props.iconsize,
+    arialabel = props.arialabel,
+    styles = props.styles,
+    className = props.className,
+    id = props.id;
+  var computedIconUrl = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(iconurl, prefabName);
+  }, [iconurl, prefabName]);
+  var listItemStyles = _objectSpread(_objectSpread({}, styles), {}, {
+    fontSize: iconsize
+  });
+  return __jsx(_Box["default"], {
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    sx: _objectSpread(_objectSpread({}, listItemStyles), {}, {
+      flexDirection: iconposition === "right" ? "row-reverse" : "row"
+    }),
+    component: "span",
+    "aria-label": arialabel,
+    id: id,
+    "data-icon-position": iconposition
+  }, __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, caption, " Icon"), computedIconUrl ? __jsx(_image["default"], {
+    "data-identifier": "img",
+    alt: "Image",
+    src: computedIconUrl,
+    className: (0, _clsx["default"])("anchor-image-icon", iconclass),
+    "aria-hidden": "true",
+    style: {
+      width: iconsize || "auto",
+      height: iconsize || "auto"
+    },
+    width: parseInt(iconsize || "24", 10),
+    height: parseInt(iconsize || "24", 10)
+  }) : __jsx("i", {
+    className: (0, _clsx["default"])("app-icon", iconclass),
+    "aria-hidden": "true",
+    style: {
+      width: iconsize || "auto",
+      height: iconsize || "auto"
+    }
+  }), caption && __jsx(_label["default"], {
+    listener: listener,
+    "aria-hidden": "true",
+    className: "app-label",
+    name: name,
+    caption: caption,
+    hint: hint
+  }));
+});
+WmIcon.displayName = "WmIcon";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmIcon);

package/components/basic/iframe/iframe.utils.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.needsEncoding = void 0;
+var needsEncoding = exports.needsEncoding = function needsEncoding(url) {
+  // Matches anything not in the safe character set
+  return /[^A-Za-z0-9\-._~:/?#\[\]@!$&'()*+,;=%]/.test(url);
+};

package/components/basic/iframe/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmIframe = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _security = require("@wavemaker/react-runtime/core/util/security");
+var _iframe = require("./iframe.utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Extend BaseProps with optional properties
+
+var DEFAULT_CLASS = "embed-responsive app-iframe";
+var WmIframe = exports.WmIframe = function WmIframe(props) {
+  var iframesrc = props.iframesrc,
+    _props$encodeurl = props.encodeurl,
+    encodeurl = _props$encodeurl === void 0 ? false : _props$encodeurl,
+    name = props.name,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    _props$width = props.width,
+    width = _props$width === void 0 ? "300px" : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? "150px" : _props$height,
+    className = props.className,
+    styles = props.styles;
+  var _useMemo = (0, _react.useMemo)(function () {
+      if (!iframesrc) {
+        return {
+          safeIframeSrc: undefined,
+          showContentLoadError: false,
+          errorMsg: ""
+        };
+      }
+      var url = iframesrc;
+      if (encodeurl && (0, _iframe.needsEncoding)(url)) {
+        url = encodeURIComponent(url);
+      }
+
+      // Check for insecure content request
+      var isInsecure = (0, _security.isInsecureContentRequest)(url);
+      var error = isInsecure ? "Error: Cannot display content from ".concat(iframesrc) : "";
+
+      // Only process URL if it's secure
+      var trustedUrl = !isInsecure ? _security.securityService.trustAs(url, _security.SecurityContext.RESOURCE_URL) : "";
+      return {
+        safeIframeSrc: trustedUrl,
+        showContentLoadError: isInsecure,
+        errorMsg: error
+      };
+    }, [iframesrc, encodeurl]),
+    safeIframeSrc = _useMemo.safeIframeSrc,
+    showContentLoadError = _useMemo.showContentLoadError,
+    errorMsg = _useMemo.errorMsg;
+  return __jsx(_Box["default"], {
+    component: "div",
+    className: DEFAULT_CLASS,
+    width: width,
+    height: height,
+    style: styles,
+    title: hint
+  }, __jsx(_Box["default"], {
+    seamless: true,
+    component: "iframe",
+    className: (0, _clsx["default"])("embed-responsive-item iframe-content", className),
+    src: safeIframeSrc,
+    title: arialabel || "iframe",
+    name: name,
+    sx: _objectSpread({
+      border: 0,
+      margin: 0,
+      width: width || "100%",
+      height: height || "400px"
+    }, styles),
+    "aria-label": arialabel || "iframe"
+  }), showContentLoadError && __jsx(_Box["default"], {
+    component: "div",
+    className: "wm-content-info readonly-wrapper"
+  }, __jsx(_Box["default"], {
+    component: "p",
+    className: "wm-message",
+    title: hint || errorMsg
+  }, errorMsg)));
+};
+WmIframe.displayName = "WmIframe";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmIframe);