@redocly/theme 0.63.0-next.4 → 0.63.0-next.6

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileFiltersPanelOverlay = CatalogMobileFiltersPanelOverlay;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const core_1 = require("../../../core");
+const CatalogMobileFiltersPanel_1 = require("../../../components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel");
+function CatalogMobileFiltersPanelOverlay({ setMobileFiltersPanelOpen, filterContent, }) {
+    return (react_1.default.createElement(CatalogMobileFiltersPanelOverlayWrapper, null,
+        react_1.default.createElement(CatalogMobileFiltersPanel_1.CatalogMobileFiltersPanel, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen, filterContent: filterContent })));
+}
+const CatalogMobileFiltersPanelOverlayWrapper = styled_components_1.default.div `
+  display: none;
+  position: fixed;
+  top: calc(var(--navbar-height) + var(--banner-height));
+  left: 0;
+  width: 100%;
+  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  z-index: 3;
+  background: var(--bg-color);
+  flex-direction: column;
+
+  @media screen and (max-width: ${core_1.breakpoints.medium}) {
+    display: flex;
+  }
+`;
+//# sourceMappingURL=CatalogMobileFiltersPanelOverlay.js.map

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'react';
+import { SortOption } from '../../../core';
+import { CatalogViewMode } from '../../../core';
+type CatalogMobileTopBarProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    activeFiltersCount: number;
+    setSortOption: (sortOption: SortOption | null) => void;
+    sortOption: SortOption | null;
+    viewMode: CatalogViewMode;
+    setViewMode: (viewMode: CatalogViewMode) => void;
+};
+export declare function CatalogMobileTopBar({ setMobileFiltersPanelOpen, activeFiltersCount, setSortOption, sortOption, viewMode, setViewMode, }: CatalogMobileTopBarProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileTopBar = CatalogMobileTopBar;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogMobileTopBarFiltersButton_1 = require("../../../components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton");
+const CatalogMobileTopBarControls_1 = require("../../../components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls");
+const core_1 = require("../../../core");
+function CatalogMobileTopBar({ setMobileFiltersPanelOpen, activeFiltersCount, setSortOption, sortOption, viewMode, setViewMode, }) {
+    return (react_1.default.createElement(CatalogMobileTopBarWrapper, null,
+        react_1.default.createElement(CatalogMobileTopBarFiltersButton_1.CatalogMobileTopBarFiltersButton, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen, activeFiltersCount: activeFiltersCount }),
+        react_1.default.createElement(CatalogMobileTopBarControls_1.CatalogMobileTopBarControls, { setSortOption: setSortOption, sortOption: sortOption, viewMode: viewMode, setViewMode: setViewMode })));
+}
+const CatalogMobileTopBarWrapper = styled_components_1.default.div `
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--catalog-page-padding-horizontal);
+  border-bottom: 1px solid var(--border-color-secondary);
+  background: var(--bg-color);
+  flex-shrink: 0;
+
+  @media screen and (max-width: ${core_1.breakpoints.medium}) {
+    display: flex;
+  }
+`;
+//# sourceMappingURL=CatalogMobileTopBar.js.map

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { SortOption } from '../../../core';
+import { CatalogViewMode } from '../../../core';
+type CatalogMobileTopBarControlsProps = {
+    setSortOption: (sortOption: SortOption | null) => void;
+    sortOption: SortOption | null;
+    viewMode: CatalogViewMode;
+    setViewMode: (viewMode: CatalogViewMode) => void;
+};
+export declare function CatalogMobileTopBarControls({ setSortOption, sortOption, viewMode, setViewMode, }: CatalogMobileTopBarControlsProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileTopBarControls = CatalogMobileTopBarControls;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogSortButton_1 = require("../../../components/Catalog/CatalogSortButton");
+const CatalogViewModeToggle_1 = require("../../../components/Catalog/CatalogViewModeToggle");
+function CatalogMobileTopBarControls({ setSortOption, sortOption, viewMode, setViewMode, }) {
+    return (react_1.default.createElement(CatalogMobileTopBarControlsWrapper, null,
+        react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
+        react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode })));
+}
+const CatalogMobileTopBarControlsWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+//# sourceMappingURL=CatalogMobileTopBarControls.js.map

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+type CatalogMobileTopBarFiltersButtonProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    activeFiltersCount: number;
+};
+export declare function CatalogMobileTopBarFiltersButton({ setMobileFiltersPanelOpen, activeFiltersCount, }: CatalogMobileTopBarFiltersButtonProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileTopBarFiltersButton = CatalogMobileTopBarFiltersButton;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterIcon_1 = require("../../../icons/FilterIcon/FilterIcon");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+const core_1 = require("../../../core");
+const Button_1 = require("../../../components/Button/Button");
+function CatalogMobileTopBarFiltersButton({ setMobileFiltersPanelOpen, activeFiltersCount, }) {
+    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(CatalogMobileTopBarFiltersButtonWrapper, { icon: react_1.default.createElement(FilterIcon_1.FilterIcon, { size: "16px" }), variant: "ghost", iconPosition: "left", size: "medium", onClick: () => setMobileFiltersPanelOpen(true) },
+        translate('catalog.filters.title', 'Filters'),
+        activeFiltersCount > 0 ? react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, activeFiltersCount) : null));
+}
+const CatalogMobileTopBarFiltersButtonWrapper = (0, styled_components_1.default)(Button_1.Button) `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;
+//# sourceMappingURL=CatalogMobileTopBarFiltersButton.js.map

package/lib/components/Catalog/CatalogPageDescription.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogPageDescription = CatalogPageDescription;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
 const H3_1 = require("../../components/Typography/H3");
 const Tag_1 = require("../../components/Tag/Tag");
 function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }) {
@@ -18,11 +17,6 @@ function CatalogPageDescription({ title, titleTranslationKey, description, descr
 }
 const CatalogPageDescriptionWrapper = styled_components_1.default.div `
   margin: var(--catalog-heading-margin);
-  display: var(--catalog-page-description-display-mobile);
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    display: var(--catalog-page-description-display-desktop);
-  }
 `;
 const CatalogTitleWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Catalog/CatalogSelector.d.ts

@@ -7,5 +7,4 @@ export type CatalogSelectorProps = {
 };
 export declare function CatalogSelector({ catalogSwitcherItems, onChange, }: CatalogSelectorProps): JSX.Element;
 export declare const CatalogSelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CatalogSelectLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const CatalogSelect: import("styled-components").StyledComponent<typeof Select, any, {}, never>;

package/lib/components/Catalog/CatalogSelector.js

@@ -1,13 +1,47 @@
 "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.CatalogSelect = exports.CatalogSelectLabel = exports.CatalogSelectWrapper = void 0;
+exports.CatalogSelect = exports.CatalogSelectWrapper = void 0;
 exports.CatalogSelector = CatalogSelector;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
+const Accordion_1 = require("../../components/Accordion/Accordion");
 const Select_1 = require("../../components/Select/Select");
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
@@ -15,6 +49,7 @@ const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon")
 function CatalogSelector({ catalogSwitcherItems, onChange, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
     const navigate = (0, react_router_dom_1.useNavigate)();
     const pathPrefix = (0, utils_1.getPathPrefix)();
     const options = catalogSwitcherItems.map((item) => ({
@@ -23,25 +58,24 @@ function CatalogSelector({ catalogSwitcherItems, onChange, }) {
         label: translate(item.labelTranslationKey),
     }));
     const selectedCatalogItem = catalogSwitcherItems.find((item) => item.selected);
+    const headerLabel = translate('catalog.catalogs.label', 'Catalogs');
     return (react_1.default.createElement(exports.CatalogSelectWrapper, { "data-component-name": "Catalog/CatalogSelector" },
-        react_1.default.createElement(exports.CatalogSelectLabel, null, translate('catalog.catalogs.label', 'Catalogs')),
-        react_1.default.createElement(exports.CatalogSelect, { value: selectedCatalogItem === null || selectedCatalogItem === void 0 ? void 0 : selectedCatalogItem.slug, options: options, onChange: (value) => {
-                navigate(`${pathPrefix}/catalogs/${value}`);
-                onChange();
-            }, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--catalog-select-icon-color)" }) })));
+        react_1.default.createElement(Accordion_1.Accordion, { expanded: isExpanded, header: headerLabel, onToggle: setIsExpanded },
+            react_1.default.createElement(exports.CatalogSelect, { value: selectedCatalogItem === null || selectedCatalogItem === void 0 ? void 0 : selectedCatalogItem.slug, options: options, onChange: (value) => {
+                    navigate(`${pathPrefix}/catalogs/${value}`);
+                    onChange();
+                }, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--catalog-select-icon-color)" }) }))));
 }
 exports.CatalogSelectWrapper = styled_components_1.default.div `
-  margin-top: var(--catalog-select-wrapper-margin-top);
-`;
-exports.CatalogSelectLabel = styled_components_1.default.label `
-  display: block;
-  margin-bottom: var(--catalog-select-label-margin-bottom);
-  font-weight: var(--catalog-select-label-font-weight);
-  font-size: var(--catalog-select-label-font-size);
-  line-height: var(--catalog-select-label-line-height);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  --accordion-body-padding: var(--catalog-select-accordion-body-padding);
+  --accordion-header-padding: var(--catalog-select-accordion-header-padding);
+  --select-line-height: var(--catalog-select-select-line-height);
+  --select-input-padding: var(--catalog-select-select-input-padding);
 `;
 exports.CatalogSelect = (0, styled_components_1.default)(Select_1.Select) `
   border-radius: var(--catalog-select-border-radius);
-  --select-input-padding: var(--catalog-select-input-padding);
 `;
 //# sourceMappingURL=CatalogSelector.js.map

package/lib/components/Catalog/CatalogTableView/CatalogTableView.d.ts

@@ -19,6 +19,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     style?: React.CSSProperties;
+    contentMinWidth?: number;
 };
 export type CatalogColumn<T> = {
     key: string;
@@ -29,4 +30,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, }: CatalogTableViewProps<T>) => React.JSX.Element;
+export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }: CatalogTableViewProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.js

@@ -13,6 +13,7 @@ const CatalogTableHeaderCell_1 = require("../../../components/Catalog/CatalogTab
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const CatalogTableViewRow_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableViewRow");
 const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
+const core_1 = require("../../../core");
 const baseColumns = [
     {
         key: 'entity',
@@ -60,17 +61,27 @@ const baseColumns = [
         minWidth: '120px',
     },
 ];
-const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, }) => {
-    return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style },
+const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }) => {
+    const tableContent = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CatalogTableHeader, { columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto') }, columns.map((column) => (react_1.default.createElement(CatalogTableHeaderCell_1.CatalogTableHeaderCell, { key: column.key, column: column, setSortOption: setSortOption, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
-        react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, onRowClick: onRowClick }))))));
+        react_1.default.createElement(CatalogTableBody, null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, onRowClick: onRowClick }))))));
+    return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style }, contentMinWidth != null ? (react_1.default.createElement(CatalogTableContentInner, { "$contentMinWidth": contentMinWidth }, tableContent)) : (react_1.default.createElement(CatalogTableScrollContent, null, tableContent))));
 };
 exports.CatalogTableView = CatalogTableView;
 const CatalogTableWrapper = styled_components_1.default.div `
   width: 100%;
   border-bottom: 1px solid var(--catalog-table-border-color);
-  margin-bottom: var(--spacing-xl);
-  margin-top: var(--spacing-xl);
+  overflow-x: auto;
+
+  @media screen and (max-width: ${core_1.breakpoints.medium}) {
+    margin-top: 0;
+  }
+`;
+const CatalogTableScrollContent = styled_components_1.default.div `
+  min-width: min-content;
+`;
+const CatalogTableContentInner = styled_components_1.default.div `
+  min-width: ${({ $contentMinWidth }) => $contentMinWidth}px;
 `;
 const CatalogTableHeader = styled_components_1.default.div `
   display: grid;
@@ -79,5 +90,9 @@ const CatalogTableHeader = styled_components_1.default.div `
     .join(' ')};
   background: var(--catalog-table-header-bg-color);
   font-weight: var(--catalog-table-header-font-weight);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+`;
+const CatalogTableBody = styled_components_1.default.div `
+  min-width: min-content;
 `;
 //# sourceMappingURL=CatalogTableView.js.map

package/lib/components/Catalog/CatalogTableView/CatalogUserEntityCell.js

@@ -8,19 +8,10 @@ exports.CatalogUserEntityCell = CatalogUserEntityCell;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
-const extractInitials = (name) => {
-    const trimmedName = name === null || name === void 0 ? void 0 : name.trim();
-    if (!trimmedName)
-        return '';
-    const initials = trimmedName.split(' ').map((n) => n[0]);
-    if (initials.length === 1) {
-        return initials[0];
-    }
-    return initials[0] + initials[initials.length - 1];
-};
+const CatalogAvatar_1 = require("../../../components/Catalog/CatalogAvatar");
 function CatalogUserEntityCell({ name, email }) {
     return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogUserEntityCell" },
-        react_1.default.createElement(Avatar, null, extractInitials(name)),
+        react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: name, size: "medium" }),
         react_1.default.createElement(EntityTitleContent, null,
             react_1.default.createElement(EntityTitle, null,
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, name)),
@@ -33,18 +24,6 @@ const EntityTitleCellWrapper = styled_components_1.default.div `
   gap: 6px;
   max-width: 100%;
 `;
-const Avatar = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--catalog-avatar-bg-color);
-  flex-shrink: 0;
-  font-size: 14px;
-  font-weight: 400;
-`;
 const EntityTitleContent = styled_components_1.default.div `
   display: flex;
   flex-direction: column;

package/lib/components/Catalog/CatalogTagsWithTooltip.d.ts

@@ -5,5 +5,6 @@ export type CatalogTagsWithTooltipProps = {
     itemsToShow?: number;
     showPlaceholder?: boolean;
     tagProps?: TagProps;
+    showAvatars?: boolean;
 };
-export declare function CatalogTagsWithTooltip({ items, itemsToShow, showPlaceholder, tagProps, }: CatalogTagsWithTooltipProps): JSX.Element | null;
+export declare function CatalogTagsWithTooltip({ items, itemsToShow, showPlaceholder, showAvatars, tagProps, }: CatalogTagsWithTooltipProps): JSX.Element | null;

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -11,25 +11,29 @@ const Tag_1 = require("../../components/Tag/Tag");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const hooks_1 = require("../../core/hooks");
-function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true, tagProps, }) {
+const CatalogAvatar_1 = require("../../components/Catalog/CatalogAvatar");
+function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = false, showAvatars, tagProps, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     if (!items || items.length === 0) {
         if (showPlaceholder) {
-            return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-                react_1.default.createElement(Tag_1.Tag, { style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
+            return (react_1.default.createElement(CatalogTagsNotConnectedWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, translate('catalog.notConnected', 'Not connected')));
         }
         return null;
     }
     if (items.length <= itemsToShow) {
-        return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
+        return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
+            icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
+        }), { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
             react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item))))));
     }
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;
     return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
         react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
+            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
+                icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
+            }), { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
             react_1.default.createElement(MoreTagsButton, null,
                 "+",
@@ -40,10 +44,14 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
 const CatalogTagsWrapper = styled_components_1.default.div `
   display: flex;
   flex-wrap: wrap;
-  gap: var(--catalog-tags-wrapper-gap);
 `;
 const MoreTagsButton = styled_components_1.default.span `
   font-size: var(--catalog-tags-more-button-font-size);
   margin-left: var(--catalog-tags-more-button-margin-left);
 `;
+const CatalogTagsNotConnectedWrapper = styled_components_1.default.span `
+  font-size: var(--catalog-tags-not-connected-font-size);
+  line-height: var(--catalog-tags-not-connected-line-height);
+  color: var(--catalog-tags-not-connected-color);
+`;
 //# sourceMappingURL=CatalogTagsWithTooltip.js.map