@rivtn/noseur 1.0.0

package/dist/esm/panel/ScrollPanel.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Classname } from "../utils/Classname";
+import { Scheme } from "../constants/Scheme";
+class ScrollPanelComponent extends React.Component {
+    static defaultProps = {};
+    state = {};
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const component = this.props.isForm ? "form" : "div";
+        const className = Classname.build("noseur-scrollpanel", {
+            'noseur-skeleton': this.props.scheme === Scheme.SKELETON,
+            'noseur-scrollpanel-always-show-scrollbars': this.props.alwaysScroll,
+            'noseur-scrollpanel-always-show-scrollbar-x': this.props.alwaysScrollX,
+            'noseur-scrollpanel-always-show-scrollbar-y': this.props.alwaysScrollY,
+            'noseur-scrollpanel-hidden-scrollbar-x': this.props.hideScrollBars ?? this.props.hideScrollBarX,
+            'noseur-scrollpanel-hidden-scrollbar-y': this.props.hideScrollBars ?? this.props.hideScrollBarY
+        }, (this.props.scheme ? `${this.props.scheme}-vars` : null), this.props.className);
+        const style = {
+            ...(this.props.style ?? {})
+        };
+        if (this.props.scroller?.trackBg)
+            style["--scrollTrackBg"] = this.props.scroller?.trackBg;
+        if (this.props.scroller?.thumbBg)
+            style["--scrollThumbBg"] = this.props.scroller?.thumbBg;
+        if (this.props.scroller?.trackWidth)
+            style["--scrollTrackWidth"] = this.props.scroller?.trackWidth + "px";
+        if (this.props.scroller?.trackBorderRadius)
+            style["--scrollTrackBorderRadius"] = this.props.scroller?.trackBorderRadius + "px";
+        if (this.props.scroller?.thumbBorderRadius)
+            style["--scrollThumbBorderRadius"] = this.props.scroller?.thumbBorderRadius + "px";
+        return React.createElement(component, {
+            style,
+            className,
+            id: this.props.id,
+            key: this.props.key,
+            name: this.props.name,
+        }, this.props.children);
+    }
+    ;
+}
+export const ScrollPanel = ({ ref, ...props }) => (React.createElement(ScrollPanelComponent, { ...props, forwardRef: ref }));

package/dist/esm/panel/TabPane.d.ts

@@ -0,0 +1,82 @@
+import React from "react";
+import { Scheme } from "../constants/Scheme";
+import { Alignment } from "../constants/Alignment";
+import { NoseurElement, NoseurLabel } from "../constants/Types";
+import { ComponentBaseProps, ComponentElementBasicAttributes, TransitionProps } from "../core/ComponentBaseProps";
+export interface TabPanelHeaderOptions {
+    index: number;
+    scheme: string;
+    className: string;
+    selected: boolean;
+    idleScheme: string;
+    props: TabPanelProps;
+    onClick: (e: any) => void;
+    titleElement: NoseurElement;
+    removeElement: NoseurElement;
+    leftIconElement: NoseurElement;
+    rightIconElement: NoseurElement;
+}
+export type TabPanelHeaderTemplate = (options?: TabPanelHeaderOptions) => NoseurElement;
+export type TabPanelAttributesRelays = {
+    header?: ComponentElementBasicAttributes;
+};
+export interface TabPanelManageRef {
+}
+export interface TabPanelProps extends ComponentBaseProps<HTMLDivElement, TabPanelManageRef, TabPanelAttributesRelays> {
+    fill: boolean;
+    idleScheme: Scheme;
+    removable: boolean;
+    header: NoseurLabel;
+    noUnderline: boolean;
+    leftIcon: NoseurElement;
+    rightIcon: NoseurElement;
+    removeIcon: NoseurElement;
+    headerTemplate: TabPanelHeaderTemplate;
+}
+export type TabPaneEventHandler = (index: number) => boolean | void;
+export type TabPaneChangeEventHandler = (state: "active" | "close", index: number) => void;
+export type TabPaneAttributesRelays = {
+    content?: ComponentElementBasicAttributes;
+    navigator?: {
+        headers?: TabPanelAttributesRelays & ComponentElementBasicAttributes;
+        control?: {
+            prev?: ComponentElementBasicAttributes;
+            next?: ComponentElementBasicAttributes;
+        };
+    } & ComponentElementBasicAttributes;
+};
+export interface TabPaneManageRef {
+    next: () => void;
+    previous: () => void;
+    activeTab: () => number;
+    readd: (index: number) => void;
+    switch: (index: number) => void;
+    remove: (index: number) => void;
+}
+export interface TabPaneProps extends ComponentBaseProps<HTMLDivElement, TabPaneManageRef, TabPaneAttributesRelays>, TransitionProps {
+    cyclic: boolean;
+    idleScheme: Scheme;
+    activeIndex: number;
+    scrollable: boolean;
+    noUnderline: boolean;
+    alignment: Alignment;
+    renderActiveTabOnly: boolean;
+    children: React.ReactElement<TabPanelProps> | React.ReactElement<TabPanelProps>[] | any;
+    scrollIcons: {
+        horizontal: {
+            prev: NoseurElement;
+            next: NoseurElement;
+        };
+        vertical: {
+            prev: NoseurElement;
+            next: NoseurElement;
+        };
+    };
+    onTabClose: TabPaneEventHandler;
+    onTabActive: TabPaneEventHandler;
+    onBeforeTabClose: TabPaneEventHandler;
+    onBeforeTabActive: TabPaneEventHandler;
+    onTabChange: TabPaneChangeEventHandler;
+}
+export declare const TabPanel: ({ ref, ...props }: Partial<TabPanelProps>) => React.JSX.Element;
+export declare const TabPane: ({ ref, ...props }: Partial<TabPaneProps>) => React.JSX.Element;

package/dist/esm/panel/TabPane.js

@@ -0,0 +1,237 @@
+import React from "react";
+import { Button } from "../form/Button";
+import { Scheme } from "../constants/Scheme";
+import { Classname } from "../utils/Classname";
+import { BoolHelper } from "../utils/BoolHelper";
+import { Alignment } from "../constants/Alignment";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { MicroBuilder } from "../utils/MicroBuilder";
+class TabPanelComponent extends React.Component {
+    static defaultProps = {};
+    render() {
+        const className = Classname.build("noseur-tabpanel", (this.props.scheme ? `${this.props.scheme}-vars` : null), this.props.className);
+        return (React.createElement("div", { className: className, ref: this.props.forwardRef, key: this.props.key, id: this.props.id, style: this.props.style }, this.props.children));
+    }
+    ;
+}
+class TabPaneComponent extends React.Component {
+    static defaultProps = {
+        activeIndex: 0,
+        alignment: Alignment.TOP_LEFT,
+        scrollIcons: {
+            vertical: {
+                prev: "fa fa-angle-up",
+                next: "fa fa-angle-down",
+            },
+            horizontal: {
+                prev: "fa fa-angle-left",
+                next: "fa fa-angle-right",
+            }
+        },
+    };
+    state = {
+        removedIndexes: [],
+        activeIndex: this.props.activeIndex,
+        childrenCount: this.props.children?.length ?? 0,
+    };
+    headersContainer;
+    constructor(props) {
+        super(props);
+        this.onScroll = this.onScroll.bind(this);
+        this.navigateTab = this.navigateTab.bind(this);
+        this.onHeaderClick = this.onHeaderClick.bind(this);
+        this.onRemoveHeader = this.onRemoveHeader.bind(this);
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            next: () => this.navigateTab("next"),
+            activeTab: () => this.state.activeIndex,
+            previous: () => this.navigateTab("prev"),
+            readd: (index) => this.onRemoveHeader(index, "readd"),
+            remove: (index) => this.onRemoveHeader(index, "remove"),
+            switch: (index) => this.onHeaderClick(null, undefined, index),
+        });
+    }
+    navigateTab(direction) {
+        let activeIndex = this.state.activeIndex;
+        const removedIndexes = this.state.removedIndexes;
+        const childrenCount = this.state.childrenCount;
+        do {
+            activeIndex += (direction === "next" ? 1 : -1);
+        } while (removedIndexes.includes(activeIndex));
+        if (direction === "next" && !(activeIndex < childrenCount))
+            return;
+        else if (activeIndex < 0)
+            return;
+        this.setState({ activeIndex });
+    }
+    onHeaderClick(e, tab, index) {
+        if (tab && tab.props.disabled)
+            return;
+        const activeIndex = this.state.activeIndex;
+        const childrenCount = this.state.childrenCount;
+        const removedIndexes = this.state.removedIndexes;
+        tab && tab.props.onClick && tab.props.onClick(e);
+        if (index < 0 || index >= childrenCount || activeIndex === index || removedIndexes.includes(index))
+            return;
+        if (this.props.onBeforeTabClose && this.props.onBeforeTabClose(activeIndex) === false)
+            return;
+        if (this.props.onBeforeTabActive && this.props.onBeforeTabActive(index) === false)
+            return;
+        if (this.props.onTabChange) {
+            this.props.onTabChange("close", activeIndex);
+            this.props.onTabChange("active", index);
+        }
+        this.setState({
+            activeIndex: index,
+        }, () => {
+            this.props.onTabClose && this.props.onTabClose(activeIndex);
+            this.props.onTabActive && this.props.onTabActive(index);
+        });
+    }
+    onRemoveHeader(index, op) {
+        const activeIndex = this.state.activeIndex;
+        const childrenCount = this.state.childrenCount;
+        const removedIndexes = this.state.removedIndexes;
+        if (op === "readd") {
+            if (!removedIndexes.includes(index))
+                return;
+            removedIndexes.splice(removedIndexes.indexOf(index), 1);
+        }
+        else {
+            removedIndexes.push(index);
+        }
+        this.setState({
+            removedIndexes,
+        }, () => {
+            if (activeIndex !== index)
+                return;
+            for (let sindex = 0; sindex < childrenCount; sindex++) {
+                if (!removedIndexes.includes(sindex)) {
+                    this.onHeaderClick(null, undefined, sindex);
+                    return;
+                }
+            }
+        });
+    }
+    renderHeader(tab, index, selected, key) {
+        const hasTemplate = !!tab.props.headerTemplate;
+        let scheme = (selected ? (tab.props.scheme ?? this.props.scheme) : (tab.props.idleScheme ?? this.props.idleScheme)) ?? Scheme.SECONDARY;
+        if ((tab.props.scheme ?? this.props.scheme) === Scheme.SKELETON)
+            scheme = Scheme.SKELETON;
+        const className = Classname.build("noseur-tabpanel-header", {
+            "noseur-active": selected,
+            "noseur-flex-1": tab.props.fill,
+            "noseur-tabpanel-noline": tab.props.noUnderline ?? this.props.noUnderline,
+        }, (scheme !== Scheme.SKELETON ? `${scheme}-vars` : scheme), tab.props.attrsRelay?.header?.className);
+        const style = {
+            ...this.props.attrsRelay?.navigator?.headers?.header?.style,
+            ...tab.props.attrsRelay?.header?.style,
+            ...tab.props.style,
+        };
+        const removeElement = (hasTemplate || tab.props.removable ? MicroBuilder.buildIcon(tab.props.removeIcon ?? "fa fa-times", {
+            scheme,
+            relativeAlignment: tab.props.rightIcon ? Alignment.RIGHT : Alignment.NONE
+        }, { onClick: () => this.onRemoveHeader(index, "remove") }) : null);
+        if (hasTemplate) {
+            return tab.props.headerTemplate({
+                index,
+                scheme,
+                selected,
+                className,
+                removeElement,
+                props: tab.props,
+                onClick: (e) => this.onHeaderClick(e, tab, index),
+                idleScheme: tab.props.idleScheme ?? this.props.idleScheme,
+                titleElement: MicroBuilder.buildLabel(tab.props.header, { scheme }),
+                leftIconElement: MicroBuilder.buildIcon(tab.props.leftIcon, { scheme }),
+                rightIconElement: MicroBuilder.buildIcon(tab.props.rightIcon, { scheme }),
+            });
+        }
+        const rightIcon = !!removeElement ? (React.createElement("div", null,
+            MicroBuilder.buildIcon(tab.props.rightIcon, { scheme }),
+            removeElement)) : tab.props.rightIcon;
+        return (React.createElement(Button, { disabled: tab.props.disabled, key: key, scheme: scheme, className: className, id: tab.props.attrsRelay?.header?.id, style: style, leftIcon: tab.props.leftIcon, rightIcon: rightIcon, outlined: true, textOnly: true, onClick: (e) => this.onHeaderClick(e, tab, index) }, tab.props.header));
+    }
+    onScroll(orientation, direction) {
+        if (!this.headersContainer)
+            return;
+        const scrollSize = (direction === "right" ? 500 : -500);
+        this.headersContainer[orientation === "horizontal" ? "scrollLeft" : "scrollBottom"] += scrollSize;
+    }
+    renderTabs() {
+        const result = {
+            headers: [],
+            contents: [],
+        };
+        React.Children.forEach(this.props.children, (tab, index) => {
+            if (tab.type !== TabPanel) {
+                result.headers.push(tab);
+                return;
+            }
+            if (this.state.removedIndexes.includes(index))
+                return;
+            const key = tab.props.key ?? `${index}`;
+            const isActiveTab = this.state.activeIndex === index;
+            result.headers.push(this.renderHeader(tab, index, isActiveTab, key));
+            if (this.props.renderActiveTabOnly && !isActiveTab)
+                return;
+            result.contents.push(isActiveTab ? tab : React.cloneElement(tab, { key, style: { display: "none" } }));
+        });
+        return result;
+    }
+    renderContentAndNavigator(orientation) {
+        const { headers, contents } = this.renderTabs();
+        const scheme = this.props.attrsRelay?.navigator?.scheme ?? this.props.scheme;
+        const contentClassName = Classname.build("noseur-tabpane-content noseur-unset-scheme-vars", this.props.attrsRelay?.content?.className);
+        const scrollLeftElement = this.props.scrollable ? MicroBuilder.buildIcon(this.props.scrollIcons[orientation].prev, {
+            id: this.props.attrsRelay?.navigator?.control?.prev?.id,
+            style: this.props.attrsRelay?.navigator?.control?.prev?.style,
+            scheme: this.props.attrsRelay?.navigator?.control?.prev?.scheme ?? scheme,
+            className: Classname.build("noseur-tabpane-control noseur-tabpane-control-l", this.props.attrsRelay?.navigator?.control?.prev?.className)
+        }, { onClick: () => this.onScroll(orientation, "left") }) : null;
+        const scrollRightElement = this.props.scrollable ? MicroBuilder.buildIcon(this.props.scrollIcons[orientation].next, {
+            id: this.props.attrsRelay?.navigator?.control?.next?.id,
+            style: this.props.attrsRelay?.navigator?.control?.next?.style,
+            scheme: this.props.attrsRelay?.navigator?.control?.next?.scheme ?? scheme,
+            className: Classname.build("noseur-tabpane-control noseur-tabpane-control-r", this.props.attrsRelay?.navigator?.control?.next?.className)
+        }, { onClick: () => this.onScroll(orientation, "right") }) : null;
+        const className = Classname.build("noseur-tabpane-navigator", {
+            "noseur-tabpane-navigator-top-left": this.props.alignment === Alignment.TOP_LEFT,
+            "noseur-tabpane-navigator-top-right": this.props.alignment === Alignment.TOP_RIGHT,
+            "noseur-tabpane-navigator-bottom-left": this.props.alignment === Alignment.BOTTOM_LEFT,
+            "noseur-tabpane-navigator-bottom-right": this.props.alignment === Alignment.BOTTOM_RIGHT,
+            "noseur-tabpane-navigator-left": BoolHelper.equalsAny(this.props.alignment, [Alignment.LEFT, Alignment.CENTER_LEFT]),
+            "noseur-tabpane-navigator-right": BoolHelper.equalsAny(this.props.alignment, [Alignment.RIGHT, Alignment.CENTER_RIGHT]),
+            "noseur-tabpane-navigator-bottom-center": BoolHelper.equalsAny(this.props.alignment, [Alignment.BOTTOM, Alignment.BOTTOM_CENTER]),
+            "noseur-tabpane-navigator-top-center": BoolHelper.equalsAny(this.props.alignment, [Alignment.TOP, Alignment.CENTER, Alignment.TOP_CENTER]),
+        }, this.props.attrsRelay?.navigator?.className);
+        const content = (React.createElement("div", { className: contentClassName, id: this.props.attrsRelay?.content?.id, style: this.props.attrsRelay?.content?.style }, contents));
+        const navigator = (React.createElement("div", { className: className, id: this.props.attrsRelay?.navigator?.id, style: this.props.attrsRelay?.navigator?.style },
+            scrollLeftElement,
+            React.createElement("div", { className: Classname.build("noseur-tabpane-headers", this.props.attrsRelay?.navigator?.headers?.className), id: this.props.attrsRelay?.navigator?.headers?.id, style: this.props.attrsRelay?.navigator?.headers?.style, ref: (r) => {
+                    this.headersContainer = r;
+                } }, headers),
+            scrollRightElement));
+        return {
+            content,
+            navigator
+        };
+    }
+    render() {
+        const isVertical = BoolHelper.equalsAny(this.props.alignment, [Alignment.LEFT, Alignment.RIGHT, Alignment.CENTER_LEFT, Alignment.CENTER_RIGHT]);
+        const { content, navigator } = this.renderContentAndNavigator(isVertical ? "vertical" : "horizontal");
+        const navigatorBelow = this.props.alignment === Alignment.RIGHT || this.props.alignment.startsWith(Alignment.BOTTOM);
+        const className = Classname.build("noseur-tabpane", {
+            "noseur-tabpane-row": isVertical,
+            "noseur-tabpane-scrollable": this.props.scrollable,
+        }, (this.props.scheme && this.props.scheme !== Scheme.SKELETON ? `${this.props.scheme}-vars` : null), this.props.className);
+        return (React.createElement("div", { className: className, ref: this.props.forwardRef, id: this.props.id, style: this.props.style },
+            navigatorBelow ? null : navigator,
+            content,
+            navigatorBelow ? navigator : null));
+    }
+    ;
+}
+export const TabPanel = ({ ref, ...props }) => (React.createElement(TabPanelComponent, { ...props, forwardRef: ref }));
+export const TabPane = ({ ref, ...props }) => (React.createElement(TabPaneComponent, { ...props, forwardRef: ref }));

package/dist/esm/presentation/Chart.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import "./Presentation.css";
+import { NoseurObject } from '../constants/Types';
+import { ComponentBaseProps } from '../core/ComponentBaseProps';
+import { ChartData as ChartJsData, Plugin as ChartJsPlugin, ChartDataCustomTypesPerDataset, ChartTypeRegistry } from 'chart.js/auto';
+export declare const ChartType: {
+    BAR: string;
+    PIE: string;
+    NONE: string;
+    LINE: string;
+    RADAR: string;
+    BUBBLE: string;
+    SCATTER: string;
+    DOUGHNUT: string;
+    POLARAREA: string;
+};
+export type ChartPlugin<T extends keyof ChartTypeRegistry> = ChartJsPlugin<T>;
+export type ChartData = ChartJsData<any, any[], unknown> | ChartDataCustomTypesPerDataset<any, any[], unknown>;
+export interface ChartManageRef {
+    getChart: () => any;
+    update: (type: ChartTypeRegistry | string, data?: ChartData, options?: NoseurObject<any>) => void;
+}
+export interface ChartProps extends ComponentBaseProps<HTMLDivElement, ChartManageRef> {
+    data: ChartData;
+    canvasClassName: string;
+    options: NoseurObject<any>;
+    plugins?: ChartPlugin<any>[];
+    canvasProps: NoseurObject<any>;
+    type: ChartTypeRegistry | string;
+    canvasStyle: React.CSSProperties | undefined;
+    canvasRef: React.ForwardedRef<HTMLCanvasElement>;
+}
+interface ChartState {
+    id: string;
+}
+export declare class ChartComponent extends React.Component<ChartProps, ChartState> {
+    static defaultProps: Partial<ChartProps>;
+    state: ChartState;
+    chart: any;
+    canvasElement: HTMLCanvasElement;
+    constructor(props: ChartProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<ChartProps>, _: Readonly<ChartState>): void;
+    componentWillUnmount(): void;
+    renderChart(type: ChartTypeRegistry | string, data?: ChartData, options?: NoseurObject<any>, plugins?: ChartPlugin<any>[]): void;
+    render(): React.JSX.Element;
+}
+export { ChartTypeRegistry } from "chart.js/auto";
+export declare const Chart: ({ ref, ...props }: Partial<ChartProps>) => React.JSX.Element;

package/dist/esm/presentation/Chart.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import "./Presentation.css";
+import { DOMHelper } from '../utils/DOMUtils';
+import { Classname } from "../utils/Classname";
+import { BoolHelper } from '../utils/BoolHelper';
+import { ObjectHelper } from '../utils/ObjectHelper';
+import { Chart as ChartJs } from 'chart.js/auto';
+export const ChartType = {
+    BAR: "bar",
+    PIE: "pie",
+    NONE: "none",
+    LINE: "line",
+    RADAR: "radar",
+    BUBBLE: "bubble",
+    SCATTER: "scatter",
+    DOUGHNUT: "doughnut",
+    POLARAREA: "polarArea",
+};
+export class ChartComponent extends React.Component {
+    static defaultProps = {
+        type: ChartType.LINE,
+    };
+    state = {
+        id: this.props.id || DOMHelper.uniqueElementId()
+    };
+    chart;
+    canvasElement;
+    constructor(props) {
+        super(props);
+        this.renderChart = this.renderChart.bind(this);
+    }
+    componentDidMount() {
+        this.renderChart(this.props.type, this.props.data, this.props.options);
+        ObjectHelper.resolveManageRef(this, {
+            update: this.renderChart,
+            getChart: () => this.chart,
+        });
+    }
+    componentDidUpdate(prevProps, _) {
+        if (!BoolHelper.deepEqual(this.props, prevProps, ["type", "data", "options", "plugins"])) {
+            this.renderChart(this.props.type, this.props.data, this.props.options, this.props.plugins);
+        }
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    renderChart(type, data, options, plugins) {
+        if (this.chart)
+            this.chart.destroy();
+        this.chart = new ChartJs(this.canvasElement, { type, data: data ?? this.props.data, options, plugins });
+    }
+    render() {
+        const className = Classname.build("noseur-chart", this.props.className);
+        const canvasElement = (ref) => {
+            this.canvasElement = ref;
+            ObjectHelper.resolveRef(this.props.canvasRef, ref);
+        };
+        return (React.createElement("div", { className: className, style: this.props.style, ref: this.props.forwardRef },
+            React.createElement("canvas", { id: this.state.id, style: this.props.canvasStyle, className: this.props.canvasClassName, ref: canvasElement, ...(this.props.canvasProps || {}) })));
+    }
+}
+export const Chart = ({ ref, ...props }) => (React.createElement(ChartComponent, { ...props, forwardRef: ref }));

package/dist/esm/presentation/Paginator.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import "./Presentation.css";
+import { Scheme } from '../constants/Scheme';
+import { ComponentBaseProps } from '../core/ComponentBaseProps';
+import { NoseurElement, NoseurObject } from '../constants/Types';
+export declare enum PaginatorDirection {
+    PAGE = "",
+    NEXT_HIDDEN_PAGES = "nhp",
+    NEXT = "fa fa-angle-right",
+    PREVIOUS_HIDDEN_PAGES = "phg",
+    PREVIOUS = "fa fa-angle-left",
+    _HIDDEN_PAGES = "fa fa-ellipsis-h",
+    LAST_PAGE = "fa fa-angle-double-right",
+    FIRST_PAGE = "fa fa-angle-double-left"
+}
+export interface PaginatorPageElementOption {
+    scheme: Scheme;
+    active?: boolean;
+    disabled?: boolean;
+    className?: string;
+    key?: string | number;
+    label?: number | string;
+    style?: NoseurObject<any>;
+    direction?: PaginatorDirection;
+    onClick?: (...args: any[]) => any;
+}
+export type PaginatorTemplateElementEventHandler = (option: PaginatorPageElementOption) => NoseurElement;
+export type PaginatorTemplateCustomElementEventHandler = (layout: string, props?: PaginatorProps, state?: PaginatorState, layoutElementsMap?: NoseurObject<NoseurElement>) => NoseurElement;
+export interface PaginatorPageChangeOption {
+    scheme?: Scheme;
+    pageCount: number;
+    currentPage: number;
+    key?: string | number;
+}
+export type PaginatorTemplateLabelEventHandler = (option: PaginatorPageChangeOption) => NoseurElement;
+export interface PaginatorTemplateOptions {
+    layout?: string;
+    rowsPerPageElement?: NoseurElement;
+    pageElement?: PaginatorTemplateElementEventHandler;
+    activePageLabel?: PaginatorTemplateLabelEventHandler;
+    nextPageElement?: PaginatorTemplateElementEventHandler;
+    lastPageElement?: PaginatorTemplateElementEventHandler;
+    firstPageElement?: PaginatorTemplateElementEventHandler;
+    propsValueElement?: PaginatorTemplateElementEventHandler;
+    hiddenPagesElement?: PaginatorTemplateElementEventHandler;
+    previousPageElement?: PaginatorTemplateElementEventHandler;
+    customElement?: PaginatorTemplateCustomElementEventHandler;
+}
+export declare enum PaginatorLayoutElements {
+    PageCount = "PageCount",
+    RowPerPage = "RowPerPage",
+    InitialPage = "InitialPage",
+    CurrentPage = "CurrentPage",
+    TotalRecords = "TotalRecords",
+    PageElements = "PageElements",
+    NextPageElement = "NextPageElement",
+    LastPageElement = "LastPageElement",
+    ActivePageLabel = "ActivePageLabel",
+    NextPagesElement = "NextPagesElement",
+    FirstPageElement = "FirstPageElement",
+    VisiblePageCount = "VisiblePageCount",
+    PreviousPageElement = "PreviousPageElement",
+    PreviousPagesElement = "PreviousPagesElement"
+}
+export interface PaginatorProps extends ComponentBaseProps<NoseurElement> {
+    initialPage: number;
+    rowsPerPage: number;
+    currentPage: number;
+    totalRecords: number;
+    visiblePageCount: number;
+    freezeTotalRecords: boolean;
+    reportOnNavigation: boolean;
+    rowsPerPageOptions: number[];
+    overlayContainer: NoseurElement;
+    resetPageOnCountChange: boolean;
+    reportOnComponentUpdate: boolean;
+    template: PaginatorTemplateOptions;
+    expandOnHiddenPagesButtonClicked: boolean;
+    leftContent: React.ReactElement<any, any>;
+    rightContent: React.ReactElement<any, any>;
+    onPageChange?: (event: PaginatorPageChangeOption) => void;
+}
+interface PaginatorState {
+    pageCount: number;
+    currentPage: number;
+    renderNextHiddenPagesElements: boolean;
+    renderPreviousHiddenPagesElements: boolean;
+}
+export declare const Paginator: ({ ref, ...props }: Partial<PaginatorProps>) => React.JSX.Element;
+export {};