@rivtn/noseur 1.0.0

package/dist/esm/data/Data.js

@@ -0,0 +1,142 @@
+import React from "react";
+import { Classname } from "../utils/Classname";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { Paginator } from "../presentation/Paginator";
+import { DOMHelper } from "../utils/DOMUtils";
+;
+export class DataComponent extends React.Component {
+    rowContentElementMaps = {};
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            getData: () => this.state.activeData,
+            setData: (data) => this.setState({ activeData: data }),
+            toggleContent: (row) => this.internalToggleRowContent(row),
+            setLoadingState: (isLoading) => this.setState({ isLoading }),
+            expandContent: (row) => this.internalToggleRowContent(row, true),
+            collapseContent: (row) => this.internalToggleRowContent(row, false),
+            setAndExpandRowContent: (row, content) => this.internalToggleRowContent(row, undefined, content)
+        });
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    renderEmptyState() {
+        if (this.state.activeData?.length !== 0)
+            return null;
+        return React.createElement("div", { className: "noseur-data-empty-state" }, this.props.emptyState);
+    }
+    renderLoadingState() {
+        if (!!this.state.activeData && !this.state.isLoading)
+            return null;
+        return React.createElement("div", { className: "noseur-data-loading-state" }, this.props.loadingState);
+    }
+    renderFixtures(fixture, className) {
+        if (!fixture)
+            return null;
+        return React.createElement("div", { className: className }, fixture());
+    }
+    buildRowProps(data) {
+        const valuedRowProps = this.props.valuedRowProps ? this.props.valuedRowProps(data) : {};
+        return ObjectHelper.merge(this.props.rowProps ?? {}, valuedRowProps);
+    }
+    onPageChange(event) {
+        this.setState({
+            currentPage: event.currentPage,
+            dataOffset: (event.currentPage - 1) * this.props.rowsPerPage
+        });
+    }
+    renderPaginator(hasFooter) {
+        if (!this.props.paginate)
+            return null;
+        const props = {
+            ...(this.props.paginatorProps || {}),
+            rowsPerPage: this.props.rowsPerPage,
+            template: this.props.paginatorTemplate,
+            scheme: this.props.paginatorProps?.scheme || this.props.scheme,
+            totalRecords: this.props.totalRecords || this.props.data?.length,
+        };
+        const cachedOnPageChange = props.onPageChange;
+        props.onPageChange = (event) => {
+            this.onPageChange(event);
+            if (cachedOnPageChange)
+                cachedOnPageChange(event);
+            if (this.props.onPageChange)
+                this.props.onPageChange(event);
+        };
+        const className = Classname.build(props.className, {
+            "noseur-data-grid-f": !hasFooter && this.props.showGridLines,
+            "noseur-no-bd-t": !hasFooter && this.props.data?.length && this.props.showGridLines,
+        });
+        return (React.createElement(Paginator, { ...props, className: className }));
+    }
+    internalToggleRowContent(row, expand, content) {
+        if (expand === true && (row in this.state.rowsContent))
+            return;
+        if (expand === false && !(row in this.state.rowsContent))
+            return;
+        const rowsContent = this.toggleRowContent(row, (this.state.activeData ?? {})[row - 1], expand, content);
+        this.setState({ rowsContent });
+    }
+    toggleRowContent(row, data, expand, content) {
+        let rowsContent = this.state.rowsContent;
+        if (expand === false || row in rowsContent) {
+            delete rowsContent[row];
+        }
+        else {
+            if (!this.props.multiRowExpansion) {
+                rowsContent = {};
+            }
+            if (content) {
+                rowsContent[row] = content;
+            }
+            else {
+                if (!!this.props.rowExpansionTemplate) {
+                    rowsContent[row] = this.props.rowExpansionTemplate(data);
+                }
+                else {
+                    rowsContent[row] = this.props.rowsContent[row];
+                }
+            }
+        }
+        return rowsContent;
+    }
+    renderRowContents() {
+        const rowsContents = this.state.rowsContent;
+        return Object.keys(rowsContents).map((row) => {
+            if (!(row in this.rowContentElementMaps))
+                this.rowContentElementMaps[row] = {};
+            return (React.createElement("div", { key: row, ref: (r) => {
+                    if (!this.rowContentElementMaps[row]) {
+                        this.setState({ rowsContent: {} });
+                        return;
+                    }
+                    this.rowContentElementMaps[row].contentElement = r;
+                }, className: "noseur-data-row-content" }, rowsContents[row]));
+        });
+    }
+    resolveRowContentPositions() {
+        const rows = Object.keys(this.rowContentElementMaps);
+        for (let row of rows) {
+            const rowContentElementMap = this.rowContentElementMaps[row];
+            if (!rowContentElementMap.rowElement || !rowContentElementMap.contentElement) {
+                if (rowContentElementMap.expanded && rowContentElementMap.rowElement) {
+                    rowContentElementMap.rowElement.style.height = rowContentElementMap.originalHeight + "px";
+                }
+                delete this.rowContentElementMaps[row];
+                continue;
+            }
+            if (!rowContentElementMap || rowContentElementMap.expanded)
+                continue;
+            const contentHeight = DOMHelper.calculateHeight(rowContentElementMap.contentElement);
+            const rowStyle = DOMHelper.getElementStyle(rowContentElementMap.rowElement);
+            const rowHeight = DOMHelper.sanitizeStyleValue(rowStyle.height);
+            const rowSuperfluousHeight = DOMHelper.getElementSuperfluousHeight(rowContentElementMap.rowElement, true);
+            const rowOffsetTopPlusHeight = rowContentElementMap.rowElement.offsetTop + rowHeight + rowSuperfluousHeight;
+            rowContentElementMap.rowElement.style.height = (rowHeight + contentHeight) + "px";
+            rowContentElementMap.contentElement.style.top = rowOffsetTopPlusHeight + "px";
+            this.rowContentElementMaps[row].originalHeight = rowHeight;
+            this.rowContentElementMaps[row].expanded = true;
+        }
+        ;
+    }
+}

package/dist/esm/data/List.d.ts

@@ -0,0 +1,14 @@
+import "./Data.css";
+import React from 'react';
+import { DataProps, RowControlOptions } from "./Data";
+import { NoseurElement } from '../constants/Types';
+export type ListTemplateHandler = (value: any, rowControlOptions?: RowControlOptions) => NoseurElement;
+export interface ListProps<D> extends DataProps<HTMLUListElement, D> {
+    dataKey: string;
+    sortField: string;
+    children: undefined;
+    selectionMode: SelectionMode;
+    sortOrder: null | 0 | 1 | -1;
+    template: ListTemplateHandler | undefined;
+}
+export declare const List: <D>({ ref, ...props }: Partial<ListProps<D>>) => React.JSX.Element;

package/dist/esm/data/List.js

@@ -0,0 +1,117 @@
+import "./Data.css";
+import React from 'react';
+import { Classname } from "../utils/Classname";
+import { BoolHelper } from "../utils/BoolHelper";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { DataComponent } from "./Data";
+import { SortDirection } from '../constants/Types';
+;
+class ListComponent extends DataComponent {
+    static defaultProps = {
+        paginate: false,
+        rowsPerPage: 10,
+        rowsContent: {},
+        dataRefreshKeys: [],
+        internalElementProps: {},
+    };
+    state = {
+        dataOffset: 0,
+        currentPage: 1,
+        activeData: this.props.data,
+        rowsContent: ObjectHelper.clone(this.props.rowsContent),
+    };
+    constructor(props) {
+        super(props);
+    }
+    componentDidUpdate(prevProps, _) {
+        if (prevProps.totalRecords !== this.props.totalRecords ||
+            !BoolHelper.deepEqual(prevProps.data, this.props.data, [...this.props.dataRefreshKeys])
+            || ((!this.state.activeData || !this.state.activeData.length) && this.props.data?.length)) {
+            this.setState({ activeData: this.props.data ?? [] });
+        }
+    }
+    sortData() {
+        const data = this.state.activeData;
+        const sortField = this.props.sortField;
+        if (!data)
+            return;
+        data.sort((p, c) => {
+            const prev = ObjectHelper.objectGetWithStringTemplate(p, sortField), current = ObjectHelper.objectGetWithStringTemplate(c, sortField);
+            if (this.props.compareData)
+                return this.props.compareData(SortDirection.FORWARD, sortField, prev, current);
+            const comp = BoolHelper.compare(prev, current);
+            return comp;
+        });
+        this.setState({ activeData: data });
+    }
+    renderListBody() {
+        if (!this.state.activeData || this.state.isLoading)
+            return;
+        let data = this.state.activeData.slice(this.state.dataOffset, (this.props.rowsPerPage + this.state.dataOffset));
+        if (!data.length && !this.props.allowNoDataPagination)
+            data = this.state.activeData;
+        const rowsContents = this.state.rowsContent;
+        return data.map((rowData, index) => {
+            const row = index + 1;
+            let valuedRowProps = this.buildRowProps(data);
+            const value = this.props.dataKey ? ObjectHelper.objectGetWithStringTemplate(rowData, this.props.dataKey) : rowData;
+            return (React.createElement("li", { key: index, role: "row", "data-n-group": "row", ...valuedRowProps, ref: (r) => {
+                    if (!r)
+                        return;
+                    if (!(row in rowsContents))
+                        return;
+                    if (!(row in this.rowContentElementMaps))
+                        this.rowContentElementMaps[row] = {};
+                    this.rowContentElementMaps[row].rowElement = r;
+                }, onClick: this.props.onRowSelection
+                    ? () => this.props.onRowSelection(rowData, index) : undefined }, this.props.template
+                ? this.props.template(value, {
+                    toggleContent: (() => {
+                        this.setState({ rowsContent: this.toggleRowContent(row, data) });
+                    }).bind(this)
+                })
+                : `${value}`));
+        });
+    }
+    renderList(hasHeader, hasFooter) {
+        const props = {
+            id: this.props.id,
+            ...this.props.internalElementProps,
+        };
+        const listBody = this.renderListBody();
+        const className = Classname.build('noseur-data-container noseur-list', {
+            "noseur-disabled": this.props.disabled,
+            "noseur-data-striped": this.props.stripedRows,
+            "noseur-data-grid-h": !hasHeader && this.props.showGridLines,
+            "noseur-data-grid-f": !hasFooter && this.props.showGridLines && this.props.data?.length,
+        }, this.props.internalElementProps.className);
+        return (React.createElement("ul", { ...props, role: "list", "data-n-group": "list", className: className, ref: this.props.forwardRef }, listBody));
+    }
+    render() {
+        const props = {
+            key: this.props.key,
+            id: this.props.dataId,
+            style: this.props.style,
+        };
+        const emptyState = this.renderEmptyState();
+        const rowContents = this.renderRowContents();
+        const loadingState = this.renderLoadingState();
+        const header = this.renderFixtures(this.props.header, "noseur-data-header");
+        const footer = this.renderFixtures(this.props.footer, "noseur-data-footer");
+        const className = Classname.build('noseur-data-compound', {
+            "noseur-data-grid": this.props.showGridLines,
+            "noseur-data-no-divider": this.props.noDivider && !this.props.showGridLines,
+        }, this.props.className, (this.props.scheme ? `${this.props.scheme}-vars` : null));
+        const paginator = this.renderPaginator(!!footer);
+        const list = this.renderList(!!header, !!footer);
+        return (React.createElement("div", { ...props, className: className, ref: (_) => this.resolveRowContentPositions() },
+            header,
+            list,
+            emptyState,
+            loadingState,
+            paginator,
+            footer,
+            rowContents));
+    }
+}
+export const List = ({ ref, ...props }) => (React.createElement(ListComponent, { ...props, forwardRef: ref }));

package/dist/esm/data/Table.d.ts

@@ -0,0 +1,22 @@
+import "./Data.css";
+import React from 'react';
+import { DataProps } from "./Data";
+import { NoseurElement, SortIcons, SortMode } from '../constants/Types';
+export declare enum TableSelectionMode {
+    NONE = 0,
+    SINGLE = 1,
+    MULTIPLE = 2
+}
+export type TableSelectionEventHandler = (value: any) => NoseurElement;
+export interface TableProps<D> extends DataProps<HTMLTableElement, D> {
+    sortMode: SortMode;
+    sortIcons: SortIcons;
+    hideHeaders: boolean;
+    cellSelection: boolean;
+    canDisableSort: boolean;
+    sortOrder: null | 0 | 1 | -1;
+    selectionMode: TableSelectionMode;
+    children: React.JSX.Element | React.JSX.Element[] | React.ReactElement | React.ReactElement[];
+    onColumnSelection: TableSelectionEventHandler;
+}
+export declare const Table: <D>({ ref, ...props }: Partial<TableProps<D>>) => React.JSX.Element;

package/dist/esm/data/Table.js

@@ -0,0 +1,236 @@
+import "./Data.css";
+import React from 'react';
+import { Classname } from "../utils/Classname";
+import { BoolHelper } from "../utils/BoolHelper";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { ColumnComponent } from "./Column";
+import { DataComponent } from "./Data";
+import { SortDirection, SortMode } from '../constants/Types';
+export var TableSelectionMode;
+(function (TableSelectionMode) {
+    TableSelectionMode[TableSelectionMode["NONE"] = 0] = "NONE";
+    TableSelectionMode[TableSelectionMode["SINGLE"] = 1] = "SINGLE";
+    TableSelectionMode[TableSelectionMode["MULTIPLE"] = 2] = "MULTIPLE";
+})(TableSelectionMode || (TableSelectionMode = {}));
+;
+;
+class TableComponent extends DataComponent {
+    static defaultProps = {
+        rowsContent: {},
+        paginate: false,
+        rowsPerPage: 10,
+        dataRefreshKeys: [],
+        internalElementProps: {},
+        sortMode: SortMode.SINGLE,
+        sortIcons: {
+            asc: "fa fa-sort-asc",
+            unsorted: "fa fa-sort",
+            desc: "fa fa-sort-desc",
+        },
+    };
+    state = {
+        dataOffset: 0,
+        currentPage: 1,
+        activeData: this.props.data,
+        rowsContent: ObjectHelper.clone(this.props.rowsContent),
+    };
+    usedDataKeys = [];
+    columnSelfRefs = {};
+    constructor(props) {
+        super(props);
+        this.onSort = this.onSort.bind(this);
+        this.resolveRowContentPositions = this.resolveRowContentPositions.bind(this);
+    }
+    componentDidUpdate(prevProps, _) {
+        if (prevProps.totalRecords !== this.props.totalRecords ||
+            !BoolHelper.deepEqual(prevProps.data, this.props.data, [this.usedDataKeys, ...this.props.dataRefreshKeys])
+            || ((!this.state.activeData || !this.state.activeData.length) && this.props.data?.length)) {
+            this.setState({ activeData: this.props.data });
+            Object.keys(this.columnSelfRefs).forEach((dk) => {
+                this.columnSelfRefs[dk].unSort();
+            });
+        }
+    }
+    onSort(sortDirection, dataKey) {
+        if (!dataKey)
+            return;
+        let data = ((this.props.sortMode == SortMode.MULTIPLE || this.state.lastSortColumn == dataKey) ? (this.state.activeData ?? []) : (this.props.data ?? [])).map(a => { return { ...a }; });
+        if (this.props.sortMode != SortMode.MULTIPLE) {
+            Object.keys(this.columnSelfRefs).forEach((dk) => {
+                if (dk == dataKey)
+                    return;
+                this.columnSelfRefs[dk].unSort();
+            });
+        }
+        if (sortDirection == SortDirection.NONE) {
+            this.setState({
+                activeData: (this.props.data || []).map((v, index) => {
+                    v[dataKey] = ObjectHelper.objectGetWithStringTemplate((this.props.data ?? [])[index], dataKey);
+                    return v;
+                }), lastSortColumn: dataKey
+            });
+            return;
+        }
+        data.sort((p, c) => {
+            const prev = ObjectHelper.objectGetWithStringTemplate(p, dataKey), current = ObjectHelper.objectGetWithStringTemplate(c, dataKey);
+            if (this.props.compareData)
+                return this.props.compareData(sortDirection, dataKey, prev, current);
+            const comp = BoolHelper.compare(prev, current);
+            if (comp == 1 && sortDirection == SortDirection.BACKWARD)
+                return -1;
+            return comp;
+        });
+        this.setState({ activeData: data, lastSortColumn: dataKey });
+    }
+    renderTableBody() {
+        if (!this.state.activeData || this.state.isLoading)
+            return;
+        let data = this.state.activeData.slice(this.state.dataOffset, (this.props.rowsPerPage + this.state.dataOffset));
+        if (!data.length && !this.props.allowNoDataPagination)
+            data = this.state.activeData;
+        const children = ObjectHelper.flattenChildren(this.props.children);
+        const rowsContents = this.state.rowsContent;
+        const rows = data.map((data, index) => {
+            const row = index + 1;
+            const columns = children?.filter((child) => !child.props?.doNotRender)?.map((child, sindex) => {
+                return React.createElement(ColumnComponent, {
+                    ...(child.props),
+                    sortable: false,
+                    key: (child.props.key ?? child.props.dataKey ?? (child.props.header ? `${child.props.header}` : undefined) ?? sindex),
+                    rowControlOptions: {
+                        toggleContent: (() => {
+                            this.setState({ rowsContent: this.toggleRowContent(row, data) });
+                        }).bind(this)
+                    },
+                    value: (child.props.dataKey ? ObjectHelper.objectGetWithStringTemplate(data, child.props.dataKey) : data),
+                });
+            });
+            let valuedRowProps = this.buildRowProps(data);
+            return (React.createElement("tr", { key: `row-${index}`, role: "row", "data-n-group": "body-row", ...valuedRowProps, ref: (r) => {
+                    if (!r)
+                        return;
+                    if (!(row in rowsContents))
+                        return;
+                    if (!(row in this.rowContentElementMaps))
+                        this.rowContentElementMaps[row] = {};
+                    this.rowContentElementMaps[row].rowElement = r;
+                }, onClick: this.props.onRowSelection ? () => this.props.onRowSelection(data, index) : undefined }, columns));
+        });
+        return (React.createElement("tbody", { key: "body", className: "noseur-tbody", "data-n-group": "body" }, rows));
+    }
+    renderTableHeader() {
+        const children = ObjectHelper.flattenChildren(this.props.children);
+        const columns = children?.filter((child) => !child.props.doNotRender)?.map((child, index) => {
+            const cachedOnSort = child.props.onSort;
+            const onSort = (sortDirection) => {
+                if (cachedOnSort)
+                    cachedOnSort(sortDirection);
+                this.onSort(sortDirection, child.props.dataKey);
+            };
+            if (child.props.dataKey && !this.usedDataKeys.includes(child.props.dataKey))
+                this.usedDataKeys.push(child.props.dataKey);
+            let columnSelfRef;
+            if (child.props.sortable && this.props.sortMode + SortMode.MULTIPLE) {
+                const cachedManageRef = child.props.manageRef;
+                columnSelfRef = (r) => {
+                    if (cachedManageRef) {
+                        if (typeof cachedManageRef == "function")
+                            cachedManageRef(r);
+                        else
+                            cachedManageRef.current = r;
+                    }
+                    this.columnSelfRefs[child.props.dataKey] = r;
+                };
+            }
+            else {
+                columnSelfRef = child.props.manageRef;
+            }
+            return React.createElement(ColumnComponent, {
+                ...(child.props),
+                element: "th",
+                onSort: onSort,
+                template: undefined,
+                group: "column-header",
+                manageRef: columnSelfRef,
+                key: (child.props.key ?? child.props.dataKey ?? (child.props.header ? `${child.props.header}` : undefined) ?? index),
+                valueClassName: "noseur-column-header",
+                sortIcons: (this.props.sortIcons || child.props.sortIcons),
+                value: (typeof child.props.header == "function"
+                    ? child.props.header()
+                    : React.createElement("span", { className: "noseur-column-header-content" }, child.props.header || React.createElement("span", null, "\u00A0"))),
+            });
+        });
+        return (React.createElement("thead", { key: "header", className: "noseur-thead", "data-n-group": "header" },
+            React.createElement("tr", { role: "row", "data-n-group": "header-row" }, columns)));
+    }
+    renderTableFooter() {
+        let hasNoFooter = true;
+        const children = ObjectHelper.flattenChildren(this.props.children);
+        const columns = children?.map((child, index) => {
+            if (child.props.footer)
+                hasNoFooter = false;
+            return React.createElement(ColumnComponent, {
+                ...(child.props),
+                element: "th",
+                group: "column-footer",
+                key: (child.props.key ?? child.props.dataKey ?? (child.props.header ? `${child.props.header}` : undefined) ?? index),
+                valueClassName: "noseur-column-footer",
+                value: (typeof child.props.footer == "function"
+                    ? child.props.footer()
+                    : React.createElement("span", { className: "noseur-column-footer-content" }, child.props.footer || React.createElement("span", null, "\u00A0"))),
+            });
+        });
+        if (hasNoFooter)
+            return null;
+        return (React.createElement("tfoot", { key: "footer", className: "noseur-tfoot", "data-n-group": "footer" },
+            React.createElement("tr", { role: "row", "data-n-group": "footer-row" }, columns)));
+    }
+    renderTable(hasHeader, hasFooter) {
+        const props = {
+            id: this.props.id,
+            ...this.props.internalElementProps,
+        };
+        if (!this.props.children)
+            return null;
+        const tableBody = this.renderTableBody();
+        const tableFooter = this.renderTableFooter();
+        const tableHeader = this.props.hideHeaders ? null : this.renderTableHeader();
+        const className = Classname.build('noseur-data-container noseur-table', {
+            "noseur-disabled": this.props.disabled,
+            "noseur-data-striped": this.props.stripedRows,
+            "noseur-data-grid-h": !hasHeader && this.props.showGridLines,
+            "noseur-data-grid-f": !hasFooter && this.props.showGridLines && this.props.data?.length,
+        }, this.props.internalElementProps.className);
+        return (React.createElement("table", { ...props, role: "table", "data-n-group": "table", className: className, ref: this.props.forwardRef },
+            tableHeader,
+            tableBody,
+            tableFooter));
+    }
+    render() {
+        const props = {
+            key: this.props.key,
+            id: this.props.dataId,
+            style: this.props.style,
+        };
+        const emptyState = this.renderEmptyState();
+        const rowContents = this.renderRowContents();
+        const loadingState = this.renderLoadingState();
+        const header = this.renderFixtures(this.props.header, "noseur-data-header");
+        const footer = this.renderFixtures(this.props.footer, "noseur-data-footer");
+        const className = Classname.build('noseur-data-compound', {
+            "noseur-data-grid": this.props.showGridLines,
+            "noseur-data-no-divider": this.props.noDivider && !this.props.showGridLines,
+        }, this.props.className, (this.props.scheme ? `${this.props.scheme}-vars` : null));
+        const paginator = this.renderPaginator(!!footer);
+        const table = this.renderTable(!!header, !!footer);
+        return (React.createElement("div", { ...props, className: className, ref: (_) => this.resolveRowContentPositions() },
+            header,
+            table,
+            emptyState,
+            loadingState,
+            paginator,
+            footer,
+            rowContents));
+    }
+}
+export const Table = ({ ref, ...props }) => (React.createElement(TableComponent, { ...props, forwardRef: ref }));

package/dist/esm/form/Button.d.ts

@@ -0,0 +1,35 @@
+import "./Form.css";
+import React from 'react';
+import { Alignment } from '../constants/Alignment';
+import { ComponentBaseProps, LoadingProps } from '../core/ComponentBaseProps';
+import { NoseurButtonElement, NoseurElement, NoseurIconElement } from '../constants/Types';
+export type NoseurButtonOnClickHandler = React.EventHandler<NoseurButtonOnClickEvent>;
+export type NoseurButtonOnClickEvent = {
+    manageRef?: ButtonManageRef;
+} & React.MouseEvent<NoseurButtonElement>;
+export interface ButtonManageRef {
+    setLoadingState: (isLoading: boolean) => void;
+}
+export interface ButtonProps extends ComponentBaseProps<NoseurButtonElement, ButtonManageRef>, LoadingProps<ButtonProps> {
+    type: string;
+    link: string;
+    fill: boolean;
+    raised: boolean;
+    rounded: boolean;
+    iconOnly: boolean;
+    textOnly: boolean;
+    outlined: boolean;
+    linkTarget: string;
+    text: NoseurElement;
+    borderless: boolean;
+    fillOnHover: boolean;
+    fillLeftIcon: boolean;
+    rippleEffect: boolean;
+    leftIcon: NoseurIconElement;
+    rightIcon: NoseurIconElement;
+    leftIconRelativeAlignment: Alignment;
+    rightIconRelativeAlignment: Alignment;
+    onClick?: NoseurButtonOnClickHandler;
+}
+export declare const Button: ({ ref, ...props }: Partial<ButtonProps>) => React.JSX.Element;
+export declare function buildButtonControl(control: Partial<ButtonProps> | NoseurElement, customNonOverridingProps: Partial<ButtonProps>, cb?: (e: any) => void, className?: string): any;