@sitecore-content-sdk/core 0.1.0-beta.1

package/dist/cjs/i18n/graphql-dictionary-service.js

@@ -0,0 +1,136 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQLDictionaryService = exports.queryError = void 0;
+const dictionary_service_1 = require("./dictionary-service");
+const app_root_query_1 = require("../graphql/app-root-query");
+const debug_1 = __importDefault(require("../debug"));
+/** @private */
+exports.queryError = 'Valid value for rootItemId not provided and failed to auto-resolve app root item.';
+/** @default */
+const siteQuery = /* GraphQL */ `
+  query DictionarySiteQuery(
+    $siteName: String!
+    $language: String!
+    $pageSize: Int = 500
+    $after: String
+  ) {
+    site {
+      siteInfo(site: $siteName) {
+        dictionary(language: $language, first: $pageSize, after: $after) {
+          pageInfo {
+            endCursor
+            hasNext
+          }
+          results {
+            key
+            value
+          }
+        }
+      }
+    }
+  }
+`;
+/**
+ * Service that fetch dictionary data using Sitecore's GraphQL API.
+ * @augments DictionaryServiceBase
+ * @mixes SearchQueryService<DictionaryQueryResult>
+ */
+class GraphQLDictionaryService extends dictionary_service_1.DictionaryServiceBase {
+    /**
+     * Creates an instance of graphQL dictionary service with the provided options
+     * @param {GraphQLDictionaryService} options instance
+     */
+    constructor(options) {
+        super(options);
+        this.options = options;
+        this.graphQLClient = this.getGraphQLClient();
+    }
+    /**
+     * Fetches dictionary data for internalization. Uses search query by default
+     * @param {string} language the language to fetch
+     * @returns {Promise<DictionaryPhrases>} dictionary phrases
+     * @throws {Error} if the app root was not found for the specified site and language.
+     */
+    fetchDictionaryData(language) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cacheKey = this.options.siteName + language;
+            const cachedValue = this.getCacheValue(cacheKey);
+            if (cachedValue) {
+                debug_1.default.dictionary('using cached dictionary data for %s %s', language, this.options.siteName);
+                return cachedValue;
+            }
+            const phrases = yield this.fetchWithSiteQuery(language);
+            this.setCacheValue(cacheKey, phrases);
+            return phrases;
+        });
+    }
+    /**
+     * Fetches dictionary data with site query
+     * This is the default behavior for XMCloud deployments. Uses `siteQuery` to retrieve data.
+     * @param {string} language the language to fetch
+     * @returns {Promise<DictionaryPhrases>} dictionary phrases
+     */
+    fetchWithSiteQuery(language) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const phrases = {};
+            debug_1.default.dictionary('fetching dictionary data for %s %s', language, this.options.siteName);
+            let results = [];
+            let hasNext = true;
+            let after = '';
+            if (!this.options.siteName) {
+                throw new RangeError(app_root_query_1.siteNameError);
+            }
+            if (!language) {
+                throw new RangeError(app_root_query_1.languageError);
+            }
+            while (hasNext) {
+                const fetchResponse = yield this.graphQLClient.request(siteQuery, {
+                    siteName: this.options.siteName,
+                    language,
+                    pageSize: this.options.pageSize,
+                    after,
+                });
+                if ((_b = (_a = fetchResponse === null || fetchResponse === void 0 ? void 0 : fetchResponse.site) === null || _a === void 0 ? void 0 : _a.siteInfo) === null || _b === void 0 ? void 0 : _b.dictionary) {
+                    results = results.concat(fetchResponse.site.siteInfo.dictionary.results);
+                    after = fetchResponse.site.siteInfo.dictionary.pageInfo.endCursor;
+                    hasNext = fetchResponse.site.siteInfo.dictionary.pageInfo.hasNext;
+                }
+                else {
+                    hasNext = false;
+                }
+            }
+            results.forEach((item) => (phrases[item.key] = item.value));
+            return phrases;
+        });
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API. Uses graphql-request as the default
+     * library for fetching graphql data (@see GraphQLRequestClient). Override this method if you
+     * want to use something else.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.options.clientFactory) {
+            throw new Error('clientFactory needs to be provided when initializing GraphQL client.');
+        }
+        return this.options.clientFactory({
+            debugger: debug_1.default.dictionary,
+            retries: this.options.retries,
+            retryStrategy: this.options.retryStrategy,
+        });
+    }
+}
+exports.GraphQLDictionaryService = GraphQLDictionaryService;

package/dist/cjs/i18n/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQLDictionaryService = exports.DictionaryServiceBase = void 0;
+var dictionary_service_1 = require("./dictionary-service");
+Object.defineProperty(exports, "DictionaryServiceBase", { enumerable: true, get: function () { return dictionary_service_1.DictionaryServiceBase; } });
+var graphql_dictionary_service_1 = require("./graphql-dictionary-service");
+Object.defineProperty(exports, "GraphQLDictionaryService", { enumerable: true, get: function () { return graphql_dictionary_service_1.GraphQLDictionaryService; } });

package/dist/cjs/index.js

@@ -0,0 +1,55 @@
+"use strict";
+// NOTE: all imports are now named as to not make breaking changes
+// and to keep react-native working with cjs modules.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.constants = exports.NativeDataFetcher = exports.ClientError = exports.MemoryCacheClient = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.enableDebug = exports.debug = void 0;
+const constants = __importStar(require("./constants"));
+exports.constants = constants;
+var debug_1 = require("./debug");
+Object.defineProperty(exports, "debug", { enumerable: true, get: function () { return __importDefault(debug_1).default; } });
+Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return debug_1.enableDebug; } });
+var graphql_request_client_1 = require("./graphql-request-client");
+Object.defineProperty(exports, "DefaultRetryStrategy", { enumerable: true, get: function () { return graphql_request_client_1.DefaultRetryStrategy; } });
+Object.defineProperty(exports, "GraphQLRequestClient", { enumerable: true, get: function () { return graphql_request_client_1.GraphQLRequestClient; } });
+var cache_client_1 = require("./cache-client");
+Object.defineProperty(exports, "MemoryCacheClient", { enumerable: true, get: function () { return cache_client_1.MemoryCacheClient; } });
+var graphql_request_1 = require("graphql-request");
+Object.defineProperty(exports, "ClientError", { enumerable: true, get: function () { return graphql_request_1.ClientError; } });
+var native_fetcher_1 = require("./native-fetcher");
+Object.defineProperty(exports, "NativeDataFetcher", { enumerable: true, get: function () { return native_fetcher_1.NativeDataFetcher; } });

package/dist/cjs/layout/content-styles.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.traverseComponent = exports.traverseField = exports.traversePlaceholder = exports.getContentStylesheetUrl = exports.getContentStylesheetLink = void 0;
+const constants_1 = require("../constants");
+/**
+ * Regular expression to check if the content styles are used in the field value
+ */
+const CLASS_REGEXP = /class=".*(\bck-content\b).*"/g;
+/**
+ * Get the content styles link to be loaded from the Sitecore Edge Platform
+ * @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 | null} content styles link, null if no styles are used in layout
+ */
+const getContentStylesheetLink = (layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) => {
+    if (!layoutData.sitecore.route)
+        return null;
+    const config = { loadStyles: false };
+    (0, exports.traverseComponent)(layoutData.sitecore.route, config);
+    if (!config.loadStyles)
+        return null;
+    return {
+        href: (0, exports.getContentStylesheetUrl)(sitecoreEdgeContextId, sitecoreEdgeUrl),
+        rel: 'stylesheet',
+    };
+};
+exports.getContentStylesheetLink = getContentStylesheetLink;
+const getContentStylesheetUrl = (sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) => `${sitecoreEdgeUrl}/v1/files/pages/styles/content-styles.css?sitecoreContextId=${sitecoreEdgeContextId}`;
+exports.getContentStylesheetUrl = getContentStylesheetUrl;
+const traversePlaceholder = (components, config) => {
+    if (config.loadStyles)
+        return;
+    components.forEach((component) => {
+        (0, exports.traverseComponent)(component, config);
+    });
+};
+exports.traversePlaceholder = traversePlaceholder;
+const traverseField = (field, config) => {
+    if (!field || config.loadStyles)
+        return;
+    if ('value' in field && typeof field.value === 'string') {
+        config.loadStyles = CLASS_REGEXP.test(field.value);
+    }
+    else if ('fields' in field) {
+        Object.values(field.fields).forEach((field) => {
+            (0, exports.traverseField)(field, config);
+        });
+    }
+    else if (Array.isArray(field)) {
+        field.forEach((field) => {
+            (0, exports.traverseField)(field, config);
+        });
+    }
+};
+exports.traverseField = traverseField;
+const traverseComponent = (component, config) => {
+    if (config.loadStyles)
+        return;
+    if ('fields' in component && component.fields) {
+        Object.values(component.fields).forEach((field) => {
+            (0, exports.traverseField)(field, config);
+        });
+    }
+    const placeholders = component.placeholders || {};
+    Object.keys(placeholders).forEach((placeholder) => {
+        (0, exports.traversePlaceholder)(placeholders[placeholder], config);
+    });
+};
+exports.traverseComponent = traverseComponent;

package/dist/cjs/layout/graphql-layout-service.js

@@ -0,0 +1,86 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQLLayoutService = exports.GRAPHQL_LAYOUT_QUERY_NAME = void 0;
+const layout_service_1 = require("./layout-service");
+const debug_1 = __importDefault(require("../debug"));
+exports.GRAPHQL_LAYOUT_QUERY_NAME = 'JssLayoutQuery';
+/**
+ * Service that fetch layout data using Sitecore's GraphQL API.
+ * @augments LayoutServiceBase
+ * @mixes GraphQLRequestClient
+ */
+class GraphQLLayoutService extends layout_service_1.LayoutServiceBase {
+    /**
+     * Fetch layout data using the Sitecore GraphQL endpoint.
+     * @param {GraphQLLayoutServiceConfig} serviceConfig configuration
+     */
+    constructor(serviceConfig) {
+        super();
+        this.serviceConfig = serviceConfig;
+        this.graphQLClient = this.getGraphQLClient();
+    }
+    /**
+     * Fetch layout data for an item.
+     * @param {string} itemPath item path to fetch layout data for.
+     * @param {string} [language] the language to fetch layout data for.
+     * @returns {Promise<LayoutServiceData>} layout service data
+     */
+    fetchLayoutData(itemPath, language) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const query = this.getLayoutQuery(itemPath, language);
+            debug_1.default.layout('fetching layout data for %s %s %s', itemPath, language, this.serviceConfig.siteName);
+            const data = yield this.graphQLClient.request(query);
+            // If `rendered` is empty -> not found
+            return (((_b = (_a = data === null || data === void 0 ? void 0 : data.layout) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.rendered) || {
+                sitecore: { context: { pageEditing: false, language }, route: null },
+            });
+        });
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.serviceConfig.clientFactory) {
+            throw new Error('clientFactory needs to be provided when initializing GraphQL client.');
+        }
+        return this.serviceConfig.clientFactory({
+            debugger: debug_1.default.layout,
+            retries: this.serviceConfig.retries,
+            retryStrategy: this.serviceConfig.retryStrategy,
+        });
+    }
+    /**
+     * Returns GraphQL Layout query
+     * @param {string} itemPath page route
+     * @param {string} [language] language
+     * @returns {string} GraphQL query
+     */
+    getLayoutQuery(itemPath, language) {
+        const languageVariable = language ? `, language:"${language}"` : '';
+        const layoutQuery = this.serviceConfig.formatLayoutQuery
+            ? this.serviceConfig.formatLayoutQuery(this.serviceConfig.siteName, itemPath, language)
+            : `layout(site:"${this.serviceConfig.siteName}", routePath:"${itemPath}"${languageVariable})`;
+        return `query ${exports.GRAPHQL_LAYOUT_QUERY_NAME} {
+      ${layoutQuery}{
+        item {
+          rendered
+        }
+      }
+    }`;
+    }
+}
+exports.GraphQLLayoutService = GraphQLLayoutService;

package/dist/cjs/layout/index.js

@@ -0,0 +1,24 @@
+"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;
+// layout
+var models_1 = require("./models");
+Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return models_1.LayoutServicePageState; } });
+Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return models_1.EditMode; } });
+Object.defineProperty(exports, "RenderingType", { enumerable: true, get: function () { return models_1.RenderingType; } });
+Object.defineProperty(exports, "EDITING_COMPONENT_PLACEHOLDER", { enumerable: true, get: function () { return models_1.EDITING_COMPONENT_PLACEHOLDER; } });
+Object.defineProperty(exports, "EDITING_COMPONENT_ID", { enumerable: true, get: function () { return models_1.EDITING_COMPONENT_ID; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return utils_1.getFieldValue; } });
+Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return utils_1.getChildPlaceholder; } });
+Object.defineProperty(exports, "isFieldValueEmpty", { enumerable: true, get: function () { return utils_1.isFieldValueEmpty; } });
+Object.defineProperty(exports, "isDynamicPlaceholder", { enumerable: true, get: function () { return utils_1.isDynamicPlaceholder; } });
+Object.defineProperty(exports, "getDynamicPlaceholderPattern", { enumerable: true, get: function () { return utils_1.getDynamicPlaceholderPattern; } });
+Object.defineProperty(exports, "EMPTY_DATE_FIELD_VALUE", { enumerable: true, get: function () { return utils_1.EMPTY_DATE_FIELD_VALUE; } });
+var content_styles_1 = require("./content-styles");
+Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return content_styles_1.getContentStylesheetLink; } });
+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; } });

package/dist/cjs/layout/layout-service.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutServiceBase = void 0;
+/**
+ * Base abstraction to implement custom layout service
+ */
+class LayoutServiceBase {
+}
+exports.LayoutServiceBase = LayoutServiceBase;

package/dist/cjs/layout/models.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.EditMode = exports.LayoutServicePageState = void 0;
+/**
+ * Layout Service page state enum
+ * library mode would render a single component
+ */
+var LayoutServicePageState;
+(function (LayoutServicePageState) {
+    LayoutServicePageState["Preview"] = "preview";
+    LayoutServicePageState["Edit"] = "edit";
+    LayoutServicePageState["Normal"] = "normal";
+})(LayoutServicePageState || (exports.LayoutServicePageState = LayoutServicePageState = {}));
+/**
+ * Represents the edit mode for rendering content in Sitecore Editors
+ */
+var EditMode;
+(function (EditMode) {
+    EditMode["Metadata"] = "metadata";
+})(EditMode || (exports.EditMode = EditMode = {}));
+/**
+ * Editing rendering type
+ */
+var RenderingType;
+(function (RenderingType) {
+    RenderingType["Component"] = "component";
+})(RenderingType || (exports.RenderingType = RenderingType = {}));
+/**
+ * Static placeholder name used for component rendering
+ */
+exports.EDITING_COMPONENT_PLACEHOLDER = 'editing-componentmode-placeholder';
+/**
+ * Id of wrapper for component rendering
+ */
+exports.EDITING_COMPONENT_ID = 'editing-component';

package/dist/cjs/layout/themes.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStylesheetUrl = void 0;
+exports.getComponentLibraryStylesheetLinks = getComponentLibraryStylesheetLinks;
+const _1 = require(".");
+const constants_1 = require("../constants");
+/**
+ * Pattern for library ids
+ * @example -library--foo
+ */
+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
+ * @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) {
+    const ids = new Set();
+    if (!layoutData.sitecore.route)
+        return [];
+    traverseComponent(layoutData.sitecore.route, ids);
+    return [...ids].map((id) => ({
+        href: (0, exports.getStylesheetUrl)(id, sitecoreEdgeContextId, sitecoreEdgeUrl),
+        rel: 'stylesheet',
+    }));
+}
+const getStylesheetUrl = (id, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) => {
+    return `${sitecoreEdgeUrl}/v1/files/components/styles/${id}.css?sitecoreContextId=${sitecoreEdgeContextId}`;
+};
+exports.getStylesheetUrl = getStylesheetUrl;
+/**
+ * Traverse placeholder and components to add library ids
+ * @param {ComponentRendering[]} components
+ * @param {Set<string>} ids library ids
+ */
+const traversePlaceholder = (components, ids) => {
+    components.map((component) => {
+        return traverseComponent(component, ids);
+    });
+};
+/**
+ * Traverse component and children to add library ids
+ * @param {RouteData | ComponentRendering | HtmlElementRendering} component component data
+ * @param {Set<string>} ids library ids
+ */
+const traverseComponent = (component, ids) => {
+    var _a, _b, _c, _d, _e, _f;
+    let libraryId = undefined;
+    if ('params' in component && component.params) {
+        // LibraryID in css class name takes precedence over LibraryId attribute
+        libraryId =
+            ((_b = (_a = component.params.CSSStyles) === null || _a === void 0 ? void 0 : _a.match(STYLES_LIBRARY_ID_REGEX)) === null || _b === void 0 ? void 0 : _b[1]) ||
+                ((_d = (_c = component.params.Styles) === null || _c === void 0 ? void 0 : _c.match(STYLES_LIBRARY_ID_REGEX)) === null || _d === void 0 ? void 0 : _d[1]) ||
+                component.params.LibraryId ||
+                undefined;
+    }
+    // if params are empty we try to fall back to data source
+    if (!libraryId && 'fields' in component && component.fields) {
+        libraryId =
+            ((_e = (0, _1.getFieldValue)(component.fields, 'CSSStyles', '').match(STYLES_LIBRARY_ID_REGEX)) === null || _e === void 0 ? void 0 : _e[1]) ||
+                ((_f = (0, _1.getFieldValue)(component.fields, 'Styles', '').match(STYLES_LIBRARY_ID_REGEX)) === null || _f === void 0 ? void 0 : _f[1]) ||
+                (0, _1.getFieldValue)(component.fields, 'LibraryId', '') ||
+                undefined;
+    }
+    if (libraryId) {
+        ids.add(libraryId);
+    }
+    const placeholders = component.placeholders || {};
+    Object.keys(placeholders).forEach((placeholder) => {
+        traversePlaceholder(placeholders[placeholder], ids);
+    });
+};

package/dist/cjs/layout/utils.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EMPTY_DATE_FIELD_VALUE = exports.isDynamicPlaceholder = exports.getDynamicPlaceholderPattern = void 0;
+exports.getFieldValue = getFieldValue;
+exports.getChildPlaceholder = getChildPlaceholder;
+exports.isFieldValueEmpty = isFieldValueEmpty;
+/**
+ * @param {ComponentRendering | Fields} renderingOrFields the rendering or fields object to extract the field from
+ * @param {string} fieldName the name of the field to extract
+ * @param {T} [defaultValue] the default value to return if the field is not defined
+ * @returns {Field | T} the field value or the default value if the field is not defined
+ */
+// eslint-disable-next-line no-redeclare
+function getFieldValue(renderingOrFields, fieldName, defaultValue) {
+    if (!renderingOrFields || !fieldName) {
+        return defaultValue;
+    }
+    const fields = renderingOrFields;
+    const field = fields[fieldName];
+    if (field && typeof field.value !== 'undefined') {
+        return field.value;
+    }
+    const rendering = renderingOrFields;
+    if (!rendering.fields ||
+        !rendering.fields[fieldName] ||
+        typeof rendering.fields[fieldName].value === 'undefined') {
+        return defaultValue;
+    }
+    return rendering.fields[fieldName].value;
+}
+/**
+ * Gets rendering definitions in a given child placeholder under a current rendering.
+ * @param {ComponentRendering} rendering
+ * @param {string} placeholderName
+ * @returns {ComponentRendering[]} child placeholder
+ */
+function getChildPlaceholder(rendering, placeholderName) {
+    if (!rendering ||
+        !placeholderName ||
+        !rendering.placeholders ||
+        !rendering.placeholders[placeholderName]) {
+        return [];
+    }
+    return rendering.placeholders[placeholderName];
+}
+/**
+ * Returns a regular expression pattern for a dynamic placeholder name.
+ * @param {string} placeholder Placeholder name with a dynamic segment (e.g. 'main-{*}')
+ * @returns Regular expression pattern for the dynamic segment
+ */
+const getDynamicPlaceholderPattern = (placeholder) => {
+    return new RegExp(`^${placeholder.replace(/\{\*\}+/i, '\\d+')}$`);
+};
+exports.getDynamicPlaceholderPattern = getDynamicPlaceholderPattern;
+/**
+ * Checks if the placeholder name is dynamic.
+ * @param {string} placeholder Placeholder name
+ * @returns True if the placeholder name is dynamic
+ */
+const isDynamicPlaceholder = (placeholder) => placeholder.indexOf('{*}') !== -1;
+exports.isDynamicPlaceholder = isDynamicPlaceholder;
+/**
+ * The default value for an empty Date field.
+ * This value is defined as a default one by .NET
+ */
+exports.EMPTY_DATE_FIELD_VALUE = '0001-01-01T00:00:00Z';
+/**
+ * Determines if the passed in field object's value is empty.
+ * @param {GenericFieldValue | Partial<Field>} field the field object.
+ * Partial<T> type is used here because _field.value_ could be required or optional for the different field types
+ */
+function isFieldValueEmpty(field) {
+    const isImageFieldEmpty = (fieldValue) => !fieldValue.src;
+    const isFileFieldEmpty = (fieldValue) => !fieldValue.src;
+    const isLinkFieldEmpty = (fieldValue) => !fieldValue.href;
+    const isDateFieldEmpty = (fieldValue) => {
+        if (typeof fieldValue === 'string') {
+            return fieldValue === exports.EMPTY_DATE_FIELD_VALUE;
+        }
+        else {
+            return !(typeof (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.getMonth) === 'function' &&
+                !isNaN(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.getMonth()));
+        }
+    };
+    const isEmpty = (fieldValue) => {
+        if (fieldValue === null || fieldValue === undefined) {
+            return true;
+        }
+        if (typeof fieldValue === 'object') {
+            return (isImageFieldEmpty(fieldValue) &&
+                isFileFieldEmpty(fieldValue) &&
+                isLinkFieldEmpty(fieldValue) &&
+                isDateFieldEmpty(fieldValue));
+        }
+        else if (typeof fieldValue === 'number' || typeof fieldValue === 'boolean') {
+            // Avoid returning true for 0 and false values
+            return false;
+        }
+        else {
+            return !fieldValue || isDateFieldEmpty(fieldValue);
+        }
+    };
+    if (!field)
+        return true;
+    const dynamicField = field;
+    if (dynamicField.value !== undefined) {
+        return isEmpty(dynamicField.value);
+    }
+    return isEmpty(field);
+}

package/dist/cjs/media/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mediaApi = void 0;
+const mediaApi = __importStar(require("./media-api"));
+exports.mediaApi = mediaApi;