ublo-lib 1.31.42 → 1.31.44

package/es/common/components/search-bar/utils/keyboard-keys.js

@@ -2,4 +2,4 @@ export const K = 75;
 export const ArrowUp = 38;
 export const ArrowDown = 40;
 export const Enter = 13;
-export const Escape = 27;
+export const Escape = 27;

package/es/common/components/search-bar/utils/params.d.ts

@@ -0,0 +1 @@
+export function build(params: any): string;

package/es/common/components/search-bar/utils/params.js

@@ -1,8 +1,11 @@
-export const build = params => {
-  return Object.keys(params).map((key, i) => {
-    const param = params[key];
-    if (!param) return "";
-    const sign = i === 0 ? "?" : "&";
-    return `${sign}${key}=${param}`;
-  }).join("");
-};
+export const build = (params) => {
+    return Object.keys(params)
+        .map((key, i) => {
+        const param = params[key];
+        if (!param)
+            return "";
+        const sign = i === 0 ? "?" : "&";
+        return `${sign}${key}=${param}`;
+    })
+        .join("");
+};

package/es/common/components/tabbed-zones.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+type Tab = {
+    subs: number | null;
+};
+type Props = {
+    current?: number;
+    currentSub?: number;
+    tabs?: Tab[];
+    zonesProps: Record<string, unknown>;
+};
+export default function TabbedZones({ current, currentSub, tabs, zonesProps, }: Props): React.JSX.Element;
+export {};

package/es/common/components/tabbed-zones.jsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import classNames from "classnames";
+import Zone from "ublo/zone";
+const defaultTabs = [{ subs: null }, { subs: 2 }];
+export default function TabbedZones({ current = 0, currentSub = 0, tabs = defaultTabs, zonesProps = {}, }) {
+    const [currentTab, setCurrentTab] = React.useState(current);
+    const [currentSubTab, setCurrentSubTab] = React.useState(currentSub);
+    return (<div className="tabbed-zones">
+      <div className="tabbed-zones__tabs">
+        {tabs.map((_, i) => {
+            const updateCurrentTab = () => {
+                setCurrentTab(i);
+                setCurrentSubTab(0);
+            };
+            const classes = classNames("tabbed-zones__tab", `tabbed-zones__tab--${i}`, {
+                "tabbed-zones__tab--current": i === currentTab,
+            });
+            return (<div key={i} className={classes} onClick={updateCurrentTab}>
+              <Zone id={`tabbed-zones-tab-${i}`} section="rich-text" maxSections="1" tooltip="Zone d'edition: Titre onglet"/>
+            </div>);
+        })}
+      </div>
+      {tabs.map((tab, i) => {
+            if (!tab.subs)
+                return null;
+            const length = [...new Array(tab.subs)];
+            const classes = classNames("tabbed-zones__sub-tabs", `tabbed-zones__sub-tabs--${i}`, {
+                "tabbed-zones__sub-tabs--current": i === currentTab,
+            });
+            return (<div key={i} className={classes}>
+            {length.map((_, j) => {
+                    const updateCurrentTab = () => setCurrentSubTab(j);
+                    const classes = classNames("tabbed-zones__sub-tab", `tabbed-zones__sub-tab--${i}-${j}`, {
+                        "tabbed-zones__sub-tab--current": i === currentTab && j === currentSubTab,
+                    });
+                    return (<div key={j} className={classes} onClick={updateCurrentTab}>
+                  <Zone id={`tabbed-zones-sub-tab-${i}-${j}`} section="rich-text" maxSections="1" tooltip="Zone d'edition: Titre onglet" {...zonesProps}/>
+                </div>);
+                })}
+          </div>);
+        })}
+      <div className="tabbed-zones__zones">
+        {tabs.map((tab, i) => {
+            const classes = classNames("tabbed-zones__zone", `tabbed-zones__zone--${i}`, {
+                "tabbed-zones__zone--current": i === currentTab,
+            });
+            if (tab.subs)
+                return null;
+            return (<div key={i} className={classes}>
+              <Zone id={`tabbed-zone-${i}`} tooltip="Zone d'edition : Contenu onglet" {...zonesProps}/>
+            </div>);
+        })}
+        {tabs.map((tab, i) => {
+            if (!tab.subs)
+                return null;
+            const length = [...new Array(tab.subs)];
+            return length.map((_, j) => {
+                const classes = classNames("tabbed-zones__zone", `tabbed-zones__zone--${i}-${j}`, {
+                    "tabbed-zones__zone--current": i === currentTab && j === currentSubTab,
+                });
+                return (<div key={j} className={classes}>
+                <Zone id={`tabbed-zone-offers-${i}-${j}`} className="tabbed-zone-offers" tooltip="Zone d'edition : Contenu et blocs produit" {...zonesProps}/>
+              </div>);
+            });
+        })}
+      </div>
+    </div>);
+}

package/es/common/components/video-player/controls.d.ts

@@ -0,0 +1,16 @@
+declare const _default: React.MemoExoticComponent<({ started, playing, updatePlaying, progress, loadedAmount, setNewProgress, duration, currentTime, fullScreen, setFullScreen, muted, setMuted, }: {
+    started: any;
+    playing: any;
+    updatePlaying: any;
+    progress: any;
+    loadedAmount: any;
+    setNewProgress: any;
+    duration: any;
+    currentTime: any;
+    fullScreen: any;
+    setFullScreen: any;
+    muted: any;
+    setMuted: any;
+}) => React.JSX.Element>;
+export default _default;
+import * as React from "react";

package/es/common/components/video-player/controls.js

@@ -2,118 +2,75 @@ import * as React from "react";
 import * as Icons from "./icons";
 import * as Utils from "./utils";
 import styles from "./player.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Controls = ({
-  started,
-  playing,
-  updatePlaying,
-  progress,
-  loadedAmount,
-  setNewProgress,
-  duration,
-  currentTime,
-  fullScreen,
-  setFullScreen,
-  muted,
-  setMuted
-}) => {
-  const [compatible, setCompatible] = React.useState(true);
-  React.useEffect(() => {
-    setCompatible(Utils.fullScreenCompatible());
-  }, []);
-  const exitHandler = React.useCallback(() => {
-    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
-      setFullScreen(false);
-    }
-  }, [setFullScreen]);
-  React.useEffect(() => {
-    document.addEventListener("fullscreenchange", exitHandler);
-    document.addEventListener("mozfullscreenchange", exitHandler);
-    document.addEventListener("MSFullscreenChange", exitHandler);
-    document.addEventListener("webkitfullscreenchange", exitHandler);
-    return () => {
-      document.removeEventListener("webkitfullscreenchange", exitHandler);
-      document.removeEventListener("MSFullscreenChange", exitHandler);
-      document.removeEventListener("mozfullscreenchange", exitHandler);
-      document.removeEventListener("fullscreenchange", exitHandler);
-    };
-  }, [exitHandler]);
-  const StateIcon = playing ? Icons.Pause : Icons.Play;
-  const SoundIcon = muted ? Icons.VolumeMuted : Icons.VolumeUp;
-  const FullscreenIcon = fullScreen ? Icons.FullScreenExit : Icons.FullScreen;
-  const steps = Array.apply(null, {
-    length: 100
-  }).map(Number.call, Number);
-  const updateProgress = value => () => setNewProgress(value);
-  const toggleMute = () => setMuted(!muted);
-  const toggleFullScreen = () => setFullScreen(!fullScreen);
-  return _jsxs("div", {
-    className: styles.controls,
-    children: [_jsx("div", {
-      className: styles.controlsLeft,
-      children: _jsx("button", {
-        className: styles.controlsPlayButton,
-        onClick: updatePlaying,
-        children: _jsx(StateIcon, {
-          className: styles.controlsPlayIcon
-        })
-      })
-    }), _jsx("div", {
-      className: styles.controlsCenter,
-      children: _jsx("div", {
-        className: styles.controlsProgressBar,
-        children: started && _jsxs(_Fragment, {
-          children: [_jsx("div", {
-            className: styles.controlsProgress,
-            style: {
-              transform: `scaleX(${progress})`
-            }
-          }), _jsx("div", {
-            className: styles.controlsLoaded,
-            style: {
-              transform: `scaleX(${loadedAmount})`
-            }
-          }), _jsx("div", {
-            className: styles.controlsProgressController,
-            children: steps.map(step => {
-              const value = step / 100;
-              return _jsx("button", {
-                onClick: updateProgress(value)
-              }, step);
-            })
-          })]
-        })
-      })
-    }), _jsxs("div", {
-      className: styles.controlsRight,
-      children: [_jsxs("div", {
-        className: styles.controlsTime,
-        children: [_jsx("div", {
-          className: styles.controlsTimeCurrent,
-          children: Utils.formatTime(currentTime)
-        }), _jsx("div", {
-          className: styles.controlsTimeSeparator,
-          children: "/"
-        }), _jsxs("div", {
-          className: styles.controlsTimeEnd,
-          children: [" ", Utils.formatTime(duration)]
-        })]
-      }), _jsx("button", {
-        className: styles.controlsSoundButton,
-        onClick: toggleMute,
-        children: _jsx(SoundIcon, {
-          className: styles.controlsSoundIcon
-        })
-      }), compatible && _jsx("button", {
-        className: styles.controlsFullscreenButton,
-        onClick: toggleFullScreen,
-        children: _jsx(FullscreenIcon, {
-          className: styles.controlsFullscreenIcon
-        })
-      })]
-    })]
-  });
+const Controls = ({ started, playing, updatePlaying, progress, loadedAmount, setNewProgress, duration, currentTime, fullScreen, setFullScreen, muted, setMuted, }) => {
+    const [compatible, setCompatible] = React.useState(true);
+    React.useEffect(() => {
+        setCompatible(Utils.fullScreenCompatible());
+    }, []);
+    const exitHandler = React.useCallback(() => {
+        if (!document.webkitIsFullScreen &&
+            !document.mozFullScreen &&
+            !document.msFullscreenElement) {
+            setFullScreen(false);
+        }
+    }, [setFullScreen]);
+    React.useEffect(() => {
+        document.addEventListener("fullscreenchange", exitHandler);
+        document.addEventListener("mozfullscreenchange", exitHandler);
+        document.addEventListener("MSFullscreenChange", exitHandler);
+        document.addEventListener("webkitfullscreenchange", exitHandler);
+        return () => {
+            document.removeEventListener("webkitfullscreenchange", exitHandler);
+            document.removeEventListener("MSFullscreenChange", exitHandler);
+            document.removeEventListener("mozfullscreenchange", exitHandler);
+            document.removeEventListener("fullscreenchange", exitHandler);
+        };
+    }, [exitHandler]);
+    const StateIcon = playing ? Icons.Pause : Icons.Play;
+    const SoundIcon = muted ? Icons.VolumeMuted : Icons.VolumeUp;
+    const FullscreenIcon = fullScreen ? Icons.FullScreenExit : Icons.FullScreen;
+    const steps = Array.apply(null, { length: 100 }).map(Number.call, Number);
+    const updateProgress = (value) => () => setNewProgress(value);
+    const toggleMute = () => setMuted(!muted);
+    const toggleFullScreen = () => setFullScreen(!fullScreen);
+    return (<div className={styles.controls}>
+      <div className={styles.controlsLeft}>
+        <button className={styles.controlsPlayButton} onClick={updatePlaying}>
+          <StateIcon className={styles.controlsPlayIcon}/>
+        </button>
+      </div>
+      <div className={styles.controlsCenter}>
+        <div className={styles.controlsProgressBar}>
+          {started && (<>
+              <div className={styles.controlsProgress} style={{ transform: `scaleX(${progress})` }}/>
+              <div className={styles.controlsLoaded} style={{ transform: `scaleX(${loadedAmount})` }}/>
+              <div className={styles.controlsProgressController}>
+                {steps.map((step) => {
+                const value = step / 100;
+                return <button key={step} onClick={updateProgress(value)}/>;
+            })}
+              </div>
+            </>)}
+        </div>
+      </div>
+      <div className={styles.controlsRight}>
+        <div className={styles.controlsTime}>
+          <div className={styles.controlsTimeCurrent}>
+            {Utils.formatTime(currentTime)}
+          </div>
+          <div className={styles.controlsTimeSeparator}>/</div>
+          <div className={styles.controlsTimeEnd}>
+            {" "}
+            {Utils.formatTime(duration)}
+          </div>
+        </div>
+        <button className={styles.controlsSoundButton} onClick={toggleMute}>
+          <SoundIcon className={styles.controlsSoundIcon}/>
+        </button>
+        {compatible && (<button className={styles.controlsFullscreenButton} onClick={toggleFullScreen}>
+            <FullscreenIcon className={styles.controlsFullscreenIcon}/>
+          </button>)}
+      </div>
+    </div>);
 };
-export default React.memo(Controls);
+export default React.memo(Controls);

package/es/common/components/video-player/icons.d.ts

@@ -0,0 +1,7 @@
+export function Play(props: any): React.JSX.Element;
+export function Pause(props: any): React.JSX.Element;
+export function FullScreen(props: any): React.JSX.Element;
+export function FullScreenExit(props: any): React.JSX.Element;
+export function VolumeUp(props: any): React.JSX.Element;
+export function VolumeMuted(props: any): React.JSX.Element;
+import * as React from "react";

package/es/common/components/video-player/icons.js

@@ -1,49 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-const Icon = ({
-  width = 24,
-  height = 24,
-  ...props
-}) => _jsx("svg", {
-  viewBox: `0 0 ${width} ${height}`,
-  width: width,
-  height: height,
-  ...props,
-  children: props.children
-});
-export const Play = props => _jsx(Icon, {
-  ...props,
-  children: _jsx("path", {
-    d: "M8 5v14l11-7z"
-  })
-});
-export const Pause = props => _jsx(Icon, {
-  ...props,
-  children: _jsx("path", {
-    d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z"
-  })
-});
-export const FullScreen = props => _jsx(Icon, {
-  ...props,
-  children: _jsx("path", {
-    d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
-  })
-});
-export const FullScreenExit = props => _jsx(Icon, {
-  ...props,
-  children: _jsx("path", {
-    d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
-  })
-});
-export const VolumeUp = props => _jsx(Icon, {
-  ...props,
-  children: _jsx("path", {
-    d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z"
-  })
-});
-export const VolumeMuted = props => _jsx(Icon, {
-  ...props,
-  children: _jsx("path", {
-    d: "M3.63 3.63c-.39.39-.39 1.02 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z"
-  })
-});
+const Icon = (_a) => {
+    var { width = 24, height = 24 } = _a, props = __rest(_a, ["width", "height"]);
+    return (<svg viewBox={`0 0 ${width} ${height}`} width={width} height={height} {...props}>
+    {props.children}
+  </svg>);
+};
+export const Play = (props) => (<Icon {...props}>
+    <path d="M8 5v14l11-7z"/>
+  </Icon>);
+export const Pause = (props) => (<Icon {...props}>
+    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+  </Icon>);
+export const FullScreen = (props) => (<Icon {...props}>
+    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+  </Icon>);
+export const FullScreenExit = (props) => (<Icon {...props}>
+    <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
+  </Icon>);
+export const VolumeUp = (props) => (<Icon {...props}>
+    <path d="M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z"/>
+  </Icon>);
+export const VolumeMuted = (props) => (<Icon {...props}>
+    <path d="M3.63 3.63c-.39.39-.39 1.02 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z"/>
+  </Icon>);

package/es/common/components/video-player/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./video-player";

package/es/common/components/video-player/index.js

@@ -1 +1 @@
-export { default } from "./video-player";
+export { default } from "./video-player";

package/es/common/components/video-player/utils.d.ts

@@ -0,0 +1,4 @@
+export function formatTime(time: any): string;
+export function fullScreenCompatible(): boolean;
+export function enterFullScreen(el: any): void;
+export function exitFullScreen(): void;

package/es/common/components/video-player/utils.js

@@ -1,40 +1,48 @@
-export const formatTime = time => {
-  const hrs = ~~(time / 3600);
-  const mins = ~~(time % 3600 / 60);
-  const secs = ~~time % 60;
-  let ret = "";
-  if (hrs > 0) {
-    ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
-  }
-  ret += "" + mins + ":" + (secs < 10 ? "0" : "");
-  ret += "" + secs;
-  return ret;
+export const formatTime = (time) => {
+    const hrs = ~~(time / 3600);
+    const mins = ~~((time % 3600) / 60);
+    const secs = ~~time % 60;
+    let ret = "";
+    if (hrs > 0) {
+        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
+    }
+    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
+    ret += "" + secs;
+    return ret;
 };
 export const fullScreenCompatible = () => {
-  return document.fullscreenEnabled;
+    return document.fullscreenEnabled;
 };
-export const enterFullScreen = el => {
-  if (el.requestFullscreen) {
-    el.requestFullscreen();
-  } else if (el.mozRequestFullScreen) {
-    el.mozRequestFullScreen();
-  } else if (el.webkitRequestFullscreen) {
-    el.webkitRequestFullscreen();
-  } else if (el.msRequestFullscreen) {
-    el.msRequestFullscreen();
-  }
+export const enterFullScreen = (el) => {
+    if (el.requestFullscreen) {
+        el.requestFullscreen();
+    }
+    else if (el.mozRequestFullScreen) {
+        el.mozRequestFullScreen();
+    }
+    else if (el.webkitRequestFullscreen) {
+        el.webkitRequestFullscreen();
+    }
+    else if (el.msRequestFullscreen) {
+        el.msRequestFullscreen();
+    }
 };
 export const exitFullScreen = () => {
-  const isInFullscreenMode = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
-  if (isInFullscreenMode) {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
-    } else if (document.mozCancelFullScreen) {
-      document.mozCancelFullScreen();
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen();
+    const isInFullscreenMode = document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.mozFullScreenElement;
+    if (isInFullscreenMode) {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+        else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+        else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        }
+        else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
     }
-  }
-};
+};

package/es/common/components/video-player/video-player.d.ts

@@ -0,0 +1,9 @@
+declare const _default: React.MemoExoticComponent<({ url, thumb, forcePlay, hideCustomControls, ...props }: {
+    [x: string]: any;
+    url: any;
+    thumb: any;
+    forcePlay: any;
+    hideCustomControls: any;
+}) => React.JSX.Element>;
+export default _default;
+import * as React from "react";