@imposium-hub/components 1.44.4 → 1.45.0

package/dist/esm/components/media-variable-field/MediaVariableField.js

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import Spinner from '../spinner/Spinner';
+import { VARIABLE_TYPES } from '../../constants/variables';
+import AssetsTableDropzone from '../assets/AssetsTableDropzone';
+import Button from '../button/Button';
+import { ICON_TIMES } from '../../constants/icons';
+class MediaVariableField extends React.PureComponent {
+    input;
+    evtHandlers;
+    constructor(props) {
+        super(props);
+        this.input = React.createRef();
+        this.state = {
+            processing: false,
+            processedFile: null
+        };
+        this.evtHandlers = {
+            fileUpload: (e) => this.fileUploaded(e),
+            fileDrop: (i, m) => this.onFileDrop(i, m),
+            clearSelection: (e) => this.clearSelection(e),
+            click: () => this.onClick()
+        };
+    }
+    clearSelection(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onChange(null);
+    }
+    fileUploaded(e) {
+        const files = e.target.files;
+        const file = files[0];
+        if (file) {
+            this.props.onChange(file);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.value !== this.props.value) {
+            this.checkFile();
+        }
+    }
+    componentDidMount() {
+        this.checkFile();
+    }
+    checkFile() {
+        const { value } = this.props;
+        if (value instanceof File) {
+            this.setState({
+                processing: true,
+                processedFile: null
+            }, () => {
+                const fr = new FileReader();
+                fr.onload = () => {
+                    this.setState({
+                        processing: false,
+                        processedFile: fr.result
+                    });
+                };
+                fr.readAsDataURL(value);
+            });
+        }
+    }
+    renderFields() {
+        const { processing, processedFile } = this.state;
+        const { type, value } = this.props;
+        const isFile = (value instanceof File);
+        let src;
+        if (value) {
+            if (isFile) {
+                if (processing) {
+                    return React.createElement(Spinner, null);
+                }
+                else {
+                    src = processedFile;
+                }
+            }
+            else {
+                src = value;
+            }
+            switch (type.toLowerCase()) {
+                case VARIABLE_TYPES.IMAGE:
+                    return React.createElement("img", { className: 'default-preview', src: src });
+                case VARIABLE_TYPES.VIDEO:
+                    return React.createElement("video", { className: 'default-preview', src: src, controls: true });
+                case VARIABLE_TYPES.AUDIO:
+                    return React.createElement("audio", { className: 'default-preview', src: src, controls: true });
+            }
+        }
+        else {
+            return null;
+        }
+    }
+    getInputFilter() {
+        const { type, value } = this.props;
+        switch (type) {
+            case VARIABLE_TYPES.IMAGE:
+                return 'image/*';
+            case VARIABLE_TYPES.VIDEO:
+                return 'video/*';
+            case VARIABLE_TYPES.AUDIO:
+                return 'audio/*';
+        }
+    }
+    onClick() {
+        const input = this.input.current;
+        const { processing } = this.state;
+        if (input && !processing) {
+            input.click();
+        }
+    }
+    renderClearButton() {
+        const { value } = this.props;
+        if (value) {
+            return React.createElement(Button, { onClick: this.evtHandlers.clearSelection }, ICON_TIMES);
+        }
+    }
+    onFileDrop(i, monitor) {
+        const { files } = monitor.getItem();
+        const file = files[0];
+        if (file) {
+            this.props.onChange(file);
+        }
+    }
+    render() {
+        const { processing } = this.state;
+        const accept = this.getInputFilter();
+        return React.createElement(React.Fragment, null,
+            React.createElement("input", { type: 'file', accept: accept, style: { display: 'none' }, ref: this.input, onChange: this.evtHandlers.fileUpload }),
+            React.createElement(AssetsTableDropzone, { onDrop: this.evtHandlers.fileDrop, disable: processing },
+                React.createElement("div", { className: 'variable-default-upload', onClick: this.evtHandlers.click },
+                    this.renderFields(),
+                    React.createElement("div", { className: 'btn-wrapper' }, this.renderClearButton()))));
+    }
+}
+export default MediaVariableField;
+//# sourceMappingURL=MediaVariableField.js.map

package/dist/esm/components/media-variable-field/MediaVariableField.js.map

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

package/dist/esm/components/modal/Modal.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface IModalProps {
+    children?: any;
+    isOpen: boolean;
+    style?: any;
+    wrapperStyle?: any;
+    onRequestClose(e: any): void;
+}
+declare class Modal extends React.PureComponent<IModalProps> {
+    private evtHandlers;
+    private closeStyles;
+    constructor(props: any);
+    private onClose;
+    render(): JSX.Element;
+}
+export default Modal;

package/dist/esm/components/modal/Modal.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Button from '../button/Button';
+import { ICON_TIMES } from '../../constants/icons';
+class Modal extends React.PureComponent {
+    evtHandlers;
+    closeStyles = {
+        position: 'absolute',
+        right: '0px',
+        top: '0px'
+    };
+    constructor(props) {
+        super(props);
+        this.evtHandlers = {
+            onClose: (e) => this.onClose(e)
+        };
+    }
+    onClose(e) {
+        const { onRequestClose } = this.props;
+        onRequestClose(e);
+    }
+    render() {
+        const { isOpen, children, style, wrapperStyle } = this.props;
+        if (isOpen) {
+            return React.createElement("div", { className: `modal`, style: wrapperStyle },
+                React.createElement("div", { className: 'modal-bg', onClick: this.evtHandlers.onClose }),
+                React.createElement("div", { className: 'modal-container', style: style },
+                    React.createElement("div", { className: 'modal-content' }, this.props.children),
+                    React.createElement(Button, { onClick: this.evtHandlers.onClose, customStyles: this.closeStyles }, ICON_TIMES)));
+        }
+        else {
+            return null;
+        }
+    }
+}
+export default Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/esm/components/modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAUnD,MAAM,KAAM,SAAQ,KAAK,CAAC,aAA0B;IAExC,WAAW,CAAO;IAClB,WAAW,GAAG;QAClB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,KAAK;KACb,CAAC;IAEF,YAAY,KAAK;QAEb,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,WAAW,GAAG;YACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SAClC,CAAC;IACN,CAAC;IAEO,OAAO,CAAC,CAAC;QAEb,MAAM,EAAC,cAAc,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAEpC,cAAc,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAEM,MAAM;QAET,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAE3D,IAAI,MAAM,EAAE;YACR,OAAO,6BAAK,SAAS,EAAI,OAAO,EAAE,KAAK,EAAI,YAAY;gBACnD,6BAAK,SAAS,EAAG,UAAU,EAAC,OAAO,EAAI,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG;gBAClE,6BAAK,SAAS,EAAG,iBAAiB,EAAC,KAAK,EAAI,KAAK;oBAC7C,6BAAK,SAAS,EAAG,eAAe,IAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAClB;oBACN,oBAAC,MAAM,IACH,OAAO,EAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EACnC,YAAY,EAAI,IAAI,CAAC,WAAW,IAC/B,UAAU,CACN,CACP,CACJ,CAAC;SACV;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;CACJ;AAED,eAAe,KAAK,CAAC"}

package/dist/esm/components/modal/Modal.stories.d.ts

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

package/dist/esm/components/modal/Modal.stories.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Modal from './Modal';
+import Button from '../button/Button';
+export default {
+    title: 'Modal',
+    component: Modal
+};
+export const defaultModal = () => {
+    const [open, setOpen] = React.useState(false);
+    const dropdownToggleRef = React.useRef(null);
+    const handleModalOpen = () => {
+        setOpen(!open);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setOpen(!open), ref: dropdownToggleRef }, "Modal Button"),
+        React.createElement(Modal, { onRequestClose: handleModalOpen, wrapperStyle: {
+                top: '50px',
+                left: '0px',
+                width: '100%',
+                height: `calc(100% - 50px)`
+            }, style: {
+                width: '600px',
+                height: '70%',
+                top: '10%',
+                left: 'calc((100% - 600px) / 2)'
+            }, isOpen: open }, "Modal Content")));
+};
+//# sourceMappingURL=Modal.stories.js.map

package/dist/esm/components/modal/Modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../src/components/modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,eAAe;IACX,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,KAAK;CACnB,CAAC;AAUF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACH;QACI,oBAAC,MAAM,IAAC,OAAO,EAAI,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,EAAI,iBAAiB,mBAExD;QACT,oBAAC,KAAK,IACF,cAAc,EAAG,eAAe,EAChC,YAAY,EAAI;gBACZ,GAAG,EAAE,MAAM;gBACX,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,mBAAmB;aAC9B,EACD,KAAK,EAAI;gBACL,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,KAAK;gBACb,GAAG,EAAE,KAAK;gBACV,IAAI,EAAE,0BAA0B;aACnC,EACD,MAAM,EAAI,IAAI,oBAGV,CACT,CACN,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/no-access/NoAccess.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface INoAccessProps {
+    type: 'request' | 'restrict';
+}
+declare const NoAccess: React.FC<INoAccessProps>;
+export default NoAccess;

package/dist/esm/components/no-access/NoAccess.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
+const MAIL_TO = 'mailto:info@imposium.com?subject=My access to Imposium is restricted';
+const REQUEST_ACCESS_TITLE = 'You don\'t have access to Imposium yet';
+const REQUEST_HREF_COPY = 'Request Access';
+const RESTRICTED_ACCESS_TITLE = 'Service not found';
+const NoAccess = (p) => {
+    if (!p.type) {
+        throw new Error('NoAccess requires a type of either: request or restrict');
+    }
+    const isRequest = (p.type === 'request');
+    return (React.createElement("div", { className: 'no-access' },
+        (isRequest)
+            ? React.createElement(FontAwesomeIcon, { icon: faUserLock, size: '6x' })
+            : React.createElement(FontAwesomeIcon, { icon: faExclamationTriangle, size: '6x' }),
+        React.createElement("div", { className: 'no-access-copy' },
+            React.createElement("h1", { className: 'no-access-heading' }, (isRequest) ? REQUEST_ACCESS_TITLE : RESTRICTED_ACCESS_TITLE),
+            (isRequest) && React.createElement("a", { href: MAIL_TO }, REQUEST_HREF_COPY))));
+};
+export default NoAccess;
+//# sourceMappingURL=NoAccess.js.map

package/dist/esm/components/no-access/NoAccess.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoAccess.js","sourceRoot":"","sources":["../../../../src/components/no-access/NoAccess.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yDAAyD,CAAC;AAMhG,MAAM,OAAO,GAAY,sEAAsE,CAAC;AAChG,MAAM,oBAAoB,GAAY,wCAAwC,CAAC;AAC/E,MAAM,iBAAiB,GAAY,gBAAgB,CAAC;AACpD,MAAM,uBAAuB,GAAY,mBAAmB,CAAC;AAE7D,MAAM,QAAQ,GAA8B,CAAC,CAAkB,EAAE,EAAE;IAC/D,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;QACT,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;KAC9E;IAED,MAAM,SAAS,GAAa,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;IAEnD,OAAO,CACH,6BAAK,SAAS,EAAG,WAAW;QAEpB,CAAC,SAAS,CAAC;YACP,CAAC,CAAC,oBAAC,eAAe,IAAC,IAAI,EAAI,UAAU,EAAE,IAAI,EAAG,IAAI,GAAG;YACrD,CAAC,CAAC,oBAAC,eAAe,IAAC,IAAI,EAAI,qBAAqB,EAAE,IAAI,EAAG,IAAI,GAAG;QAGxE,6BAAK,SAAS,EAAG,gBAAgB;YAC7B,4BAAI,SAAS,EAAG,mBAAmB,IAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,uBAAuB,CAAM;YACtG,CAAC,SAAS,CAAC,IAAI,2BAAG,IAAI,EAAI,OAAO,IAAG,iBAAiB,CAAK,CACzD,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/components/number-field/NumberField.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface INumberFieldProps {
+    buttons?: any;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: number;
+    tooltip?: IToolTipConfig | string;
+    width?: string | number;
+    onChange?(e: any): void;
+    info?: string;
+    labelPosition?: string;
+    min?: number;
+    max?: number;
+}
+declare class NumberField extends React.PureComponent<INumberFieldProps> {
+    private inputRef;
+    constructor(props: any);
+    private onChange;
+    private onSelectFocus;
+    private onSelectBlur;
+    private handleLabelDrag;
+    render(): JSX.Element;
+}
+export default NumberField;

package/dist/esm/components/number-field/NumberField.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+class NumberField extends React.PureComponent {
+    inputRef;
+    constructor(props) {
+        super(props);
+        this.inputRef = React.createRef();
+    }
+    onChange(e) {
+        // return null vs an empty string
+        let val = e.target.value;
+        if (val === '') {
+            val = null;
+        }
+        else {
+            val = parseFloat(val);
+        }
+        this.props.onChange(val);
+    }
+    onSelectFocus() {
+        // if (this.props.value && this.inputRef.current) {
+        //     this.inputRef.current.setSelectionRange(0, this.props.value.toString().length);
+        // }
+    }
+    onSelectBlur() {
+        // if (this.inputRef.current) {
+        //     this.inputRef.current.setSelectionRange(0, 0);
+        // }
+    }
+    handleLabelDrag(v) {
+        const newVal = this.props.value + v;
+        this.props.onChange(newVal);
+    }
+    render() {
+        const { label, placeholder, width, readOnly, buttons, tooltip, info, labelPosition, min, max } = this.props;
+        let value = this.props.value;
+        if (value === null) {
+            value = '';
+        }
+        return React.createElement(FieldWrapper, { customClass: 'number-field', 
+            // draggableValue = {true}
+            // onDrag = {(v)=>this.handleLabelDrag(v)}
+            label: label, tooltip: tooltip, buttons: buttons, info: info, labelPosition: labelPosition, width: width },
+            React.createElement("input", { ref: this.inputRef, type: 'number', pattern: '/^-?(0|[1-9]d*)(.d+)?$/', placeholder: placeholder, value: value, readOnly: readOnly, min: min, max: max, onFocus: () => this.onSelectFocus(), onBlur: () => this.onSelectBlur(), onChange: (e) => this.onChange(e) }));
+    }
+}
+export default NumberField;
+//# sourceMappingURL=NumberField.js.map

package/dist/esm/components/number-field/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../../src/components/number-field/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,MAAM,+BAA+B,CAAC;AAkBzD,MAAM,WAAY,SAAQ,KAAK,CAAC,aAAgC;IAEpD,QAAQ,CAAO;IAEvB,YAAY,KAAK;QAEb,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACtC,CAAC;IAEO,QAAQ,CAAC,CAAC;QAEd,iCAAiC;QACjC,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACzB,IAAI,GAAG,KAAK,EAAE,EAAE;YACZ,GAAG,GAAG,IAAI,CAAC;SACd;aAAM;YACH,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;SACzB;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAEO,aAAa;QAEjB,mDAAmD;QACnD,sFAAsF;QACtF,IAAI;IACR,CAAC;IAEO,YAAY;QAEhB,+BAA+B;QAC/B,qDAAqD;QACrD,IAAI;IACR,CAAC;IAEO,eAAe,CAAC,CAAU;QAE9B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAEM,MAAM;QAET,MAAM,EAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1G,IAAI,KAAK,GAAS,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QACnC,IAAI,KAAK,KAAK,IAAI,EAAE;YAAE,KAAK,GAAG,EAAE,CAAC;SAAE;QAEnC,OAAO,oBAAC,YAAY,IAChB,WAAW,EAAG,cAAc;YAC5B,0BAA0B;YAC1B,0CAA0C;YAC1C,KAAK,EAAI,KAAK,EACd,OAAO,EAAI,OAAO,EAClB,OAAO,EAAI,OAAO,EAClB,IAAI,EAAI,IAAI,EACZ,aAAa,EAAI,aAAa,EAC9B,KAAK,EAAI,KAAK;YACd,+BACI,GAAG,EAAI,IAAI,CAAC,QAAQ,EACpB,IAAI,EAAG,QAAQ,EACf,OAAO,EAAE,yBAA4B,EACrC,WAAW,EAAI,WAAW,EAC1B,KAAK,EAAI,KAAK,EACd,QAAQ,EAAI,QAAQ,EACpB,GAAG,EAAI,GAAG,EACV,GAAG,EAAI,GAAG,EACV,OAAO,EAAI,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACrC,MAAM,EAAI,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EACnC,QAAQ,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAChC,CAAC;IACpB,CAAC;CACJ;AAED,eAAe,WAAW,CAAC"}

package/dist/esm/components/number-field/NumberField.stories.d.ts

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

package/dist/esm/components/number-field/NumberField.stories.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import NumberField from './NumberField';
+export default {
+    title: 'NumberField',
+    component: NumberField
+};
+export const defaultNumberField = () => {
+    const [number, setNumber] = React.useState(0);
+    const handleChange = (e) => {
+        if (e.target.value) {
+            setNumber(e.target.value);
+        }
+    };
+    return (React.createElement(NumberField, { label: 'Number Field', tooltip: 'TOOLTIP', width: '33%', value: number, onChange: handleChange }));
+};
+//# sourceMappingURL=NumberField.stories.js.map

package/dist/esm/components/number-field/NumberField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.stories.js","sourceRoot":"","sources":["../../../../src/components/number-field/NumberField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,eAAe;IACX,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,WAAW;CACzB,CAAC;AAiBF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAE,MAAM,EAAE,SAAS,CAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhD,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,EAAE;QACvB,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAChB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC7B;IACL,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,WAAW,IACR,KAAK,EAAI,cAAc,EACvB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAG,KAAK,EACb,KAAK,EAAI,MAAM,EACf,QAAQ,EAAI,YAAY,GACtB,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/players/AudioPlayer.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface IImagePlayerProps {
+    url: string;
+    height?: number;
+    width?: number;
+    padding?: number;
+    active?: boolean;
+}
+declare class ImagePlayer extends React.PureComponent<IImagePlayerProps, undefined> {
+    private audioNode;
+    private width;
+    private height;
+    constructor(props: any);
+    getImageStyle(): any;
+    render(): JSX.Element;
+}
+export default ImagePlayer;

package/dist/esm/components/players/AudioPlayer.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DEFAULT_PADDING } from '../../constants/player';
+import { getPlayerStyle } from './VideoPlayer';
+class ImagePlayer extends React.PureComponent {
+    audioNode;
+    width = 1280;
+    height = 720;
+    constructor(props) {
+        super(props);
+        this.audioNode = React.createRef();
+    }
+    getImageStyle() {
+        const { padding, width, height } = this.props;
+        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
+        return getPlayerStyle(width, height, this.width, this.height, pad);
+    }
+    render() {
+        const { url, active } = this.props;
+        if (active !== false) {
+            return (React.createElement("div", { className: 'media-player' },
+                React.createElement("div", { className: 'inner-viewer', style: this.getImageStyle() },
+                    React.createElement("audio", { controls: true, src: url, ref: this.audioNode }))));
+        }
+        else {
+            return null;
+        }
+    }
+}
+export default ImagePlayer;
+//# sourceMappingURL=AudioPlayer.js.map

package/dist/esm/components/players/AudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.js","sourceRoot":"","sources":["../../../../src/components/players/AudioPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAU/C,MAAM,WAAY,SAAQ,KAAK,CAAC,aAA2C;IAE/D,SAAS,CAAO;IAChB,KAAK,GAAG,IAAI,CAAC;IACb,MAAM,GAAG,GAAG,CAAC;IAErB,YAAY,KAAK;QAEb,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACvC,CAAC;IAEM,aAAa;QAEhB,MAAM,EAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,MAAM,GAAG,GAAG,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;QAEhE,OAAO,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvE,CAAC;IAEM,MAAM;QAET,MAAM,EAAC,GAAG,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAEjC,IAAI,MAAM,KAAK,KAAK,EAAE;YAClB,OAAO,CACH,6BAAK,SAAS,EAAG,cAAc;gBAC3B,6BAAK,SAAS,EAAG,cAAc,EAAC,KAAK,EAAI,IAAI,CAAC,aAAa,EAAE;oBACzD,+BAAO,QAAQ,QAAC,GAAG,EAAI,GAAG,EAAE,GAAG,EAAI,IAAI,CAAC,SAAS,GAAG,CAClD,CACJ,CACT,CAAC;SACL;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;CACJ;AAED,eAAe,WAAW,CAAC"}

package/dist/esm/components/players/ImagePlayer.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+interface IImagePlayerProps {
+    url: string;
+    height?: number;
+    width?: number;
+    padding?: number;
+    active?: boolean;
+}
+interface IImagePlayerState {
+    imageWidth: number;
+    imageHeight: number;
+}
+declare class ImagePlayer extends React.PureComponent<IImagePlayerProps, IImagePlayerState> {
+    private imgNode;
+    constructor(props: any);
+    getImageStyle(): any;
+    private metadataLoaded;
+    render(): JSX.Element;
+}
+export default ImagePlayer;

package/dist/esm/components/players/ImagePlayer.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { DEFAULT_PADDING } from '../../constants/player';
+import { getPlayerStyle } from './VideoPlayer';
+class ImagePlayer extends React.PureComponent {
+    imgNode;
+    constructor(props) {
+        super(props);
+        this.state = {
+            imageHeight: 1080,
+            imageWidth: 1920
+        };
+        this.imgNode = React.createRef();
+    }
+    getImageStyle() {
+        const { imageHeight, imageWidth } = this.state;
+        const { padding, width, height } = this.props;
+        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
+        if (imageHeight && imageWidth) {
+            return getPlayerStyle(width, height, imageWidth, imageHeight, pad, imageWidth, imageHeight);
+        }
+        return {};
+    }
+    metadataLoaded(e) {
+        this.setState({
+            imageWidth: e.target.naturalWidth,
+            imageHeight: e.target.naturalHeight
+        });
+    }
+    render() {
+        const { url, active } = this.props;
+        if (active !== false) {
+            return (React.createElement("div", { className: 'media-player' },
+                React.createElement("div", { className: 'inner-viewer', style: this.getImageStyle() },
+                    React.createElement("img", { onLoad: (e) => this.metadataLoaded(e), src: url, ref: this.imgNode }))));
+        }
+        else {
+            return null;
+        }
+    }
+}
+export default ImagePlayer;
+//# sourceMappingURL=ImagePlayer.js.map

package/dist/esm/components/players/ImagePlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePlayer.js","sourceRoot":"","sources":["../../../../src/components/players/ImagePlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAe/C,MAAM,WAAY,SAAQ,KAAK,CAAC,aAAmD;IAEvE,OAAO,CAAO;IAEtB,YAAY,KAAK;QAEb,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG;YACT,WAAW,EAAG,IAAI;YAClB,UAAU,EAAG,IAAI;SACpB,CAAC;QAEF,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACrC,CAAC;IAEM,aAAa;QAEhB,MAAM,EAAC,WAAW,EAAE,UAAU,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7C,MAAM,EAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,MAAM,GAAG,GAAG,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;QAEhE,IAAI,WAAW,IAAI,UAAU,EAAE;YAC3B,OAAO,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;SAC/F;QAED,OAAO,EAAE,CAAC;IACd,CAAC;IAEO,cAAc,CAAC,CAAC;QAEpB,IAAI,CAAC,QAAQ,CAAC;YACV,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY;YACjC,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa;SACtC,CAAC,CAAC;IACP,CAAC;IAEM,MAAM;QAET,MAAM,EAAC,GAAG,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAEjC,IAAI,MAAM,KAAK,KAAK,EAAE;YAClB,OAAO,CACH,6BAAK,SAAS,EAAG,cAAc;gBAC3B,6BAAK,SAAS,EAAG,cAAc,EAAC,KAAK,EAAI,IAAI,CAAC,aAAa,EAAE;oBACzD,6BAAK,MAAM,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,GAAG,EAAI,GAAG,EAAE,GAAG,EAAI,IAAI,CAAC,OAAO,GAAG,CAC9E,CACJ,CACT,CAAC;SACL;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;CACJ;AAED,eAAe,WAAW,CAAC"}

package/dist/esm/components/players/ImagePreview.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface IImagePreviewProps {
+    showMedia: boolean;
+    url: string;
+    playbackSettings?: any;
+    style?: React.CSSProperties | any;
+    onRequestClose?(e: any): void;
+}
+interface IImagePreviewState {
+    loaded: boolean;
+}
+declare class ImagePreview extends React.PureComponent<IImagePreviewProps, IImagePreviewState> {
+    private imageNode;
+    private evtHandlers;
+    constructor(props: any);
+    private onClose;
+    render(): JSX.Element;
+}
+export default ImagePreview;

package/dist/esm/components/players/ImagePreview.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Portal from '../portal/Portal';
+import { ICON_TIMES } from '../../constants/icons';
+import Button from '../button/Button';
+import { assets as copy } from '../../constants/copy';
+class ImagePreview extends React.PureComponent {
+    imageNode = null;
+    evtHandlers;
+    constructor(props) {
+        super(props);
+        this.imageNode = React.createRef();
+        this.evtHandlers = {
+            onClose: (e) => this.onClose(e)
+        };
+        this.state = {
+            loaded: false
+        };
+    }
+    onClose(e) {
+        const { onRequestClose } = this.props;
+        onRequestClose(e);
+    }
+    render() {
+        const { showMedia, url, style } = this.props;
+        const { loaded } = this.state;
+        if (showMedia) {
+            return (React.createElement(Portal, { id: 'portal-root' },
+                React.createElement("div", { style: { ...style }, className: 'close-icon-preview' },
+                    React.createElement(Button, { key: 'btn-filter', onClick: this.evtHandlers.onClose, size: 'large', style: 'subtle', tooltip: copy.field.tooltipFilter }, ICON_TIMES)),
+                React.createElement("img", { onLoad: () => this.setState({ loaded: true }), src: url, ref: this.imageNode, className: `media-preview ${!loaded ? 'hidden' : ''}`, style: style })));
+        }
+        else {
+            return null;
+        }
+    }
+}
+export default ImagePreview;
+//# sourceMappingURL=ImagePreview.js.map

package/dist/esm/components/players/ImagePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../../src/components/players/ImagePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAC,MAAM,IAAI,IAAI,EAAC,MAAM,sBAAsB,CAAC;AAapD,MAAM,YAAa,SAAQ,KAAK,CAAC,aAAqD;IAC1E,SAAS,GAAS,IAAI,CAAC;IACvB,WAAW,CAAO;IAC1B,YAAY,KAAK;QACb,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;QACnC,IAAI,CAAC,WAAW,GAAG;YACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SAClC,CAAC;QACF,IAAI,CAAC,KAAK,GAAG;YACT,MAAM,EAAE,KAAK;SAChB,CAAC;IACN,CAAC;IAEO,OAAO,CAAC,CAAC;QAEb,MAAM,EAAC,cAAc,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAEpC,cAAc,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAEM,MAAM;QACT,MAAM,EAAC,SAAS,EAAE,GAAG,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3C,MAAM,EAAC,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5B,IAAI,SAAS,EAAE;YACX,OAAO,CACH,oBAAC,MAAM,IAAC,EAAE,EAAC,aAAa;gBACpB,6BAAK,KAAK,EAAE,EAAC,GAAG,KAAK,EAAC,EAAE,SAAS,EAAE,oBAAoB;oBAC/C,oBAAC,MAAM,IACH,GAAG,EAAG,YAAY,EAClB,OAAO,EAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EACnC,IAAI,EAAE,OAAO,EACb,KAAK,EAAG,QAAQ,EAChB,OAAO,EAAI,IAAI,CAAC,KAAK,CAAC,aAAa,IAElC,UAAU,CACN,CACX;gBACN,6BACI,MAAM,EAAI,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,EAC7C,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,SAAS,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACrD,KAAK,EAAE,KAAK,GACd,CACG,CACZ,CAAC;SACL;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;CACJ;AAED,eAAe,YAAY,CAAC"}

package/dist/esm/components/players/ImageSequencePlayer.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+interface IImageSequencePlayerProps {
+    url: string;
+    height?: number;
+    width?: number;
+    padding?: number;
+    active?: boolean;
+}
+interface IImageSequencePlayerState {
+    imageWidth: number;
+    imageHeight: number;
+}
+declare class ImageSequencePlayer extends React.PureComponent<IImageSequencePlayerProps, IImageSequencePlayerState> {
+    private imgNode;
+    constructor(props: any);
+    getImageStyle(): any;
+    private metadataLoaded;
+    render(): JSX.Element;
+}
+export default ImageSequencePlayer;

package/dist/esm/components/players/ImageSequencePlayer.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { DEFAULT_PADDING } from '../../constants/player';
+import { getPlayerStyle } from './VideoPlayer';
+class ImageSequencePlayer extends React.PureComponent {
+    imgNode;
+    constructor(props) {
+        super(props);
+        this.state = {
+            imageHeight: 1080,
+            imageWidth: 1920
+        };
+        this.imgNode = React.createRef();
+    }
+    getImageStyle() {
+        const { imageHeight, imageWidth } = this.state;
+        const { padding, width, height } = this.props;
+        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
+        if (imageHeight && imageWidth) {
+            return getPlayerStyle(width, height, imageWidth, imageHeight, pad);
+        }
+        return {};
+    }
+    metadataLoaded(e) {
+        this.setState({
+            imageWidth: e.target.naturalWidth,
+            imageHeight: e.target.naturalHeight
+        });
+    }
+    render() {
+        const { url, active } = this.props;
+        if (active !== false) {
+            return (React.createElement("div", { className: 'mediap-player' },
+                React.createElement("div", { className: 'inner-viewer', style: this.getImageStyle() })));
+        }
+        else {
+            return null;
+        }
+    }
+}
+export default ImageSequencePlayer;
+//# sourceMappingURL=ImageSequencePlayer.js.map