@imposium-hub/components 1.44.3 → 1.45.0

package/dist/esm/components/button/Button.stories.js

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { ICON_PLUS } from '../../constants/icons';
+export default { title: 'Button' };
+const handleClick = action('button-click');
+export const sizes = () => React.createElement(React.Fragment, null,
+    React.createElement(Button, { onClick: handleClick }, "Default"),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick }, ICON_PLUS),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Button, { onClick: handleClick, size: 'large' }, "Large"),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, size: 'large' }, ICON_PLUS));
+export const styles = () => React.createElement(React.Fragment, null,
+    React.createElement(Button, { onClick: handleClick }, "Default"),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick }, ICON_PLUS),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Button, { onClick: handleClick, style: 'subtle' }, "Subtle"),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, style: 'subtle' }, ICON_PLUS),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Button, { onClick: handleClick, style: 'bold' }, "Bold"),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, style: 'bold' }, ICON_PLUS));
+export const colors = () => React.createElement(React.Fragment, null,
+    React.createElement("p", null, "Default"),
+    React.createElement(Button, { onClick: handleClick }, ICON_PLUS),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, style: 'subtle' }, ICON_PLUS),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, style: 'bold' }, ICON_PLUS),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement("p", null, "Primary"),
+    React.createElement(Button, { onClick: handleClick, color: 'primary' }, ICON_PLUS),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, color: 'primary', style: 'subtle' }, ICON_PLUS),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, color: 'primary', style: 'bold' }, ICON_PLUS),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement("p", null, "Secondary"),
+    React.createElement(Button, { onClick: handleClick, color: 'secondary' }, ICON_PLUS),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, color: 'secondary', style: 'subtle' }, ICON_PLUS),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, color: 'secondary', style: 'bold' }, ICON_PLUS),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement("p", null, "Danger"),
+    React.createElement(Button, { onClick: handleClick, color: 'danger' }, ICON_PLUS),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, color: 'danger', style: 'subtle' }, ICON_PLUS),
+    "\u00A0",
+    React.createElement(Button, { onClick: handleClick, color: 'danger', style: 'bold' }, ICON_PLUS),
+    React.createElement("br", null),
+    React.createElement("br", null));
+export const loading = () => React.createElement(React.Fragment, null,
+    React.createElement(Button, { onClick: handleClick, color: 'primary', size: 'large', loading: true }, "Loading"));
+export const tooltips = () => React.createElement(React.Fragment, null,
+    React.createElement(Button, { onClick: handleClick, tooltip: 'This is a default tooltip, automatically positioned', color: 'primary', size: 'large' }, "Default"),
+    React.createElement("br", null),
+    React.createElement(Button, { onClick: handleClick, customStyles: {
+            marginLeft: '300px'
+        }, tooltip: {
+            content: 'This is a custom tooltip, dark theme, left',
+            position: 'left',
+            theme: 'dark'
+        }, color: 'primary', size: 'large' }, "Custom 1"),
+    React.createElement("br", null),
+    React.createElement(Button, { onClick: handleClick, customStyles: {
+            marginLeft: '200px'
+        }, tooltip: {
+            content: 'This is another custom tooltip, bottom',
+            position: 'bottom'
+        }, color: 'primary', size: 'large' }, "Custom 2"),
+    React.createElement("br", null));
+//# sourceMappingURL=Button.stories.js.map

package/dist/esm/components/button/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/components/button/Button.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/button-group-field/ButtonGroupField.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface IButtonGroupOption {
+    value: string | boolean;
+    label?: any;
+    bgColor?: string;
+    icon?: any;
+    onDoubleClick?: (...args: any[]) => any;
+    tooltip?: IToolTipConfig | string;
+}
+interface IButtonGroupFieldProps {
+    label?: string;
+    width?: string | number;
+    value: string | boolean;
+    options: IButtonGroupOption[];
+    tooltip?: IToolTipConfig | string;
+    onChange(e: any): void;
+    info?: string;
+    labelPosition?: string;
+}
+declare class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
+    private clickTimeout;
+    private clickCounter;
+    constructor(p: IButtonGroupFieldProps);
+    private handleMultipleClicks;
+    render: () => JSX.Element;
+}
+export default ButtonGroupField;

package/dist/esm/components/button-group-field/ButtonGroupField.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import { renderTooltip, renderTooltipProps } from '../Tooltip';
+class ButtonGroupField extends React.PureComponent {
+    clickTimeout;
+    clickCounter = 0;
+    constructor(p) {
+        super(p);
+    }
+    handleMultipleClicks = (singleClick, doubleClick) => {
+        this.clickCounter++;
+        if (this.clickCounter === 1) {
+            this.clickTimeout = window.setTimeout(() => {
+                this.clickCounter = 0;
+                singleClick();
+            }, 300);
+        }
+        if (this.clickCounter === 2) {
+            clearTimeout(this.clickTimeout);
+            this.clickCounter = 0;
+            doubleClick();
+        }
+    };
+    render = () => {
+        const { value, label, options, width, tooltip, info, labelPosition } = this.props;
+        const optionStyle = { width: `${100 / options.length}%` };
+        return (React.createElement(FieldWrapper, { customClass: 'button-group-field', label: label, tooltip: tooltip, info: info, labelPosition: labelPosition, width: width },
+            React.createElement("div", { className: 'button-group' }, options.map((option, i) => {
+                const optionKey = option.value;
+                const optionLabel = option.label;
+                const icon = (option.icon) ? option.icon : null;
+                const tooltipId = `${optionKey}-${i}`;
+                const activeOption = (optionKey === value);
+                const activeClass = (activeOption) ? 'active' : '';
+                const onClick = (!activeOption) ? () => { this.props.onChange(optionKey); } : null;
+                return (React.createElement("div", { key: `option-${optionKey}`, style: optionStyle, className: `button-group-option ${activeClass}`, ...renderTooltipProps(tooltipId, option.tooltip), onClick: (typeof option.onDoubleClick === 'function')
+                        ? () => this.handleMultipleClicks(onClick, option.onDoubleClick)
+                        : onClick },
+                    (!icon) ? optionLabel : icon,
+                    renderTooltip(tooltipId, option.tooltip)));
+            }))));
+    };
+}
+export default ButtonGroupField;
+//# sourceMappingURL=ButtonGroupField.js.map

package/dist/esm/components/button-group-field/ButtonGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroupField.js","sourceRoot":"","sources":["../../../../src/components/button-group-field/ButtonGroupField.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/button-group-field/ButtonGroupField.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import ButtonGroupField from './ButtonGroupField';
+declare const _default: {
+    title: string;
+    component: typeof ButtonGroupField;
+};
+export default _default;
+export declare const defaultField: () => JSX.Element;

package/dist/esm/components/button-group-field/ButtonGroupField.stories.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import ButtonGroupField from './ButtonGroupField';
+export default {
+    title: 'ButtonGroupField',
+    component: ButtonGroupField,
+};
+const OVERLAY_ENGINE_TYPES = {
+    CHROMIUM: 'chromium',
+    PHANTOM: ''
+};
+const SAMPLE_OPTIONS = [
+    {
+        value: OVERLAY_ENGINE_TYPES.CHROMIUM,
+        label: 'Chromium'
+    },
+    {
+        value: OVERLAY_ENGINE_TYPES.PHANTOM,
+        label: 'Phantom'
+    }
+];
+export const defaultField = () => (React.createElement(ButtonGroupField, { label: 'Button Group', width: '300px', value: 'Default Value', options: SAMPLE_OPTIONS, tooltip: 'ButtonGroupField Tooltip', onChange: action('Field onChange'), info: 'This is some additional information about the field', labelPosition: 'center' }));
+//# sourceMappingURL=ButtonGroupField.stories.js.map

package/dist/esm/components/button-group-field/ButtonGroupField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroupField.stories.js","sourceRoot":"","sources":["../../../../src/components/button-group-field/ButtonGroupField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAGlD,eAAe;IACX,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,gBAAgB;CAC9B,CAAC;AAuBF,MAAM,oBAAoB,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,EAAE;CACd,CAAC;AAEF,MAAM,cAAc,GAAG;IACnB;QACI,KAAK,EAAE,oBAAoB,CAAC,QAAQ;QACpC,KAAK,EAAE,UAAU;KACpB;IACD;QACI,KAAK,EAAE,oBAAoB,CAAC,OAAO;QACnC,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAC9B,oBAAC,gBAAgB,IACb,KAAK,EAAG,cAAc,EACtB,KAAK,EAAI,OAAO,EAChB,KAAK,EAAG,eAAe,EACvB,OAAO,EAAI,cAAc,EACzB,OAAO,EAAG,0BAA0B,EACpC,QAAQ,EAAI,MAAM,CAAC,gBAAgB,CAAC,EACpC,IAAI,EAAG,qDAAqD,EAC5D,aAAa,EAAG,QAAQ,GACtB,CACT,CAAC"}

package/dist/esm/components/button-menu/ButtonMenu.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+interface IButtonMenuProps {
+    button: any;
+    items: any;
+    position: string;
+    isOpen?: boolean;
+    onClick?: (e: any) => string | void;
+}
+interface IButtonMenuState {
+    open: boolean;
+}
+declare class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState> {
+    private evtHandlers;
+    private toggleRef;
+    private menuRef;
+    constructor(props: any);
+    private handleClickOutside;
+    componentWillUnmount(): void;
+    toggleMenu(e: any): void;
+    renderItems(): any[];
+    renderMenu(): JSX.Element;
+    render(): JSX.Element;
+}
+export default ButtonMenu;

package/dist/esm/components/button-menu/ButtonMenu.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+class ButtonMenu extends React.PureComponent {
+    evtHandlers;
+    toggleRef;
+    menuRef;
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false
+        };
+        this.evtHandlers = {
+            toggleMenu: (e) => this.toggleMenu(e),
+            clickOutside: (e, isSelect) => this.handleClickOutside(e, isSelect)
+        };
+        this.toggleRef = React.createRef();
+        this.menuRef = React.createRef();
+    }
+    handleClickOutside(e, isSelect) {
+        const clickOnToggle = (this.toggleRef && this.toggleRef.current && this.toggleRef.current.contains(e.target)) ? true : false;
+        const menus = (this.menuRef && this.menuRef.current && this.menuRef.current.contains(e.target)) ? true : false;
+        if (!clickOnToggle && !isSelect) {
+            document.removeEventListener('click', this.evtHandlers.clickOutside);
+            this.setState({
+                open: false
+            });
+        }
+        if (isSelect && !menus) {
+            document.removeEventListener('click', this.evtHandlers.clickOutside);
+            this.setState({
+                open: false
+            });
+        }
+    }
+    componentWillUnmount() {
+        document.removeEventListener('click', this.evtHandlers.clickOutside);
+    }
+    toggleMenu(e) {
+        const { onClick } = this.props;
+        const newState = !this.state.open;
+        if (onClick) {
+            onClick(newState);
+        }
+        this.setState({
+            open: newState
+        }, () => {
+            if (this.state.open) {
+                document.addEventListener('click', (evt) => this.evtHandlers.clickOutside(evt, onClick ? true : undefined));
+            }
+            else {
+                document.removeEventListener('click', this.evtHandlers.clickOutside);
+            }
+        });
+    }
+    renderItems() {
+        const { items, isOpen } = this.props;
+        const newItems = [];
+        for (const item of items) {
+            // clone the menu items passed in, close the modal before calling onClick on each item
+            const newItem = React.cloneElement(item, {
+                onClick: (e) => {
+                    if (!this.props.isOpen) {
+                        document.removeEventListener('click', this.evtHandlers.clickOutside);
+                    }
+                    this.setState({
+                        open: isOpen ? isOpen : false
+                    }, () => {
+                        item.props.onClick(e);
+                    });
+                }
+            });
+            newItems.push(newItem);
+        }
+        return newItems;
+    }
+    renderMenu() {
+        const { position } = this.props;
+        const { open } = this.state;
+        if (open) {
+            return React.createElement("div", { className: `menu ${position}` }, this.renderItems());
+        }
+    }
+    render() {
+        const { button } = this.props;
+        const { open } = this.state;
+        // Clone the trigger button passed in and add an onClick listener
+        const trigger = React.cloneElement(button, {
+            buttonRef: this.toggleRef,
+            onClick: this.evtHandlers.toggleMenu,
+            active: open
+        });
+        return React.createElement("div", { ref: this.menuRef, className: 'button-menu' },
+            trigger,
+            this.renderMenu());
+    }
+}
+export default ButtonMenu;
+//# sourceMappingURL=ButtonMenu.js.map

package/dist/esm/components/button-menu/ButtonMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonMenu.js","sourceRoot":"","sources":["../../../../src/components/button-menu/ButtonMenu.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/button-menu/ButtonMenu.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import ButtonMenu from './ButtonMenu';
+declare const _default: {
+    title: string;
+    component: typeof ButtonMenu;
+};
+export default _default;
+export declare const rightButtonMenuWithButtonMenuItem: () => JSX.Element;

package/dist/esm/components/button-menu/ButtonMenu.stories.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import ButtonMenu from './ButtonMenu';
+import Button from '../button/Button';
+import ButtonMenuItem from './ButtonMenuItem';
+import { ICON_COPY, ICON_BARS } from '../../constants/icons';
+const menuItems = [
+    React.createElement(ButtonMenuItem, { key: 'duplicate', label: React.createElement("span", null,
+            ICON_COPY,
+            "\u00A0Duplicate"), onClick: action('CLICKED') }),
+    React.createElement(ButtonMenuItem, { key: 'delete', label: React.createElement("span", null,
+            ICON_BARS,
+            "\u00A0Trash"), onClick: action('CLICKED') })
+];
+export default {
+    title: 'ButtonMenu',
+    component: ButtonMenu
+};
+export const rightButtonMenuWithButtonMenuItem = () => (React.createElement(ButtonMenu, { position: 'right', items: menuItems, button: React.createElement(Button, { style: 'subtle' }, ICON_BARS) }));
+//# sourceMappingURL=ButtonMenu.stories.js.map

package/dist/esm/components/button-menu/ButtonMenu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonMenu.stories.js","sourceRoot":"","sources":["../../../../src/components/button-menu/ButtonMenu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAa3D,MAAM,SAAS,GAAG;IACd,oBAAC,cAAc,IACX,GAAG,EAAG,WAAW,EACjB,KAAK,EAAI;YAAO,SAAS;8BAAuB,EAChD,OAAO,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG;IACnC,oBAAC,cAAc,IACX,GAAG,EAAG,QAAQ,EACd,KAAK,EAAI;YAAO,SAAS;0BAAmB,EAC5C,OAAO,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG;CACtC,CAAC;AAEF,eAAe;IACX,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,UAAU;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,EAAE,CAAC,CACnD,oBAAC,UAAU,IACP,QAAQ,EAAG,OAAO,EAClB,KAAK,EAAI,SAAS,EAClB,MAAM,EAAI,oBAAC,MAAM,IAAC,KAAK,EAAG,QAAQ,IAAE,SAAS,CAAU,GACrD,CACT,CAAC"}

package/dist/esm/components/button-menu/ButtonMenuItem.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IButtonMenuItemProps {
+    label?: any;
+    onClick(e: any): void;
+    active?: boolean;
+}
+declare class ButtonMenuItem extends React.Component<IButtonMenuItemProps> {
+    constructor(props: any);
+    render(): JSX.Element;
+}
+export default ButtonMenuItem;

package/dist/esm/components/button-menu/ButtonMenuItem.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+class ButtonMenuItem extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { label, active } = this.props;
+        return React.createElement("div", { className: `button-menu-item ${active ? 'active' : null} `, onClick: (e) => this.props.onClick(e) }, label);
+    }
+}
+export default ButtonMenuItem;
+//# sourceMappingURL=ButtonMenuItem.js.map

package/dist/esm/components/button-menu/ButtonMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonMenuItem.js","sourceRoot":"","sources":["../../../../src/components/button-menu/ButtonMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAE9D,YAAY,KAAK;QAEb,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAEM,MAAM;QAET,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAEnC,OAAO,6BAAK,SAAS,EAAI,oBAAoB,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,OAAO,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAC3G,KAAK,CACL,CAAC;IACX,CAAC;CACJ;AAED,eAAe,cAAc,CAAC"}

package/dist/esm/components/card/Card.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+interface ICardProps {
+    collapsable?: boolean;
+    open?: boolean;
+    style?: string;
+    title: string | JSX.Element;
+    onOpen?: (e: any) => any;
+    onClose?: (e: any) => any;
+    onToggle?: (toggle: boolean) => any;
+}
+interface ICardState {
+    open: boolean;
+}
+declare class Card extends React.PureComponent<ICardProps, ICardState> {
+    private evtHandlers;
+    constructor(props: any);
+    private toggleOpen;
+    componentDidUpdate(prevProps: any): void;
+    renderTitle(style: any): JSX.Element;
+    renderContent(): JSX.Element;
+    render(): JSX.Element;
+    renderButtons(): JSX.Element;
+}
+export default Card;

package/dist/esm/components/card/Card.js

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import Button from '../button/Button';
+import { ICON_CARET_UP, ICON_CARET_DOWN } from '../../constants/icons';
+class Card extends React.PureComponent {
+    evtHandlers;
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: props.open
+        };
+        this.evtHandlers = {
+            toggleOpen: (e) => this.toggleOpen(e)
+        };
+    }
+    toggleOpen(e) {
+        e.persist();
+        e.preventDefault();
+        const { collapsable, onOpen, onClose } = this.props;
+        if (collapsable) {
+            if (typeof this.props.onToggle === 'function') {
+                this.props.onToggle(!this.state.open);
+            }
+            this.setState({
+                open: !this.state.open
+            }, () => {
+                if (this.state.open && onOpen) {
+                    onOpen(e);
+                }
+                else if (!this.state.open && onClose) {
+                    onClose(e);
+                }
+            });
+        }
+    }
+    componentDidUpdate(prevProps) {
+        const { open, collapsable } = this.props;
+        if (prevProps.open !== open) {
+            this.setState({
+                open
+            });
+        }
+    }
+    renderTitle(style) {
+        const { title } = this.props;
+        if (style === 'small') {
+            return React.createElement("p", null, title);
+        }
+        else if (style === 'large') {
+            return React.createElement("h1", null, title);
+        }
+        else {
+            return React.createElement("h2", null, title);
+        }
+    }
+    renderContent() {
+        const { open } = this.state;
+        if (open) {
+            return React.createElement("div", { className: 'card-content' }, this.props.children);
+        }
+    }
+    render() {
+        const { collapsable, title, style } = this.props;
+        const { open } = this.state;
+        const collapsableClass = (collapsable) ? 'collapsable' : '';
+        const openClass = (!open && collapsable) ? 'closed' : '';
+        const styleClass = (style) ? style : 'default';
+        return React.createElement("div", { className: `card ${openClass} ${collapsableClass} ${styleClass}` },
+            React.createElement("div", { className: 'card-header', onClick: this.evtHandlers.toggleOpen },
+                this.renderTitle(styleClass),
+                this.renderButtons()),
+            this.renderContent());
+    }
+    renderButtons() {
+        const { collapsable } = this.props;
+        const { open } = this.state;
+        const buttonIcon = (open)
+            ? ICON_CARET_UP
+            : ICON_CARET_DOWN;
+        if (collapsable) {
+            return React.createElement("div", { className: 'header-buttons' },
+                React.createElement(Button, { style: 'subtle', onClick: this.evtHandlers.toggleOpen }, buttonIcon));
+        }
+    }
+}
+export default Card;
+//# sourceMappingURL=Card.js.map

package/dist/esm/components/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/card/Card.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import Card from './Card';
+declare const _default: {
+    title: string;
+    component: typeof Card;
+};
+export default _default;
+export declare const defaultCard: () => JSX.Element;

package/dist/esm/components/card/Card.stories.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import TextField from '../text-field/TextField';
+import NumberField from '../number-field/NumberField';
+import Card from './Card';
+export default {
+    title: 'Card',
+    component: Card
+};
+export const defaultCard = () => (React.createElement(Card, { title: 'Card', open: true, collapsable: false },
+    React.createElement(TextField, { label: 'TextField', tooltip: 'TOOLTIP', value: 'name', width: '33%', onChange: action('CLICKED') }),
+    React.createElement(NumberField, { label: 'NumberField', tooltip: 'TOOLTIP', width: '33%', readOnly: true, value: 1, onChange: action('CLICKED') })));
+//# sourceMappingURL=Card.stories.js.map

package/dist/esm/components/card/Card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAc1B,eAAe;IACX,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CAC7B,oBAAC,IAAI,IACL,KAAK,EAAG,MAAM,EACd,IAAI,EAAI,IAAI,EACZ,WAAW,EAAI,KAAK;IAChB,oBAAC,SAAS,IACN,KAAK,EAAI,WAAW,EACpB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAI,MAAM,EACf,KAAK,EAAG,KAAK,EACb,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG;IACpC,oBAAC,WAAW,IACR,KAAK,EAAI,aAAa,EACtB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAG,KAAK,EACb,QAAQ,EAAI,IAAI,EAChB,KAAK,EAAI,CAAC,EACV,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAC3B,CACH,CACV,CAAC"}

package/dist/esm/components/checkbox-field/CheckboxField.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface ICheckboxFieldProps {
+    label?: string;
+    value: boolean;
+    width?: string | number;
+    tooltip?: IToolTipConfig | string;
+    propagate?: boolean;
+    onChange(v: any, e: any): void;
+    info?: string;
+    labelPosition?: string;
+}
+declare class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
+    constructor(props: any);
+    private toggle;
+    render(): JSX.Element;
+}
+export default CheckboxField;

package/dist/esm/components/checkbox-field/CheckboxField.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import { ICON_CHECK } from '../../constants/icons';
+class CheckboxField extends React.PureComponent {
+    constructor(props) {
+        super(props);
+    }
+    toggle(e) {
+        if (!this.props.propagate) {
+            e.stopPropagation();
+        }
+        this.props.onChange(!this.props.value, e);
+    }
+    render() {
+        const { value, label, width, tooltip, info, labelPosition } = this.props;
+        const icon = (value === true) ? ICON_CHECK : null;
+        return React.createElement(FieldWrapper, { customClass: 'checkbox-field', label: label, tooltip: tooltip, info: info, labelPosition: labelPosition, width: width },
+            React.createElement("div", { className: 'checkbox', onClick: (e) => this.toggle(e) }, icon));
+    }
+}
+export default CheckboxField;
+//# sourceMappingURL=CheckboxField.js.map

package/dist/esm/components/checkbox-field/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../../src/components/checkbox-field/CheckboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAanD,MAAM,aAAc,SAAQ,KAAK,CAAC,aAAkC;IAEhE,YAAY,KAAK;QAEb,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAEO,MAAM,CAAC,CAAC;QACZ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACvB,CAAC,CAAC,eAAe,EAAE,CAAC;SACvB;QACD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC9C,CAAC;IAEM,MAAM;QAET,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACvE,MAAM,IAAI,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;QAElD,OAAO,oBAAC,YAAY,IAChB,WAAW,EAAG,gBAAgB,EAC9B,KAAK,EAAI,KAAK,EACd,OAAO,EAAI,OAAO,EAClB,IAAI,EAAI,IAAI,EACZ,aAAa,EAAI,aAAa,EAC9B,KAAK,EAAI,KAAK;YACd,6BAAK,SAAS,EAAG,UAAU,EAAC,OAAO,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IACvD,IAAI,CACH,CACK,CAAC;IACpB,CAAC;CACJ;AAED,eAAe,aAAa,CAAC"}

package/dist/esm/components/checkbox-field/CheckboxField.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import CheckBoxField from './CheckboxField';
+declare const _default: {
+    title: string;
+    component: typeof CheckBoxField;
+};
+export default _default;
+export declare const defaultCheckboxField: () => JSX.Element;

package/dist/esm/components/checkbox-field/CheckboxField.stories.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useState } from 'react';
+import CheckBoxField from './CheckboxField';
+export default {
+    title: 'CheckBoxField',
+    component: CheckBoxField
+};
+export const defaultCheckboxField = () => {
+    const [clicked, setClicked] = useState(true);
+    return (React.createElement(CheckBoxField, { width: '300px', label: 'Checkbox Field', tooltip: 'TOOLTIP', value: clicked, onChange: () => setClicked(!clicked) }));
+};
+//# sourceMappingURL=CheckboxField.stories.js.map

package/dist/esm/components/checkbox-field/CheckboxField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.stories.js","sourceRoot":"","sources":["../../../../src/components/checkbox-field/CheckboxField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/B,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAe5C,eAAe;IACX,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,aAAa;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACH,oBAAC,aAAa,IACV,KAAK,EAAI,OAAO,EAChB,KAAK,EAAI,gBAAgB,EACzB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAI,OAAO,EAChB,QAAQ,EAAI,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,GAAG,CAChD,CAAC;AACN,CAAC,CAAC"}