@orangelogic/orange-dam-content-browser-sdk 2.2.8 → 2.3.0

package/build/components/content-browser-asset-proxy-selector/content-browser-asset-proxy-selector.d.ts

@@ -0,0 +1,54 @@
+import CxIcon from '@orangelogic/design-system/components/icon';
+import CxMenu from '@orangelogic/design-system/components/menu';
+import CxMenuItem from '@orangelogic/design-system/components/menu-item';
+import CxSpace from '@orangelogic/design-system/components/space';
+import CxSwitch from '@orangelogic/design-system/components/switch';
+import CxTypography from '@orangelogic/design-system/components/typography';
+import CortexElement from '../../base/element';
+import { Parameter } from '../../types/content-browser';
+import { CSSResultGroup } from 'lit';
+import CxContentBrowserAssetTrackingParameters from '../content-browser-asset-tracking-parameters/content-browser-asset-tracking-parameters';
+export declare const USE_REPRESENTATIVE_VALUE = "use-representative";
+export declare const CUSTOM_FORMAT_VALUE = "custom";
+export default class CxContentBrowserAssetProxySelector extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-content-browser-asset-tracking-parameters': typeof CxContentBrowserAssetTrackingParameters;
+        'cx-icon': typeof CxIcon;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+        'cx-space': typeof CxSpace;
+        'cx-switch': typeof CxSwitch;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    items: Array<{
+        cdnName: string;
+        docType: string;
+        extension: string | null;
+        height: string;
+        id: string;
+        image?: string;
+        name: string;
+        value: string;
+        width: string;
+    }>;
+    canCustomFormat: boolean;
+    canUseRepresentative: boolean;
+    canUseATS: boolean;
+    canUseTracking: boolean;
+    selected: string;
+    disabledSelected: boolean;
+    customWidth: string;
+    customHeight: string;
+    customExtension: string;
+    enabledTracking: boolean;
+    trackingParameters: Parameter[];
+    handleTrackingClick(event: MouseEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-asset-proxy-selector': CxContentBrowserAssetProxySelector;
+    }
+}

package/build/components/content-browser-asset-proxy-selector/content-browser-asset-proxy-selector.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/build/components/content-browser-asset-tracking-parameters/content-browser-asset-tracking-parameters.d.ts

@@ -0,0 +1,39 @@
+import CxButton from '@orangelogic/design-system/components/button';
+import CxIcon from '@orangelogic/design-system/components/icon';
+import CxIconButton from '@orangelogic/design-system/components/icon-button';
+import CxInput from '@orangelogic/design-system/components/input';
+import CxInputGroup from '@orangelogic/design-system/components/input-group';
+import CxSpace from '@orangelogic/design-system/components/space';
+import CortexElement from '../../base/element';
+import type { Parameter } from '../../types/content-browser';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary Key/value editor for asset tracking query parameters.
+ *
+ * @property {Parameter[]} values - Current parameter rows (mutations are emitted; parent should update this binding).
+ *
+ * @event cx-content-browser-asset-tracking-parameters-change - Fired when parameters are added, removed, or edited. `detail.values` is the new list.
+ */
+export default class CxContentBrowserAssetTrackingParameters extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-input': typeof CxInput;
+        'cx-input-group': typeof CxInputGroup;
+        'cx-space': typeof CxSpace;
+    };
+    private readonly localize;
+    values: Parameter[];
+    private emitValuesChange;
+    private addParameter;
+    private handleRemoveClick;
+    private handleRowInputChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-asset-tracking-parameters': CxContentBrowserAssetTrackingParameters;
+    }
+}

package/build/components/content-browser-asset-tracking-parameters/content-browser-asset-tracking-parameters.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/build/components/content-browser-asset-version-history/content-browser-asset-version-history.d.ts

@@ -0,0 +1,35 @@
+import CxGrid from '@orangelogic/design-system/components/grid';
+import CxGridItem from '@orangelogic/design-system/components/grid-item';
+import CxLineClamp from '@orangelogic/design-system/components/line-clamp';
+import CxMenu from '@orangelogic/design-system/components/menu';
+import CxMenuItem from '@orangelogic/design-system/components/menu-item';
+import CxSpace from '@orangelogic/design-system/components/space';
+import CxSpinner from '@orangelogic/design-system/components/spinner';
+import CxTypography from '@orangelogic/design-system/components/typography';
+import CortexElement from '../../base/element';
+import { AssetVersion } from '../../types/asset';
+import { CSSResultGroup } from 'lit';
+import CxContentBrowserAssetPreview from '../content-browser-asset-preview/content-browser-asset-preview';
+export default class CxContentBrowserAssetVersionHistory extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-grid': typeof CxGrid;
+        'cx-grid-item': typeof CxGridItem;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+        'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
+        'cx-typography': typeof CxTypography;
+        'cx-content-browser-asset-preview': typeof CxContentBrowserAssetPreview;
+    };
+    private readonly localize;
+    versions: AssetVersion[];
+    loading: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-asset-version-history': CxContentBrowserAssetVersionHistory;
+    }
+}

package/build/components/content-browser-asset-version-history/content-browser-asset-version-history.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/build/components/content-browser-browser/content-browser-browser.d.ts

@@ -0,0 +1,72 @@
+import CortexElement from '../../base/element';
+import CxDrawer from '@orangelogic/design-system/components/drawer';
+import CxFolderSelect from '@orangelogic/design-system/components/folder-select';
+import CxIcon from '@orangelogic/design-system/components/icon';
+import CxIconButton from '@orangelogic/design-system/components/icon-button';
+import CxSpace from '@orangelogic/design-system/components/space';
+import CxTooltip from '@orangelogic/design-system/components/tooltip';
+import CxTypography from '@orangelogic/design-system/components/typography';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+export declare const LEFT_PANEL_OPEN_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#52525B\"><path d=\"M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>";
+export declare const LEFT_PANEL_CLOSE_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#52525B\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>";
+/**
+ * @summary Folder browser drawer (folders tree + optional collections). Converted from ContentBrowserSDK Browser React component.
+ */
+export default class CxContentBrowserBrowser extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-drawer': typeof CxDrawer;
+        'cx-folder-select': typeof CxFolderSelect;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-space': typeof CxSpace;
+        'cx-tooltip': typeof CxTooltip;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    trigger: HTMLSlotElement;
+    drawer: CxDrawer;
+    folderId: string;
+    folderTitle: string;
+    allowedFolders: string[];
+    canPin: boolean;
+    collectionPath: string;
+    favoriteFolderId: string;
+    showCollections: boolean;
+    showFavoriteFolder: boolean;
+    forceOverlay: boolean;
+    seeThru: boolean;
+    minQueryLength: number;
+    token: string;
+    baseUrl: string;
+    private searchTerm;
+    private isPersistent;
+    private collectionsOpen;
+    private apiGetCollections;
+    private get variant();
+    private get noCloseButton();
+    constructor();
+    handleTriggerClick(): Promise<void>;
+    private handleTriggerKeyDown;
+    private handleTriggerKeyUp;
+    private handleTriggerSlotChange;
+    focusOnTrigger(): void;
+    private getAccessibleTriggerTarget;
+    updateAccessibleTrigger(): void;
+    blurTrigger(): void;
+    show(): void;
+    hide(): void;
+    private handleFirstFetchCallback;
+    private handlePinClick;
+    private handleCollectionsSummaryClick;
+    private handleCollectionsSummaryKeyDown;
+    handleForceOverlayChange(): void;
+    private handleFolderSelectSearchTermChange;
+    private collectionApi;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-browser': CxContentBrowserBrowser;
+    }
+}

package/build/components/content-browser-browser/content-browser-browser.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/build/components/content-browser-control-bar/content-browser-control-bar.d.ts

@@ -0,0 +1,71 @@
+import CortexElement from '../../base/element';
+import { ChangeOption, Facet, SortOrder } from '../../types/content-browser';
+import CxAvatar from '@orangelogic/design-system/components/avatar';
+import CxIcon from '@orangelogic/design-system/components/icon';
+import CxInput from '@orangelogic/design-system/components/input';
+import CxLineClamp from '@orangelogic/design-system/components/line-clamp';
+import CxSpace from '@orangelogic/design-system/components/space';
+import CxTypography from '@orangelogic/design-system/components/typography';
+import CxContentBrowserControlFilter from '../content-browser-control-filter/content-browser-control-filter';
+import CxContentBrowserControlSort from '../content-browser-control-sort/content-browser-control-sort';
+import CxContentBrowserControlView from '../content-browser-control-view/content-browser-control-view';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary DAM view control bar for sorting, filtering, and changing asset view modes in the header toolbar.
+ *
+ * @description Combines sort, filter, and view controls into a single toolbar interface for the Content Browser.
+ * Allows users to change asset view layout, apply filters, and sort results using integrated dropdown and toolbar controls.
+ * Adapted from ContentBrowserSDK Header React component.
+ *
+ * @property {number} currentCount - The number of items currently displayed.
+ * @property {number} totalCount - The total number of items available.
+ * @property {string} sortOrder - The active sort field or direction.
+ * @property {Record<string, SortOrder[]>} sortOrders - Mapping of sort keys to their order options.
+ * @property {string} view - The current asset view mode.
+ * @property {Array<ControlOption>} views - All available view layout options.
+ * @property {Facet[]} facets - The currently active facets for filtering.
+ * @property {Array<Facet['facetDetails']>} availableFacets - Metadata about all available facets.
+ * @property {Record<string, string[]>} selectedFacets - Currently selected filter values by facet.
+ * @property {boolean} isSeeThrough - If "see through" mode is enabled.
+ * @property {boolean} loading - If the toolbar or its sub-controls are loading.
+ * @property {ChangeOption | undefined} newlyChangedOption - Metadata about the last user-initiated change.
+ *
+ * @event cx-content-browser-control-bar-search-change - Fired when the search text is changed.
+ */
+export default class CxContentBrowserControlBar extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-avatar': typeof CxAvatar;
+        'cx-content-browser-control-filter': typeof CxContentBrowserControlFilter;
+        'cx-content-browser-control-sort': typeof CxContentBrowserControlSort;
+        'cx-content-browser-control-view': typeof CxContentBrowserControlView;
+        'cx-icon': typeof CxIcon;
+        'cx-input': typeof CxInput;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-space': typeof CxSpace;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    currentCount: number;
+    totalCount: number;
+    sortOrderName: string;
+    sortDirection: string;
+    sortOrders: Record<string, SortOrder[]>;
+    view: string;
+    views: never[];
+    facets: Facet[];
+    availableFacets: Array<Facet['facetDetails']>;
+    selectedFacets: Record<string, string[]>;
+    isSeeThrough: boolean;
+    loading: boolean;
+    newlyChangedOption: ChangeOption | undefined;
+    searchText: string;
+    isMobile: boolean;
+    private handleSearchChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-control-bar': CxContentBrowserControlBar;
+    }
+}

package/build/components/content-browser-control-bar/content-browser-control-bar.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/build/components/content-browser-control-filter/content-browser-control-filter.d.ts

@@ -0,0 +1,81 @@
+import CortexElement from '../../base/element';
+import { ChangeOption, Facet } from '../../types/content-browser';
+import CxBadge from '@orangelogic/design-system/components/badge';
+import CxButton from '@orangelogic/design-system/components/button';
+import CxDetails from '@orangelogic/design-system/components/details';
+import CxDivider from '@orangelogic/design-system/components/divider';
+import CxDropdown from '@orangelogic/design-system/components/dropdown';
+import CxIcon from '@orangelogic/design-system/components/icon';
+import CxIconButton from '@orangelogic/design-system/components/icon-button';
+import CxLineClamp from '@orangelogic/design-system/components/line-clamp';
+import CxMenu from '@orangelogic/design-system/components/menu';
+import CxMenuItem from '@orangelogic/design-system/components/menu-item';
+import CxMenuLabel from '@orangelogic/design-system/components/menu-label';
+import CxSpace from '@orangelogic/design-system/components/space';
+import CxSpinner from '@orangelogic/design-system/components/spinner';
+import CxSwitch from '@orangelogic/design-system/components/switch';
+import CxTag from '@orangelogic/design-system/components/tag';
+import CxTooltip from '@orangelogic/design-system/components/tooltip';
+import CxTypography from '@orangelogic/design-system/components/typography';
+import CxContentBrowserControlFilterFacet from '../content-browser-control-filter-facet/content-browser-control-filter-facet';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary DAM view filter control for applying, viewing, and managing asset filters in the toolbar.
+ *
+ * @description Presents available filter facets to refine asset results in the Content Browser.
+ * Users can select, clear, or modify filters using dropdown panels. Adapted from ContentBrowserSDK Filter React component.
+ *
+ * @property {Facet[]} facets - Active facet objects providing metadata and available options.
+ * @property {Array<Facet['facetDetails']>} availableFacets - Array of available facet details.
+ * @property {Record<string, string[]>} selectedFacets - Mapping of currently selected filter values per facet name.
+ * @property {boolean} loading - Indicates if facet/filter options are loading.
+ * @property {ChangeOption | undefined} newlyChangedOption - Metadata about the last user-initiated filter change.
+ * @property {boolean} isMobile - Whether mobile mode is enabled.
+ *
+ * @event cx-content-browser-control-filter-change - Fired when the filters are changed.
+ */
+export default class CxContentBrowserControlFilter extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-badge': typeof CxBadge;
+        'cx-button': typeof CxButton;
+        'cx-content-browser-control-filter-facet': typeof CxContentBrowserControlFilterFacet;
+        'cx-details': typeof CxDetails;
+        'cx-divider': typeof CxDivider;
+        'cx-dropdown': typeof CxDropdown;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+        'cx-menu-label': typeof CxMenuLabel;
+        'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
+        'cx-switch': typeof CxSwitch;
+        'cx-tag': typeof CxTag;
+        'cx-tooltip': typeof CxTooltip;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    facets: Facet[];
+    availableFacets: Array<Facet['facetDetails']>;
+    selectedFacets: Record<string, string[]>;
+    loading: boolean;
+    newlyChangedOption: ChangeOption | undefined;
+    isMobile: boolean;
+    private appliedFiltersCount;
+    mappedDisplayNames: Record<string, Record<string, string>>;
+    handleFacetsChange(): void;
+    handleSelectedFacetsChange(): void;
+    private updateAppliedFiltersCount;
+    private handleClearAllClick;
+    private handleSelectionChange;
+    private handleRemove;
+    private renderAppliedFilters;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-control-filter': CxContentBrowserControlFilter;
+    }
+}

package/build/components/content-browser-control-filter/content-browser-control-filter.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/build/components/content-browser-control-filter-facet/content-browser-control-filter-facet.d.ts

@@ -0,0 +1,45 @@
+import CxButton from '@orangelogic/design-system/components/button';
+import CxDetails from '@orangelogic/design-system/components/details';
+import CxSpace from '@orangelogic/design-system/components/space';
+import CxSpinner from '@orangelogic/design-system/components/spinner';
+import CxTree from '@orangelogic/design-system/components/tree';
+import CxTreeItem from '@orangelogic/design-system/components/tree-item';
+import CxTypography from '@orangelogic/design-system/components/typography';
+import CortexElement from '../../base/element';
+/**
+ * @summary CxContentBrowser
+ */
+export default class CxContentBrowserControlFilterFacet extends CortexElement {
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-details': typeof CxDetails;
+        'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
+        'cx-tree': typeof CxTree;
+        'cx-tree-item': typeof CxTreeItem;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    private static readonly itemsPerPage;
+    loading: boolean;
+    displayName: string;
+    type: string;
+    values: Array<{
+        count: number;
+        displayValue: string;
+        value: string;
+    }>;
+    collections: string[];
+    private mappedSubtypes;
+    private mappedDisplayNames;
+    private page;
+    createRenderRoot(): this;
+    handleValuesChange(): void;
+    private loadMore;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-control-filter-facet': CxContentBrowserControlFilterFacet;
+    }
+}

package/build/components/content-browser-control-sort/content-browser-control-sort.d.ts

@@ -0,0 +1,64 @@
+import CxDivider from '@orangelogic/design-system/components/divider';
+import CxDropdown from '@orangelogic/design-system/components/dropdown';
+import CxIcon from '@orangelogic/design-system/components/icon';
+import CxIconButton from '@orangelogic/design-system/components/icon-button';
+import CxMenu from '@orangelogic/design-system/components/menu';
+import CxMenuItem from '@orangelogic/design-system/components/menu-item';
+import CxSpinner from '@orangelogic/design-system/components/spinner';
+import CxTooltip from '@orangelogic/design-system/components/tooltip';
+import CortexElement from '../../base/element';
+import { SortOrder } from '../../types/content-browser';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+declare enum OptionType {
+    SORT_DIRECTION = "sort-direction",
+    SORT_ORDER = "sort-order"
+}
+type ChangeOption = {
+    type: OptionType;
+    value: string;
+};
+/**
+ * @summary DAM view sort control. Allows users to select the sort field and sort direction for assets.
+ *
+ * @description Provides a dropdown toolbar for sorting assets by various fields and choosing ascending or descending order. Adapted from ContentBrowserSDK Header React component.
+ *
+ * @property {string} sortOrder - The current sort field value.
+ * @property {Record<string, SortOrder[]>} sortOrders - Mapping of sort fields to available order options.
+ * @property {boolean} loading - Indicates if sort options are loading.
+ * @property {boolean} isMobile - Adjusts dropdown UI for mobile devices.
+ * @property {object} newlyChangedOption - Metadata about the last user-initiated sort change.
+ *
+ * @event cx-content-browser-control-sort-change - Emitted when the sort field or sort order is changed.
+ */
+export default class CxContentBrowserControlSort extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-divider': typeof CxDivider;
+        'cx-dropdown': typeof CxDropdown;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+        'cx-spinner': typeof CxSpinner;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    sortOrderName: string;
+    sortDirection: string;
+    sortOrders: Record<string, SortOrder[]>;
+    loading: boolean;
+    isMobile: boolean;
+    newlyChangedOption: ChangeOption | undefined;
+    private mappedSortDirections;
+    private readonly sortDirections;
+    get canSort(): boolean;
+    private handleSortSelect;
+    handleSortDirectionsChange(): Promise<void>;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-control-sort': CxContentBrowserControlSort;
+    }
+}
+export {};

package/build/components/content-browser-control-sort/content-browser-control-sort.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/build/components/content-browser-control-view/content-browser-control-view.d.ts

@@ -0,0 +1,59 @@
+import CxDivider from '@orangelogic/design-system/components/divider';
+import CxDropdown from '@orangelogic/design-system/components/dropdown';
+import CxIcon from '@orangelogic/design-system/components/icon';
+import CxIconButton from '@orangelogic/design-system/components/icon-button';
+import CxLineClamp from '@orangelogic/design-system/components/line-clamp';
+import CxMenu from '@orangelogic/design-system/components/menu';
+import CxMenuItem from '@orangelogic/design-system/components/menu-item';
+import CxMenuLabel from '@orangelogic/design-system/components/menu-label';
+import CxSpace from '@orangelogic/design-system/components/space';
+import CxSwitch from '@orangelogic/design-system/components/switch';
+import CxTooltip from '@orangelogic/design-system/components/tooltip';
+import CortexElement from '../../base/element';
+import { ControlOption, GridView } from '../../types/content-browser';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary DAM view control toolbar for selecting asset view modes and toggling options.
+ *
+ * @description Provides a toolbar to switch between available asset view layouts (e.g., small, medium, large tile)
+ * and toggle "see through" view in the Content Browser. Adapted from ContentBrowserSDK Header React component.
+ *
+ * @property {string} view - The currently selected view identifier.
+ * @property {Array<ControlOption>} views - Array of selectable view options.
+ * @property {boolean} isSeeThrough - Whether the "see through" mode is enabled.
+ * @property {boolean} isMobile - Adjusts layout for mobile devices.
+ *
+ * @event cx-content-browser-control-view-change - Emitted when the view mode or see-through mode is changed.
+ */
+export default class CxContentBrowserControlView extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-divider': typeof CxDivider;
+        'cx-dropdown': typeof CxDropdown;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+        'cx-menu-label': typeof CxMenuLabel;
+        'cx-space': typeof CxSpace;
+        'cx-switch': typeof CxSwitch;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly localize;
+    view: GridView;
+    views: ControlOption[];
+    isSeeThrough: boolean;
+    isMobile: boolean;
+    private selectedView;
+    runConnectedCallback(): void;
+    private handleSeeThroughClick;
+    private handleViewSelect;
+    handleViewChange(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-content-browser-control-view': CxContentBrowserControlView;
+    }
+}

package/build/components/content-browser-control-view/content-browser-control-view.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;