@redocly/theme 0.61.0-next.2 → 0.61.0

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -18,6 +18,7 @@ const hooks_1 = require("../../../core/hooks");
 const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
 const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
 const CatalogEntityRelationsGraph_lazy_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy");
+const theme_1 = require("../../../index.js");
 const renderFirstColumnEntitySection = (entity) => {
     switch (entity.type) {
         case 'api-operation':
@@ -37,10 +38,14 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     const { useTranslate, useCatalog, usePageProps } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { entity, relations, catalogConfig, entitiesCatalogConfig, relatedEntity } = usePageProps();
+    const [searchParams] = (0, react_router_dom_1.useSearchParams)();
+    const revision = searchParams.get('revision') || undefined;
+    const version = searchParams.get('version') || undefined;
     const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
     const { searchQuery, setSearchQuery } = useCatalog();
     return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
+        react_1.default.createElement(theme_1.CatalogEntityHistorySidebar, { entityKey: entity.key, revision: revision, version: version }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.js

@@ -61,8 +61,17 @@ function CatalogEntityRelationsGraph({ entity, }) {
     var _a;
     const { useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
     const { activeColorMode } = (0, hooks_1.useColorSwitcher)();
+    const combinedFilter = (0, react_1.useMemo)(() => {
+        if (entity.version && entity.revision) {
+            const versionFilter = `version:"${entity.version}"`;
+            const revisionFilter = `revision:"${entity.revision}"`;
+            return `${versionFilter} AND ${revisionFilter}`;
+        }
+        return undefined;
+    }, [entity.version, entity.revision]);
     const { items: allRelations } = useFetchCatalogEntitiesRelations({
         entityKey: entity.key,
+        filter: combinedFilter,
     });
     const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = (0, hooks_2.useGraph)({
         entity,

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type CatalogHistoryButtonProps = {
+    version: string | null;
+    className?: string;
+};
+export declare function CatalogEntityHistoryButton({ version, className, }: CatalogHistoryButtonProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton.js

@@ -0,0 +1,144 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityHistoryButton = CatalogEntityHistoryButton;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const RecentlyViewedIcon_1 = require("../../../../icons/RecentlyViewedIcon/RecentlyViewedIcon");
+const CheckmarkOutlineIcon_1 = require("../../../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
+const hooks_1 = require("../../../../core/hooks");
+const constants_1 = require("../../../../core/constants");
+function CatalogEntityHistoryButton({ version, className, }) {
+    const [label, setLabel] = (0, react_1.useState)(version === constants_1.VERSION_NOT_SPECIFIED ? null : version);
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const handleClose = (0, react_1.useCallback)((e) => {
+        setLabel(e.detail.version === constants_1.VERSION_NOT_SPECIFIED
+            ? e.detail.revision || 'r.1'
+            : `${e.detail.version || version}, ${e.detail.revision || 'r.1'}`);
+    }, [version]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('portal:sidebar:close-version-history', (e) => handleClose(e));
+        return () => {
+            window.removeEventListener('portal:sidebar:close-version-history', (e) => handleClose(e));
+        };
+    }, [handleClose]);
+    const handleClick = () => {
+        window.dispatchEvent(new CustomEvent('portal:sidebar:open-version-history'));
+    };
+    return (react_1.default.createElement(CatalogHistoryButtonWrapper, { className: className, "data-component-name": "Catalog/CatalogHistoryButton" },
+        react_1.default.createElement(Separator, null),
+        react_1.default.createElement(HistoryItem, { onClick: handleClick },
+            react_1.default.createElement(HistoryIcon, null),
+            react_1.default.createElement(HistoryContent, null,
+                react_1.default.createElement(HistoryText, null, translate('catalog.history.button.label', 'Version history')),
+                label && (react_1.default.createElement(VersionPill, null,
+                    react_1.default.createElement(CheckmarkIcon, null),
+                    react_1.default.createElement("span", null, label)))))));
+}
+const CatalogHistoryButtonWrapper = styled_components_1.default.div `
+  width: 100%;
+`;
+const Separator = styled_components_1.default.div `
+  width: 100%;
+  height: 1px;
+  background-color: var(--catalog-history-separator-border-color);
+  margin-bottom: var(--catalog-history-separator-margin-bottom);
+  flex-shrink: 0;
+`;
+const HistoryItem = styled_components_1.default.button `
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--catalog-history-item-gap);
+  padding: var(--catalog-history-item-padding);
+  margin-bottom: var(--catalog-history-item-margin-bottom);
+  width: 100%;
+  border-radius: var(--catalog-history-item-border-radius);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--catalog-history-item-bg-color-hover);
+  }
+`;
+const HistoryContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  gap: var(--catalog-history-item-gap);
+`;
+const HistoryText = styled_components_1.default.span `
+  font-family: var(--catalog-history-text-font-family);
+  font-size: var(--catalog-history-text-font-size);
+  font-weight: var(--catalog-history-text-font-weight);
+  line-height: var(--catalog-history-text-line-height);
+  color: var(--catalog-history-text-color);
+  flex: 1;
+`;
+const HistoryIcon = (0, styled_components_1.default)(RecentlyViewedIcon_1.RecentlyViewedIcon) `
+  width: var(--catalog-history-icon-size);
+  height: var(--catalog-history-icon-size);
+  flex-shrink: 0;
+`;
+const VersionPill = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-history-pill-gap);
+  padding: var(--catalog-history-pill-padding-vertical)
+    var(--catalog-history-pill-padding-horizontal);
+  border: 1px solid var(--catalog-history-pill-border-color);
+  border-radius: var(--catalog-history-pill-border-radius);
+  background-color: transparent;
+  flex-shrink: 0;
+
+  span {
+    font-family: var(--catalog-history-pill-font-family);
+    font-size: var(--catalog-history-pill-font-size);
+    line-height: var(--catalog-history-pill-line-height);
+    color: var(--catalog-history-pill-text-color);
+  }
+`;
+const CheckmarkIcon = (0, styled_components_1.default)(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon) `
+  width: var(--catalog-history-pill-icon-size);
+  height: var(--catalog-history-pill-icon-size);
+  color: var(--catalog-history-pill-icon-color);
+`;
+//# sourceMappingURL=CatalogEntityHistoryButton.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type CatalogHistorySidebarProps = {
+    entityKey: string;
+    revision?: string;
+    version?: string | null;
+    className?: string;
+};
+export declare function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }: CatalogHistorySidebarProps): React.ReactElement | null;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -0,0 +1,161 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityHistorySidebar = CatalogEntityHistorySidebar;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const CloseIcon_1 = require("../../../../icons/CloseIcon/CloseIcon");
+const hooks_1 = require("../../../../core/hooks");
+const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
+const utils_1 = require("../../../../core/utils");
+const CatalogEntityVersionItem_1 = require("./CatalogEntityVersionItem");
+function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const location = (0, react_router_dom_1.useLocation)();
+    const basePath = location.pathname;
+    const { useTranslate, useFetchCatalogEntityRevisions, useL10nConfig } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { currentLocale } = useL10nConfig();
+    const { items: revisions } = useFetchCatalogEntityRevisions({ entityKey });
+    const versionHistoryItems = (0, react_1.useMemo)(() => (0, utils_1.transformRevisionsToVersionHistory)({
+        revisions,
+        currentRevisionDate: revision,
+        currentVersion: version,
+        locale: currentLocale,
+    }), [revisions, revision, version, currentLocale]);
+    const activeRevisionLabel = (0, react_1.useMemo)(() => {
+        var _a;
+        const itemWithActiveRevision = versionHistoryItems.find((item) => { var _a; return (_a = item.revisions) === null || _a === void 0 ? void 0 : _a.some((revision) => revision.isActive); });
+        const activeRevision = (_a = itemWithActiveRevision === null || itemWithActiveRevision === void 0 ? void 0 : itemWithActiveRevision.revisions) === null || _a === void 0 ? void 0 : _a.find((revision) => revision.isActive);
+        return activeRevision === null || activeRevision === void 0 ? void 0 : activeRevision.name;
+    }, [versionHistoryItems]);
+    const [expandedVersions, setExpandedVersions] = (0, react_1.useState)(new Set());
+    (0, react_1.useEffect)(() => {
+        setExpandedVersions(new Set(versionHistoryItems.filter((item) => item.isExpanded).map((item) => item.version)));
+    }, [versionHistoryItems]);
+    const handleOpenSidebar = (0, react_1.useCallback)(() => {
+        setIsOpen(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('portal:sidebar:open-version-history', handleOpenSidebar);
+        return () => {
+            window.removeEventListener('portal:sidebar:open-version-history', handleOpenSidebar);
+        };
+    }, [handleOpenSidebar]);
+    const handleClose = () => {
+        window.dispatchEvent(new CustomEvent('portal:sidebar:close-version-history', {
+            detail: { version, revision: activeRevisionLabel },
+        }));
+        setIsOpen(false);
+    };
+    const toggleVersion = (version) => {
+        setExpandedVersions((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(version)) {
+                newSet.delete(version);
+            }
+            else {
+                newSet.add(version);
+            }
+            return newSet;
+        });
+    };
+    if (!isOpen) {
+        return null;
+    }
+    return (react_1.default.createElement(SidebarOverlay, { className: className, "data-component-name": "Catalog/CatalogHistorySidebar" },
+        react_1.default.createElement(SidebarHeader, null,
+            react_1.default.createElement(HeaderTitle, null, translate('catalog.history.sidebar.title', 'Version history')),
+            react_1.default.createElement(CloseButton, { onClick: handleClose, "aria-label": translate('catalog.history.sidebar.close', 'Close version history') },
+                react_1.default.createElement(CloseIcon_1.CloseIcon, { size: "20px", color: "--catalog-history-sidebar-close-icon-color" }))),
+        react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: true },
+            react_1.default.createElement(VersionList, null, versionHistoryItems.map((group) => (react_1.default.createElement(CatalogEntityVersionItem_1.CatalogEntityVersionItem, { key: group.version, group: group, basePath: basePath, isExpanded: expandedVersions.has(group.version), onToggle: toggleVersion })))))));
+}
+const SidebarOverlay = styled_components_1.default.div `
+  position: fixed;
+  top: var(--navbar-height);
+  left: 0;
+  width: var(--sidebar-width);
+  height: calc(100vh - var(--navbar-height));
+  background-color: var(--catalog-history-sidebar-bg-color);
+  border-right: 1px solid var(--catalog-history-sidebar-border-color);
+  display: flex;
+  flex-direction: column;
+  z-index: calc(var(--z-index-raised) - 1);
+  overflow: hidden;
+`;
+const SidebarHeader = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--catalog-history-sidebar-header-padding);
+  border-bottom: 1px solid var(--catalog-history-sidebar-border-color);
+  flex-shrink: 0;
+`;
+const HeaderTitle = styled_components_1.default.h2 `
+  margin: 0;
+  font-family: var(--catalog-history-sidebar-header-font-family);
+  font-size: var(--catalog-history-sidebar-header-font-size);
+  font-weight: var(--catalog-history-sidebar-header-font-weight);
+  line-height: var(--catalog-history-sidebar-header-line-height);
+  letter-spacing: var(--catalog-history-sidebar-header-letter-spacing);
+  color: var(--catalog-history-sidebar-header-color);
+`;
+const CloseButton = styled_components_1.default.button `
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-history-sidebar-close-button-size);
+  height: var(--catalog-history-sidebar-close-button-size);
+  cursor: pointer;
+  border-radius: var(--catalog-history-sidebar-close-button-border-radius);
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--catalog-history-sidebar-close-button-bg-color-hover);
+  }
+`;
+const VersionList = styled_components_1.default.ul `
+  list-style: none;
+  margin: 0;
+  padding: var(--catalog-history-sidebar-content-padding);
+  margin-top: var(--catalog-history-sidebar-content-margin-top);
+`;
+//# sourceMappingURL=CatalogEntityHistorySidebar.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CatalogEntityRevision } from '../../../../core/types';
+export type CatalogEntityRevisionItemProps = {
+    revisionItem: CatalogEntityRevision;
+    basePath: string;
+    version?: string | null;
+};
+export declare function CatalogEntityRevisionItem({ revisionItem, basePath, version, }: CatalogEntityRevisionItemProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRevisionItem = CatalogEntityRevisionItem;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../../../components/Link/Link");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const utils_1 = require("../../../../core/utils");
+const hooks_1 = require("../../../../core/hooks");
+function CatalogEntityRevisionItem({ revisionItem, basePath, version, }) {
+    var _a, _b;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const revisionFilter = (_a = (0, utils_1.buildRevisionUrl)(basePath, revisionItem.revisionDate, version)) !== null && _a !== void 0 ? _a : basePath;
+    const isActive = (_b = revisionItem.isActive) !== null && _b !== void 0 ? _b : false;
+    return (react_1.default.createElement(RevisionItemWrapper, { to: revisionFilter, "$isActive": isActive },
+        react_1.default.createElement(RevisionNameRow, null,
+            react_1.default.createElement(RevisionName, null, revisionItem.name),
+            revisionItem.isCurrent && (react_1.default.createElement(Tag_1.Tag, { color: "grey", borderless: true, textTransform: "none", style: {
+                    fontSize: 'var(--font-size-xs)',
+                    borderRadius: 'var(--catalog-history-sidebar-revision-tag-border-radius)',
+                } }, translate('catalog.history.revision.current', 'current')))),
+        react_1.default.createElement(RevisionDate, null, revisionItem.date)));
+}
+const RevisionItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--catalog-history-sidebar-revision-item-padding);
+  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  border-radius: var(--catalog-history-sidebar-revision-item-border-radius);
+  transition: 0.2s ease;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  background-color: ${({ $isActive }) => $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+
+  &:hover {
+    background-color: ${({ $isActive }) => $isActive
+    ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
+    : 'var(--catalog-history-sidebar-revision-item-bg-color-hover)'};
+  }
+`;
+const RevisionNameRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 8px);
+`;
+const RevisionName = styled_components_1.default.span `
+  font-family: var(--catalog-history-sidebar-revision-name-font-family);
+  font-size: var(--catalog-history-sidebar-revision-name-font-size);
+  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-name-line-height);
+  color: var(--catalog-history-sidebar-revision-name-color);
+`;
+const RevisionDate = styled_components_1.default.span `
+  font-family: var(--catalog-history-sidebar-revision-date-font-family);
+  font-size: var(--catalog-history-sidebar-revision-date-font-size);
+  font-weight: var(--catalog-history-sidebar-revision-date-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-date-line-height);
+  color: var(--catalog-history-sidebar-revision-date-color);
+`;
+//# sourceMappingURL=CatalogEntityRevisionItem.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { CatalogEntityVersionHistoryGroup } from '../../../../core/types';
+export type CatalogEntityVersionItemProps = {
+    group: CatalogEntityVersionHistoryGroup;
+    basePath: string;
+    isExpanded: boolean;
+    onToggle: (version: string) => void;
+};
+export declare function CatalogEntityVersionItem({ group, basePath, isExpanded, onToggle, }: CatalogEntityVersionItemProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.js

@@ -0,0 +1,212 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityVersionItem = CatalogEntityVersionItem;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ChevronDownIcon_1 = require("../../../../icons/ChevronDownIcon/ChevronDownIcon");
+const ChevronRightIcon_1 = require("../../../../icons/ChevronRightIcon/ChevronRightIcon");
+const CheckmarkOutlineIcon_1 = require("../../../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
+const NavaidMilitaryIcon_1 = require("../../../../icons/NavaidMilitaryIcon/NavaidMilitaryIcon");
+const Link_1 = require("../../../../components/Link/Link");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const hooks_1 = require("../../../../core/hooks");
+const ShowMoreButton_1 = require("../../../../components/Catalog/CatalogEntity/ShowMoreButton");
+const CatalogEntityRevisionItem_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem");
+const utils_1 = require("../../../../core/utils");
+const constants_1 = require("../../../../core/constants");
+const MAX_INITIAL_REVISIONS = 5;
+const MAX_REVISIONS = 20;
+function CatalogEntityVersionItem({ group, basePath, isExpanded, onToggle, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [showAllRevisions, setShowAllRevisions] = (0, react_1.useState)(false);
+    const revisions = group.revisions || [];
+    const hasRevisions = revisions.length > 0;
+    const hasMoreThanMax = revisions.length > MAX_INITIAL_REVISIONS;
+    const hasMoreThanLimit = revisions.length > MAX_REVISIONS;
+    const displayedRevisions = showAllRevisions
+        ? revisions.slice(0, MAX_REVISIONS)
+        : revisions.slice(0, MAX_INITIAL_REVISIONS);
+    (0, react_1.useEffect)(() => {
+        if (!isExpanded) {
+            setShowAllRevisions(false);
+        }
+    }, [isExpanded]);
+    const isNotSpecifiedVersion = group.version === constants_1.VERSION_NOT_SPECIFIED;
+    const singleRevisionLink = (0, utils_1.buildRevisionUrl)(basePath, group.singleRevisionDate, group.version);
+    const isClickable = hasRevisions || Boolean(singleRevisionLink);
+    const isSingleRevisionActive = Boolean(singleRevisionLink && group.isCurrent);
+    const versionTitle = isNotSpecifiedVersion
+        ? `${translate('catalog.history.version.label', 'Version')}: ${translate('catalog.history.version.notSpecified', 'not specified')}`
+        : `${translate('catalog.history.version.label', 'Version')}: ${group.version}`;
+    const versionButton = (react_1.default.createElement(VersionButton, { type: "button", onClick: () => hasRevisions && onToggle(group.version), "$isClickable": isClickable, "$isCurrent": group.isCurrent, "$isActive": isSingleRevisionActive },
+        react_1.default.createElement(VersionIcon, { "$isCurrent": group.isCurrent }, group.isCurrent ? (react_1.default.createElement(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon, { size: "16px", color: "--catalog-history-sidebar-version-icon-color-current" })) : (react_1.default.createElement(NavaidMilitaryIcon_1.NavaidMilitaryIcon, { size: "16px", color: "--catalog-history-sidebar-version-icon-color" }))),
+        react_1.default.createElement(VersionInfo, null,
+            react_1.default.createElement(VersionTitleRow, null,
+                react_1.default.createElement(VersionTitle, null, versionTitle),
+                group.isDefaultVersion && (react_1.default.createElement(Tag_1.Tag, { color: "grey", borderless: true, textTransform: "none", style: {
+                        fontSize: 'var(--font-size-xs)',
+                        borderRadius: 'var(--catalog-history-sidebar-version-tag-border-radius)',
+                        flexShrink: 0,
+                    } }, translate('catalog.history.version.default', 'default')))),
+            !isNotSpecifiedVersion && react_1.default.createElement(VersionDate, null, group.date)),
+        hasRevisions && (react_1.default.createElement(ChevronIcon, null, isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "16px", color: "--catalog-history-sidebar-chevron-icon-color" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "16px", color: "--catalog-history-sidebar-chevron-icon-color" }))))));
+    return (react_1.default.createElement("li", null,
+        singleRevisionLink ? react_1.default.createElement(Link_1.Link, { to: singleRevisionLink }, versionButton) : versionButton,
+        hasRevisions && isExpanded && (react_1.default.createElement(RevisionsList, null,
+            displayedRevisions.map((revisionItem) => (react_1.default.createElement(CatalogEntityRevisionItem_1.CatalogEntityRevisionItem, { key: revisionItem.name, revisionItem: revisionItem, basePath: basePath, version: group.version }))),
+            hasMoreThanLimit && showAllRevisions && (react_1.default.createElement(RevisionsLimitMessage, null, translate('catalog.history.revisions.limitMessage', 'Older revisions are not stored.'))),
+            hasMoreThanMax && (react_1.default.createElement(ShowMoreButton_1.ShowMoreButton, { onClick: () => setShowAllRevisions(!showAllRevisions), isExpanded: showAllRevisions }, showAllRevisions
+                ? translate('catalog.history.revisions.showLess', 'Show less')
+                : translate('catalog.history.revisions.showMore', {
+                    defaultValue: 'Show more',
+                    count: Math.min(revisions.length - MAX_INITIAL_REVISIONS, MAX_REVISIONS - MAX_INITIAL_REVISIONS),
+                })))))));
+}
+const VersionButton = styled_components_1.default.button `
+  all: unset;
+  display: flex;
+  align-items: center;
+  width: calc(100% - var(--catalog-history-sidebar-version-icon-margin-right));
+  padding: var(--catalog-history-sidebar-version-header-padding);
+  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  border-radius: var(--catalog-history-sidebar-version-header-border-radius);
+  transition: 0.2s ease;
+  text-decoration: none;
+  color: inherit;
+  background-color: ${({ $isActive }) => $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+
+  ${({ $isClickable, $isActive }) => $isClickable &&
+    `
+    &:hover {
+      background-color: ${$isActive
+        ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
+        : 'var(--catalog-history-sidebar-version-header-bg-color-hover)'};
+    }
+  `}
+
+  ${({ $isCurrent }) => !$isCurrent &&
+    `
+    &:hover ${VersionIcon} {
+      background-color: var(--color-static-white);
+    }
+  `}
+`;
+const VersionIcon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-history-sidebar-version-icon-size);
+  height: var(--catalog-history-sidebar-version-icon-size);
+  flex-shrink: 0;
+  border-radius: 50%;
+  background-color: ${({ $isCurrent }) => $isCurrent ? 'var(--color-primary-base)' : 'var(--catalog-avatar-bg-color)'};
+  transition: background-color 0.2s ease;
+  margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
+
+  svg path {
+    transition: fill 0.2s ease;
+  }
+`;
+const VersionInfo = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--catalog-history-sidebar-version-info-gap);
+`;
+const VersionTitleRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 8px);
+`;
+const VersionTitle = styled_components_1.default.span `
+  font-family: var(--catalog-history-sidebar-version-title-font-family);
+  font-size: var(--catalog-history-sidebar-version-title-font-size);
+  font-weight: var(--catalog-history-sidebar-version-title-font-weight);
+  line-height: var(--catalog-history-sidebar-version-title-line-height);
+  color: var(--catalog-history-sidebar-version-title-color);
+  flex-shrink: 1;
+  min-width: 0;
+`;
+const VersionDate = styled_components_1.default.span `
+  font-family: var(--catalog-history-sidebar-version-date-font-family);
+  font-size: var(--catalog-history-sidebar-version-date-font-size);
+  font-weight: var(--catalog-history-sidebar-version-date-font-weight);
+  line-height: var(--catalog-history-sidebar-version-date-line-height);
+  color: var(--catalog-history-sidebar-version-date-color);
+`;
+const ChevronIcon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+`;
+const RevisionsList = styled_components_1.default.ul `
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 22px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: var(
+      --catalog-history-sidebar-revision-line-color,
+      var(--border-color-secondary)
+    );
+  }
+`;
+const RevisionsLimitMessage = styled_components_1.default.div `
+  padding: var(--catalog-history-sidebar-revision-item-padding);
+  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  font-family: var(--catalog-history-sidebar-revision-name-font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-name-line-height);
+  color: var(--catalog-history-sidebar-revisions-limit-message-color);
+  text-align: center;
+`;
+//# sourceMappingURL=CatalogEntityVersionItem.js.map