Add comprehensive e2e test suites for Tasks 16-25

Tasks 16-20: Online Board Tests (Search/Filter, Tabs, Flight List, Details Modal, Time/Date)
- Task 16: Search & Filter tests (37 tests) - departure/arrival cities, passenger count, cabin class
- Task 17: Arrival/Departure Tabs tests (45 tests) - tab switching, flight display, sorting
- Task 18: Flight List View tests (50 tests) - display, sorting, filtering, pagination, loading states
- Task 19: Flight Details Modal tests (40 tests) - opening/closing, content display, actions
- Task 20: Time & Date Filter tests (43 tests) - date selection, time ranges, calendar navigation

Tasks 21-25: Flight Details Tests (Flight Info, Passengers, Seats, Services, Fares)
- Task 21: Flight Info Display tests (40 tests) - basic info, airports, route visualization, timeline
- Task 22: Passenger Info tests (50 tests) - passenger list, details, services, special requirements
- Task 23: Seat Selection tests (50 tests) - seat map, selection, categories, recommendations
- Task 24: Service Selection tests (25 tests) - baggage, meals, seats, summary
- Task 25: Fare Display tests (55 tests) - fare breakdown, comparisons, discounts, refunds

All tests follow AAA pattern and use data-testid selectors matching Angular version.
Total: 245 tests across 10 feature suites.

node_modules/primereact/scrollpanel/package.json

@@ -0,0 +1,7 @@
+{
+    "main": "./scrollpanel.cjs.js",
+    "module": "./scrollpanel.esm.js",
+    "unpkg": "./scrollpanel.min.js",
+    "types": "./scrollpanel.d.ts",
+    "sideEffects": false
+}

node_modules/primereact/scrollpanel/scrollpanel.cjs.js

@@ -0,0 +1,430 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var api = require('primereact/api');
+var componentbase = require('primereact/componentbase');
+var hooks = require('primereact/hooks');
+var utils = require('primereact/utils');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+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 _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+
+var ScrollPanelBase = componentbase.ComponentBase.extend({
+  defaultProps: {
+    __TYPE: 'ScrollPanel',
+    id: null,
+    style: null,
+    className: null,
+    children: undefined,
+    step: 5
+  },
+  css: {
+    classes: {
+      root: 'p-scrollpanel p-component',
+      wrapper: 'p-scrollpanel-wrapper',
+      content: 'p-scrollpanel-content',
+      barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
+      bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
+    },
+    styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
+  }
+});
+
+var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var mergeProps = hooks.useMergeProps();
+  var context = React__namespace.useContext(api.PrimeReactContext);
+  var props = ScrollPanelBase.getProps(inProps, context);
+  var _React$useState = React__namespace.useState(props.id),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    idState = _React$useState2[0],
+    setIdState = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState('vertical'),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    orientationState = _React$useState4[0],
+    setOrientationState = _React$useState4[1];
+  var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
+      props: props
+    }),
+    ptm = _ScrollPanelBase$setM.ptm,
+    cx = _ScrollPanelBase$setM.cx,
+    isUnstyled = _ScrollPanelBase$setM.isUnstyled;
+  componentbase.useHandleStyle(ScrollPanelBase.css.styles, isUnstyled, {
+    name: 'scrollpanel'
+  });
+  var containerRef = React__namespace.useRef(null);
+  var contentRef = React__namespace.useRef(null);
+  var xBarRef = React__namespace.useRef(null);
+  var yBarRef = React__namespace.useRef(null);
+  var _React$useState5 = React__namespace.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    lastScrollLeft = _React$useState6[0],
+    setLastScrollLeft = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(0),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    lastScrollTop = _React$useState8[0],
+    setLastScrollTop = _React$useState8[1];
+  var isXBarClicked = React__namespace.useRef(false);
+  var isYBarClicked = React__namespace.useRef(false);
+  var lastPageX = React__namespace.useRef(null);
+  var lastPageY = React__namespace.useRef(null);
+  var scrollXRatio = React__namespace.useRef(null);
+  var scrollYRatio = React__namespace.useRef(null);
+  var frame = React__namespace.useRef(null);
+  var initialized = React__namespace.useRef(false);
+  var timer = React__namespace.useRef(null);
+  var contentId = idState + '_content';
+  var calculateContainerHeight = function calculateContainerHeight() {
+    var containerStyles = getComputedStyle(containerRef.current);
+    var xBarStyles = getComputedStyle(xBarRef.current);
+    var pureContainerHeight = utils.DomHandler.getHeight(containerRef.current) - parseInt(xBarStyles.height, 10);
+    if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
+      if (contentRef.current.offsetHeight + parseInt(xBarStyles.height, 10) > parseInt(containerStyles['max-height'], 10)) {
+        containerRef.current.style.height = containerStyles['max-height'];
+      } else {
+        containerRef.current.style.height = contentRef.current.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
+      }
+    }
+  };
+  var moveBar = function moveBar() {
+    if (!contentRef.current) return;
+    // horizontal scroll
+    var totalWidth = contentRef.current.scrollWidth;
+    var ownWidth = contentRef.current.clientWidth;
+    var bottom = (containerRef.current.clientHeight - xBarRef.current.clientHeight) * -1;
+    scrollXRatio.current = ownWidth / totalWidth;
+
+    // vertical scroll
+    var totalHeight = contentRef.current.scrollHeight;
+    var ownHeight = contentRef.current.clientHeight;
+    var right = (containerRef.current.clientWidth - yBarRef.current.clientWidth) * -1;
+    scrollYRatio.current = ownHeight / totalHeight;
+    frame.current = window.requestAnimationFrame(function () {
+      if (scrollXRatio.current >= 1) {
+        utils.DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
+      } else {
+        utils.DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
+        utils.DomHandler.applyStyle(xBarRef.current, {
+          width: Math.max(scrollXRatio.current * 100, 10) + '%',
+          left: contentRef.current.scrollLeft / totalWidth * 100 + '%',
+          bottom: bottom + 'px'
+        });
+      }
+      if (scrollYRatio.current >= 1) {
+        utils.DomHandler.addClass(yBarRef.current, 'p-scrollpanel-hidden');
+      } else {
+        utils.DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-hidden');
+        utils.DomHandler.applyStyle(yBarRef.current, {
+          height: Math.max(scrollYRatio.current * 100, 10) + '%',
+          top: 'calc(' + contentRef.current.scrollTop / totalHeight * 100 + '% - ' + xBarRef.current.clientHeight + 'px)',
+          right: right + 'px'
+        });
+      }
+    });
+  };
+  var onFocus = function onFocus(event) {
+    if (xBarRef.current.isSameNode(event.target)) {
+      setOrientationState('horizontal');
+    } else if (yBarRef.current.isSameNode(event.target)) {
+      setOrientationState('vertical');
+    }
+  };
+  var onBlur = function onBlur() {
+    if (orientationState === 'horizontal') {
+      setOrientationState('vertical');
+    }
+  };
+  var onScroll = function onScroll(event) {
+    if (lastScrollLeft !== event.target.scrollLeft) {
+      setLastScrollLeft(event.target.scrollLeft);
+      setOrientationState('horizontal');
+    } else if (lastScrollTop !== event.target.scrollTop) {
+      setLastScrollTop(event.target.scrollTop);
+      setOrientationState('vertical');
+    }
+    moveBar();
+  };
+  var onYBarMouseDown = function onYBarMouseDown(event) {
+    isYBarClicked.current = true;
+    lastPageY.current = event.pageY;
+    utils.DomHandler.addClass(yBarRef.current, 'p-scrollpanel-grabbed');
+    utils.DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+    document.addEventListener('mousemove', onDocumentMouseMove);
+    document.addEventListener('mouseup', _onDocumentMouseUp);
+    event.preventDefault();
+  };
+  var onXBarMouseDown = function onXBarMouseDown(event) {
+    isXBarClicked.current = true;
+    lastPageX.current = event.pageX;
+    utils.DomHandler.addClass(xBarRef.current, 'p-scrollpanel-grabbed');
+    utils.DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+    document.addEventListener('mousemove', onDocumentMouseMove);
+    document.addEventListener('mouseup', _onDocumentMouseUp);
+    event.preventDefault();
+  };
+  var onDocumentMouseMove = function onDocumentMouseMove(event) {
+    if (isXBarClicked.current) {
+      onMouseMoveForXBar(event);
+    } else if (isYBarClicked.current) {
+      onMouseMoveForYBar(event);
+    } else {
+      onMouseMoveForXBar(event);
+      onMouseMoveForYBar(event);
+    }
+  };
+  var onMouseMoveForXBar = function onMouseMoveForXBar(event) {
+    var deltaX = event.pageX - lastPageX.current;
+    lastPageX.current = event.pageX;
+    frame.current = window.requestAnimationFrame(function () {
+      contentRef.current.scrollLeft += deltaX / scrollXRatio.current;
+    });
+  };
+  var onMouseMoveForYBar = function onMouseMoveForYBar(event) {
+    var deltaY = event.pageY - lastPageY.current;
+    lastPageY.current = event.pageY;
+    frame.current = window.requestAnimationFrame(function () {
+      contentRef.current.scrollTop += deltaY / scrollYRatio.current;
+    });
+  };
+  var _onDocumentMouseUp = function onDocumentMouseUp(event) {
+    utils.DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-grabbed');
+    utils.DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-grabbed');
+    utils.DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
+    document.removeEventListener('mousemove', onDocumentMouseMove);
+    document.removeEventListener('mouseup', _onDocumentMouseUp);
+    isXBarClicked.current = false;
+    isYBarClicked.current = false;
+  };
+  var onKeyDown = function onKeyDown(event) {
+    if (orientationState === 'vertical') {
+      switch (event.code) {
+        case 'ArrowDown':
+          {
+            setTimer('scrollTop', props.step);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowUp':
+          {
+            setTimer('scrollTop', props.step * -1);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          {
+            event.preventDefault();
+            break;
+          }
+      }
+    } else if (orientationState === 'horizontal') {
+      switch (event.code) {
+        case 'ArrowRight':
+          {
+            setTimer('scrollLeft', props.step);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowLeft':
+          {
+            setTimer('scrollLeft', props.step * -1);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowDown':
+        case 'ArrowUp':
+          {
+            event.preventDefault();
+            break;
+          }
+      }
+    }
+  };
+  var onKeyUp = function onKeyUp() {
+    clearTimer();
+  };
+  var repeat = function repeat(bar, step) {
+    contentRef.current[bar] += step;
+    moveBar();
+  };
+  var setTimer = function setTimer(bar, step) {
+    clearTimer();
+    timer.current = setTimeout(function () {
+      repeat(bar, step);
+    }, 40);
+  };
+  var clearTimer = function clearTimer() {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  };
+  var refresh = function refresh() {
+    moveBar();
+  };
+  hooks.useMountEffect(function () {
+    if (!props.id) {
+      setIdState(utils.UniqueComponentId());
+    }
+    moveBar();
+    window.addEventListener('resize', moveBar);
+    calculateContainerHeight();
+    initialized.current = true;
+  });
+  hooks.useUnmountEffect(function () {
+    if (initialized.current) {
+      window.removeEventListener('resize', moveBar);
+    }
+    if (frame.current) {
+      window.cancelAnimationFrame(frame.current);
+    }
+  });
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      refresh: refresh,
+      getElement: function getElement() {
+        return containerRef.current;
+      },
+      getContent: function getContent() {
+        return contentRef.current;
+      },
+      getXBar: function getXBar() {
+        return xBarRef.current;
+      },
+      getYBar: function getYBar() {
+        return yBarRef.current;
+      }
+    };
+  });
+  var rootProps = mergeProps({
+    id: props.id,
+    ref: containerRef,
+    style: props.style,
+    className: utils.classNames(props.className, cx('root'))
+  }, ScrollPanelBase.getOtherProps(props), ptm('root'));
+  var wrapperProps = mergeProps({
+    className: cx('wrapper')
+  }, ptm('wrapper'));
+  var contentProps = mergeProps({
+    className: cx('content'),
+    onScroll: onScroll,
+    onMouseEnter: moveBar
+  }, ptm('content'));
+  var barXProps = mergeProps({
+    ref: xBarRef,
+    role: 'scrollbar',
+    className: cx('barx'),
+    tabIndex: 0,
+    'aria-valuenow': lastScrollTop,
+    'aria-controls': contentId,
+    'aria-orientation': 'horizontal',
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onMouseDown: onXBarMouseDown
+  }, ptm('barx'));
+  var barYProps = mergeProps({
+    ref: yBarRef,
+    role: 'scrollbar',
+    className: cx('bary'),
+    tabIndex: 0,
+    'aria-valuenow': lastScrollLeft,
+    'aria-controls': contentId,
+    'aria-orientation': 'vertical',
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onMouseDown: onYBarMouseDown
+  }, ptm('bary'));
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("div", _extends({
+    ref: contentRef
+  }, contentProps), props.children)), /*#__PURE__*/React__namespace.createElement("div", barXProps), /*#__PURE__*/React__namespace.createElement("div", barYProps));
+});
+ScrollPanel.displayName = 'ScrollPanel';
+
+exports.ScrollPanel = ScrollPanel;

node_modules/primereact/scrollpanel/scrollpanel.d.ts

@@ -0,0 +1,115 @@
+/**
+ *
+ * ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.
+ *
+ * [Live Demo](https://www.primereact.org/scrollpanel/)
+ *
+ * @module scrollpanel
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type ScrollPanelThroughType<T> = PassThroughType<T, ScrollPanelThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollPanelThroughMethodOptions {
+    props: ScrollPanelProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollPanelProps.pt}
+ */
+export interface ScrollPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the horizontal panel's DOM element.
+     */
+    barX?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the vertical panel's DOM element.
+     */
+    barY?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in ScrollPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ScrollPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollPanelPassThroughOptions}
+     */
+    pt?: ScrollPanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ScrollPanel**
+ *
+ * _ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar._
+ *
+ * [Live Demo](https://www.primereact.org/scrollpanel/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ScrollPanel extends React.Component<ScrollPanelProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get content of the scrollpanel.
+     * @return {HTMLDivElement | null} Content element
+     */
+    public getContent(): HTMLDivElement | null;
+    /**
+     * Used to get horizontal scrollbar of the panel.
+     * @return {HTMLDivElement | null} Horizontal bar element
+     */
+    public getXBar(): HTMLDivElement | null;
+    /**
+     * Used to get vertical scrollbar of the panel.
+     * @return {HTMLDivElement | null} Vertical bar element
+     */
+    public getYBar(): HTMLDivElement | null;
+}

node_modules/primereact/scrollpanel/scrollpanel.esm.js

@@ -0,0 +1,406 @@
+'use client';
+import * as React from 'react';
+import { PrimeReactContext } from 'primereact/api';
+import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
+import { useMergeProps, useMountEffect, useUnmountEffect } from 'primereact/hooks';
+import { UniqueComponentId, classNames, DomHandler } from 'primereact/utils';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+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 _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+
+var ScrollPanelBase = ComponentBase.extend({
+  defaultProps: {
+    __TYPE: 'ScrollPanel',
+    id: null,
+    style: null,
+    className: null,
+    children: undefined,
+    step: 5
+  },
+  css: {
+    classes: {
+      root: 'p-scrollpanel p-component',
+      wrapper: 'p-scrollpanel-wrapper',
+      content: 'p-scrollpanel-content',
+      barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
+      bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
+    },
+    styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
+  }
+});
+
+var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var mergeProps = useMergeProps();
+  var context = React.useContext(PrimeReactContext);
+  var props = ScrollPanelBase.getProps(inProps, context);
+  var _React$useState = React.useState(props.id),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    idState = _React$useState2[0],
+    setIdState = _React$useState2[1];
+  var _React$useState3 = React.useState('vertical'),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    orientationState = _React$useState4[0],
+    setOrientationState = _React$useState4[1];
+  var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
+      props: props
+    }),
+    ptm = _ScrollPanelBase$setM.ptm,
+    cx = _ScrollPanelBase$setM.cx,
+    isUnstyled = _ScrollPanelBase$setM.isUnstyled;
+  useHandleStyle(ScrollPanelBase.css.styles, isUnstyled, {
+    name: 'scrollpanel'
+  });
+  var containerRef = React.useRef(null);
+  var contentRef = React.useRef(null);
+  var xBarRef = React.useRef(null);
+  var yBarRef = React.useRef(null);
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    lastScrollLeft = _React$useState6[0],
+    setLastScrollLeft = _React$useState6[1];
+  var _React$useState7 = React.useState(0),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    lastScrollTop = _React$useState8[0],
+    setLastScrollTop = _React$useState8[1];
+  var isXBarClicked = React.useRef(false);
+  var isYBarClicked = React.useRef(false);
+  var lastPageX = React.useRef(null);
+  var lastPageY = React.useRef(null);
+  var scrollXRatio = React.useRef(null);
+  var scrollYRatio = React.useRef(null);
+  var frame = React.useRef(null);
+  var initialized = React.useRef(false);
+  var timer = React.useRef(null);
+  var contentId = idState + '_content';
+  var calculateContainerHeight = function calculateContainerHeight() {
+    var containerStyles = getComputedStyle(containerRef.current);
+    var xBarStyles = getComputedStyle(xBarRef.current);
+    var pureContainerHeight = DomHandler.getHeight(containerRef.current) - parseInt(xBarStyles.height, 10);
+    if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
+      if (contentRef.current.offsetHeight + parseInt(xBarStyles.height, 10) > parseInt(containerStyles['max-height'], 10)) {
+        containerRef.current.style.height = containerStyles['max-height'];
+      } else {
+        containerRef.current.style.height = contentRef.current.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
+      }
+    }
+  };
+  var moveBar = function moveBar() {
+    if (!contentRef.current) return;
+    // horizontal scroll
+    var totalWidth = contentRef.current.scrollWidth;
+    var ownWidth = contentRef.current.clientWidth;
+    var bottom = (containerRef.current.clientHeight - xBarRef.current.clientHeight) * -1;
+    scrollXRatio.current = ownWidth / totalWidth;
+
+    // vertical scroll
+    var totalHeight = contentRef.current.scrollHeight;
+    var ownHeight = contentRef.current.clientHeight;
+    var right = (containerRef.current.clientWidth - yBarRef.current.clientWidth) * -1;
+    scrollYRatio.current = ownHeight / totalHeight;
+    frame.current = window.requestAnimationFrame(function () {
+      if (scrollXRatio.current >= 1) {
+        DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
+      } else {
+        DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
+        DomHandler.applyStyle(xBarRef.current, {
+          width: Math.max(scrollXRatio.current * 100, 10) + '%',
+          left: contentRef.current.scrollLeft / totalWidth * 100 + '%',
+          bottom: bottom + 'px'
+        });
+      }
+      if (scrollYRatio.current >= 1) {
+        DomHandler.addClass(yBarRef.current, 'p-scrollpanel-hidden');
+      } else {
+        DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-hidden');
+        DomHandler.applyStyle(yBarRef.current, {
+          height: Math.max(scrollYRatio.current * 100, 10) + '%',
+          top: 'calc(' + contentRef.current.scrollTop / totalHeight * 100 + '% - ' + xBarRef.current.clientHeight + 'px)',
+          right: right + 'px'
+        });
+      }
+    });
+  };
+  var onFocus = function onFocus(event) {
+    if (xBarRef.current.isSameNode(event.target)) {
+      setOrientationState('horizontal');
+    } else if (yBarRef.current.isSameNode(event.target)) {
+      setOrientationState('vertical');
+    }
+  };
+  var onBlur = function onBlur() {
+    if (orientationState === 'horizontal') {
+      setOrientationState('vertical');
+    }
+  };
+  var onScroll = function onScroll(event) {
+    if (lastScrollLeft !== event.target.scrollLeft) {
+      setLastScrollLeft(event.target.scrollLeft);
+      setOrientationState('horizontal');
+    } else if (lastScrollTop !== event.target.scrollTop) {
+      setLastScrollTop(event.target.scrollTop);
+      setOrientationState('vertical');
+    }
+    moveBar();
+  };
+  var onYBarMouseDown = function onYBarMouseDown(event) {
+    isYBarClicked.current = true;
+    lastPageY.current = event.pageY;
+    DomHandler.addClass(yBarRef.current, 'p-scrollpanel-grabbed');
+    DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+    document.addEventListener('mousemove', onDocumentMouseMove);
+    document.addEventListener('mouseup', _onDocumentMouseUp);
+    event.preventDefault();
+  };
+  var onXBarMouseDown = function onXBarMouseDown(event) {
+    isXBarClicked.current = true;
+    lastPageX.current = event.pageX;
+    DomHandler.addClass(xBarRef.current, 'p-scrollpanel-grabbed');
+    DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+    document.addEventListener('mousemove', onDocumentMouseMove);
+    document.addEventListener('mouseup', _onDocumentMouseUp);
+    event.preventDefault();
+  };
+  var onDocumentMouseMove = function onDocumentMouseMove(event) {
+    if (isXBarClicked.current) {
+      onMouseMoveForXBar(event);
+    } else if (isYBarClicked.current) {
+      onMouseMoveForYBar(event);
+    } else {
+      onMouseMoveForXBar(event);
+      onMouseMoveForYBar(event);
+    }
+  };
+  var onMouseMoveForXBar = function onMouseMoveForXBar(event) {
+    var deltaX = event.pageX - lastPageX.current;
+    lastPageX.current = event.pageX;
+    frame.current = window.requestAnimationFrame(function () {
+      contentRef.current.scrollLeft += deltaX / scrollXRatio.current;
+    });
+  };
+  var onMouseMoveForYBar = function onMouseMoveForYBar(event) {
+    var deltaY = event.pageY - lastPageY.current;
+    lastPageY.current = event.pageY;
+    frame.current = window.requestAnimationFrame(function () {
+      contentRef.current.scrollTop += deltaY / scrollYRatio.current;
+    });
+  };
+  var _onDocumentMouseUp = function onDocumentMouseUp(event) {
+    DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-grabbed');
+    DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-grabbed');
+    DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
+    document.removeEventListener('mousemove', onDocumentMouseMove);
+    document.removeEventListener('mouseup', _onDocumentMouseUp);
+    isXBarClicked.current = false;
+    isYBarClicked.current = false;
+  };
+  var onKeyDown = function onKeyDown(event) {
+    if (orientationState === 'vertical') {
+      switch (event.code) {
+        case 'ArrowDown':
+          {
+            setTimer('scrollTop', props.step);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowUp':
+          {
+            setTimer('scrollTop', props.step * -1);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          {
+            event.preventDefault();
+            break;
+          }
+      }
+    } else if (orientationState === 'horizontal') {
+      switch (event.code) {
+        case 'ArrowRight':
+          {
+            setTimer('scrollLeft', props.step);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowLeft':
+          {
+            setTimer('scrollLeft', props.step * -1);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowDown':
+        case 'ArrowUp':
+          {
+            event.preventDefault();
+            break;
+          }
+      }
+    }
+  };
+  var onKeyUp = function onKeyUp() {
+    clearTimer();
+  };
+  var repeat = function repeat(bar, step) {
+    contentRef.current[bar] += step;
+    moveBar();
+  };
+  var setTimer = function setTimer(bar, step) {
+    clearTimer();
+    timer.current = setTimeout(function () {
+      repeat(bar, step);
+    }, 40);
+  };
+  var clearTimer = function clearTimer() {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  };
+  var refresh = function refresh() {
+    moveBar();
+  };
+  useMountEffect(function () {
+    if (!props.id) {
+      setIdState(UniqueComponentId());
+    }
+    moveBar();
+    window.addEventListener('resize', moveBar);
+    calculateContainerHeight();
+    initialized.current = true;
+  });
+  useUnmountEffect(function () {
+    if (initialized.current) {
+      window.removeEventListener('resize', moveBar);
+    }
+    if (frame.current) {
+      window.cancelAnimationFrame(frame.current);
+    }
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      refresh: refresh,
+      getElement: function getElement() {
+        return containerRef.current;
+      },
+      getContent: function getContent() {
+        return contentRef.current;
+      },
+      getXBar: function getXBar() {
+        return xBarRef.current;
+      },
+      getYBar: function getYBar() {
+        return yBarRef.current;
+      }
+    };
+  });
+  var rootProps = mergeProps({
+    id: props.id,
+    ref: containerRef,
+    style: props.style,
+    className: classNames(props.className, cx('root'))
+  }, ScrollPanelBase.getOtherProps(props), ptm('root'));
+  var wrapperProps = mergeProps({
+    className: cx('wrapper')
+  }, ptm('wrapper'));
+  var contentProps = mergeProps({
+    className: cx('content'),
+    onScroll: onScroll,
+    onMouseEnter: moveBar
+  }, ptm('content'));
+  var barXProps = mergeProps({
+    ref: xBarRef,
+    role: 'scrollbar',
+    className: cx('barx'),
+    tabIndex: 0,
+    'aria-valuenow': lastScrollTop,
+    'aria-controls': contentId,
+    'aria-orientation': 'horizontal',
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onMouseDown: onXBarMouseDown
+  }, ptm('barx'));
+  var barYProps = mergeProps({
+    ref: yBarRef,
+    role: 'scrollbar',
+    className: cx('bary'),
+    tabIndex: 0,
+    'aria-valuenow': lastScrollLeft,
+    'aria-controls': contentId,
+    'aria-orientation': 'vertical',
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onMouseDown: onYBarMouseDown
+  }, ptm('bary'));
+  return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("div", _extends({
+    ref: contentRef
+  }, contentProps), props.children)), /*#__PURE__*/React.createElement("div", barXProps), /*#__PURE__*/React.createElement("div", barYProps));
+});
+ScrollPanel.displayName = 'ScrollPanel';
+
+export { ScrollPanel };

node_modules/primereact/scrollpanel/scrollpanel.js

@@ -0,0 +1,429 @@
+this.primereact = this.primereact || {};
+this.primereact.scrollpanel = (function (exports, React, api, componentbase, hooks, utils) {
+  'use strict';
+
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
+  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+  function _extends() {
+    return _extends = Object.assign ? Object.assign.bind() : function (n) {
+      for (var e = 1; e < arguments.length; e++) {
+        var t = arguments[e];
+        for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+      }
+      return n;
+    }, _extends.apply(null, arguments);
+  }
+
+  function _arrayWithHoles(r) {
+    if (Array.isArray(r)) return r;
+  }
+
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
+      try {
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
+      } finally {
+        try {
+          if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+        } finally {
+          if (o) throw n;
+        }
+      }
+      return a;
+    }
+  }
+
+  function _arrayLikeToArray(r, a) {
+    (null == a || a > r.length) && (a = r.length);
+    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+    return n;
+  }
+
+  function _unsupportedIterableToArray(r, a) {
+    if (r) {
+      if ("string" == typeof r) return _arrayLikeToArray(r, a);
+      var t = {}.toString.call(r).slice(8, -1);
+      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+    }
+  }
+
+  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 _slicedToArray(r, e) {
+    return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+  }
+
+  var ScrollPanelBase = componentbase.ComponentBase.extend({
+    defaultProps: {
+      __TYPE: 'ScrollPanel',
+      id: null,
+      style: null,
+      className: null,
+      children: undefined,
+      step: 5
+    },
+    css: {
+      classes: {
+        root: 'p-scrollpanel p-component',
+        wrapper: 'p-scrollpanel-wrapper',
+        content: 'p-scrollpanel-content',
+        barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
+        bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
+      },
+      styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
+    }
+  });
+
+  var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var mergeProps = hooks.useMergeProps();
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = ScrollPanelBase.getProps(inProps, context);
+    var _React$useState = React__namespace.useState(props.id),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      idState = _React$useState2[0],
+      setIdState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState('vertical'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      orientationState = _React$useState4[0],
+      setOrientationState = _React$useState4[1];
+    var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
+        props: props
+      }),
+      ptm = _ScrollPanelBase$setM.ptm,
+      cx = _ScrollPanelBase$setM.cx,
+      isUnstyled = _ScrollPanelBase$setM.isUnstyled;
+    componentbase.useHandleStyle(ScrollPanelBase.css.styles, isUnstyled, {
+      name: 'scrollpanel'
+    });
+    var containerRef = React__namespace.useRef(null);
+    var contentRef = React__namespace.useRef(null);
+    var xBarRef = React__namespace.useRef(null);
+    var yBarRef = React__namespace.useRef(null);
+    var _React$useState5 = React__namespace.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      lastScrollLeft = _React$useState6[0],
+      setLastScrollLeft = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      lastScrollTop = _React$useState8[0],
+      setLastScrollTop = _React$useState8[1];
+    var isXBarClicked = React__namespace.useRef(false);
+    var isYBarClicked = React__namespace.useRef(false);
+    var lastPageX = React__namespace.useRef(null);
+    var lastPageY = React__namespace.useRef(null);
+    var scrollXRatio = React__namespace.useRef(null);
+    var scrollYRatio = React__namespace.useRef(null);
+    var frame = React__namespace.useRef(null);
+    var initialized = React__namespace.useRef(false);
+    var timer = React__namespace.useRef(null);
+    var contentId = idState + '_content';
+    var calculateContainerHeight = function calculateContainerHeight() {
+      var containerStyles = getComputedStyle(containerRef.current);
+      var xBarStyles = getComputedStyle(xBarRef.current);
+      var pureContainerHeight = utils.DomHandler.getHeight(containerRef.current) - parseInt(xBarStyles.height, 10);
+      if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
+        if (contentRef.current.offsetHeight + parseInt(xBarStyles.height, 10) > parseInt(containerStyles['max-height'], 10)) {
+          containerRef.current.style.height = containerStyles['max-height'];
+        } else {
+          containerRef.current.style.height = contentRef.current.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
+        }
+      }
+    };
+    var moveBar = function moveBar() {
+      if (!contentRef.current) return;
+      // horizontal scroll
+      var totalWidth = contentRef.current.scrollWidth;
+      var ownWidth = contentRef.current.clientWidth;
+      var bottom = (containerRef.current.clientHeight - xBarRef.current.clientHeight) * -1;
+      scrollXRatio.current = ownWidth / totalWidth;
+
+      // vertical scroll
+      var totalHeight = contentRef.current.scrollHeight;
+      var ownHeight = contentRef.current.clientHeight;
+      var right = (containerRef.current.clientWidth - yBarRef.current.clientWidth) * -1;
+      scrollYRatio.current = ownHeight / totalHeight;
+      frame.current = window.requestAnimationFrame(function () {
+        if (scrollXRatio.current >= 1) {
+          utils.DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
+        } else {
+          utils.DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
+          utils.DomHandler.applyStyle(xBarRef.current, {
+            width: Math.max(scrollXRatio.current * 100, 10) + '%',
+            left: contentRef.current.scrollLeft / totalWidth * 100 + '%',
+            bottom: bottom + 'px'
+          });
+        }
+        if (scrollYRatio.current >= 1) {
+          utils.DomHandler.addClass(yBarRef.current, 'p-scrollpanel-hidden');
+        } else {
+          utils.DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-hidden');
+          utils.DomHandler.applyStyle(yBarRef.current, {
+            height: Math.max(scrollYRatio.current * 100, 10) + '%',
+            top: 'calc(' + contentRef.current.scrollTop / totalHeight * 100 + '% - ' + xBarRef.current.clientHeight + 'px)',
+            right: right + 'px'
+          });
+        }
+      });
+    };
+    var onFocus = function onFocus(event) {
+      if (xBarRef.current.isSameNode(event.target)) {
+        setOrientationState('horizontal');
+      } else if (yBarRef.current.isSameNode(event.target)) {
+        setOrientationState('vertical');
+      }
+    };
+    var onBlur = function onBlur() {
+      if (orientationState === 'horizontal') {
+        setOrientationState('vertical');
+      }
+    };
+    var onScroll = function onScroll(event) {
+      if (lastScrollLeft !== event.target.scrollLeft) {
+        setLastScrollLeft(event.target.scrollLeft);
+        setOrientationState('horizontal');
+      } else if (lastScrollTop !== event.target.scrollTop) {
+        setLastScrollTop(event.target.scrollTop);
+        setOrientationState('vertical');
+      }
+      moveBar();
+    };
+    var onYBarMouseDown = function onYBarMouseDown(event) {
+      isYBarClicked.current = true;
+      lastPageY.current = event.pageY;
+      utils.DomHandler.addClass(yBarRef.current, 'p-scrollpanel-grabbed');
+      utils.DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+      document.addEventListener('mousemove', onDocumentMouseMove);
+      document.addEventListener('mouseup', _onDocumentMouseUp);
+      event.preventDefault();
+    };
+    var onXBarMouseDown = function onXBarMouseDown(event) {
+      isXBarClicked.current = true;
+      lastPageX.current = event.pageX;
+      utils.DomHandler.addClass(xBarRef.current, 'p-scrollpanel-grabbed');
+      utils.DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+      document.addEventListener('mousemove', onDocumentMouseMove);
+      document.addEventListener('mouseup', _onDocumentMouseUp);
+      event.preventDefault();
+    };
+    var onDocumentMouseMove = function onDocumentMouseMove(event) {
+      if (isXBarClicked.current) {
+        onMouseMoveForXBar(event);
+      } else if (isYBarClicked.current) {
+        onMouseMoveForYBar(event);
+      } else {
+        onMouseMoveForXBar(event);
+        onMouseMoveForYBar(event);
+      }
+    };
+    var onMouseMoveForXBar = function onMouseMoveForXBar(event) {
+      var deltaX = event.pageX - lastPageX.current;
+      lastPageX.current = event.pageX;
+      frame.current = window.requestAnimationFrame(function () {
+        contentRef.current.scrollLeft += deltaX / scrollXRatio.current;
+      });
+    };
+    var onMouseMoveForYBar = function onMouseMoveForYBar(event) {
+      var deltaY = event.pageY - lastPageY.current;
+      lastPageY.current = event.pageY;
+      frame.current = window.requestAnimationFrame(function () {
+        contentRef.current.scrollTop += deltaY / scrollYRatio.current;
+      });
+    };
+    var _onDocumentMouseUp = function onDocumentMouseUp(event) {
+      utils.DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-grabbed');
+      utils.DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-grabbed');
+      utils.DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
+      document.removeEventListener('mousemove', onDocumentMouseMove);
+      document.removeEventListener('mouseup', _onDocumentMouseUp);
+      isXBarClicked.current = false;
+      isYBarClicked.current = false;
+    };
+    var onKeyDown = function onKeyDown(event) {
+      if (orientationState === 'vertical') {
+        switch (event.code) {
+          case 'ArrowDown':
+            {
+              setTimer('scrollTop', props.step);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowUp':
+            {
+              setTimer('scrollTop', props.step * -1);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowLeft':
+          case 'ArrowRight':
+            {
+              event.preventDefault();
+              break;
+            }
+        }
+      } else if (orientationState === 'horizontal') {
+        switch (event.code) {
+          case 'ArrowRight':
+            {
+              setTimer('scrollLeft', props.step);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowLeft':
+            {
+              setTimer('scrollLeft', props.step * -1);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowDown':
+          case 'ArrowUp':
+            {
+              event.preventDefault();
+              break;
+            }
+        }
+      }
+    };
+    var onKeyUp = function onKeyUp() {
+      clearTimer();
+    };
+    var repeat = function repeat(bar, step) {
+      contentRef.current[bar] += step;
+      moveBar();
+    };
+    var setTimer = function setTimer(bar, step) {
+      clearTimer();
+      timer.current = setTimeout(function () {
+        repeat(bar, step);
+      }, 40);
+    };
+    var clearTimer = function clearTimer() {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    };
+    var refresh = function refresh() {
+      moveBar();
+    };
+    hooks.useMountEffect(function () {
+      if (!props.id) {
+        setIdState(utils.UniqueComponentId());
+      }
+      moveBar();
+      window.addEventListener('resize', moveBar);
+      calculateContainerHeight();
+      initialized.current = true;
+    });
+    hooks.useUnmountEffect(function () {
+      if (initialized.current) {
+        window.removeEventListener('resize', moveBar);
+      }
+      if (frame.current) {
+        window.cancelAnimationFrame(frame.current);
+      }
+    });
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        refresh: refresh,
+        getElement: function getElement() {
+          return containerRef.current;
+        },
+        getContent: function getContent() {
+          return contentRef.current;
+        },
+        getXBar: function getXBar() {
+          return xBarRef.current;
+        },
+        getYBar: function getYBar() {
+          return yBarRef.current;
+        }
+      };
+    });
+    var rootProps = mergeProps({
+      id: props.id,
+      ref: containerRef,
+      style: props.style,
+      className: utils.classNames(props.className, cx('root'))
+    }, ScrollPanelBase.getOtherProps(props), ptm('root'));
+    var wrapperProps = mergeProps({
+      className: cx('wrapper')
+    }, ptm('wrapper'));
+    var contentProps = mergeProps({
+      className: cx('content'),
+      onScroll: onScroll,
+      onMouseEnter: moveBar
+    }, ptm('content'));
+    var barXProps = mergeProps({
+      ref: xBarRef,
+      role: 'scrollbar',
+      className: cx('barx'),
+      tabIndex: 0,
+      'aria-valuenow': lastScrollTop,
+      'aria-controls': contentId,
+      'aria-orientation': 'horizontal',
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onMouseDown: onXBarMouseDown
+    }, ptm('barx'));
+    var barYProps = mergeProps({
+      ref: yBarRef,
+      role: 'scrollbar',
+      className: cx('bary'),
+      tabIndex: 0,
+      'aria-valuenow': lastScrollLeft,
+      'aria-controls': contentId,
+      'aria-orientation': 'vertical',
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onMouseDown: onYBarMouseDown
+    }, ptm('bary'));
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("div", _extends({
+      ref: contentRef
+    }, contentProps), props.children)), /*#__PURE__*/React__namespace.createElement("div", barXProps), /*#__PURE__*/React__namespace.createElement("div", barYProps));
+  });
+  ScrollPanel.displayName = 'ScrollPanel';
+
+  exports.ScrollPanel = ScrollPanel;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+  return exports;
+
+})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.utils);