@sitecore-content-sdk/core 0.1.0-beta.26 → 0.1.0-beta.29

package/dist/cjs/client/sitecore-client.js

@@ -107,7 +107,7 @@ class SitecoreClient {
                 headLinks.push(contentStyles);
         }
         if (enableThemes) {
-            headLinks.push(...(0, layout_1.getComponentLibraryStylesheetLinks)(layoutData, contextId, edgeUrl));
+            headLinks.push(...(0, layout_1.getDesignLibraryStylesheetLinks)(layoutData, contextId, edgeUrl));
         }
         return headLinks;
     }
@@ -167,16 +167,16 @@ class SitecoreClient {
         return page;
     }
     /**
-     * Get component library page details for Component Library mode of your app
-     * @param {ComponentLibraryRenderPreviewData} componentLibData preview data set in 'library' mode of the app
+     * Get design library page details for Design Library mode of your app
+     * @param {DesignLibraryRenderPreviewData} designLibData preview data set in 'library' mode of the app
      * @param {FetchOptions} [fetchOptions] Additional fetch fetch options to override GraphQL requests (like retries and fetch)
-     * @returns {Page} preview page for Component Library
+     * @returns {Page} preview page for Design Library
      */
-    async getComponentLibraryData(componentLibData, fetchOptions) {
+    async getDesignLibraryData(designLibData, fetchOptions) {
         if (!this.initOptions.api.local) {
             throw new Error('Component Library requires Sitecore apiHost and apiKey to be provided');
         }
-        const { itemId, componentUid, site, language, renderingId, dataSourceId, version, } = componentLibData;
+        const { itemId, componentUid, site, language, renderingId, dataSourceId, version, } = designLibData;
         const componentData = await this.componentService.fetchComponentData({
             siteName: site,
             itemId,
@@ -191,10 +191,10 @@ class SitecoreClient {
             language,
         }, fetchOptions);
         if (!componentData) {
-            throw new Error(`Unable to fetch editing data for preview ${JSON.stringify(componentLibData)}`);
+            throw new Error(`Unable to fetch editing data for preview ${JSON.stringify(designLibData)}`);
         }
         const page = {
-            locale: componentLibData.language,
+            locale: designLibData.language,
             layout: componentData,
             dictionary: dictionaryData,
         };

package/dist/cjs/debug.js

@@ -29,6 +29,7 @@ exports.enableDebug = enableDebug;
  */
 exports.default = {
     common: (0, debug_1.default)(`${rootNamespace}:common`),
+    form: (0, debug_1.default)(`${rootNamespace}:form`),
     http: (0, debug_1.default)(`${rootNamespace}:http`),
     layout: (0, debug_1.default)(`${rootNamespace}:layout`),
     dictionary: (0, debug_1.default)(`${rootNamespace}:dictionary`),

package/dist/cjs/editing/{component-library.js → design-library.js}

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateComponentHandler = exports.addComponentUpdateHandler = exports.ComponentLibraryStatus = exports.COMPONENT_LIBRARY_STATUS_EVENT_NAME = void 0;
-exports.getComponentLibraryStatusEvent = getComponentLibraryStatusEvent;
+exports.updateComponentHandler = exports.addComponentUpdateHandler = exports.DesignLibraryStatus = exports.DESIGN_LIBRARY_STATUS_EVENT_NAME = void 0;
+exports.getDesignLibraryStatusEvent = getDesignLibraryStatusEvent;
 /**
- * Event to be sent when report status to component library
+ * Event to be sent when report status to design library
  */
-exports.COMPONENT_LIBRARY_STATUS_EVENT_NAME = 'component:status';
+exports.DESIGN_LIBRARY_STATUS_EVENT_NAME = 'component:status';
 /**
- * Enumeration of statuses for the component library.
+ * Enumeration of statuses for the design library.
  */
-var ComponentLibraryStatus;
-(function (ComponentLibraryStatus) {
-    ComponentLibraryStatus["READY"] = "ready";
-    ComponentLibraryStatus["RENDERED"] = "rendered";
-})(ComponentLibraryStatus || (exports.ComponentLibraryStatus = ComponentLibraryStatus = {}));
+var DesignLibraryStatus;
+(function (DesignLibraryStatus) {
+    DesignLibraryStatus["READY"] = "ready";
+    DesignLibraryStatus["RENDERED"] = "rendered";
+})(DesignLibraryStatus || (exports.DesignLibraryStatus = DesignLibraryStatus = {}));
 /**
- * Adds the browser-side event handler for 'component:update' message used in Component Library
+ * Adds the browser-side event handler for 'component:update' message used in Design Library
  * The event should update a component on page by uid, with fields and params from event args
- * @param {ComponentRendering} rootComponent root component displayed for Component Library page
+ * @param {ComponentRendering} rootComponent root component displayed for Design Library page
  * @param {Function} successCallback  callback to be called after successful component update
  */
 const addComponentUpdateHandler = (rootComponent, successCallback) => {
@@ -88,14 +88,14 @@ const updateComponentHandler = (e, rootComponent, successCallback) => {
 };
 exports.updateComponentHandler = updateComponentHandler;
 /**
- * Generates a ComponentLibraryStatusEvent with the given status and uid.
- * @param {ComponentLibraryStatus} status - The status of rendering.
+ * Generates a DesignLibraryStatusEvent with the given status and uid.
+ * @param {DesignLibraryStatus} status - The status of rendering.
  * @param {string} uid - The unique identifier for the event.
- * @returns An object representing the ComponentLibraryStatusEvent.
+ * @returns An object representing the DesignLibraryStatusEvent.
  */
-function getComponentLibraryStatusEvent(status, uid) {
+function getDesignLibraryStatusEvent(status, uid) {
     return {
-        name: exports.COMPONENT_LIBRARY_STATUS_EVENT_NAME,
+        name: exports.DESIGN_LIBRARY_STATUS_EVENT_NAME,
         message: {
             status,
             uid,

package/dist/cjs/editing/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentLibraryStatusEvent = exports.ComponentLibraryStatus = exports.addComponentUpdateHandler = exports.MetadataKind = exports.LayoutKind = exports.RestComponentLayoutService = exports.PAGES_EDITING_MARKER = exports.QUERY_PARAM_EDITING_SECRET = exports.EDITING_ALLOWED_ORIGINS = exports.getJssPagesClientData = exports.resetEditorChromes = exports.isEditorActive = exports.PagesEditor = exports.DEFAULT_PLACEHOLDER_UID = exports.GraphQLEditingService = void 0;
+exports.getDesignLibraryStatusEvent = exports.DesignLibraryStatus = exports.addComponentUpdateHandler = exports.MetadataKind = exports.LayoutKind = exports.RestComponentLayoutService = exports.PAGES_EDITING_MARKER = exports.QUERY_PARAM_EDITING_SECRET = exports.EDITING_ALLOWED_ORIGINS = exports.getJssPagesClientData = exports.resetEditorChromes = exports.isEditorActive = exports.PagesEditor = exports.DEFAULT_PLACEHOLDER_UID = exports.GraphQLEditingService = void 0;
 var graphql_editing_service_1 = require("./graphql-editing-service");
 Object.defineProperty(exports, "GraphQLEditingService", { enumerable: true, get: function () { return graphql_editing_service_1.GraphQLEditingService; } });
 var utils_1 = require("./utils");
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "RestComponentLayoutService", { enumerable: true,
 var models_1 = require("./models");
 Object.defineProperty(exports, "LayoutKind", { enumerable: true, get: function () { return models_1.LayoutKind; } });
 Object.defineProperty(exports, "MetadataKind", { enumerable: true, get: function () { return models_1.MetadataKind; } });
-var component_library_1 = require("./component-library");
-Object.defineProperty(exports, "addComponentUpdateHandler", { enumerable: true, get: function () { return component_library_1.addComponentUpdateHandler; } });
-Object.defineProperty(exports, "ComponentLibraryStatus", { enumerable: true, get: function () { return component_library_1.ComponentLibraryStatus; } });
-Object.defineProperty(exports, "getComponentLibraryStatusEvent", { enumerable: true, get: function () { return component_library_1.getComponentLibraryStatusEvent; } });
+var design_library_1 = require("./design-library");
+Object.defineProperty(exports, "addComponentUpdateHandler", { enumerable: true, get: function () { return design_library_1.addComponentUpdateHandler; } });
+Object.defineProperty(exports, "DesignLibraryStatus", { enumerable: true, get: function () { return design_library_1.DesignLibraryStatus; } });
+Object.defineProperty(exports, "getDesignLibraryStatusEvent", { enumerable: true, get: function () { return design_library_1.getDesignLibraryStatusEvent; } });

package/dist/cjs/editing/rest-component-layout-service.js

@@ -4,7 +4,7 @@ exports.RestComponentLayoutService = void 0;
 const __1 = require("..");
 const data_fetcher_1 = require("../data-fetcher");
 /**
- * REST service that enables Component Library functioality
+ * REST service that enables Design Library functioality
  * Makes a request to /sitecore/api/layout/component in 'library' mode in Pages.
  * Returns layoutData for one single rendered component
  */

package/dist/cjs/form/form.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToFormSubmitEvent = exports.executeScriptElements = exports.loadForm = void 0;
+const browser_1 = require("@sitecore-cloudsdk/events/browser");
+const client_1 = require("../client");
+const debug_1 = __importDefault(require("../debug"));
+/**
+ * Fetches the form markup from the Sitecore Edge service and renders it in the component's template.
+ * @param {string} contextId - The unique identifier of the current context
+ * @param {string} formId - The unique identifier of the form
+ * @param {string} [edgeUrl] - The URL of the Sitecore Edge Platform
+ */
+const loadForm = async (contextId, formId, edgeUrl) => {
+    if (!contextId) {
+        debug_1.default.form('Form was not able to render since context id was not provided');
+        return '';
+    }
+    const url = (0, client_1.getEdgeProxyFormsUrl)(contextId, formId, edgeUrl);
+    try {
+        debug_1.default.form(`Fetching form data from ${url}`);
+        const rsp = await fetch(url, {
+            method: 'GET',
+            cache: 'no-cache',
+        });
+        if (rsp.status !== 200) {
+            throw new Error('Failed to fetch form data');
+        }
+        const content = await rsp.text();
+        debug_1.default.form(`Form data fetch response: ${content}`);
+        return content;
+    }
+    catch (error) {
+        debug_1.default.form(`Form '${formId}' was not able to render`, error);
+        throw error;
+    }
+};
+exports.loadForm = loadForm;
+/**
+ * When you set the innerHTML property of an element, the browser does not execute any <script> tags included in the HTML string
+ * This method ensures that any <script> elements within the loaded HTML are executed.
+ * It re-creates the script elements and appends the to the component's template, then removes old script elements to avoid duplication.
+ * @param {HTMLElement} rootElement - The root element to execute script elements within
+ */
+const executeScriptElements = (rootElement) => {
+    const scriptElements = rootElement.querySelectorAll('script');
+    if (!scriptElements) {
+        return;
+    }
+    Array.from(scriptElements).forEach((scriptElement) => {
+        var _a;
+        const clonedElement = document.createElement('script');
+        Array.from(scriptElement.attributes).forEach((attribute) => {
+            clonedElement.setAttribute(attribute.name, attribute.value);
+        });
+        clonedElement.text = scriptElement.text;
+        (_a = scriptElement === null || scriptElement === void 0 ? void 0 : scriptElement.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(clonedElement, scriptElement);
+    });
+};
+exports.executeScriptElements = executeScriptElements;
+/**
+ * Subscribes to the Form event and then sends data to CloudSDK.
+ * This listener captures interactions such as form views or submissions
+ * @param {HTMLElement} formElement - The form element to subscribe to events on
+ * @param {string} [componentId] - The unique identifier of the component
+ */
+const subscribeToFormSubmitEvent = (formElement, componentId) => {
+    formElement.addEventListener('form:engage', ((e) => {
+        const { formId, name } = e.detail;
+        if (formId && name) {
+            debug_1.default.form('Sending form event', formId, name);
+            (0, browser_1.form)(formId, name, (componentId === null || componentId === void 0 ? void 0 : componentId.replace(/-/g, '')) || '');
+        }
+    }));
+};
+exports.subscribeToFormSubmitEvent = subscribeToFormSubmitEvent;

package/dist/cjs/form/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToFormSubmitEvent = exports.loadForm = exports.executeScriptElements = void 0;
+var form_1 = require("./form");
+Object.defineProperty(exports, "executeScriptElements", { enumerable: true, get: function () { return form_1.executeScriptElements; } });
+Object.defineProperty(exports, "loadForm", { enumerable: true, get: function () { return form_1.loadForm; } });
+Object.defineProperty(exports, "subscribeToFormSubmitEvent", { enumerable: true, get: function () { return form_1.subscribeToFormSubmitEvent; } });

package/dist/cjs/layout/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentLibraryStylesheetLinks = exports.GRAPHQL_LAYOUT_QUERY_NAME = exports.GraphQLLayoutService = exports.getContentStylesheetLink = exports.EMPTY_DATE_FIELD_VALUE = exports.getDynamicPlaceholderPattern = exports.isDynamicPlaceholder = exports.isFieldValueEmpty = exports.getChildPlaceholder = exports.getFieldValue = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.EditMode = exports.LayoutServicePageState = void 0;
+exports.getDesignLibraryStylesheetLinks = exports.GRAPHQL_LAYOUT_QUERY_NAME = exports.GraphQLLayoutService = exports.getContentStylesheetLink = exports.EMPTY_DATE_FIELD_VALUE = exports.getDynamicPlaceholderPattern = exports.isDynamicPlaceholder = exports.isFieldValueEmpty = exports.getChildPlaceholder = exports.getFieldValue = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.EditMode = exports.LayoutServicePageState = void 0;
 // layout
 var models_1 = require("./models");
 Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return models_1.LayoutServicePageState; } });
@@ -21,4 +21,4 @@ var graphql_layout_service_1 = require("./graphql-layout-service");
 Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return graphql_layout_service_1.GraphQLLayoutService; } });
 Object.defineProperty(exports, "GRAPHQL_LAYOUT_QUERY_NAME", { enumerable: true, get: function () { return graphql_layout_service_1.GRAPHQL_LAYOUT_QUERY_NAME; } });
 var themes_1 = require("./themes");
-Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return themes_1.getComponentLibraryStylesheetLinks; } });
+Object.defineProperty(exports, "getDesignLibraryStylesheetLinks", { enumerable: true, get: function () { return themes_1.getDesignLibraryStylesheetLinks; } });

package/dist/cjs/layout/themes.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStylesheetUrl = void 0;
-exports.getComponentLibraryStylesheetLinks = getComponentLibraryStylesheetLinks;
+exports.getDesignLibraryStylesheetLinks = getDesignLibraryStylesheetLinks;
 const _1 = require(".");
 const constants_1 = require("../constants");
 /**
@@ -10,13 +10,13 @@ const constants_1 = require("../constants");
  */
 const STYLES_LIBRARY_ID_REGEX = /-library--([^\s]+)/;
 /**
- * Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Component Library Stylesheets that are used
+ * Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Design Library Stylesheets that are used
  * @param {LayoutServiceData} layoutData Layout service data
  * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
  * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
  * @returns {HTMLLink[]} library stylesheet links
  */
-function getComponentLibraryStylesheetLinks(layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) {
+function getDesignLibraryStylesheetLinks(layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) {
     const ids = new Set();
     if (!layoutData.sitecore.route)
         return [];

package/dist/esm/client/sitecore-client.js

@@ -1,6 +1,6 @@
 import { GraphQLEditingService, RestComponentLayoutService, } from '../editing';
 import { GraphQLDictionaryService } from '../i18n';
-import { getComponentLibraryStylesheetLinks, getContentStylesheetLink, GraphQLLayoutService, } from '../layout';
+import { getDesignLibraryStylesheetLinks, getContentStylesheetLink, GraphQLLayoutService, } from '../layout';
 import { getGroomedVariantIds } from '../personalize/utils';
 import { personalizeLayout } from '../personalize/layout-personalizer';
 import { SiteResolver, GraphQLErrorPagesService, GraphQLSitePathService, } from '../site';
@@ -104,7 +104,7 @@ export class SitecoreClient {
                 headLinks.push(contentStyles);
         }
         if (enableThemes) {
-            headLinks.push(...getComponentLibraryStylesheetLinks(layoutData, contextId, edgeUrl));
+            headLinks.push(...getDesignLibraryStylesheetLinks(layoutData, contextId, edgeUrl));
         }
         return headLinks;
     }
@@ -164,16 +164,16 @@ export class SitecoreClient {
         return page;
     }
     /**
-     * Get component library page details for Component Library mode of your app
-     * @param {ComponentLibraryRenderPreviewData} componentLibData preview data set in 'library' mode of the app
+     * Get design library page details for Design Library mode of your app
+     * @param {DesignLibraryRenderPreviewData} designLibData preview data set in 'library' mode of the app
      * @param {FetchOptions} [fetchOptions] Additional fetch fetch options to override GraphQL requests (like retries and fetch)
-     * @returns {Page} preview page for Component Library
+     * @returns {Page} preview page for Design Library
      */
-    async getComponentLibraryData(componentLibData, fetchOptions) {
+    async getDesignLibraryData(designLibData, fetchOptions) {
         if (!this.initOptions.api.local) {
             throw new Error('Component Library requires Sitecore apiHost and apiKey to be provided');
         }
-        const { itemId, componentUid, site, language, renderingId, dataSourceId, version, } = componentLibData;
+        const { itemId, componentUid, site, language, renderingId, dataSourceId, version, } = designLibData;
         const componentData = await this.componentService.fetchComponentData({
             siteName: site,
             itemId,
@@ -188,10 +188,10 @@ export class SitecoreClient {
             language,
         }, fetchOptions);
         if (!componentData) {
-            throw new Error(`Unable to fetch editing data for preview ${JSON.stringify(componentLibData)}`);
+            throw new Error(`Unable to fetch editing data for preview ${JSON.stringify(designLibData)}`);
         }
         const page = {
-            locale: componentLibData.language,
+            locale: designLibData.language,
             layout: componentData,
             dictionary: dictionaryData,
         };

package/dist/esm/debug.js

@@ -22,6 +22,7 @@ export const enableDebug = (namespaces) => debug.enable(namespaces);
  */
 export default {
     common: debug(`${rootNamespace}:common`),
+    form: debug(`${rootNamespace}:form`),
     http: debug(`${rootNamespace}:http`),
     layout: debug(`${rootNamespace}:layout`),
     dictionary: debug(`${rootNamespace}:dictionary`),

package/dist/esm/editing/{component-library.js → design-library.js}

@@ -1,19 +1,19 @@
 /**
- * Event to be sent when report status to component library
+ * Event to be sent when report status to design library
  */
-export const COMPONENT_LIBRARY_STATUS_EVENT_NAME = 'component:status';
+export const DESIGN_LIBRARY_STATUS_EVENT_NAME = 'component:status';
 /**
- * Enumeration of statuses for the component library.
+ * Enumeration of statuses for the design library.
  */
-export var ComponentLibraryStatus;
-(function (ComponentLibraryStatus) {
-    ComponentLibraryStatus["READY"] = "ready";
-    ComponentLibraryStatus["RENDERED"] = "rendered";
-})(ComponentLibraryStatus || (ComponentLibraryStatus = {}));
+export var DesignLibraryStatus;
+(function (DesignLibraryStatus) {
+    DesignLibraryStatus["READY"] = "ready";
+    DesignLibraryStatus["RENDERED"] = "rendered";
+})(DesignLibraryStatus || (DesignLibraryStatus = {}));
 /**
- * Adds the browser-side event handler for 'component:update' message used in Component Library
+ * Adds the browser-side event handler for 'component:update' message used in Design Library
  * The event should update a component on page by uid, with fields and params from event args
- * @param {ComponentRendering} rootComponent root component displayed for Component Library page
+ * @param {ComponentRendering} rootComponent root component displayed for Design Library page
  * @param {Function} successCallback  callback to be called after successful component update
  */
 export const addComponentUpdateHandler = (rootComponent, successCallback) => {
@@ -82,14 +82,14 @@ export const updateComponentHandler = (e, rootComponent, successCallback) => {
     return rootComponent;
 };
 /**
- * Generates a ComponentLibraryStatusEvent with the given status and uid.
- * @param {ComponentLibraryStatus} status - The status of rendering.
+ * Generates a DesignLibraryStatusEvent with the given status and uid.
+ * @param {DesignLibraryStatus} status - The status of rendering.
  * @param {string} uid - The unique identifier for the event.
- * @returns An object representing the ComponentLibraryStatusEvent.
+ * @returns An object representing the DesignLibraryStatusEvent.
  */
-export function getComponentLibraryStatusEvent(status, uid) {
+export function getDesignLibraryStatusEvent(status, uid) {
     return {
-        name: COMPONENT_LIBRARY_STATUS_EVENT_NAME,
+        name: DESIGN_LIBRARY_STATUS_EVENT_NAME,
         message: {
             status,
             uid,

package/dist/esm/editing/index.js

@@ -2,4 +2,4 @@ export { GraphQLEditingService } from './graphql-editing-service';
 export { DEFAULT_PLACEHOLDER_UID, PagesEditor, isEditorActive, resetEditorChromes, getJssPagesClientData, EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET, PAGES_EDITING_MARKER, } from './utils';
 export { RestComponentLayoutService, } from './rest-component-layout-service';
 export { LayoutKind, MetadataKind, } from './models';
-export { addComponentUpdateHandler, ComponentLibraryStatus, getComponentLibraryStatusEvent, } from './component-library';
+export { addComponentUpdateHandler, DesignLibraryStatus, getDesignLibraryStatusEvent, } from './design-library';

package/dist/esm/editing/rest-component-layout-service.js

@@ -1,7 +1,7 @@
 import { debug, NativeDataFetcher } from '..';
 import { fetchData } from '../data-fetcher';
 /**
- * REST service that enables Component Library functioality
+ * REST service that enables Design Library functioality
  * Makes a request to /sitecore/api/layout/component in 'library' mode in Pages.
  * Returns layoutData for one single rendered component
  */

package/dist/esm/form/form.js

@@ -0,0 +1,69 @@
+import { form } from '@sitecore-cloudsdk/events/browser';
+import { getEdgeProxyFormsUrl } from '../client';
+import debug from '../debug';
+/**
+ * Fetches the form markup from the Sitecore Edge service and renders it in the component's template.
+ * @param {string} contextId - The unique identifier of the current context
+ * @param {string} formId - The unique identifier of the form
+ * @param {string} [edgeUrl] - The URL of the Sitecore Edge Platform
+ */
+export const loadForm = async (contextId, formId, edgeUrl) => {
+    if (!contextId) {
+        debug.form('Form was not able to render since context id was not provided');
+        return '';
+    }
+    const url = getEdgeProxyFormsUrl(contextId, formId, edgeUrl);
+    try {
+        debug.form(`Fetching form data from ${url}`);
+        const rsp = await fetch(url, {
+            method: 'GET',
+            cache: 'no-cache',
+        });
+        if (rsp.status !== 200) {
+            throw new Error('Failed to fetch form data');
+        }
+        const content = await rsp.text();
+        debug.form(`Form data fetch response: ${content}`);
+        return content;
+    }
+    catch (error) {
+        debug.form(`Form '${formId}' was not able to render`, error);
+        throw error;
+    }
+};
+/**
+ * When you set the innerHTML property of an element, the browser does not execute any <script> tags included in the HTML string
+ * This method ensures that any <script> elements within the loaded HTML are executed.
+ * It re-creates the script elements and appends the to the component's template, then removes old script elements to avoid duplication.
+ * @param {HTMLElement} rootElement - The root element to execute script elements within
+ */
+export const executeScriptElements = (rootElement) => {
+    const scriptElements = rootElement.querySelectorAll('script');
+    if (!scriptElements) {
+        return;
+    }
+    Array.from(scriptElements).forEach((scriptElement) => {
+        var _a;
+        const clonedElement = document.createElement('script');
+        Array.from(scriptElement.attributes).forEach((attribute) => {
+            clonedElement.setAttribute(attribute.name, attribute.value);
+        });
+        clonedElement.text = scriptElement.text;
+        (_a = scriptElement === null || scriptElement === void 0 ? void 0 : scriptElement.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(clonedElement, scriptElement);
+    });
+};
+/**
+ * Subscribes to the Form event and then sends data to CloudSDK.
+ * This listener captures interactions such as form views or submissions
+ * @param {HTMLElement} formElement - The form element to subscribe to events on
+ * @param {string} [componentId] - The unique identifier of the component
+ */
+export const subscribeToFormSubmitEvent = (formElement, componentId) => {
+    formElement.addEventListener('form:engage', ((e) => {
+        const { formId, name } = e.detail;
+        if (formId && name) {
+            debug.form('Sending form event', formId, name);
+            form(formId, name, (componentId === null || componentId === void 0 ? void 0 : componentId.replace(/-/g, '')) || '');
+        }
+    }));
+};

package/dist/esm/form/index.js

@@ -0,0 +1 @@
+export { executeScriptElements, loadForm, subscribeToFormSubmitEvent } from './form';

package/dist/esm/layout/index.js

@@ -3,4 +3,4 @@ export { LayoutServicePageState, EditMode, RenderingType, EDITING_COMPONENT_PLAC
 export { getFieldValue, getChildPlaceholder, isFieldValueEmpty, isDynamicPlaceholder, getDynamicPlaceholderPattern, EMPTY_DATE_FIELD_VALUE, } from './utils';
 export { getContentStylesheetLink } from './content-styles';
 export { GraphQLLayoutService, GRAPHQL_LAYOUT_QUERY_NAME, } from './graphql-layout-service';
-export { getComponentLibraryStylesheetLinks } from './themes';
+export { getDesignLibraryStylesheetLinks } from './themes';

package/dist/esm/layout/themes.js

@@ -6,13 +6,13 @@ import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
  */
 const STYLES_LIBRARY_ID_REGEX = /-library--([^\s]+)/;
 /**
- * Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Component Library Stylesheets that are used
+ * Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Design Library Stylesheets that are used
  * @param {LayoutServiceData} layoutData Layout service data
  * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
  * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
  * @returns {HTMLLink[]} library stylesheet links
  */
-export function getComponentLibraryStylesheetLinks(layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT) {
+export function getDesignLibraryStylesheetLinks(layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT) {
     const ids = new Set();
     if (!layoutData.sitecore.route)
         return [];

package/form.d.ts

@@ -0,0 +1 @@
+export * from './types/form/index';

package/form.js

@@ -0,0 +1 @@
+module.exports = require('./dist/cjs/form/index');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/core",
-  "version": "0.1.0-beta.26",
+  "version": "0.1.0-beta.29",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -15,7 +15,7 @@
     "test": "mocha \"./src/**/*.test.ts\"",
     "prepublishOnly": "npm run build",
     "coverage": "nyc npm test",
-    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --outputFileStrategy Members --parametersFormat table --readme none --out ../../ref-docs/core --entryPoints src/index.ts --entryPoints src/config/index.ts --entryPoints src/client/index.ts --entryPoints src/i18n/index.ts --entryPoints src/layout/index.ts --entryPoints src/media/index.ts --entryPoints src/personalize/index.ts --entryPoints src/site/index.ts --entryPoints src/tracking/index.ts --entryPoints src/utils/index.ts --entryPoints src/editing/index.ts --entryPoints src/tools/index.ts --githubPages false"
+    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --outputFileStrategy Members --parametersFormat table --readme none --out ../../ref-docs/core --entryPoints src/index.ts --entryPoints src/config/index.ts --entryPoints src/form/index.ts --entryPoints src/client/index.ts --entryPoints src/i18n/index.ts --entryPoints src/layout/index.ts --entryPoints src/media/index.ts --entryPoints src/personalize/index.ts --entryPoints src/site/index.ts --entryPoints src/tracking/index.ts --entryPoints src/utils/index.ts --entryPoints src/editing/index.ts --entryPoints src/tools/index.ts --githubPages false"
   },
   "engines": {
     "node": ">=22"
@@ -34,13 +34,16 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
+    "@sitecore-cloudsdk/events": "^0.4.2",
     "@types/chai": "^5.0.1",
     "@types/chai-spies": "^1.0.6",
     "@types/chai-string": "^1.4.5",
     "@types/debug": "^4.1.12",
+    "@types/jsdom": "^21.1.7",
     "@types/memory-cache": "^0.2.6",
     "@types/mocha": "^10.0.1",
     "@types/node": "^22.12.0",
+    "@types/proxyquire": "^1.3.31",
     "@types/sinon": "^17.0.3",
     "@types/url-parse": "1.4.11",
     "chai": "^4.2.0",
@@ -49,6 +52,7 @@
     "del-cli": "^6.0.0",
     "eslint": "^8.56.0",
     "eslint-plugin-jsdoc": "48.7.0",
+    "jsdom": "^26.0.0",
     "mocha": "^11.1.0",
     "nock": "14.0.0-beta.7",
     "nyc": "^17.1.0",
@@ -58,6 +62,9 @@
     "tsx": "^4.19.2",
     "typescript": "~5.7.3"
   },
+  "peerDependencies": {
+    "@sitecore-cloudsdk/events": "^0.4.2"
+  },
   "dependencies": {
     "chalk": "^4.1.2",
     "debug": "^4.4.0",
@@ -68,7 +75,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "534f88bad88d588fc2be201ae29c1b065a539e8e",
+  "gitHead": "2f4fef1dfc43acdc0221efb4287f62970c24c61b",
   "files": [
     "dist",
     "types",

package/types/client/sitecore-client.d.ts

@@ -1,4 +1,4 @@
-import { ComponentLibraryRenderPreviewData, EditingPreviewData, GraphQLEditingService, RestComponentLayoutService } from '../editing';
+import { DesignLibraryRenderPreviewData, EditingPreviewData, GraphQLEditingService, RestComponentLayoutService } from '../editing';
 import { GraphQLRequestClientFactory } from '../graphql-request-client';
 import { DictionaryPhrases, GraphQLDictionaryService } from '../i18n';
 import { GraphQLLayoutService, LayoutServiceData, RouteOptions } from '../layout';
@@ -163,12 +163,12 @@ export declare class SitecoreClient implements BaseSitecoreClient {
      */
     getPreview(previewData: EditingPreviewData | undefined, fetchOptions?: FetchOptions): Promise<Page | null>;
     /**
-     * Get component library page details for Component Library mode of your app
-     * @param {ComponentLibraryRenderPreviewData} componentLibData preview data set in 'library' mode of the app
+     * Get design library page details for Design Library mode of your app
+     * @param {DesignLibraryRenderPreviewData} designLibData preview data set in 'library' mode of the app
      * @param {FetchOptions} [fetchOptions] Additional fetch fetch options to override GraphQL requests (like retries and fetch)
-     * @returns {Page} preview page for Component Library
+     * @returns {Page} preview page for Design Library
      */
-    getComponentLibraryData(componentLibData: ComponentLibraryRenderPreviewData, fetchOptions?: FetchOptions): Promise<Page>;
+    getDesignLibraryData(designLibData: DesignLibraryRenderPreviewData, fetchOptions?: FetchOptions): Promise<Page>;
     /**
      * Retrieves the static paths for pages based on the given languages.
      * @param {string[]} [languages] - An optional array of language codes to generate paths for.

package/types/debug.d.ts

@@ -11,6 +11,7 @@ export declare const enableDebug: (namespaces: string) => void;
  */
 declare const _default: {
     common: debug.Debugger;
+    form: debug.Debugger;
     http: debug.Debugger;
     layout: debug.Debugger;
     dictionary: debug.Debugger;

package/types/editing/{component-library.d.ts → design-library.d.ts}

@@ -1,27 +1,27 @@
 import { ComponentRendering, Field, GenericFieldValue } from '../layout/models';
 /**
- * Event to be sent when report status to component library
+ * Event to be sent when report status to design library
  */
-export declare const COMPONENT_LIBRARY_STATUS_EVENT_NAME = "component:status";
+export declare const DESIGN_LIBRARY_STATUS_EVENT_NAME = "component:status";
 /**
  * Represents an event indicating the status of a component in the library.
  */
-export interface ComponentLibraryStatusEvent {
-    name: typeof COMPONENT_LIBRARY_STATUS_EVENT_NAME;
+export interface DesignLibraryStatusEvent {
+    name: typeof DESIGN_LIBRARY_STATUS_EVENT_NAME;
     message: {
         status: 'ready' | 'rendered';
         uid: string;
     };
 }
 /**
- * Enumeration of statuses for the component library.
+ * Enumeration of statuses for the design library.
  */
-export declare enum ComponentLibraryStatus {
+export declare enum DesignLibraryStatus {
     READY = "ready",
     RENDERED = "rendered"
 }
 /**
- * Event args for Component Library `update` event
+ * Event args for Design Library `update` event
  */
 export interface ComponentUpdateEventArgs {
     name: string;
@@ -32,17 +32,17 @@ export interface ComponentUpdateEventArgs {
     };
 }
 /**
- * Adds the browser-side event handler for 'component:update' message used in Component Library
+ * Adds the browser-side event handler for 'component:update' message used in Design Library
  * The event should update a component on page by uid, with fields and params from event args
- * @param {ComponentRendering} rootComponent root component displayed for Component Library page
+ * @param {ComponentRendering} rootComponent root component displayed for Design Library page
  * @param {Function} successCallback  callback to be called after successful component update
  */
 export declare const addComponentUpdateHandler: (rootComponent: ComponentRendering, successCallback?: (updatedRootComponent: ComponentRendering) => void) => (() => void) | undefined;
 export declare const updateComponentHandler: (e: MessageEvent, rootComponent: ComponentRendering, successCallback?: (updatedRootComponent: ComponentRendering) => void) => ComponentRendering<import("../layout/models").ComponentFields> | undefined;
 /**
- * Generates a ComponentLibraryStatusEvent with the given status and uid.
- * @param {ComponentLibraryStatus} status - The status of rendering.
+ * Generates a DesignLibraryStatusEvent with the given status and uid.
+ * @param {DesignLibraryStatus} status - The status of rendering.
  * @param {string} uid - The unique identifier for the event.
- * @returns An object representing the ComponentLibraryStatusEvent.
+ * @returns An object representing the DesignLibraryStatusEvent.
  */
-export declare function getComponentLibraryStatusEvent(status: ComponentLibraryStatus, uid: string): ComponentLibraryStatusEvent;
+export declare function getDesignLibraryStatusEvent(status: DesignLibraryStatus, uid: string): DesignLibraryStatusEvent;

package/types/editing/index.d.ts

@@ -2,5 +2,5 @@ export { GraphQLEditingService } from './graphql-editing-service';
 export { DEFAULT_PLACEHOLDER_UID, PagesEditor, isEditorActive, resetEditorChromes, Metadata, getJssPagesClientData, EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET, PAGES_EDITING_MARKER, ComponentUpdateEventArgs, } from './utils';
 export { RestComponentLayoutService, ComponentLayoutRequestParams, } from './rest-component-layout-service';
 export { EditingRenderQueryParams, RenderComponentQueryParams } from './models';
-export { LayoutKind, MetadataKind, EditingPreviewData, ComponentLibraryRenderPreviewData, } from './models';
-export { addComponentUpdateHandler, ComponentLibraryStatus, ComponentLibraryStatusEvent, getComponentLibraryStatusEvent, } from './component-library';
+export { LayoutKind, MetadataKind, EditingPreviewData, DesignLibraryRenderPreviewData, } from './models';
+export { addComponentUpdateHandler, DesignLibraryStatus, DesignLibraryStatusEvent, getDesignLibraryStatusEvent, } from './design-library';

package/types/editing/models.d.ts

@@ -63,9 +63,9 @@ export type EditingPreviewData = {
     layoutKind?: LayoutKind;
 };
 /**
- * Data for Component Library rendering mode
+ * Data for Design Library rendering mode
  */
-export interface ComponentLibraryRenderPreviewData {
+export interface DesignLibraryRenderPreviewData {
     site: string;
     itemId: string;
     renderingId: string;

package/types/editing/rest-component-layout-service.d.ts

@@ -37,7 +37,7 @@ export type RestLayoutServiceConfig = {
     configurationName?: string;
 };
 /**
- * Params for requesting component data from service in Component Library mode
+ * Params for requesting component data from service in Design Library mode
  */
 export interface ComponentLayoutRequestParams {
     /**
@@ -75,7 +75,7 @@ export interface ComponentLayoutRequestParams {
     siteName?: string;
 }
 /**
- * REST service that enables Component Library functioality
+ * REST service that enables Design Library functioality
  * Makes a request to /sitecore/api/layout/component in 'library' mode in Pages.
  * Returns layoutData for one single rendered component
  */

package/types/editing/utils.d.ts

@@ -17,7 +17,7 @@ export declare const PAGES_EDITING_MARKER = "jss-hrz-editing";
  */
 export declare const EDITING_ALLOWED_ORIGINS: string[];
 /**
- * Event args for Component Library `update` event
+ * Event args for Design Library `update` event
  */
 export interface ComponentUpdateEventArgs {
     name: string;

package/types/form/form.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Fetches the form markup from the Sitecore Edge service and renders it in the component's template.
+ * @param {string} contextId - The unique identifier of the current context
+ * @param {string} formId - The unique identifier of the form
+ * @param {string} [edgeUrl] - The URL of the Sitecore Edge Platform
+ */
+export declare const loadForm: (contextId: string, formId: string, edgeUrl?: string) => Promise<string>;
+/**
+ * When you set the innerHTML property of an element, the browser does not execute any <script> tags included in the HTML string
+ * This method ensures that any <script> elements within the loaded HTML are executed.
+ * It re-creates the script elements and appends the to the component's template, then removes old script elements to avoid duplication.
+ * @param {HTMLElement} rootElement - The root element to execute script elements within
+ */
+export declare const executeScriptElements: (rootElement: HTMLElement) => void;
+/**
+ * Subscribes to the Form event and then sends data to CloudSDK.
+ * This listener captures interactions such as form views or submissions
+ * @param {HTMLElement} formElement - The form element to subscribe to events on
+ * @param {string} [componentId] - The unique identifier of the component
+ */
+export declare const subscribeToFormSubmitEvent: (formElement: HTMLElement, componentId?: string) => void;

package/types/form/index.d.ts

@@ -0,0 +1 @@
+export { executeScriptElements, loadForm, subscribeToFormSubmitEvent } from './form';

package/types/layout/index.d.ts

@@ -2,4 +2,4 @@ export { LayoutServiceData, LayoutServicePageState, LayoutServiceContext, Layout
 export { getFieldValue, getChildPlaceholder, isFieldValueEmpty, isDynamicPlaceholder, getDynamicPlaceholderPattern, EMPTY_DATE_FIELD_VALUE, } from './utils';
 export { getContentStylesheetLink } from './content-styles';
 export { GraphQLLayoutService, GraphQLLayoutServiceConfig, GRAPHQL_LAYOUT_QUERY_NAME, } from './graphql-layout-service';
-export { getComponentLibraryStylesheetLinks } from './themes';
+export { getDesignLibraryStylesheetLinks } from './themes';

package/types/layout/themes.d.ts

@@ -1,11 +1,11 @@
 import { LayoutServiceData } from '.';
 import { HTMLLink } from '../models';
 /**
- * Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Component Library Stylesheets that are used
+ * Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Design Library Stylesheets that are used
  * @param {LayoutServiceData} layoutData Layout service data
  * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
  * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
  * @returns {HTMLLink[]} library stylesheet links
  */
-export declare function getComponentLibraryStylesheetLinks(layoutData: LayoutServiceData, sitecoreEdgeContextId: string, sitecoreEdgeUrl?: string): HTMLLink[];
+export declare function getDesignLibraryStylesheetLinks(layoutData: LayoutServiceData, sitecoreEdgeContextId: string, sitecoreEdgeUrl?: string): HTMLLink[];
 export declare const getStylesheetUrl: (id: string, sitecoreEdgeContextId: string, sitecoreEdgeUrl?: string) => string;