@imposium-hub/components 1.63.0 → 2.0.0

package/dist/esm/components/assets/AssetsTablePreviewCell.js

@@ -30,11 +30,11 @@ class AssetsTablePreviewCell extends React.PureComponent {
         };
         return (React.createElement("div", { ref: this.iconRef, className: 'asset-type-cell', onClick: this.evtHandlers.onClick },
             React.createElement(AssetsTypeIcon, { type: cell.row.values.type }),
-            cell.row.values.type === ASSET_TYPES.IMAGE && (React.createElement(ImagePreview, { style: {
+            cell.row.values.type === ASSET_TYPES.IMAGE && showMedia && (React.createElement(ImagePreview, { style: {
                     ...getMediaPreviewStyle(cell.row.original.width, cell.row.original.height, this.iconRef)
-                }, showMedia: showMedia, url: cell.row.original.url, onRequestClose: this.evtHandlers.onClose })),
-            cell.row.values.type === ASSET_TYPES.VIDEO && (React.createElement(VideoPreview, { playbackSettings: playbackSettings, style: getMediaPreviewStyle(cell.row.original.width, cell.row.original.height, this.iconRef), showMedia: showMedia, url: cell.row.original.url, onRequestClose: this.evtHandlers.onClose })),
-            cell.row.values.type === ASSET_TYPES.AUDIO && (React.createElement(AudioPreview, { playbackSettings: playbackSettings, style: getMediaPreviewStyle(5, 1, this.iconRef), showMedia: showMedia, url: cell.row.original.url, onRequestClose: this.evtHandlers.onClose }))));
+                }, url: cell.row.original.url, onRequestClose: this.evtHandlers.onClose })),
+            cell.row.values.type === ASSET_TYPES.VIDEO && showMedia && (React.createElement(VideoPreview, { playbackSettings: playbackSettings, style: getMediaPreviewStyle(cell.row.original.width, cell.row.original.height, this.iconRef), url: cell.row.original.url, onRequestClose: this.evtHandlers.onClose })),
+            cell.row.values.type === ASSET_TYPES.AUDIO && showMedia && (React.createElement(AudioPreview, { playbackSettings: playbackSettings, style: getMediaPreviewStyle(5, 1, this.iconRef), url: cell.row.original.url, onRequestClose: this.evtHandlers.onClose }))));
     }
 }
 const AssetsTablePreviewCellMemoized = React.memo(AssetsTablePreviewCell);

package/dist/esm/components/assets/AssetsTablePreviewCell.js.map

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

package/dist/esm/components/button/Button.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import ButtonGroupField from './ButtonGroupField';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import ButtonMenu from './ButtonMenu';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import Card from './Card';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import CheckBoxField from './CheckboxField';
 declare const _default: {
     title: string;

package/dist/esm/components/color-field/ColorFiled.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import ColorField from './ColorField';
 declare const _default: {
     title: string;

package/dist/esm/components/controlled-list/ControlledList.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import ControlledList from './ControlledList';
 declare const _default: {
     title: string;

package/dist/esm/components/error-message-preview/ErrorMessagePreview.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IErrorMessagePreviewProps {
+    showMedia: boolean;
+    message: string;
+    style?: React.CSSProperties | any;
+    onRequestClose?(): void;
+}
+declare class ErrorMessagePreview extends React.PureComponent<IErrorMessagePreviewProps> {
+    private errorMsgNode;
+    private evtHandlers;
+    constructor(props: any);
+    private onClose;
+    render(): JSX.Element;
+}
+export default ErrorMessagePreview;

package/dist/esm/components/error-message-preview/ErrorMessagePreview.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Portal from '../portal/Portal';
+import Button from '../button/Button';
+import { assets as copy } from '../../constants/copy';
+import { ICON_TIMES } from '../../constants/icons';
+class ErrorMessagePreview extends React.PureComponent {
+    errorMsgNode = null;
+    evtHandlers;
+    constructor(props) {
+        super(props);
+        this.errorMsgNode = React.createRef();
+        this.evtHandlers = {
+            onClose: (e) => this.onClose(e)
+        };
+    }
+    onClose(e) {
+        const { onRequestClose } = this.props;
+        e.stopPropagation();
+        onRequestClose();
+    }
+    render() {
+        const { showMedia, style, message } = this.props;
+        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("p", { style: style, ref: this.errorMsgNode, className: 'asset-preview-background media-preview' }, message)));
+        }
+        else {
+            return null;
+        }
+    }
+}
+export default ErrorMessagePreview;
+//# sourceMappingURL=ErrorMessagePreview.js.map

package/dist/esm/components/error-message-preview/ErrorMessagePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessagePreview.js","sourceRoot":"","sources":["../../../../src/components/error-message-preview/ErrorMessagePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AASnD,MAAM,mBAAoB,SAAQ,KAAK,CAAC,aAAwC;IACpE,YAAY,GAAQ,IAAI,CAAC;IAEzB,WAAW,CAAM;IAEzB,YAAY,KAAK;QACb,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;QACtC,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;QACb,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,cAAc,EAAE,CAAC;IACrB,CAAC;IAEM,MAAM;QACT,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjD,IAAI,SAAS,EAAE;YACX,OAAO,CACH,oBAAC,MAAM,IAAC,EAAE,EAAC,aAAa;gBACpB,6BACI,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,EACnB,SAAS,EAAE,oBAAoB;oBAC/B,oBAAC,MAAM,IACH,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EACjC,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,IAChC,UAAU,CACN,CACP;gBACN,2BACI,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,SAAS,EAAC,wCAAwC,IACpD,OAAO,CAAK,CACT,CACZ,CAAC;SACL;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;CACJ;AAED,eAAe,mBAAmB,CAAC"}

package/dist/esm/components/field-wrapper/FieldWrapper.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import FieldWrapper from './FieldWrapper';
 declare const _default: {
     title: string;

package/dist/esm/components/h-rule/HRule.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const HRule: (props: any) => JSX.Element;
 export default HRule;

package/dist/esm/components/h-rule/HRule.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: (props: any) => JSX.Element;

package/dist/esm/components/list-field/ListField.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import ListField from './ListField';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import Modal from './Modal';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import NumberField from './NumberField';
 declare const _default: {
     title: string;

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

@@ -1,15 +1,24 @@
 import * as React from 'react';
-interface IVideoPreviewProps {
-    showMedia: boolean;
+interface IAudioPreviewProps {
     url: string;
     playbackSettings?: any;
     style?: React.CSSProperties | any;
     onRequestClose?(): void;
 }
-declare class AudioPreview extends React.PureComponent<IVideoPreviewProps> {
+interface IAudioPreviewState {
+    error: boolean;
+    loaded: boolean;
+}
+declare class AudioPreview extends React.PureComponent<IAudioPreviewProps, IAudioPreviewState> {
     private audioNode;
+    private audioRef;
     private evtHandlers;
+    private clickHandler;
+    private clickOutsideTimeout;
     constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private detectOutsideClick;
     private onClose;
     render(): JSX.Element;
 }

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

@@ -5,30 +5,52 @@ import { assets as copy } from '../../constants/copy';
 import { ICON_TIMES } from '../../constants/icons';
 class AudioPreview extends React.PureComponent {
     audioNode = null;
+    audioRef = null;
     evtHandlers;
+    clickHandler = (e) => this.detectOutsideClick(e);
+    clickOutsideTimeout;
     constructor(props) {
         super(props);
         this.audioNode = React.createRef();
+        this.audioRef = React.createRef();
         this.evtHandlers = {
             onClose: (e) => this.onClose(e)
         };
+        this.state = {
+            error: false,
+            loaded: false
+        };
+    }
+    componentDidMount() {
+        clearTimeout(this.clickOutsideTimeout);
+        this.clickOutsideTimeout = setTimeout(() => {
+            window.addEventListener('click', this.clickHandler);
+        }, 25);
+    }
+    componentWillUnmount() {
+        clearTimeout(this.clickOutsideTimeout);
+        window.removeEventListener('click', this.clickHandler);
     }
+    detectOutsideClick = (e) => {
+        const { target } = e;
+        const clickInside = this.audioRef.current && this.audioRef.current.contains(target) ? true : false;
+        if (!clickInside) {
+            this.onClose(e);
+        }
+    };
     onClose(e) {
         const { onRequestClose } = this.props;
-        e.stopPropagation();
         onRequestClose();
     }
     render() {
-        const { showMedia, url, playbackSettings, style } = this.props;
-        if (showMedia) {
-            return (React.createElement(Portal, { id: 'portal-root' },
+        const { url, playbackSettings, style } = this.props;
+        const { error } = this.state;
+        return (React.createElement(Portal, { id: 'portal-root' },
+            React.createElement("div", { ref: this.audioRef },
                 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("audio", { style: style, ref: this.audioNode, autoPlay: playbackSettings.autoPlay, loop: playbackSettings.loop, controls: true, src: url, className: 'asset-preview-background media-preview' })));
-        }
-        else {
-            return null;
-        }
+                React.createElement("audio", { style: style, onError: () => this.setState({ loaded: true, error: true }), onCanPlayThrough: () => this.setState({ loaded: true }), ref: this.audioNode, autoPlay: playbackSettings.autoPlay, loop: playbackSettings.loop, controls: true, src: url, className: 'asset-preview-background media-preview' }),
+                error ? (React.createElement("div", { className: 'error-preview audio', style: style }, "Audio not found")) : null)));
     }
 }
 export default AudioPreview;

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

@@ -1 +1 @@
-{"version":3,"file":"AudioPreview.js","sourceRoot":"","sources":["../../../../src/components/players/AudioPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAUnD,MAAM,YAAa,SAAQ,KAAK,CAAC,aAAiC;IACtD,SAAS,GAAQ,IAAI,CAAC;IAEtB,WAAW,CAAM;IAEzB,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;IACN,CAAC;IAEO,OAAO,CAAC,CAAC;QACb,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,cAAc,EAAE,CAAC;IACrB,CAAC;IAEM,MAAM;QACT,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/D,IAAI,SAAS,EAAE;YACX,OAAO,CACH,oBAAC,MAAM,IAAC,EAAE,EAAC,aAAa;gBACpB,6BACI,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,EACnB,SAAS,EAAE,oBAAoB;oBAC/B,oBAAC,MAAM,IACH,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EACjC,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,IAChC,UAAU,CACN,CACP;gBACN,+BACI,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,IAAI,EAAE,gBAAgB,CAAC,IAAI,EAC3B,QAAQ,QACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,wCAAwC,GACpD,CACG,CACZ,CAAC;SACL;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;CACJ;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AudioPreview.js","sourceRoot":"","sources":["../../../../src/components/players/AudioPreview.tsx"],"names":[],"mappings":"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"}

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

@@ -1,18 +1,24 @@
 import * as React from 'react';
 interface IImagePreviewProps {
-    showMedia: boolean;
     url: string;
     playbackSettings?: any;
     style?: React.CSSProperties | any;
     onRequestClose?(): void;
 }
 interface IImagePreviewState {
+    error: boolean;
     loaded: boolean;
 }
 declare class ImagePreview extends React.PureComponent<IImagePreviewProps, IImagePreviewState> {
     private imageNode;
+    private imageRef;
     private evtHandlers;
+    private clickHandler;
+    private clickOutsideTimeout;
     constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private detectOutsideClick;
     private onClose;
     render(): JSX.Element;
 }

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

@@ -5,34 +5,52 @@ import Button from '../button/Button';
 import { assets as copy } from '../../constants/copy';
 class ImagePreview extends React.PureComponent {
     imageNode = null;
+    imageRef = null;
     evtHandlers;
+    clickHandler = (e) => this.detectOutsideClick(e);
+    clickOutsideTimeout;
     constructor(props) {
         super(props);
         this.imageNode = React.createRef();
+        this.imageRef = React.createRef();
         this.evtHandlers = {
             onClose: (e) => this.onClose(e)
         };
         this.state = {
+            error: false,
             loaded: false
         };
     }
+    componentDidMount() {
+        clearTimeout(this.clickOutsideTimeout);
+        this.clickOutsideTimeout = setTimeout(() => {
+            window.addEventListener('click', this.clickHandler);
+        }, 25);
+    }
+    componentWillUnmount() {
+        clearTimeout(this.clickOutsideTimeout);
+        window.removeEventListener('click', this.clickHandler);
+    }
+    detectOutsideClick = (e) => {
+        const { target } = e;
+        const clickInside = this.imageRef.current && this.imageRef.current.contains(target) ? true : false;
+        if (!clickInside) {
+            this.onClose(e);
+        }
+    };
     onClose(e) {
         const { onRequestClose } = this.props;
-        e.stopPropagation();
         onRequestClose();
     }
     render() {
-        const { showMedia, url, style } = this.props;
-        const { loaded } = this.state;
-        if (showMedia) {
-            return (React.createElement(Portal, { id: 'portal-root' },
+        const { url, style } = this.props;
+        const { error } = this.state;
+        return (React.createElement(Portal, { id: 'portal-root' },
+            React.createElement("div", { ref: this.imageRef },
                 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: `asset-preview-background media-preview ${!loaded ? 'hidden' : ''}`, style: style })));
-        }
-        else {
-            return null;
-        }
+                React.createElement("img", { onError: () => this.setState({ error: true, loaded: true }), onLoad: () => this.setState({ loaded: true }), src: url, ref: this.imageNode, className: `asset-preview-background media-preview`, style: style }),
+                error ? (React.createElement("div", { className: 'error-preview', style: style }, "Image not found")) : null)));
     }
 }
 export default ImagePreview;

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

@@ -1 +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,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAatD,MAAM,YAAa,SAAQ,KAAK,CAAC,aAAqD;IAC1E,SAAS,GAAQ,IAAI,CAAC;IAEtB,WAAW,CAAM;IAEzB,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;QACb,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,cAAc,EAAE,CAAC;IACrB,CAAC;IAEM,MAAM;QACT,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9B,IAAI,SAAS,EAAE;YACX,OAAO,CACH,oBAAC,MAAM,IAAC,EAAE,EAAC,aAAa;gBACpB,6BACI,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,EACnB,SAAS,EAAE,oBAAoB;oBAC/B,oBAAC,MAAM,IACH,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EACjC,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,IAChC,UAAU,CACN,CACP;gBACN,6BACI,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAC7C,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,SAAS,EAAE,0CACP,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EACzB,EAAE,EACF,KAAK,EAAE,KAAK,GACd,CACG,CACZ,CAAC;SACL;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;CACJ;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../../src/components/players/ImagePreview.tsx"],"names":[],"mappings":"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"}

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

@@ -1,15 +1,24 @@
 import * as React from 'react';
 interface IVideoPreviewProps {
-    showMedia: boolean;
     url: string;
     playbackSettings?: any;
     style?: React.CSSProperties | any;
     onRequestClose?(): void;
 }
-declare class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
+interface IVideoPreviewState {
+    error: boolean;
+    loaded: boolean;
+}
+declare class VideoPreview extends React.PureComponent<IVideoPreviewProps, IVideoPreviewState> {
     private videoNode;
+    private videoRef;
     private evtHandlers;
+    private clickHandler;
+    private clickOutsideTimeout;
     constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private detectOutsideClick;
     private onClose;
     render(): JSX.Element;
 }

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

@@ -5,30 +5,52 @@ import { assets as copy } from '../../constants/copy';
 import { ICON_TIMES } from '../../constants/icons';
 class VideoPreview extends React.PureComponent {
     videoNode = null;
+    videoRef = null;
     evtHandlers;
+    clickHandler = (e) => this.detectOutsideClick(e);
+    clickOutsideTimeout;
     constructor(props) {
         super(props);
         this.videoNode = React.createRef();
+        this.videoRef = React.createRef();
         this.evtHandlers = {
             onClose: (e) => this.onClose(e)
         };
+        this.state = {
+            error: false,
+            loaded: false
+        };
+    }
+    componentDidMount() {
+        clearTimeout(this.clickOutsideTimeout);
+        this.clickOutsideTimeout = setTimeout(() => {
+            window.addEventListener('click', this.clickHandler);
+        }, 25);
+    }
+    componentWillUnmount() {
+        clearTimeout(this.clickOutsideTimeout);
+        window.removeEventListener('click', this.clickHandler);
     }
+    detectOutsideClick = (e) => {
+        const { target } = e;
+        const clickInside = this.videoRef.current && this.videoRef.current.contains(target) ? true : false;
+        if (!clickInside) {
+            this.onClose(e);
+        }
+    };
     onClose(e) {
         const { onRequestClose } = this.props;
-        e.stopPropagation();
         onRequestClose();
     }
     render() {
-        const { showMedia, url, playbackSettings, style } = this.props;
-        if (showMedia) {
-            return (React.createElement(Portal, { id: 'portal-root' },
+        const { url, playbackSettings, style } = this.props;
+        const { error } = this.state;
+        return (React.createElement(Portal, { id: 'portal-root' },
+            React.createElement("div", { ref: this.videoRef },
                 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("video", { style: style, muted: true, ref: this.videoNode, autoPlay: playbackSettings.autoPlay, loop: playbackSettings.loop, controls: true, preload: 'preload', playsInline: true, src: url, className: 'asset-preview-background media-preview' })));
-        }
-        else {
-            return null;
-        }
+                React.createElement("video", { onError: () => this.setState({ error: true, loaded: true }), onCanPlayThrough: () => this.setState({ loaded: true }), style: style, muted: true, ref: this.videoNode, autoPlay: playbackSettings.autoPlay, loop: playbackSettings.loop, controls: true, preload: 'preload', playsInline: true, src: url, className: 'asset-preview-background media-preview' }),
+                error ? (React.createElement("div", { className: 'error-preview', style: style }, "Video not found")) : null)));
     }
 }
 export default VideoPreview;

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

@@ -1 +1 @@
-{"version":3,"file":"VideoPreview.js","sourceRoot":"","sources":["../../../../src/components/players/VideoPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAUnD,MAAM,YAAa,SAAQ,KAAK,CAAC,aAAiC;IACtD,SAAS,GAAQ,IAAI,CAAC;IAEtB,WAAW,CAAM;IAEzB,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;IACN,CAAC;IAEO,OAAO,CAAC,CAAC;QACb,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,cAAc,EAAE,CAAC;IACrB,CAAC;IAEM,MAAM;QACT,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/D,IAAI,SAAS,EAAE;YACX,OAAO,CACH,oBAAC,MAAM,IAAC,EAAE,EAAC,aAAa;gBACpB,6BACI,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,EACnB,SAAS,EAAE,oBAAoB;oBAC/B,oBAAC,MAAM,IACH,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EACjC,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,IAChC,UAAU,CACN,CACP;gBACN,+BACI,KAAK,EAAE,KAAK,EACZ,KAAK,QACL,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,IAAI,EAAE,gBAAgB,CAAC,IAAI,EAC3B,QAAQ,QACR,OAAO,EAAC,SAAS,EACjB,WAAW,QACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,wCAAwC,GACpD,CACG,CACZ,CAAC;SACL;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;CACJ;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"VideoPreview.js","sourceRoot":"","sources":["../../../../src/components/players/VideoPreview.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/section/Section.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Section: (props: any) => JSX.Element;
 export default Section;

package/dist/esm/components/section/Section.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: (props: any) => JSX.Element;

package/dist/esm/components/select-field/SelectField.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import SelectField from './SelectField';
 declare const _default: {
     title: string;

package/dist/esm/components/slider-field/SliderField.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import SliderField from './SliderField';
 declare const _default: {
     title: string;

package/dist/esm/components/text-area-field/TextAreaField.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import TextAreaField from './TextAreaField';
 declare const _default: {
     title: string;

package/dist/esm/components/text-field/TextField.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import TextField from './TextField';
 declare const _default: {
     title: string;

package/dist/esm/utils/assets.d.ts

@@ -1,2 +1,2 @@
 import { CSSProperties } from 'react';
-export declare const getMediaPreviewStyle: (mediaWidth: number, mediaHeight: number, ref: any) => CSSProperties;
+export declare const getMediaPreviewStyle: (mediaWidth: number, mediaHeight: number, element: any) => CSSProperties;

package/dist/esm/utils/assets.js

@@ -1,6 +1,6 @@
 import { HEADER_HEIGHT, PREVIEW_MAX_HEIGHT, PREVIEW_MAX_WIDTH } from '../constants/assets';
-export const getMediaPreviewStyle = (mediaWidth, mediaHeight, ref) => {
-    if (!ref.current) {
+export const getMediaPreviewStyle = (mediaWidth, mediaHeight, element) => {
+    if (!element) {
         return;
     }
     if (!mediaWidth) {
@@ -9,8 +9,11 @@ export const getMediaPreviewStyle = (mediaWidth, mediaHeight, ref) => {
     if (!mediaHeight) {
         mediaHeight = PREVIEW_MAX_HEIGHT;
     }
-    const icon = ref.current;
-    const iconRect = icon.getBoundingClientRect();
+    const elementDiv = element.current !== undefined ? element.current : element;
+    if (!elementDiv) {
+        return;
+    }
+    const iconRect = elementDiv.getBoundingClientRect();
     const aspect = mediaWidth / mediaHeight;
     let width = PREVIEW_MAX_WIDTH;
     let height = width / aspect;

package/dist/esm/utils/assets.js.map

@@ -1 +1 @@
-{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,UAAkB,EAClB,WAAmB,EACnB,GAAQ,EACK,EAAE;IACf,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;QACd,OAAO;KACV;IACD,IAAI,CAAC,UAAU,EAAE;QACb,UAAU,GAAG,iBAAiB,CAAC;KAClC;IACD,IAAI,CAAC,WAAW,EAAE;QACd,WAAW,GAAG,kBAAkB,CAAC;KACpC;IACD,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;IACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC9C,MAAM,MAAM,GAAW,UAAU,GAAG,WAAW,CAAC;IAChD,IAAI,KAAK,GAAW,iBAAiB,CAAC;IACtC,IAAI,MAAM,GAAW,KAAK,GAAG,MAAM,CAAC;IAEpC,IAAI,MAAM,GAAG,kBAAkB,EAAE;QAC7B,MAAM,GAAG,kBAAkB,CAAC;QAC5B,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KAC3B;IAED,eAAe;IACf,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACpD,IAAI,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC;IACrD,qEAAqE;IACrE,IAAI,IAAI,GAAG,CAAC,EAAE;QACV,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;KACrB;IACD,iEAAiE;IACjE,IAAI,GAAG,GAAG,aAAa,EAAE;QACrB,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;KACzB;IAED,OAAO;QACH,GAAG;QACH,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,IAAI;KACf,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,UAAkB,EAClB,WAAmB,EACnB,OAAY,EACC,EAAE;IACf,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;KACV;IACD,IAAI,CAAC,UAAU,EAAE;QACb,UAAU,GAAG,iBAAiB,CAAC;KAClC;IACD,IAAI,CAAC,WAAW,EAAE;QACd,WAAW,GAAG,kBAAkB,CAAC;KACpC;IAED,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7E,IAAI,CAAC,UAAU,EAAE;QACb,OAAO;KACV;IACD,MAAM,QAAQ,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;IACpD,MAAM,MAAM,GAAW,UAAU,GAAG,WAAW,CAAC;IAChD,IAAI,KAAK,GAAW,iBAAiB,CAAC;IACtC,IAAI,MAAM,GAAW,KAAK,GAAG,MAAM,CAAC;IAEpC,IAAI,MAAM,GAAG,kBAAkB,EAAE;QAC7B,MAAM,GAAG,kBAAkB,CAAC;QAC5B,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KAC3B;IAED,eAAe;IACf,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACpD,IAAI,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC;IACrD,qEAAqE;IACrE,IAAI,IAAI,GAAG,CAAC,EAAE;QACV,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;KACrB;IACD,iEAAiE;IACjE,IAAI,GAAG,GAAG,aAAa,EAAE;QACrB,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;KACzB;IAED,OAAO;QACH,GAAG;QACH,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,IAAI;KACf,CAAC;AACN,CAAC,CAAC"}

package/dist/styles.css

@@ -488,6 +488,14 @@ body a {
   height: 30px !important;
   align-items: center;
 }
+.error-preview {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+.error-preview.audio {
+  height: 30px !important;
+}
 .auth-gate {
   position: absolute;
   width: 100%;

package/dist/styles.less

@@ -513,6 +513,15 @@ body{
     align-items: center
 }
 
+.error-preview {
+    justify-content: center;
+    display: flex;
+    align-items: center;
+
+    &.audio {
+        height: 30px !important;
+    }
+}
 .auth-gate {
   .layer;
   display: flex;

package/less/components/assets.less

@@ -266,3 +266,13 @@
     height: 30px !important;
     align-items: center
 }
+
+.error-preview {
+    justify-content: center;
+    display: flex;
+    align-items: center;
+
+    &.audio {
+        height: 30px !important;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.63.0",
+    "version": "2.0.0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",