@clickview/lite 0.0.24-rc.4 → 0.0.24

package/dist/scripts/5.chunk.js

@@ -1,331 +1,1021 @@
 (window["webpackJsonp_clickview_lite"] = window["webpackJsonp_clickview_lite"] || []).push([[5],{
 
-/***/ "../../libs/shared/src/components/forms/form-buttons/FormButtons.tsx":
-/*!***************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-buttons/FormButtons.tsx ***!
-  \***************************************************************************************************************/
-/*! exports provided: FormButtons */
+/***/ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidget.tsx":
+/*!*****************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/FixedWidget.tsx ***!
+  \*****************************************************************************************************************/
+/*! exports provided: FixedWidget */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormButtons", function() { return FormButtons; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FixedWidget", function() { return Memoized; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
-/* harmony import */ var _hooks_UseCanSubmitForm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/UseCanSubmitForm */ "../../libs/shared/src/hooks/UseCanSubmitForm.ts");
-/* harmony import */ var _spinner_button_SpinnerButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../spinner-button/SpinnerButton */ "../../libs/shared/src/components/spinner-button/SpinnerButton.tsx");
-/* harmony import */ var _text_Text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+/* harmony import */ var _common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
+/* harmony import */ var _enums_CssMeasurement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../enums/CssMeasurement */ "../../libs/shared/src/enums/CssMeasurement.ts");
+/* harmony import */ var _widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../widget-button/WidgetButton */ "../../libs/shared/src/components/widgets/widget-button/WidgetButton.tsx");
+/* harmony import */ var _sliding_list_SlidingListContainer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../sliding-list/SlidingListContainer */ "../../libs/shared/src/components/widgets/sliding-list/SlidingListContainer.tsx");
+/* harmony import */ var _hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../hooks/UseGetMediaQueryString */ "../../libs/shared/src/hooks/UseGetMediaQueryString.ts");
+/* harmony import */ var _hooks_UseHover__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../hooks/UseHover */ "../../libs/shared/src/hooks/UseHover.ts");
+/* harmony import */ var _interfaces__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../interfaces */ "../../libs/shared/src/interfaces/index.ts");
+/* harmony import */ var _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../enums/WidgetInteraction */ "../../libs/shared/src/enums/WidgetInteraction.ts");
+/* harmony import */ var _hooks_UseLazyLoad__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../hooks/UseLazyLoad */ "../../libs/shared/src/hooks/UseLazyLoad.ts");
+/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
+/* harmony import */ var _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
+/* harmony import */ var _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _enums_ThumbnailSize__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../../enums/ThumbnailSize */ "../../libs/shared/src/enums/ThumbnailSize.ts");
+/* harmony import */ var _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../../utils/WidgetHelper */ "../../libs/shared/src/utils/WidgetHelper.ts");
+/* harmony import */ var _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../../../../analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
+/* harmony import */ var _PartialFixedWidget__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./PartialFixedWidget */ "../../libs/shared/src/components/widgets/fixed-widget/PartialFixedWidget.tsx");
+/* harmony import */ var _FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./FixedWidgetUtils */ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetUtils.ts");
+/* harmony import */ var _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./FixedWidgetReducer */ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetReducer.tsx");
+/* harmony import */ var _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./fixed-widget.scss */ "../../libs/shared/src/components/widgets/fixed-widget/fixed-widget.scss");
+/* harmony import */ var _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default = /*#__PURE__*/__webpack_require__.n(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19__);
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+
+
 
 
 
 
 
-var namespace = 'shared.formButtons';
-var ENTER_KEY_CODE = 13;
-function FormButtons(props) {
-  var formikProps = Object(formik__WEBPACK_IMPORTED_MODULE_1__["useFormikContext"])();
-  var canSubmit = Object(_hooks_UseCanSubmitForm__WEBPACK_IMPORTED_MODULE_2__["useCanSubmitForm"])(formikProps);
-  /**
-   * This hook listens to "Enter" keypress events, and submits the form if there
-   * are no errors. This prevents any edge cases where submitting doesn't work on
-   * Enter normally, such as when a custom component is in focus.
-   */
 
+
+
+
+
+
+
+
+
+
+
+
+var namespace = 'shared.fixedWidget';
+FixedWidget.defaultProps = {
+  type: _interfaces__WEBPACK_IMPORTED_MODULE_7__["WidgetType"].Row,
+  minimumItemCount: 0,
+  paddingSize: '3'
+};
+
+function FixedWidget(props) {
+  var _a, _b, _c, _d, _e;
+
+  var widgetType = props.type,
+      _props$analyticsData = props.analyticsData,
+      analyticsData = _props$analyticsData === void 0 ? {} : _props$analyticsData; // Map deprecated resources tile widget type to row type
+
+  if (widgetType === _interfaces__WEBPACK_IMPORTED_MODULE_7__["WidgetType"].ResourcesTile) widgetType = _interfaces__WEBPACK_IMPORTED_MODULE_7__["WidgetType"].Row;
+
+  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0__["useState"](null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      initialTouchX = _React$useState2[0],
+      setInitialTouchX = _React$useState2[1];
+
+  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      containerWidth = _React$useState4[0],
+      setContainerWidth = _React$useState4[1];
+
+  var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      percentageDragged = _React$useState6[0],
+      setPercentageDragged = _React$useState6[1];
+
+  var _React$useReducer = react__WEBPACK_IMPORTED_MODULE_0__["useReducer"](_FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_18__["FixedWidgetReducer"], _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_18__["initialWidgetState"], _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_18__["lazyWidgetInit"]),
+      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+      state = _React$useReducer2[0],
+      dispatch = _React$useReducer2[1];
+
+  var containerRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](null);
+
+  var _useHover = Object(_hooks_UseHover__WEBPACK_IMPORTED_MODULE_6__["useHover"])(),
+      _useHover2 = _slicedToArray(_useHover, 2),
+      buttonsRef = _useHover2[0],
+      isHovering = _useHover2[1];
+
+  var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      isHoveringOnFarLeft = _React$useState8[0],
+      setIsHoveringOnFarLeft = _React$useState8[1];
+
+  var _React$useState9 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      isHoveringOnFarRight = _React$useState10[0],
+      setIsHoveringOnFarRight = _React$useState10[1];
+
+  var _useLazyLoad = Object(_hooks_UseLazyLoad__WEBPACK_IMPORTED_MODULE_9__["useLazyLoad"])(!props.lazyLoad),
+      ref = _useLazyLoad.ref,
+      shouldFetch = _useLazyLoad.inView;
+
+  var mediaQuery = Object(_hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_5__["useGetMediaQueryString"])();
   react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
-    function onKeyPress(e) {
-      if (e.keyCode !== ENTER_KEY_CODE || !canSubmit) return;
-      formikProps.validateForm().then(function (errors) {
-        if (!Object.keys(errors).length) formikProps.submitForm();
-      });
+    dispatch({
+      type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Resize,
+      payload: {
+        mediaQuery: mediaQuery,
+        type: widgetType,
+        contents: props.contents,
+        collection: state.collection
+      }
+    });
+  }, [mediaQuery]);
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    if (!props.prefetched) return; // If the collection changes, re-initialize the widget state.
+
+    dispatch({
+      type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Init,
+      payload: {
+        mediaQuery: mediaQuery,
+        type: widgetType,
+        contents: props.contents,
+        collection: props.collection
+      }
+    });
+  }, [props.collection, props.prefetched]);
+  var response = Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["useFetchData"])(props, dispatch, mediaQuery, shouldFetch);
+
+  function onSetIsHovering(hovering, index) {
+    if (state.collection.length === state.viewableItems) {
+      setIsHoveringOnFarLeft(hovering);
+      setIsHoveringOnFarRight(hovering);
+      return;
+    } // This callback will hide the far left button if the user is hovering on the far left widget item.
+    // Same goes for the far right button & widget item.
+
+
+    if (index + 1 === state.collection.length) {
+      setIsHoveringOnFarRight(hovering);
+      return;
     }
 
-    window.addEventListener('keypress', onKeyPress);
-    return function () {
-      return window.removeEventListener('keypress', onKeyPress);
-    };
-  }, [canSubmit]);
-  var phraseKey = 'save';
-  if (props.isNew) phraseKey = 'create';
-  if (props.hasNext) phraseKey = 'next';
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_spinner_button_SpinnerButton__WEBPACK_IMPORTED_MODULE_3__["SpinnerButton"], {
-    variant: props.variant || 'primary',
-    showSpinner: formikProps.isSubmitting,
-    type: 'submit',
-    disabled: !canSubmit
-  }, props.submitText ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, props.submitText) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_text_Text__WEBPACK_IMPORTED_MODULE_4__["Text"], {
-    namespace: namespace,
-    phrase: phraseKey
-  }));
+    if (index === 0) {
+      setIsHoveringOnFarLeft(hovering);
+      return;
+    }
+
+    if ((index + 1 - state.offset % state.viewableItems) % state.viewableItems === 0) {
+      setIsHoveringOnFarRight(hovering);
+      return;
+    }
+
+    if ((index - state.offset % state.viewableItems) % state.viewableItems === 0) {
+      setIsHoveringOnFarLeft(hovering);
+      return;
+    }
+  }
+
+  var widgetContext = {
+    type: state.type,
+    size: state.currentSize,
+    collectionSize: state.collection.length,
+    contents: props.contents
+  };
+  var data = Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["formatData"])(props, ((_a = response) === null || _a === void 0 ? void 0 : _a.data) || props.collection);
+  if ((_b = response) === null || _b === void 0 ? void 0 : _b.hasError) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+
+  if (!props.prefetched && !((_c = response) === null || _c === void 0 ? void 0 : _c.statusCode)) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+      ref: ref
+    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_PartialFixedWidget__WEBPACK_IMPORTED_MODULE_16__["PartialFixedWidget"], {
+      type: widgetType
+    }));
+  }
+
+  if (!state.collection.length || state.collection.length < props.minimumItemCount) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+  var WidgetItemComponent = props.childComponent;
+
+  var getSliderAnalyticsData = function getSliderAnalyticsData(type) {
+    var _a, _b;
+
+    return Object.assign({
+      id: (_a = data) === null || _a === void 0 ? void 0 : _a.id,
+      name: (_b = data) === null || _b === void 0 ? void 0 : _b.name,
+      direction: type === _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Next ? 'right' : 'left'
+    }, props.analyticsData);
+  };
+
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "pb-3 px-".concat(props.paddingSize, " mx-n").concat(props.paddingSize, " overflow-hidden-x")
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'mb-1'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_app_link_AppLink__WEBPACK_IMPORTED_MODULE_10__["AppLink"], {
+    appLink: Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["getCollectionAppLink"])(props.appLink, data),
+    analyticsData: Object.assign({
+      id: (_d = data) === null || _d === void 0 ? void 0 : _d.id,
+      name: (_e = data) === null || _e === void 0 ? void 0 : _e.name
+    }, props.analyticsData),
+    analyticsOptions: _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__["WidgetHelper"].getSliderHeadingAnalyticsOptions()
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", {
+    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default.a.heading, " ").concat(props.appLink ? _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default.a.link : '', " h4 mb-0 d-inline-block align-top pl-1")
+  }, data.name, !!props.appLink && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__["SvgContainer"], {
+    svgName: _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__["cvSvgLibrary"].ChevronRight,
+    size: _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__["SvgContainerSize"].Small
+  })), props.settingsAppLink && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_app_link_AppLink__WEBPACK_IMPORTED_MODULE_10__["AppLink"], {
+    appLink: props.settingsAppLink
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__["SvgContainer"], {
+    svgName: _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__["cvSvgLibrary"].Cog,
+    className: 'd-inline-block svg-container cursor-pointer',
+    title: _common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_1__["LanguageService"].getPhrase(namespace, 'preferencesTooltip'),
+    tooltipPlacement: 'right'
+  }))), data.description && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("p", {
+    className: 'text-truncate pl-1 mb-0 description'
+  }, data.description)), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    ref: buttonsRef,
+    className: 'position-relative'
+  }, !isHoveringOnFarLeft && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default.a.leftOverflowGradient
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__["WidgetButton"], {
+    direction: _widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__["WidgetButtonDirection"].Left,
+    onClick: function onClick() {
+      dispatch({
+        type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Previous
+      });
+      _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_15__["AnalyticsHelper"].logUserAction(getSliderAnalyticsData(_enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Previous), _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__["WidgetHelper"].getSliderAnalyticsOptions());
+    },
+    hide: isHoveringOnFarLeft || state.offset <= state.collection.length && !(isHovering && state.offset !== state.viewableItems),
+    contents: props.contents
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_sliding_list_SlidingListContainer__WEBPACK_IMPORTED_MODULE_4__["SlidingListContainer"], {
+    position: state.position,
+    positionType: _enums_CssMeasurement__WEBPACK_IMPORTED_MODULE_2__["CssMeasurement"].Percentage,
+    onTouchMove: Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["getOnTouchStart"])(state, containerRef, containerWidth, setContainerWidth, initialTouchX, setInitialTouchX, setPercentageDragged),
+    onTouchEnd: Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["getOnTouchEnd"])(containerRef, setInitialTouchX, percentageDragged, setPercentageDragged, dispatch),
+    ref: containerRef,
+    percentageDragged: percentageDragged
+  }, state.collection.map(function (widgetItem, index) {
+    var _a;
+
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](WidgetItemComponent, {
+      key: widgetItem.id,
+      data: widgetItem,
+      appLink: props.childAppLink,
+      context: widgetContext,
+      preloadImage: Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["getShouldPreload"])(state)(widgetItem),
+      thumbnailSize: props.thumbnailSize || _enums_ThumbnailSize__WEBPACK_IMPORTED_MODULE_13__["ThumbnailSize"].Medium,
+      analyticsData: Object.assign({
+        widgetId: data.id,
+        widgetName: data.name,
+        itemIndex: index
+      }, analyticsData),
+      analyticsOptions: Object.assign(Object.assign({}, (_a = props) === null || _a === void 0 ? void 0 : _a.analyticsOptions), _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__["WidgetHelper"].getSliderItemAnalyticsOptions()),
+      onHover: function onHover(hovering) {
+        /**
+         * For some reason this needs to be called after a set timeout, otherwise
+         * the `useHover` listener on the `buttonsRef` element will not detect it's hover
+         * event. A delay of 200ms is used for when `hovering` is false so that the effects of
+         * setting `isHoveringOnFarX` aren't applied until the CSS transform transition has
+         * completed.
+         */
+        window.setTimeout(function () {
+          onSetIsHovering(hovering, index);
+        }, hovering ? 0 : 200);
+      }
+    });
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__["WidgetButton"], {
+    direction: _widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__["WidgetButtonDirection"].Right,
+    onClick: function onClick() {
+      dispatch({
+        type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Next
+      });
+      _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_15__["AnalyticsHelper"].logUserAction(getSliderAnalyticsData(_enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Next), _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__["WidgetHelper"].getSliderAnalyticsOptions());
+    },
+    hide: isHoveringOnFarRight || (state.offset > state.viewableItems || state.offset === state.collection.length) && !(isHovering && state.offset < state.collection.length),
+    contents: props.contents
+  }), !isHoveringOnFarRight && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default.a.rightOverflowGradient
+  })));
 }
 
+var Memoized = react__WEBPACK_IMPORTED_MODULE_0__["memo"](FixedWidget);
+
+
 /***/ }),
 
-/***/ "../../libs/shared/src/components/forms/form-checkbox/FormCheckbox.tsx":
-/*!*****************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-checkbox/FormCheckbox.tsx ***!
-  \*****************************************************************************************************************/
-/*! exports provided: FormCheckbox */
+/***/ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetReducer.tsx":
+/*!************************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/FixedWidgetReducer.tsx ***!
+  \************************************************************************************************************************/
+/*! exports provided: initialWidgetState, FixedWidgetReducer, lazyWidgetInit */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormCheckbox", function() { return FormCheckbox; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "initialWidgetState", function() { return initialWidgetState; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FixedWidgetReducer", function() { return FixedWidgetReducer; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lazyWidgetInit", function() { return lazyWidgetInit; });
+/* harmony import */ var _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
+/* harmony import */ var _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../enums/WidgetInteraction */ "../../libs/shared/src/enums/WidgetInteraction.ts");
+/* harmony import */ var _interfaces__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../interfaces */ "../../libs/shared/src/interfaces/index.ts");
+/* harmony import */ var _FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./FixedWidgetUtils */ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetUtils.ts");
+
+
+
+
+var initialWidgetState = {
+  offset: 0,
+  viewableItems: 4,
+  position: 0,
+  collection: [],
+  currentSize: _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_0__["MediaQueryStrings"].LG,
+  type: _interfaces__WEBPACK_IMPORTED_MODULE_2__["WidgetType"].Row
+};
+
+var computeNextPosition = function computeNextPosition(prevState) {
+  var collection = prevState.collection,
+      viewableItems = prevState.viewableItems,
+      offset = prevState.offset,
+      position = prevState.position;
+  var remainingCount = collection.length - offset;
+  /**
+   * If the remaining items are evening divisible by the items in view, or,
+   * we have more items that can be displayed in the view, move the slider a full 100%.
+   */
+
+  if (remainingCount % viewableItems === 0 || remainingCount > viewableItems) return {
+    position: position - 100,
+    offset: offset + viewableItems
+  };
+  /**
+   * Where there are less items than we can show in a full slide,
+   * calculate the % movement required to only show those items.
+   */
+
+  if (remainingCount < viewableItems) return {
+    position: position - remainingCount / viewableItems * 100,
+    offset: offset + remainingCount
+  };
+  /**
+   * Default back to the current state as a fallback
+   */
+
+  return {
+    position: position,
+    offset: offset
+  };
+};
+
+var computePreviousPosition = function computePreviousPosition(prevState) {
+  var viewableItems = prevState.viewableItems,
+      offset = prevState.offset,
+      position = prevState.position;
+  var remainingCount = offset - viewableItems;
+  if (remainingCount % viewableItems === 0 || remainingCount > viewableItems) return {
+    position: position + 100,
+    offset: offset - viewableItems
+  };
+  if (remainingCount < viewableItems) return {
+    position: position + remainingCount / viewableItems * 100,
+    offset: offset - remainingCount
+  };
+  return {
+    position: position,
+    offset: offset
+  };
+};
+
+function FixedWidgetReducer(prevState, action) {
+  var _a, _b;
+
+  var type = action.type,
+      _action$payload = action.payload,
+      payload = _action$payload === void 0 ? {} : _action$payload;
+
+  switch (type) {
+    case _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__["WidgetInteraction"].Next:
+      {
+        return Object.assign(Object.assign({}, prevState), computeNextPosition(prevState));
+      }
+
+    case _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__["WidgetInteraction"].Previous:
+      {
+        return Object.assign(Object.assign({}, prevState), computePreviousPosition(prevState));
+      }
+
+    case _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__["WidgetInteraction"].Resize:
+      {
+        var computeViewableItems = Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_3__["getComputeFunction"])(payload.contents);
+        var initialSeen = computeViewableItems(payload.mediaQuery, payload.type, (_a = payload.collection) === null || _a === void 0 ? void 0 : _a.length);
+        return Object.assign(Object.assign({}, prevState), {
+          currentSize: payload.mediaQuery,
+          position: 0,
+          offset: initialSeen,
+          viewableItems: initialSeen,
+          type: payload.type
+        });
+      }
+
+    case _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__["WidgetInteraction"].Init:
+      {
+        var _computeViewableItems = Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_3__["getComputeFunction"])(payload.contents);
+
+        var _initialSeen = _computeViewableItems(payload.mediaQuery, payload.type, (_b = payload.collection) === null || _b === void 0 ? void 0 : _b.length);
+
+        return lazyWidgetInit(Object.assign(Object.assign({}, prevState), {
+          collection: payload.collection,
+          currentSize: payload.mediaQuery,
+          offset: _initialSeen,
+          viewableItems: _initialSeen,
+          type: payload.type
+        }));
+      }
+
+    default:
+      return prevState;
+  }
+}
+function lazyWidgetInit(newState) {
+  return Object.assign(Object.assign({}, initialWidgetState), newState);
+}
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetUtils.ts":
+/*!*********************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/FixedWidgetUtils.ts ***!
+  \*********************************************************************************************************************/
+/*! exports provided: useFetchData, getShouldPreload, getCollectionAppLink, formatData, getComputeFunction, getOnTouchStart, getOnTouchEnd */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useFetchData", function() { return useFetchData; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getShouldPreload", function() { return getShouldPreload; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getCollectionAppLink", function() { return getCollectionAppLink; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "formatData", function() { return formatData; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getComputeFunction", function() { return getComputeFunction; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getOnTouchStart", function() { return getOnTouchStart; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getOnTouchEnd", function() { return getOnTouchEnd; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-bootstrap */ "react-bootstrap");
-/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _form_field_FormField__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../form-field/FormField */ "../../libs/shared/src/components/forms/form-field/FormField.tsx");
-var __rest = undefined && undefined.__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];
+/* harmony import */ var _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../common/src/react/utils/ObjectHelper */ "../../libs/common/src/react/utils/ObjectHelper.ts");
+/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
+/* harmony import */ var _common_src_react_utils_TextHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../common/src/react/utils/TextHelper */ "../../libs/common/src/react/utils/TextHelper.ts");
+/* harmony import */ var _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
+/* harmony import */ var _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../enums/WidgetInteraction */ "../../libs/shared/src/enums/WidgetInteraction.ts");
+/* harmony import */ var _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../enums/WidgetContents */ "../../libs/shared/src/enums/WidgetContents.ts");
+/* harmony import */ var _interfaces__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../interfaces */ "../../libs/shared/src/interfaces/index.ts");
+
+
+
+
+
+
+
+
+function useFetchData(props, dispatch, mediaQueryType, shouldFetch) {
+  var fetch = props.fetch,
+      setData = props.setData,
+      type = props.type,
+      items = props.collection,
+      prefetched = props.prefetched,
+      contents = props.contents;
+  var data = items;
+  var res;
+
+  if (!data || _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_1__["ObjectHelper"].isEmpty(data) && !prefetched) {
+    res = fetch(shouldFetch);
+    data = res.data;
   }
+  /**
+   * Once we have the widget data, lazily update our state with the new collection
+   */
+
+
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    if (!data || _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_1__["ObjectHelper"].isEmpty(data)) return;
+    dispatch({
+      type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_5__["WidgetInteraction"].Init,
+      payload: {
+        collection: _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__["FunctionHelper"].isFunction(setData) ? setData(data) : data,
+        mediaQuery: mediaQueryType,
+        type: type,
+        contents: contents
+      }
+    });
+  }, [data]);
+  return res;
+}
+/**
+ * This function wrapper determines which widget item images should be pre-fetched by the LazyImage component.
+ * It does this by looking at which images are going to be shown after the users clicks on the "Next"
+ * widget button.
+ */
 
-  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]];
+function getShouldPreload(state) {
+  var offset = state.offset,
+      viewableItems = state.viewableItems,
+      collection = state.collection; // The index of the latest item that has been fetched
+
+  var maxLoadedIndex = offset;
+  /**
+   * The indicesToPreload is an array of indices of widget items that should be prefetched by the
+   * LazyImage component
+   */
+
+  var indicesToPreload = [];
+
+  for (var i = 0; i < maxLoadedIndex + viewableItems; i++) {
+    indicesToPreload.push(i);
   }
-  return t;
-};
+  /**
+   * A widget item calls this function to determine whether or not its image can be pre-fetched.
+   * This is determined by whether or not its index has been deemed valid to be pre-fetched
+   * by the scope above
+   */
+
 
+  return function shouldPreload(widgetItem) {
+    var index = collection.indexOf(widgetItem);
+    return indicesToPreload.includes(index);
+  };
+}
+function getCollectionAppLink(appLink, data) {
+  if (!appLink) return;
+  return Object.assign(Object.assign({}, appLink), {
+    args: appLink.args || [data.id, _common_src_react_utils_TextHelper__WEBPACK_IMPORTED_MODULE_3__["TextHelper"].slugify(data.name)]
+  });
+}
+/**
+ * Allow explicit name and description props to override the fetched
+ * data properties.
+ *
+ * @param props
+ * @param data
+ */
 
+function formatData(props, data) {
+  var name = props.name,
+      description = props.description;
+  var overrideProps = {};
+  if (Array.isArray(data)) return {
+    name: name,
+    description: description
+  };
+  if (props.name) overrideProps.name = name;
+  if (props.description) overrideProps.description = description;
+  return Object.assign(Object.assign({}, data), overrideProps);
+}
+function getComputeFunction(contents) {
+  switch (contents) {
+    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Playlists:
+      return computeViewablePlaylists;
 
+    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Videos:
+      return computeViewableVideos;
 
+    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Subjects:
+      return computeViewableSubjects;
+
+    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].UserChannels:
+      return computeViewableUserChannels;
+
+    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Interactives:
+      return computeViewableInteractives;
+
+    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Clips:
+      return computeViewableClips;
+
+    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Series:
+    default:
+      return computeViewableSeries;
+  }
+}
+
+function computeViewablePlaylists(mediaQuery, type, itemCount) {
+  var maxItems = 5;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 2;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 3;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD) maxItems = 4;
+  if (itemCount < maxItems) maxItems = itemCount;
+  return maxItems;
+}
+
+function computeViewableVideos(mediaQuery, type, itemCount) {
+  var maxItems = 4;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 2;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 3;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD) maxItems = 4;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].LG || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XL || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XXL) {
+    if (type === _interfaces__WEBPACK_IMPORTED_MODULE_7__["WidgetType"].LargeRow) maxItems = 3;else if (itemCount < 4) maxItems = 3;else maxItems = 4;
+  }
+  if (itemCount < maxItems) maxItems = itemCount;
+  return maxItems;
+}
+
+function computeViewableSubjects(mediaQuery, type, itemCount) {
+  var maxItems = 6;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 3;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD) maxItems = 4;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].LG) maxItems = 5;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XL || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XXL) maxItems = 6;
+  if (itemCount < maxItems) maxItems = itemCount;
+  return maxItems;
+}
+
+function computeViewableUserChannels(mediaQuery, type, itemCount) {
+  var maxItems = 6;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 2;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 3;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD) maxItems = 4;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].LG) maxItems = 5;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XL || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XXL) maxItems = 6;
+  if (itemCount < maxItems) maxItems = itemCount;
+  return maxItems;
+}
+
+function computeViewableInteractives(mediaQuery, type, itemCount) {
+  var maxItems = 3;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 2;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 1;
+  if (itemCount < Math.ceil(maxItems)) maxItems = itemCount;
+  return maxItems;
+}
+
+function computeViewableClips(mediaQuery, type, itemCount) {
+  var maxItems = 3;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 2;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 1;
+  if (itemCount < Math.ceil(maxItems)) maxItems = itemCount;
+  return maxItems;
+}
+
+function computeViewableSeries(mediaQuery, type, itemCount) {
+  var maxItems = 4;
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 2;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 3;
+  if (itemCount < maxItems) maxItems = itemCount;
+  return maxItems;
+}
 /**
- * Use this checkbox within Formik contexts
+ * Touch event handlers
  */
 
-function FormCheckbox(props) {
-  var label = props.label,
-      fieldProps = __rest(props, ["label"]);
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Form"].Group, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: 'custom-control custom-checkbox'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_form_field_FormField__WEBPACK_IMPORTED_MODULE_2__["FieldWrapper"], Object.assign({
-    className: 'custom-control-input'
-  }, fieldProps)), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Form"].Label, {
-    className: 'custom-control-label',
-    htmlFor: fieldProps.id
-  }, label)));
+
+function getOnTouchStart(widgetState, containerRef, containerWidth, setContainerWidth, initialTouchX, setInitialTouchX, setPercentageDragged) {
+  return function (event) {
+    var firstTouch = event.touches.item(0);
+    var touchX = firstTouch.clientX;
+    /**
+     * Runs only on the very first touch event.
+     *
+     * Sets the initial x-coordinate as a reference point to calculate how far the user has dragged before
+     * they release their finder
+     */
+
+    if (!initialTouchX) {
+      containerRef.current.style.transition = '';
+      setContainerWidth(containerRef.current.getBoundingClientRect().width);
+      setInitialTouchX(touchX);
+    }
+
+    var pixelsDragged = initialTouchX - touchX; // Calculate how far the user has moved their finger as a percentage of the widget's container element
+
+    var currentPercentageDragged = pixelsDragged / containerWidth * 100;
+    /**
+     * These 2 if statements prevent the user from dragging the widget beyond its limits.
+     * One if statement handles if they have dragged to the left, and the other is for dragging to the right.
+     *
+     * The same logic is used to hide the widget buttons (see the `hide` prop passed to `<WidgetButton />`)
+     */
+
+    if (currentPercentageDragged < 0 && widgetState.offset === widgetState.viewableItems) currentPercentageDragged = 0;else if (currentPercentageDragged > 0 && widgetState.offset === widgetState.collection.length) currentPercentageDragged = 0;
+    setPercentageDragged(currentPercentageDragged);
+  };
+}
+var DRAG_TOLERANCE = 7.5; // % of container width using to trigger a transition.
+
+function getOnTouchEnd(containerRef, setInitialTouchX, percentageDragged, setPercentageDragged, dispatch) {
+  return function () {
+    containerRef.current.style.transition = 'transform .4s ease-in-out';
+    setInitialTouchX(null);
+    /**
+     * Only trigger a Next/Previous widget event if the user has dragged beyond DRAG_TOLERANCE% either way of the
+     * container's width. This means if the user only drags left/right a tiny little bit, the widget
+     * will simply slide back into its original place.
+     */
+
+    if (Math.abs(percentageDragged) >= DRAG_TOLERANCE) {
+      var reducerAction = percentageDragged > 0 ? _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_5__["WidgetInteraction"].Next : _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_5__["WidgetInteraction"].Previous;
+      dispatch({
+        type: reducerAction
+      });
+    }
+
+    setPercentageDragged(0);
+  };
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/forms/form-field/CharacterCounter.tsx":
-/*!******************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-field/CharacterCounter.tsx ***!
-  \******************************************************************************************************************/
-/*! exports provided: CharacterCounter */
+/***/ "../../libs/shared/src/components/widgets/fixed-widget/PartialFixedWidget.tsx":
+/*!************************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/PartialFixedWidget.tsx ***!
+  \************************************************************************************************************************/
+/*! exports provided: PartialFixedWidget */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CharacterCounter", function() { return CharacterCounter; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PartialFixedWidget", function() { return PartialFixedWidget; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
+/* harmony import */ var _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
+/* harmony import */ var _hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/UseGetMediaQueryString */ "../../libs/shared/src/hooks/UseGetMediaQueryString.ts");
+/* harmony import */ var _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./fixed-widget.scss */ "../../libs/shared/src/components/widgets/fixed-widget/fixed-widget.scss");
+/* harmony import */ var _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+
+function useMediaQueryListeners() {
+  var mediaQuery = Object(_hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_2__["useGetMediaQueryString"])();
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__["MediaQueryStrings"].XS) return {
+    itemCount: 1,
+    colSize: 12
+  };
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__["MediaQueryStrings"].SM) return {
+    itemCount: 2,
+    colSize: 6
+  };
+  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__["MediaQueryStrings"].MD) return {
+    itemCount: 3,
+    colSize: 4
+  };
+  return {
+    itemCount: 4,
+    colSize: 3
+  };
+}
+
+var PartialLoadingItem = function PartialLoadingItem(_ref) {
+  var colSize = _ref.colSize;
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "col-".concat(colSize)
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default.a.partialItem, " mx-1 partial-loading-background")
+  }));
+};
 
+function PartialFixedWidget(props) {
+  var _useMediaQueryListene = useMediaQueryListeners(),
+      itemCount = _useMediaQueryListene.itemCount,
+      colSize = _useMediaQueryListene.colSize;
 
-function CharacterCounter(props) {
-  var _useFormikContext = Object(formik__WEBPACK_IMPORTED_MODULE_1__["useFormikContext"])(),
-      values = _useFormikContext.values;
+  var items = [];
+
+  for (var i = 0; i < itemCount; i++) {
+    items.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](PartialLoadingItem, {
+      key: i,
+      colSize: colSize
+    }));
+  }
 
-  var field = values[props.fieldName];
-  if (typeof field !== 'string') return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: 'float-right text-muted'
-  }, field.length, "/", props.limit);
+    className: 'widget pb-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default.a.partialHeading, " mx-1 mb-1 partial-loading-background")
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default.a.partialDescription, " mx-1 my-1 partial-loading-background")
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default.a.slidingContainer, " row")
+  }, items));
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/forms/form-field/FormField.tsx":
-/*!***********************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-field/FormField.tsx ***!
-  \***********************************************************************************************************/
-/*! exports provided: FieldWrapper, FormField */
+/***/ "../../libs/shared/src/components/widgets/fixed-widget/fixed-widget.scss":
+/*!*******************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/fixed-widget.scss ***!
+  \*******************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"leftOverflowGradient":"cv--leftOverflowGradient--u_MPi","rightOverflowGradient":"cv--rightOverflowGradient--38ooL","partialHeading":"cv--partialHeading--OVsdA","partialDescription":"cv--partialDescription--1HtA2","partialItem":"cv--partialItem--3G2hG","largePartialItem":"cv--largePartialItem--NnK8O","heading":"cv--heading--BQnCC","link":"cv--link--ph0Qy"};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/widgets/sliding-list/SlidingListContainer.tsx":
+/*!**************************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/sliding-list/SlidingListContainer.tsx ***!
+  \**************************************************************************************************************************/
+/*! exports provided: SlidingListContainer */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FieldWrapper", function() { return FieldWrapper; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormField", function() { return FormField; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SlidingListContainer", function() { return SlidingListContainer; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
-/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-bootstrap */ "react-bootstrap");
-/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-/* harmony import */ var _utils_FormHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/FormHelper */ "../../libs/shared/src/utils/FormHelper.ts");
-/* harmony import */ var _CharacterCounter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./CharacterCounter */ "../../libs/shared/src/components/forms/form-field/CharacterCounter.tsx");
-/* harmony import */ var _form_checkbox_FormCheckbox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../form-checkbox/FormCheckbox */ "../../libs/shared/src/components/forms/form-checkbox/FormCheckbox.tsx");
-var __rest = undefined && undefined.__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];
-  }
+/* harmony import */ var _common_src_backbone_utils_UserAgentHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../common/src/backbone/utils/UserAgentHelper */ "../../libs/common/src/backbone/utils/UserAgentHelper.ts");
+/* harmony import */ var _enums_CssMeasurement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../enums/CssMeasurement */ "../../libs/shared/src/enums/CssMeasurement.ts");
+/* harmony import */ var _utils_DragHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/DragHelper */ "../../libs/shared/src/utils/DragHelper.ts");
 
-  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;
-};
 
 
 
+var isTouchScreen = _common_src_backbone_utils_UserAgentHelper__WEBPACK_IMPORTED_MODULE_1__["UserAgentHelper"].isTouchScreen();
 
+function getPositionStyling(xPosition, measurement, dragPercentage) {
+  // Used in situations where a touch screen user is dragging the `<FixedWidget />`
+  if (measurement === _enums_CssMeasurement__WEBPACK_IMPORTED_MODULE_2__["CssMeasurement"].Percentage && dragPercentage) xPosition = xPosition - dragPercentage;
+  return {
+    transform: "translate3d(".concat(xPosition).concat(measurement, ", 0px, 0px)"),
+    transition: 'transform .4s ease-in-out'
+  };
+}
 
+var SlidingListContainer = react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"](function (props, ref) {
+  var children = props.children,
+      positionType = props.positionType,
+      onDrag = props.onDrag,
+      onDragEnd = props.onDragEnd,
+      onTouchMove = props.onTouchMove,
+      onTouchEnd = props.onTouchEnd,
+      percentageDragged = props.percentageDragged,
+      _props$position = props.position,
+      position = _props$position === void 0 ? 0 : _props$position;
+
+  function getEventListeners() {
+    var listenerProps = {};
+
+    if (onDrag && onDragEnd) {
+      listenerProps.draggable = true;
+      listenerProps.onDragEnd = onDragEnd;
+      listenerProps.onDragStart = _utils_DragHelper__WEBPACK_IMPORTED_MODULE_3__["DragHelper"].hideDragImage;
+      listenerProps.onDragOver = onDrag;
+    }
 
+    if (onTouchMove && onTouchEnd && isTouchScreen) {
+      listenerProps.onTouchMoveCapture = onTouchMove;
+      listenerProps.onTouchEndCapture = onTouchEnd;
+    }
 
+    return listenerProps;
+  }
 
-function FieldWrapper(props) {
-  var children = props.children,
-      fieldProps = __rest(props, ["children"]);
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](formik__WEBPACK_IMPORTED_MODULE_1__["Field"], Object.assign({}, fieldProps), _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_3__["FunctionHelper"].isFunction(children) ? function (f) {
-    return children(f);
-  } : react__WEBPACK_IMPORTED_MODULE_0__["Children"].count(children) ? children : null);
-}
-function FormField(props) {
-  var label = props.label,
-      className = props.className,
-      showCharacterCounter = props.showCharacterCounter,
-      fieldProps = __rest(props, ["label", "className", "showCharacterCounter"]);
-
-  var _useFormikContext = Object(formik__WEBPACK_IMPORTED_MODULE_1__["useFormikContext"])(),
-      errors = _useFormikContext.errors,
-      touched = _useFormikContext.touched;
-
-  if (fieldProps.type === 'checkbox') return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_form_checkbox_FormCheckbox__WEBPACK_IMPORTED_MODULE_6__["FormCheckbox"], Object.assign({}, props));
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Group, null, !!label && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Label, {
-    htmlFor: fieldProps.id
-  }, label), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](FieldWrapper, Object.assign({
-    className: _utils_FormHelper__WEBPACK_IMPORTED_MODULE_4__["FormHelper"].getCustomFormControlClassName(errors, touched, fieldProps.name, className)
-  }, fieldProps)), !!showCharacterCounter && !!fieldProps.maxLength && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_CharacterCounter__WEBPACK_IMPORTED_MODULE_5__["CharacterCounter"], {
-    fieldName: fieldProps.name,
-    limit: fieldProps.maxLength
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](formik__WEBPACK_IMPORTED_MODULE_1__["ErrorMessage"], {
-    name: fieldProps.name
-  }, function (errorMessage) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control.Feedback, {
-      type: 'invalid'
-    }, errorMessage);
-  }));
-}
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", Object.assign({
+    className: 'd-flex flex-nowrap position-relative w-100',
+    style: getPositionStyling(position, positionType, percentageDragged),
+    ref: ref
+  }, getEventListeners()), children);
+});
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/forms/form-wrapper/FormWrapper.tsx":
-/*!***************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-wrapper/FormWrapper.tsx ***!
-  \***************************************************************************************************************/
-/*! exports provided: FormWrapper, useFormikContextWrapper */
+/***/ "../../libs/shared/src/components/widgets/widget-button/WidgetButton.tsx":
+/*!*******************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/widget-button/WidgetButton.tsx ***!
+  \*******************************************************************************************************************/
+/*! exports provided: WidgetButtonDirection, WidgetButton */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormWrapper", function() { return FormWrapper; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useFormikContextWrapper", function() { return useFormikContextWrapper; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetButtonDirection", function() { return WidgetButtonDirection; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetButton", function() { return WidgetButton; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
-/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-/* harmony import */ var _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../common/src/react/utils/ObjectHelper */ "../../libs/common/src/react/utils/ObjectHelper.ts");
-var __rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
+/* harmony import */ var _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
+/* harmony import */ var _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _widget_button_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./widget-button.scss */ "../../libs/shared/src/components/widgets/widget-button/widget-button.scss");
+/* harmony import */ var _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_widget_button_scss__WEBPACK_IMPORTED_MODULE_3__);
 
-  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;
-};
 
 
 
+var WidgetButtonDirection;
 
+(function (WidgetButtonDirection) {
+  WidgetButtonDirection[WidgetButtonDirection["Left"] = 0] = "Left";
+  WidgetButtonDirection[WidgetButtonDirection["Right"] = 1] = "Right";
+})(WidgetButtonDirection || (WidgetButtonDirection = {}));
 
+function getPositionClass(contents, isLeftDirection) {
+  var className = _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.topPos; // Left / Right
 
-function omitNullInitialValues(initialValues) {
-  var values = _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_3__["ObjectHelper"].deepClone(initialValues);
-  Object.keys(values).forEach(function (key) {
-    if (!values.hasOwnProperty(key)) return;
-    if (_common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_3__["ObjectHelper"].isObject(values[key])) values[key] = omitNullInitialValues(values[key]);else if (values[key] === null) delete values[key];
-  });
-  return values;
+  if (isLeftDirection) className += ' ' + _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.left;else className += ' ' + _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.right;
+  return className;
 }
 
-FormWrapper.defaultProps = {
-  castInitialValues: true,
-  castValuesOnSubmit: true
-};
-function FormWrapper(props) {
-  var castInitialValues = props.castInitialValues,
-      castValuesOnSubmit = props.castValuesOnSubmit,
-      initialValues = props.initialValues,
-      onSubmit = props.onSubmit,
-      resetOnSubmit = props.resetOnSubmit,
-      formikProps = __rest(props, ["castInitialValues", "castValuesOnSubmit", "initialValues", "onSubmit", "resetOnSubmit"]);
-  /**
-   * If castInitialValues is true, cast initialValues to the validationSchema.
-   * This will ensure that any data fetched from the api conforms to the expected form data shape.
-   */
+var WidgetButton = react__WEBPACK_IMPORTED_MODULE_0__["memo"](function (props) {
+  var isLeft = props.direction === WidgetButtonDirection.Left;
+  var arrowSvg = isLeft ? _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__["cvSvgLibrary"].ChevronLeft : _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__["cvSvgLibrary"].ChevronRight;
+  var positionClass = getPositionClass(props.contents, isLeft);
+  if (props.hide) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    role: 'button',
+    className: "".concat(positionClass, " ").concat(_widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.button),
+    onClick: props.onClick
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__["SvgContainer"], {
+    svgName: arrowSvg,
+    size: _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__["SvgContainerSize"].Medium,
+    className: "svg-container d-inline-block ".concat(_widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.chevron)
+  })), props.useGradientBackdrop && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: isLeft ? _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.gradientLeft : _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.gradientRight
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    role: 'button',
+    onClick: props.onClick,
+    className: isLeft ? _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.extendedClickableAreaLeft : _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.extendedClickableAreaRight
+  }));
+}, function (prevProps, nextProps) {
+  return prevProps.hide === nextProps.hide;
+});
 
+/***/ }),
 
-  var formattedInitialValues = castInitialValues && props.validationSchema ? props.validationSchema.cast(omitNullInitialValues(initialValues)) : initialValues;
+/***/ "../../libs/shared/src/components/widgets/widget-button/widget-button.scss":
+/*!*********************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/widget-button/widget-button.scss ***!
+  \*********************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
 
-  var onSubmitHandler = function onSubmitHandler(values, _ref) {
-    var setSubmitting = _ref.setSubmitting,
-        resetForm = _ref.resetForm;
+// extracted by mini-css-extract-plugin
+module.exports = {"left":"cv--left--789pr","right":"cv--right--1P8qt","button":"cv--button--24q_F","chevron":"cv--chevron--3M27X","gradientLeft":"cv--gradientLeft--3fkiw","gradientRight":"cv--gradientRight--2RDDy","extendedClickableAreaRight":"cv--extendedClickableAreaRight--13dgy","extendedClickableAreaLeft":"cv--extendedClickableAreaLeft--37LtK","videoTopPos":"cv--videoTopPos--1XTRO","topPos":"cv--topPos--3_p_J"};
 
-    /**
-     * validationSchema.cast will coerce the values to the types defined in validationSchema.
-     * This is useful for trimming inputs:
-     * e.g. if a value field has type Yup.string().trim(), it will be automatically trimmed.
-     */
-    var formattedData = castValuesOnSubmit && props.validationSchema ? props.validationSchema.cast(values) : values;
-    onSubmit(formattedData, function () {
-      resetOnSubmit && resetForm();
-      setSubmitting(false);
-    });
-  };
+/***/ }),
 
-  var initialStatus = {
-    allowInitialSubmit: props.allowInitialSubmit
-  };
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](formik__WEBPACK_IMPORTED_MODULE_1__["Formik"], Object.assign({
-    enableReinitialize: true
-  }, formikProps, {
-    initialValues: formattedInitialValues,
-    onSubmit: onSubmitHandler,
-    initialStatus: initialStatus
-  }), _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__["FunctionHelper"].isFunction(props.children) ? function (f) {
-    return props.children(f);
-  } : react__WEBPACK_IMPORTED_MODULE_0__["Children"].count(props.children) ? props.children : null);
-}
-function useFormikContextWrapper() {
-  return Object(formik__WEBPACK_IMPORTED_MODULE_1__["useFormikContext"])();
-}
+/***/ "../../libs/shared/src/enums/CssMeasurement.ts":
+/*!*****************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/enums/CssMeasurement.ts ***!
+  \*****************************************************************************************/
+/*! exports provided: CssMeasurement */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CssMeasurement", function() { return CssMeasurement; });
+var CssMeasurement;
+
+(function (CssMeasurement) {
+  CssMeasurement["Percentage"] = "%";
+  CssMeasurement["Pixels"] = "px";
+})(CssMeasurement || (CssMeasurement = {}));
+
+/***/ }),
+
+/***/ "../../libs/shared/src/enums/WidgetContents.ts":
+/*!*****************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/enums/WidgetContents.ts ***!
+  \*****************************************************************************************/
+/*! exports provided: WidgetContents */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetContents", function() { return WidgetContents; });
+var WidgetContents;
+
+(function (WidgetContents) {
+  WidgetContents["Videos"] = "videos";
+  WidgetContents["Series"] = "series";
+  WidgetContents["Subjects"] = "subjects";
+  WidgetContents["Playlists"] = "playlists";
+  WidgetContents["UserChannels"] = "user channels";
+  WidgetContents["Interactives"] = "interactives";
+  WidgetContents["Clips"] = "clips";
+})(WidgetContents || (WidgetContents = {}));
+
+/***/ }),
+
+/***/ "../../libs/shared/src/enums/WidgetInteraction.ts":
+/*!********************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/enums/WidgetInteraction.ts ***!
+  \********************************************************************************************/
+/*! exports provided: WidgetInteraction */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetInteraction", function() { return WidgetInteraction; });
+var WidgetInteraction;
+
+(function (WidgetInteraction) {
+  WidgetInteraction["Init"] = "init";
+  WidgetInteraction["Next"] = "next";
+  WidgetInteraction["Previous"] = "previous";
+  WidgetInteraction["Resize"] = "resize";
+  WidgetInteraction["Drag"] = "drag";
+})(WidgetInteraction || (WidgetInteraction = {}));
 
 /***/ }),
 
-/***/ "../../libs/shared/src/hooks/UseCanSubmitForm.ts":
-/*!*******************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/hooks/UseCanSubmitForm.ts ***!
-  \*******************************************************************************************/
-/*! exports provided: useCanSubmitForm */
+/***/ "../../libs/shared/src/hooks/UseHover.ts":
+/*!***********************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/hooks/UseHover.ts ***!
+  \***********************************************************************************/
+/*! exports provided: useHover, useHoverIntent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useCanSubmitForm", function() { return useCanSubmitForm; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useHover", function() { return useHover; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useHoverIntent", function() { return useHoverIntent; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -339,61 +1029,129 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
+
+var defaultOptions = {
+  className: '',
+  delay: 0
+};
 /**
- * useCanSubmitForm determines if a form can be submitted.
- *
- * It will return true if a form is valid and has been changed from it's initial state.
- *
- * A common use case for this is determining whether or not to enable
- * a submit button in a form.
+ * This hook detects hover events on an element.
+ * This should only be used where CSS hover events won't suffice for what you are trying to achieve.
  */
 
-function useCanSubmitForm(formikProps) {
-  var _a;
+function useHover() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
 
   var _React$useState = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      canSubmit = _React$useState2[0],
-      setCanSubmit = _React$useState2[1];
+      isHovering = _React$useState2[0],
+      setHovering = _React$useState2[1];
 
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
-    var _a;
+  var ref = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](null);
+  var triggerHover = _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__["FunctionHelper"].throttle(function () {
+    var _a, _b;
 
-    if (!formikProps.isValid) {
-      setCanSubmit(false);
-      return;
-    } // If the form values have changed of if allowInitialSubmit is true, set canSubmit to true.
+    if (options.className) (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(options.className);
+    setHovering(true);
+  }, options.delay, {
+    leading: false
+  });
 
+  var handleMouseOut = function handleMouseOut() {
+    var _a, _b;
 
-    if (formikProps.dirty || ((_a = formikProps.initialStatus) === null || _a === void 0 ? void 0 : _a.allowInitialSubmit)) setCanSubmit(true);else setCanSubmit(false);
-  }, [formikProps.isValid, (_a = formikProps.initialStatus) === null || _a === void 0 ? void 0 : _a.allowInitialSubmit, formikProps.dirty, formikProps.values]);
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
-    if (formikProps.isSubmitting) setCanSubmit(false);
-  }, [formikProps.isSubmitting]);
-  return canSubmit;
+    if (_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__["FunctionHelper"].isFunction(triggerHover.cancel)) triggerHover.cancel();
+    if (options.className) (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(options.className);
+    setHovering(false);
+  };
+
+  react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"](function () {
+    var node = ref.current;
+
+    if (node) {
+      node.addEventListener('mouseenter', triggerHover);
+      node.addEventListener('mouseleave', handleMouseOut);
+      return function () {
+        node.removeEventListener('mouseenter', triggerHover);
+        node.removeEventListener('mouseleave', handleMouseOut);
+      };
+    }
+  }, [ref.current, triggerHover, handleMouseOut]);
+  return [ref, isHovering];
+}
+function useHoverIntent(className) {
+  return useHover({
+    className: className,
+    delay: 275
+  });
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/utils/FormHelper.ts":
+/***/ "../../libs/shared/src/utils/DragHelper.ts":
 /*!*************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/utils/FormHelper.ts ***!
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/utils/DragHelper.ts ***!
   \*************************************************************************************/
-/*! exports provided: FormHelper */
+/*! exports provided: DragHelper */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragHelper", function() { return DragHelper; });
+/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
+
+var blankImage = new Image();
+blankImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
+var DragHelper = {
+  // This removes the image that appears when you drag a draggable HTML element
+  hideDragImage: function hideDragImage(event) {
+    if (!event.dataTransfer.setDragImage || !_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_0__["FunctionHelper"].isFunction(event.dataTransfer.setDragImage)) return;
+    event.dataTransfer.setDragImage(blankImage, 0, 0);
+  }
+};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/utils/WidgetHelper.ts":
+/*!***************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/utils/WidgetHelper.ts ***!
+  \***************************************************************************************/
+/*! exports provided: WidgetHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormHelper", function() { return FormHelper; });
-/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetHelper", function() { return WidgetHelper; });
+/* harmony import */ var _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../analytics/src/interfaces */ "../../libs/analytics/src/interfaces/index.ts");
 
-var FormHelper = {
-  getCustomFormControlClassName: function getCustomFormControlClassName(errors, touched, attribute, additionalClassName) {
-    var className = 'form-control'; // Using getIn as it supports dot notation
+var WidgetHelper = {
+  /**
+   * Used by both the FixedWidget and DynamicWidget
+   */
+  getSliderAnalyticsOptions: function getSliderAnalyticsOptions() {
+    return {
+      actionType: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["UserAction"].Click,
+      location: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["LocationContext"].SlidingList,
+      entity: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["EntityType"].Widget,
+      descriptor: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClickDescriptor"].Slide
+    };
+  },
 
-    if (Object(formik__WEBPACK_IMPORTED_MODULE_0__["getIn"])(touched, attribute) && Object(formik__WEBPACK_IMPORTED_MODULE_0__["getIn"])(errors, attribute)) className += ' is-invalid';
-    if (additionalClassName) className += " ".concat(additionalClassName);
-    return className;
+  /**
+   * Used by both the FixedWidget and DynamicWidget
+   */
+  getSliderItemAnalyticsOptions: function getSliderItemAnalyticsOptions() {
+    return {
+      location: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["LocationContext"].SlidingListItem
+    };
+  },
+  getSliderHeadingAnalyticsOptions: function getSliderHeadingAnalyticsOptions() {
+    return {
+      actionType: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["UserAction"].Click,
+      location: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["LocationContext"].SlidingList,
+      entity: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["EntityType"].Widget,
+      descriptor: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClickDescriptor"].Title
+    };
   }
 };