@apia/components 4.0.44 → 4.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -4,10 +4,10 @@ import React__default, { createContext, useContext, useEffect, useMemo, useState
4
4
  import parse, { domToReact, Element } from 'html-react-parser';
5
5
  import { Spinner as Spinner$1, Box as Box$1 } from 'theme-ui';
6
6
  import { uniqueId as uniqueId$3, cloneDeep, isFunction as isFunction$1 } from 'lodash-es';
7
- import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, focusOutline, makeStyledComponent, useThemeUI, Label as Label$1, Progress, Grid, Paragraph, Container, Textarea } from '@apia/theme';
7
+ import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, focusOutline, makeStyledComponent, useThemeUI, Label as Label$1, Progress, Grid, Paragraph, Container, Switch, Textarea } from '@apia/theme';
8
8
  import { BarLoader } from 'react-spinners';
9
9
  import uniqueId$2 from 'lodash-es/uniqueId';
10
- import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, getLabel, dateToApiaFormat, dateFromApiaFormat, isChild, EventEmitter, useUnmount, useMount, StatefulEmitter, shallowEqual as shallowEqual$1, getSpecificParent, getDateFormat, customEvents, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, uniqueId as uniqueId$4, useMatchScrollDirection, arrayOrArray } from '@apia/util';
10
+ import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, getLabel, isChild, EventEmitter, useUnmount, useMount, StatefulEmitter, shallowEqual as shallowEqual$1, getSpecificParent, uniqueId as uniqueId$4, getDateFormat, customEvents, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, toBoolean, useMatchScrollDirection, arrayOrArray } from '@apia/util';
11
11
  import usePortal from 'react-cool-portal';
12
12
  import { CSSTransition } from 'react-transition-group';
13
13
  import { uniqueId as uniqueId$1, defaultNotifier, NotificationsList } from '@apia/notifications';
@@ -21,13 +21,14 @@ import { shallowEqual } from '@apia/store';
21
21
  import AnimateHeight from 'react-animate-height';
22
22
  import { useUpdateEffect as useUpdateEffect$1, useScroll } from 'ahooks';
23
23
  import { FaCalendarAlt, FaBars } from '@meronex/icons/fa';
24
- import dayjs from 'dayjs';
25
- import Calendar from 'react-calendar';
26
24
  import ReactInputMask from 'react-input-mask';
25
+ import Calendar from 'react-calendar';
26
+ import dayjs from 'dayjs';
27
27
  import isFunction from 'lodash-es/isFunction';
28
28
  import { createFAsomeStore } from '@apia/dom-store';
29
29
  import { keyframes } from '@emotion/react';
30
30
  import { Remarkable } from 'remarkable';
31
+ import { makeApiaUsersModal2, makeApiaPoolsModals2 } from '@apia/api';
31
32
 
32
33
  const AccordionContext = createContext(null);
33
34
  const AccordionItemContext = createContext(null);
@@ -38,10 +39,10 @@ const useAccordionContext = () => {
38
39
  return context;
39
40
  };
40
41
 
41
- var __defProp$o = Object.defineProperty;
42
- var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
43
- var __publicField$o = (obj, key, value) => {
44
- __defNormalProp$o(obj, typeof key !== "symbol" ? key + "" : key, value);
42
+ var __defProp$p = Object.defineProperty;
43
+ var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
44
+ var __publicField$p = (obj, key, value) => {
45
+ __defNormalProp$p(obj, typeof key !== "symbol" ? key + "" : key, value);
45
46
  return value;
46
47
  };
47
48
  function makeItemStateSelectorHook(handler) {
@@ -73,10 +74,10 @@ class AccordionHandler {
73
74
  constructor(id, props) {
74
75
  this.id = id;
75
76
  this.props = props;
76
- __publicField$o(this, "itemsState", {});
77
- __publicField$o(this, "itemsStateListeners", {});
78
- __publicField$o(this, "propsListeners", []);
79
- __publicField$o(this, "hooks", {
77
+ __publicField$p(this, "itemsState", {});
78
+ __publicField$p(this, "itemsStateListeners", {});
79
+ __publicField$p(this, "propsListeners", []);
80
+ __publicField$p(this, "hooks", {
80
81
  useAccordionContextProvider: () => {
81
82
  const Provider = useMemo(
82
83
  () => ({ children }) => /* @__PURE__ */ jsx(AccordionContext.Provider, { value: this, children }),
@@ -1019,10 +1020,10 @@ const WindowModal = forwardRef(
1019
1020
  }
1020
1021
  );
1021
1022
 
1022
- var __defProp$n = Object.defineProperty;
1023
- var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1024
- var __publicField$n = (obj, key, value) => {
1025
- __defNormalProp$n(obj, key + "" , value);
1023
+ var __defProp$o = Object.defineProperty;
1024
+ var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1025
+ var __publicField$o = (obj, key, value) => {
1026
+ __defNormalProp$o(obj, key + "" , value);
1026
1027
  return value;
1027
1028
  };
1028
1029
  var __accessCheck$d = (obj, member, msg) => {
@@ -1087,7 +1088,7 @@ _onDestroyCb = new WeakMap();
1087
1088
  const BodyScrollLock = new (_a = class {
1088
1089
  constructor() {
1089
1090
  __privateAdd$d(this, _evaluate);
1090
- __publicField$n(this, "lockers", []);
1091
+ __publicField$o(this, "lockers", []);
1091
1092
  }
1092
1093
  getLocker() {
1093
1094
  const locker = new BodyScrollLocker();
@@ -1432,10 +1433,10 @@ const OpenModal = (props) => {
1432
1433
  );
1433
1434
  };
1434
1435
 
1435
- var __defProp$m = Object.defineProperty;
1436
- var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1437
- var __publicField$m = (obj, key, value) => {
1438
- __defNormalProp$m(obj, typeof key !== "symbol" ? key + "" : key, value);
1436
+ var __defProp$n = Object.defineProperty;
1437
+ var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1438
+ var __publicField$n = (obj, key, value) => {
1439
+ __defNormalProp$n(obj, typeof key !== "symbol" ? key + "" : key, value);
1439
1440
  return value;
1440
1441
  };
1441
1442
  var __accessCheck$c = (obj, member, msg) => {
@@ -1479,14 +1480,14 @@ class ApiaUtilModalHandler {
1479
1480
  }
1480
1481
  class ApiaUtilModals {
1481
1482
  constructor() {
1482
- __publicField$m(this, "overlays", []);
1483
- __publicField$m(this, "modals", []);
1483
+ __publicField$n(this, "overlays", []);
1484
+ __publicField$n(this, "modals", []);
1484
1485
  __privateAdd$c(this, _maxId$1, 0);
1485
1486
  __privateAdd$c(this, _maxOverlay, 0);
1486
1487
  __privateAdd$c(this, _innerClose, (id) => {
1487
1488
  this.modals = this.modals.filter((s) => s.id !== id);
1488
1489
  });
1489
- __publicField$m(this, "Component", observer(() => {
1490
+ __publicField$n(this, "Component", observer(() => {
1490
1491
  return /* @__PURE__ */ jsxs(Fragment, { children: [
1491
1492
  this.modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)),
1492
1493
  this.overlays.map((c) => c.render)
@@ -1576,29 +1577,37 @@ _maxId$1 = new WeakMap();
1576
1577
  _maxOverlay = new WeakMap();
1577
1578
  _innerClose = new WeakMap();
1578
1579
 
1579
- var __defProp$l = Object.defineProperty;
1580
- var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1581
- var __publicField$l = (obj, key, value) => {
1582
- __defNormalProp$l(obj, typeof key !== "symbol" ? key + "" : key, value);
1580
+ var __defProp$m = Object.defineProperty;
1581
+ var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1582
+ var __publicField$m = (obj, key, value) => {
1583
+ __defNormalProp$m(obj, typeof key !== "symbol" ? key + "" : key, value);
1583
1584
  return value;
1584
1585
  };
1585
1586
  class ApiaUtilNotifications {
1586
- constructor() {
1587
- __publicField$l(this, "close", (id) => {
1587
+ constructor(util) {
1588
+ this.util = util;
1589
+ __publicField$m(this, "close", (id) => {
1588
1590
  defaultNotifier.close(id);
1589
1591
  });
1590
- __publicField$l(this, "closeAll", () => {
1592
+ __publicField$m(this, "closeAll", () => {
1591
1593
  defaultNotifier.closeAll();
1592
1594
  });
1593
- __publicField$l(this, "notify", (notification) => {
1594
- defaultNotifier.notify({
1595
- ...notification,
1596
- type: notification.type ?? "warning"
1597
- });
1595
+ __publicField$m(this, "notify", (notification) => {
1596
+ if (notification.type === "modal") {
1597
+ this.util.dialogs.alert({
1598
+ children: notification.message,
1599
+ title: notification.title || ""
1600
+ });
1601
+ } else {
1602
+ defaultNotifier.notify({
1603
+ ...notification,
1604
+ type: notification.type ?? "warning"
1605
+ });
1606
+ }
1598
1607
  });
1599
1608
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1600
- __publicField$l(this, "useSelector", (selector) => defaultNotifier.useSelector(selector));
1601
- __publicField$l(this, "Component", () => {
1609
+ __publicField$m(this, "useSelector", (selector) => defaultNotifier.useSelector(selector));
1610
+ __publicField$m(this, "Component", () => {
1602
1611
  return /* @__PURE__ */ jsx(NotificationsList, {});
1603
1612
  });
1604
1613
  }
@@ -2021,10 +2030,10 @@ const AlertModal = ({
2021
2030
  );
2022
2031
  };
2023
2032
 
2024
- var __defProp$k = Object.defineProperty;
2025
- var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2026
- var __publicField$k = (obj, key, value) => {
2027
- __defNormalProp$k(obj, typeof key !== "symbol" ? key + "" : key, value);
2033
+ var __defProp$l = Object.defineProperty;
2034
+ var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2035
+ var __publicField$l = (obj, key, value) => {
2036
+ __defNormalProp$l(obj, typeof key !== "symbol" ? key + "" : key, value);
2028
2037
  return value;
2029
2038
  };
2030
2039
  var __accessCheck$b = (obj, member, msg) => {
@@ -2058,9 +2067,9 @@ class ApiaUtilDialogs {
2058
2067
  constructor() {
2059
2068
  __privateAdd$b(this, _maxIdAlert, 0);
2060
2069
  __privateAdd$b(this, _maxIdConfirm, 0);
2061
- __publicField$k(this, "alerts", []);
2062
- __publicField$k(this, "dialogs", []);
2063
- __publicField$k(this, "Component", observer(() => {
2070
+ __publicField$l(this, "alerts", []);
2071
+ __publicField$l(this, "dialogs", []);
2072
+ __publicField$l(this, "Component", observer(() => {
2064
2073
  const removeModal = useCallback(
2065
2074
  (which) => {
2066
2075
  this.dialogs = this.dialogs.filter((search) => search !== which);
@@ -2252,12 +2261,6 @@ class ApiaUtilParsers {
2252
2261
  }
2253
2262
  return aux ? parseFloat(aux) : parseFloat(value);
2254
2263
  }
2255
- dateToApiaString(value) {
2256
- return dateToApiaFormat(value);
2257
- }
2258
- dateFromApiaString(value) {
2259
- return dateFromApiaFormat(value);
2260
- }
2261
2264
  /**
2262
2265
  * Hay muchos valores que podrían querer ser interpretados como booleano
2263
2266
  *
@@ -2330,10 +2333,10 @@ parseCellValue_fn = function(cellValue) {
2330
2333
  return cellValue.match(/^\s*"?([^"]+)"?[\s\r\n]*$/)?.[1] ?? cellValue;
2331
2334
  };
2332
2335
 
2333
- var __defProp$j = Object.defineProperty;
2334
- var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2335
- var __publicField$j = (obj, key, value) => {
2336
- __defNormalProp$j(obj, key + "" , value);
2336
+ var __defProp$k = Object.defineProperty;
2337
+ var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2338
+ var __publicField$k = (obj, key, value) => {
2339
+ __defNormalProp$k(obj, key + "" , value);
2337
2340
  return value;
2338
2341
  };
2339
2342
  let maxId = 0;
@@ -2341,14 +2344,14 @@ class ApiaUtilTooltip {
2341
2344
  constructor(props, close) {
2342
2345
  this.props = props;
2343
2346
  this.close = close;
2344
- __publicField$j(this, "id", `tooltip__${maxId++}`);
2347
+ __publicField$k(this, "id", `tooltip__${maxId++}`);
2345
2348
  }
2346
2349
  }
2347
2350
 
2348
- var __defProp$i = Object.defineProperty;
2349
- var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2350
- var __publicField$i = (obj, key, value) => {
2351
- __defNormalProp$i(obj, typeof key !== "symbol" ? key + "" : key, value);
2351
+ var __defProp$j = Object.defineProperty;
2352
+ var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2353
+ var __publicField$j = (obj, key, value) => {
2354
+ __defNormalProp$j(obj, typeof key !== "symbol" ? key + "" : key, value);
2352
2355
  return value;
2353
2356
  };
2354
2357
  var __accessCheck$9 = (obj, member, msg) => {
@@ -2381,7 +2384,7 @@ class AutomaticTooltip {
2381
2384
  __privateAdd$9(this, _timeout$1, 500);
2382
2385
  __privateAdd$9(this, _tooltipTimeout, 0);
2383
2386
  __privateAdd$9(this, _unsuscribe, null);
2384
- __publicField$i(this, "ref", (el) => {
2387
+ __publicField$j(this, "ref", (el) => {
2385
2388
  var _a, _b;
2386
2389
  (_a = __privateGet$7(this, _unsuscribe)) == null ? void 0 : _a.call(this);
2387
2390
  const listener = () => {
@@ -2413,7 +2416,7 @@ class AutomaticTooltip {
2413
2416
  }
2414
2417
  });
2415
2418
  __privateAdd$9(this, _tooltip, null);
2416
- __publicField$i(this, "update", (tooltip) => {
2419
+ __publicField$j(this, "update", (tooltip) => {
2417
2420
  __privateSet$5(this, _tooltip, tooltip);
2418
2421
  });
2419
2422
  __privateSet$5(this, _tooltip, tooltip);
@@ -2764,10 +2767,10 @@ const Tooltip = ({
2764
2767
  );
2765
2768
  };
2766
2769
 
2767
- var __defProp$h = Object.defineProperty;
2768
- var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2769
- var __publicField$h = (obj, key, value) => {
2770
- __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
2770
+ var __defProp$i = Object.defineProperty;
2771
+ var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2772
+ var __publicField$i = (obj, key, value) => {
2773
+ __defNormalProp$i(obj, typeof key !== "symbol" ? key + "" : key, value);
2771
2774
  return value;
2772
2775
  };
2773
2776
  var __accessCheck$8 = (obj, member, msg) => {
@@ -2787,7 +2790,7 @@ var _emitter$2, _shoutChangedList;
2787
2790
  class ApiaUtilTooltips {
2788
2791
  constructor() {
2789
2792
  __privateAdd$8(this, _emitter$2, new EventEmitter());
2790
- __publicField$h(this, "tooltips", []);
2793
+ __publicField$i(this, "tooltips", []);
2791
2794
  __privateAdd$8(this, _shoutChangedList, () => {
2792
2795
  __privateGet$6(this, _emitter$2).emit("changedList", [...this.tooltips]);
2793
2796
  });
@@ -2795,7 +2798,7 @@ class ApiaUtilTooltips {
2795
2798
  * Permite crear un tooltip que se abrirá automáticamente al estar parado
2796
2799
  * sobre un elemento durante 300ms
2797
2800
  */
2798
- __publicField$h(this, "useHover", (tooltip) => {
2801
+ __publicField$i(this, "useHover", (tooltip) => {
2799
2802
  let tt = void 0;
2800
2803
  tt = useMemo(() => {
2801
2804
  tt?.ref(null);
@@ -2806,15 +2809,15 @@ class ApiaUtilTooltips {
2806
2809
  });
2807
2810
  return tt;
2808
2811
  });
2809
- __publicField$h(this, "close", (id) => {
2812
+ __publicField$i(this, "close", (id) => {
2810
2813
  this.tooltips = this.tooltips.filter((current) => current.id !== id);
2811
2814
  __privateGet$6(this, _shoutChangedList).call(this);
2812
2815
  });
2813
- __publicField$h(this, "closeAll", () => {
2816
+ __publicField$i(this, "closeAll", () => {
2814
2817
  this.tooltips = [];
2815
2818
  __privateGet$6(this, _shoutChangedList).call(this);
2816
2819
  });
2817
- __publicField$h(this, "open", (tooltip) => {
2820
+ __publicField$i(this, "open", (tooltip) => {
2818
2821
  const controller = new ApiaUtilTooltip(tooltip, () => {
2819
2822
  this.close(controller.id);
2820
2823
  controller.props.onClose?.();
@@ -2827,7 +2830,7 @@ class ApiaUtilTooltips {
2827
2830
  __privateGet$6(this, _shoutChangedList).call(this);
2828
2831
  return controller;
2829
2832
  });
2830
- __publicField$h(this, "Component", () => {
2833
+ __publicField$i(this, "Component", () => {
2831
2834
  const [tooltips, setTooltips] = useState(this.tooltips);
2832
2835
  useMount(() => {
2833
2836
  const unsuscribeToList = __privateGet$6(this, _emitter$2).on("changedList", (ev) => {
@@ -2869,10 +2872,10 @@ class ApiaUtilTooltips {
2869
2872
  _emitter$2 = new WeakMap();
2870
2873
  _shoutChangedList = new WeakMap();
2871
2874
 
2872
- var __defProp$g = Object.defineProperty;
2873
- var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2874
- var __publicField$g = (obj, key, value) => {
2875
- __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
2875
+ var __defProp$h = Object.defineProperty;
2876
+ var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2877
+ var __publicField$h = (obj, key, value) => {
2878
+ __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
2876
2879
  return value;
2877
2880
  };
2878
2881
  var __accessCheck$7 = (obj, member, msg) => {
@@ -2909,7 +2912,7 @@ class ApiaUtilMenu {
2909
2912
  constructor() {
2910
2913
  __privateAdd$7(this, _emitter$1, new EventEmitter());
2911
2914
  __privateAdd$7(this, _items$1, []);
2912
- __publicField$g(this, "menuProps", null);
2915
+ __publicField$h(this, "menuProps", null);
2913
2916
  __privateAdd$7(this, _hooks, {
2914
2917
  useIsOpen: () => {
2915
2918
  const [isOpen, setIsOpen] = useState(false);
@@ -2924,10 +2927,10 @@ class ApiaUtilMenu {
2924
2927
  ];
2925
2928
  }
2926
2929
  });
2927
- __publicField$g(this, "close", () => {
2930
+ __publicField$h(this, "close", () => {
2928
2931
  __privateGet$5(this, _emitter$1).emit("toggle", false);
2929
2932
  });
2930
- __publicField$g(this, "open", ({
2933
+ __publicField$h(this, "open", ({
2931
2934
  menuProps,
2932
2935
  items
2933
2936
  }) => {
@@ -2968,7 +2971,7 @@ class ApiaUtilMenu {
2968
2971
  return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key }, children);
2969
2972
  }) });
2970
2973
  });
2971
- __publicField$g(this, "Component", () => {
2974
+ __publicField$h(this, "Component", () => {
2972
2975
  const [isOpen, close] = __privateGet$5(this, _hooks).useIsOpen();
2973
2976
  if (!isOpen)
2974
2977
  return null;
@@ -2993,17 +2996,17 @@ _hooks = new WeakMap();
2993
2996
  _maxId = new WeakMap();
2994
2997
  _RenderMenu = new WeakMap();
2995
2998
 
2996
- var __defProp$f = Object.defineProperty;
2997
- var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2998
- var __publicField$f = (obj, key, value) => {
2999
- __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
2999
+ var __defProp$g = Object.defineProperty;
3000
+ var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3001
+ var __publicField$g = (obj, key, value) => {
3002
+ __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
3000
3003
  return value;
3001
3004
  };
3002
3005
  class ApiaUtilMouse extends EventEmitter {
3003
3006
  constructor() {
3004
3007
  super();
3005
- __publicField$f(this, "x", 0);
3006
- __publicField$f(this, "y", 0);
3008
+ __publicField$g(this, "x", 0);
3009
+ __publicField$g(this, "y", 0);
3007
3010
  document.addEventListener("mousemove", (ev) => {
3008
3011
  this.x = ev.clientX;
3009
3012
  this.y = ev.clientY;
@@ -3015,10 +3018,10 @@ class ApiaUtilMouse extends EventEmitter {
3015
3018
  }
3016
3019
  }
3017
3020
 
3018
- var __defProp$e = Object.defineProperty;
3019
- var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3020
- var __publicField$e = (obj, key, value) => {
3021
- __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
3021
+ var __defProp$f = Object.defineProperty;
3022
+ var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3023
+ var __publicField$f = (obj, key, value) => {
3024
+ __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
3022
3025
  return value;
3023
3026
  };
3024
3027
  var __accessCheck$6 = (obj, member, msg) => {
@@ -3042,15 +3045,15 @@ var __privateSet$3 = (obj, member, value, setter) => {
3042
3045
  var _instance;
3043
3046
  const _ApiaUtil = class _ApiaUtil {
3044
3047
  constructor() {
3045
- __publicField$e(this, "dialogs");
3046
- __publicField$e(this, "menu");
3047
- __publicField$e(this, "modals");
3048
- __publicField$e(this, "mouse");
3049
- __publicField$e(this, "notifications");
3050
- __publicField$e(this, "parsers");
3051
- __publicField$e(this, "tabs");
3052
- __publicField$e(this, "tooltips");
3053
- __publicField$e(this, "Component", () => {
3048
+ __publicField$f(this, "dialogs");
3049
+ __publicField$f(this, "menu");
3050
+ __publicField$f(this, "modals");
3051
+ __publicField$f(this, "mouse");
3052
+ __publicField$f(this, "notifications");
3053
+ __publicField$f(this, "parsers");
3054
+ __publicField$f(this, "tabs");
3055
+ __publicField$f(this, "tooltips");
3056
+ __publicField$f(this, "Component", () => {
3054
3057
  return /* @__PURE__ */ jsxs(Fragment, { children: [
3055
3058
  /* @__PURE__ */ jsx(this.dialogs.Component, {}),
3056
3059
  /* @__PURE__ */ jsx(this.modals.Component, {}),
@@ -3063,7 +3066,7 @@ const _ApiaUtil = class _ApiaUtil {
3063
3066
  this.menu = new ApiaUtilMenu();
3064
3067
  this.modals = new ApiaUtilModals();
3065
3068
  this.mouse = new ApiaUtilMouse();
3066
- this.notifications = new ApiaUtilNotifications();
3069
+ this.notifications = new ApiaUtilNotifications(this);
3067
3070
  this.parsers = new ApiaUtilParsers();
3068
3071
  this.tabs = new ApiaUtilTabsController();
3069
3072
  this.tooltips = new ApiaUtilTooltips();
@@ -3079,22 +3082,22 @@ _instance = new WeakMap();
3079
3082
  __privateAdd$6(_ApiaUtil, _instance, void 0);
3080
3083
  let ApiaUtil = _ApiaUtil;
3081
3084
 
3082
- var __defProp$d = Object.defineProperty;
3083
- var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3084
- var __publicField$d = (obj, key, value) => {
3085
- __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
3085
+ var __defProp$e = Object.defineProperty;
3086
+ var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3087
+ var __publicField$e = (obj, key, value) => {
3088
+ __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
3086
3089
  return value;
3087
3090
  };
3088
3091
  class ScreenLocker {
3089
3092
  constructor() {
3090
- __publicField$d(this, "emitter", new StatefulEmitter({
3093
+ __publicField$e(this, "emitter", new StatefulEmitter({
3091
3094
  locks: {
3092
3095
  common: { count: 0 },
3093
3096
  linear: { count: 0 },
3094
3097
  white: { count: 1 }
3095
3098
  }
3096
3099
  }));
3097
- __publicField$d(this, "lock", (options) => {
3100
+ __publicField$e(this, "lock", (options) => {
3098
3101
  this.emitter.setState("locks", (s) => {
3099
3102
  const key = options?.type ?? "common";
3100
3103
  return {
@@ -3110,11 +3113,11 @@ class ScreenLocker {
3110
3113
  };
3111
3114
  });
3112
3115
  });
3113
- __publicField$d(this, "hasReleased", false);
3116
+ __publicField$e(this, "hasReleased", false);
3114
3117
  /**
3115
3118
  * This method will work once, then, the action will be ignored. The ScreenLocker starts always locked on white, when this method is called, all listeners of onRelease will be called and the lock will be released.
3116
3119
  */
3117
- __publicField$d(this, "release", () => {
3120
+ __publicField$e(this, "release", () => {
3118
3121
  if (this.hasReleased)
3119
3122
  return;
3120
3123
  this.hasReleased = true;
@@ -3130,11 +3133,11 @@ class ScreenLocker {
3130
3133
  /**
3131
3134
  * This method notifies when the screenLock is released by the first time.
3132
3135
  */
3133
- __publicField$d(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
3136
+ __publicField$e(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
3134
3137
  /**
3135
3138
  * This component is the responsible for putting the lock courtain in the browser when it's required. It must be used once per application.
3136
3139
  */
3137
- __publicField$d(this, "Component", () => {
3140
+ __publicField$e(this, "Component", () => {
3138
3141
  const locks = this.emitter.useState("locks");
3139
3142
  const style = {
3140
3143
  alignItems: "center",
@@ -3207,10 +3210,10 @@ const OptionsBox = observer(() => {
3207
3210
  }) });
3208
3211
  });
3209
3212
 
3210
- var __defProp$c = Object.defineProperty;
3211
- var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3212
- var __publicField$c = (obj, key, value) => {
3213
- __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
3213
+ var __defProp$d = Object.defineProperty;
3214
+ var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3215
+ var __publicField$d = (obj, key, value) => {
3216
+ __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
3214
3217
  return value;
3215
3218
  };
3216
3219
  var __accessCheck$5 = (obj, member, msg) => {
@@ -3234,7 +3237,7 @@ var __privateSet$2 = (obj, member, value, setter) => {
3234
3237
  var _actualSearch, _timeout;
3235
3238
  class AutocompleteController {
3236
3239
  constructor(properties) {
3237
- __publicField$c(this, "state", {
3240
+ __publicField$d(this, "state", {
3238
3241
  disabled: false,
3239
3242
  readOnly: false,
3240
3243
  id: uniqueId$3("autocomplete"),
@@ -3267,7 +3270,7 @@ class AutocompleteController {
3267
3270
  }
3268
3271
  });
3269
3272
  __privateAdd$5(this, _timeout, 0);
3270
- __publicField$c(this, "tooltipRef", null);
3273
+ __publicField$d(this, "tooltipRef", null);
3271
3274
  Object.assign(this.state, properties);
3272
3275
  if (properties.value) {
3273
3276
  this.state.showValue = String(
@@ -4002,30 +4005,6 @@ const Checkbox$1 = forwardRef(
4002
4005
  );
4003
4006
  Checkbox$1.displayName = "Checkbox";
4004
4007
 
4005
- const CalModal = React__default.forwardRef(
4006
- ({ handleClickDay, calValue, locale }) => {
4007
- return /* @__PURE__ */ jsx(
4008
- Box,
4009
- {
4010
- ...getVariant("layout.common.components.datePicker"),
4011
- className: "datePicker",
4012
- children: /* @__PURE__ */ jsx(
4013
- Calendar,
4014
- {
4015
- onClickDay: handleClickDay,
4016
- locale,
4017
- value: calValue || /* @__PURE__ */ new Date(),
4018
- nextLabel: "\u203A",
4019
- next2Label: "\xBB",
4020
- prevLabel: "\u2039",
4021
- prev2Label: "\xAB"
4022
- }
4023
- )
4024
- }
4025
- );
4026
- }
4027
- );
4028
-
4029
4008
  const IconInput = ({
4030
4009
  additionalButtons,
4031
4010
  additionalButtonsPosition = "before",
@@ -4102,6 +4081,36 @@ const IconInput = ({
4102
4081
  );
4103
4082
  };
4104
4083
 
4084
+ const CalModal = React__default.forwardRef(
4085
+ ({ handleClickDay, calValue, locale }) => {
4086
+ return /* @__PURE__ */ jsx(
4087
+ Box,
4088
+ {
4089
+ ...getVariant("layout.common.components.datePicker"),
4090
+ className: "datePicker",
4091
+ children: /* @__PURE__ */ jsx(
4092
+ Calendar,
4093
+ {
4094
+ onClickDay: handleClickDay,
4095
+ locale,
4096
+ value: calValue || /* @__PURE__ */ new Date(),
4097
+ nextLabel: "\u203A",
4098
+ next2Label: "\xBB",
4099
+ prevLabel: "\u2039",
4100
+ prev2Label: "\xAB"
4101
+ }
4102
+ )
4103
+ }
4104
+ );
4105
+ }
4106
+ );
4107
+
4108
+ var __defProp$c = Object.defineProperty;
4109
+ var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4110
+ var __publicField$c = (obj, key, value) => {
4111
+ __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
4112
+ return value;
4113
+ };
4105
4114
  const DEFAULT_LOCALE = window.LANG_CODE;
4106
4115
  const DEFAULT_MASK_PLACEHOLDER = "_";
4107
4116
  const dateFormat = getDateFormat();
@@ -4110,334 +4119,217 @@ const getMaskForDateFormat = () => {
4110
4119
  return "9999/99/99";
4111
4120
  return "99/99/9999";
4112
4121
  };
4113
- const DateInput = React__default.forwardRef(
4114
- ({
4115
- allowPickBeforeToday,
4116
- buttonProps: outerButtonProps,
4117
- CalModalRenderer,
4118
- className,
4119
- error,
4120
- getCustomMask,
4121
- inputClassName,
4122
- isLoading,
4123
- onBlur,
4124
- onChange,
4125
- onDelete,
4126
- onError,
4127
- renderLabel,
4128
- value: outerValue,
4129
- avoidErrorMessage,
4130
- ...props
4131
- }, ref) => {
4132
- const id = React__default.useMemo(uniqueId$3, []);
4133
- const [inputValue, setInputValue] = React__default.useState(outerValue ?? "");
4134
- const [calValue, setCalValue] = React__default.useState();
4135
- const boxRef = React__default.useRef(null);
4136
- const { deleteFiltersTimestamp, ...otherProps } = props;
4137
- const hasBlured = useRef(false);
4138
- const [stateError, setError] = React__default.useState(error ?? null);
4139
- const [isFocused, setIsFocused] = React__default.useState(false);
4140
- const lastEmittedValue = React__default.useRef(outerValue ?? "");
4141
- useUpdateEffect$1(() => {
4142
- setInputValue(outerValue ?? "");
4143
- lastEmittedValue.current = outerValue;
4144
- }, [outerValue]);
4145
- useUpdateEffect$1(() => {
4146
- setError(error ?? null);
4147
- }, [error]);
4148
- useUpdateEffect$1(() => {
4149
- setError(null);
4150
- if (deleteFiltersTimestamp !== void 0) {
4151
- setCalendarValue("");
4152
- }
4153
- }, [deleteFiltersTimestamp]);
4154
- useUpdateEffect$1(() => {
4155
- if (onError)
4156
- onError(stateError);
4157
- if (stateError) {
4158
- setInputValue("");
4159
- }
4160
- if (onError)
4161
- onError(stateError ?? "");
4162
- }, [stateError]);
4163
- const shoutOnChange = React__default.useCallback(
4164
- (newValue) => {
4165
- if (lastEmittedValue.current !== newValue) {
4166
- lastEmittedValue.current = newValue;
4167
- return onChange?.(newValue) ?? true;
4168
- }
4169
- },
4170
- [onChange]
4122
+ class DateInputController {
4123
+ constructor(actualId) {
4124
+ __publicField$c(this, "props", {});
4125
+ __publicField$c(this, "state", {});
4126
+ __publicField$c(this, "_ref", null);
4127
+ __publicField$c(this, "error", false);
4128
+ __publicField$c(this, "inputValue", "");
4129
+ __publicField$c(this, "value", null);
4130
+ __publicField$c(this, "previousValue", "");
4131
+ this.props.id = uniqueId$4(actualId ?? "date-input");
4132
+ makeAutoObservable(this);
4133
+ }
4134
+ clear() {
4135
+ this.setValueFromString("");
4136
+ this.focus();
4137
+ }
4138
+ focus() {
4139
+ const input = this._ref?.querySelector("input");
4140
+ if (input) {
4141
+ input.focus();
4142
+ setTimeout(() => {
4143
+ window.requestAnimationFrame(() => {
4144
+ input.setSelectionRange(0, input.value.length);
4145
+ });
4146
+ }, 0);
4147
+ }
4148
+ }
4149
+ ref(el) {
4150
+ this._ref = el;
4151
+ }
4152
+ get calendarElementId() {
4153
+ return `DateModal${this.props.id}`;
4154
+ }
4155
+ isInsidePicker(el) {
4156
+ return !!el?.closest(
4157
+ `#${CSS.escape(this.props.id ?? "")}, #${CSS.escape(this.calendarElementId)}`
4171
4158
  );
4172
- const setCalendarValue = React__default.useCallback(
4173
- (value, nocheck, avoidShout) => {
4174
- if (value === "") {
4175
- void shoutOnChange(value);
4176
- setInputValue(value);
4177
- setCalValue(void 0);
4178
- return;
4179
- }
4180
- let newDate = dayjs(value, dateFormat);
4181
- if (!newDate.isValid())
4182
- newDate = dayjs(/* @__PURE__ */ new Date(), dateFormat);
4183
- const formattedDate = newDate.format(dateFormat);
4184
- const today = /* @__PURE__ */ new Date();
4185
- today.setHours(0, 0, 0, 0);
4186
- if (formattedDate !== inputValue && nocheck !== true) {
4187
- void shoutOnChange("");
4188
- setInputValue("");
4189
- setError(window.MSG_INVALID_DATE);
4190
- } else if (allowPickBeforeToday === false && newDate.isBefore(today)) {
4191
- void shoutOnChange("");
4192
- setInputValue("");
4193
- setError(window.MSG_FEC_FIN_MAY_FEC_INI);
4194
- } else {
4195
- if (avoidShout) {
4196
- setInputValue(formattedDate);
4197
- setError(null);
4198
- setCalValue(newDate.toDate());
4199
- } else {
4200
- const shoutResult = shoutOnChange(
4201
- value === "" ? "" : formattedDate
4202
- );
4203
- if (shoutResult === false) {
4204
- setInputValue(shoutResult || "");
4205
- setError(null);
4206
- setCalValue(/* @__PURE__ */ new Date());
4207
- } else if (typeof shoutResult === "string") {
4208
- setInputValue("");
4209
- setError(shoutResult);
4210
- setCalValue(/* @__PURE__ */ new Date());
4211
- } else {
4212
- setInputValue(formattedDate);
4213
- setError(null);
4214
- setCalValue(newDate.toDate());
4215
- }
4159
+ }
4160
+ onBlur(ev) {
4161
+ if (!this.isInsidePicker(ev.relatedTarget)) {
4162
+ if (this.error) {
4163
+ this.inputValue = "";
4164
+ this.value = null;
4165
+ this.error = false;
4166
+ }
4167
+ this.props.onBlur?.(this.inputValue, ev);
4168
+ }
4169
+ }
4170
+ onInputChange(ev) {
4171
+ this.setValueFromString(ev.target.value);
4172
+ }
4173
+ onCalendarSelect(value) {
4174
+ this.setValue(value);
4175
+ }
4176
+ openCalendar(ev) {
4177
+ const tooltip = ApiaUtil.instance.tooltips.open({
4178
+ attachToElement() {
4179
+ return ev.target.closest("button");
4180
+ },
4181
+ attachToElementAnchorPoint: "center",
4182
+ closeOnClick: false,
4183
+ closeOnClickOut: true,
4184
+ closeOnEscape: true,
4185
+ closeOnMouseLeaveTooltip: false,
4186
+ closeOnMouseLeaveAttachedElement: false,
4187
+ closeOnScrollOut: true,
4188
+ children: /* @__PURE__ */ jsx("div", { id: this.calendarElementId, children: /* @__PURE__ */ jsx(
4189
+ CalModal,
4190
+ {
4191
+ calValue: this.value || /* @__PURE__ */ new Date(),
4192
+ locale: DEFAULT_LOCALE,
4193
+ handleClickDay: (date) => {
4194
+ tooltip.close();
4195
+ this.onCalendarSelect(date);
4196
+ this.focus();
4216
4197
  }
4217
4198
  }
4199
+ ) }),
4200
+ initialFocusGetter(el) {
4201
+ return el.querySelector(`.react-calendar__tile--active`);
4218
4202
  },
4219
- [allowPickBeforeToday, inputValue, shoutOnChange]
4220
- );
4221
- const selectDate = React__default.useCallback(
4222
- (val) => {
4223
- const newValue = dayjs(val).format(dateFormat);
4224
- setCalendarValue(newValue, true);
4225
- },
4226
- [setCalendarValue]
4227
- );
4228
- useEffect(() => {
4229
- if (stateError !== "" && stateError !== null && !avoidErrorMessage) {
4230
- ApiaUtil.instance.notifications.notify({
4231
- message: stateError,
4232
- type: "warning"
4203
+ minSize: { width: 350, height: 310 },
4204
+ onClose: () => {
4205
+ window.requestAnimationFrame(() => {
4206
+ if (!this.isInsidePicker(document.activeElement)) {
4207
+ this.props.onBlur?.(this.inputValue);
4208
+ }
4233
4209
  });
4234
4210
  }
4235
- }, [avoidErrorMessage, stateError]);
4236
- const handleBlur = React__default.useCallback(
4237
- (ev) => {
4238
- hasBlured.current = true;
4239
- if (ev.target.value && !dayjs(ev.target.value, dateFormat, true).isValid()) {
4240
- setInputValue("");
4241
- onError?.(window.MSG_INVALID_DATE);
4242
- return;
4243
- }
4244
- if (onBlur && !isChild(ev.relatedTarget, (current) => {
4245
- return current.id === `DateModal${id}` || current.id === `DateInput${id}`;
4246
- })) {
4247
- const newEvent = {
4248
- ...ev,
4249
- target: ev.target.matches("input.dateInput") ? ev.target : ev.target.closest(".dateInput")?.querySelector(
4250
- "input"
4251
- )
4252
- };
4253
- const actualBlur = onBlur instanceof Promise ? onBlur : (ev2) => new Promise((resolve) => {
4254
- const result = onBlur?.(ev2);
4255
- resolve(result);
4256
- });
4257
- void actualBlur(newEvent).then((result) => {
4258
- if (typeof result === "string") {
4259
- setError(result);
4260
- } else if (result === false) {
4261
- setInputValue("");
4262
- }
4263
- });
4211
+ });
4212
+ }
4213
+ setValueFromString(str, fire = true) {
4214
+ if (str === "" || str.replaceAll("_", "9") === getMaskForDateFormat()) {
4215
+ this.inputValue = "";
4216
+ this.setValue(null, fire);
4217
+ } else if (str !== this.inputValue) {
4218
+ const hasPlaceHolder = str.match(/_/);
4219
+ if (!hasPlaceHolder) {
4220
+ const value = dayjs(str, dateFormat);
4221
+ const formattedDate = value.format(dateFormat);
4222
+ if (value.isValid() && formattedDate === str) {
4223
+ this.setValue(value.toDate(), fire);
4224
+ } else {
4225
+ this.inputValue = str;
4226
+ this.props.onError?.(getLabel("msgInvalidDate").text);
4227
+ this.error = true;
4264
4228
  }
4265
- },
4266
- [id, onBlur, onError]
4229
+ } else {
4230
+ this.inputValue = str;
4231
+ }
4232
+ }
4233
+ }
4234
+ async setValue(date, fire = true) {
4235
+ this.error = false;
4236
+ if (date !== this.value) {
4237
+ const dateValue = dayjs(date);
4238
+ const newValue = dateValue.isValid() ? dateValue.format(dateFormat) : "";
4239
+ const res = fire ? await this.props.onChange?.(newValue) : null;
4240
+ this.inputValue = newValue || "";
4241
+ if (typeof res !== "string") {
4242
+ this.value = date;
4243
+ } else {
4244
+ this.error = true;
4245
+ this.value = null;
4246
+ this.props.onError?.(res);
4247
+ }
4248
+ }
4249
+ }
4250
+ render(props) {
4251
+ const { onBlur, onChange, onError, id } = props;
4252
+ Object.assign(this.props, {
4253
+ onBlur,
4254
+ onChange,
4255
+ onError,
4256
+ id: id ?? this.props.id
4257
+ });
4258
+ const { value, disabled, readonly } = props;
4259
+ Object.assign(this.state, { readonly, value, disabled });
4260
+ if (value !== void 0 && this.previousValue !== value) {
4261
+ this.previousValue = value;
4262
+ this.setValueFromString(value, false);
4263
+ }
4264
+ }
4265
+ }
4266
+ const DateInput = observer(
4267
+ ({
4268
+ className,
4269
+ disabled,
4270
+ id: outerId,
4271
+ inputRef,
4272
+ onBlur,
4273
+ onChange,
4274
+ onError,
4275
+ readonly,
4276
+ value: outerValue
4277
+ }) => {
4278
+ const controller = useMemo(
4279
+ () => new DateInputController(outerId),
4280
+ [outerId]
4267
4281
  );
4268
- const inputProps = React__default.useMemo(
4269
- () => ({
4270
- ...otherProps,
4271
- className: `dateInput ${inputClassName ?? ""}`,
4272
- value: stateError ? "" : renderLabel ? renderLabel(inputValue) : inputValue,
4273
- ref,
4274
- onChange: (ev) => {
4275
- if (props.readOnly) {
4276
- return;
4277
- }
4278
- setInputValue(ev.target.value);
4279
- if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "") {
4280
- setError(null);
4281
- const hasPlaceHolder = ev.target.value.match(/_/);
4282
- if (!hasPlaceHolder)
4283
- return onChange?.(ev.target.value);
4284
- } else if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) === ev.target.value) {
4285
- setCalendarValue("");
4286
- }
4287
- },
4288
- onBlur: (ev) => {
4289
- setIsFocused(false);
4290
- if (!(props.readOnly || getCustomMask || document.querySelector(".overlay.screenLock")))
4291
- setCalendarValue(ev.target.value, false, true);
4292
- if (hasBlured.current) {
4293
- hasBlured.current = false;
4294
- } else if (!document.querySelector(".overlay.screenLock")) {
4295
- handleBlur(ev);
4296
- }
4297
- },
4298
- onFocus: () => {
4299
- setIsFocused(true);
4300
- },
4301
- onKeyDown: (ev) => {
4302
- if (ev.key === "Enter")
4303
- setCalendarValue(inputValue);
4304
- }
4305
- }),
4306
- // eslint-disable-next-line react-hooks/exhaustive-deps
4307
- [
4308
- otherProps,
4309
- inputClassName,
4310
- stateError,
4311
- renderLabel,
4312
- inputValue,
4313
- ref,
4314
- props.readOnly,
4315
- getCustomMask,
4316
- setCalendarValue,
4317
- handleBlur
4318
- ]
4319
- );
4320
- const buttonProps = React__default.useMemo(
4321
- () => ({
4322
- disabled: props.disabled || props.readOnly,
4323
- "aria-label": window.LBL_PICK_DATE,
4324
- ...outerButtonProps
4325
- }),
4326
- [outerButtonProps, props.disabled, props.readOnly]
4327
- );
4328
- const additionalButtons = React__default.useMemo(() => {
4329
- const doDelete = (e) => {
4330
- e?.stopPropagation();
4331
- setCalendarValue("");
4332
- onDelete?.();
4333
- document.querySelector(`#DateInput${id} input`)?.focus();
4334
- };
4335
- return /* @__PURE__ */ jsx(
4336
- "span",
4337
- {
4338
- role: "button",
4339
- tabIndex: 0,
4340
- onMouseDown: (e) => {
4341
- e.preventDefault();
4342
- e.stopPropagation();
4343
- },
4344
- onClick: (e) => {
4345
- e.stopPropagation();
4346
- doDelete(e);
4347
- },
4348
- onKeyDown: (e) => {
4349
- if (e.key === "Enter" || e.key === " ") {
4350
- e.preventDefault();
4351
- doDelete(e);
4352
- }
4353
- },
4354
- "aria-label": getLabel("btnAiDelete").text,
4355
- title: getLabel("btnAiDelete").text,
4356
- children: /* @__PURE__ */ jsx(Close, { type: "button", className: "delete_date_button" })
4357
- }
4358
- );
4359
- }, [id, onDelete, setCalendarValue]);
4360
- return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
4282
+ controller.render({
4283
+ className,
4284
+ disabled,
4285
+ id: outerId,
4286
+ inputRef,
4287
+ onBlur,
4288
+ onChange,
4289
+ onError,
4290
+ readonly,
4291
+ value: outerValue
4292
+ });
4293
+ return /* @__PURE__ */ jsx(
4361
4294
  Box,
4362
4295
  {
4363
4296
  ...getVariant("forms.dateInput"),
4364
4297
  className: `${className ?? ""} dateInput`,
4365
- id: `DateInput${id}`,
4366
- ref: boxRef,
4367
- onBlur: (e) => {
4368
- setIsFocused(false);
4369
- if (hasBlured.current) {
4370
- hasBlured.current = false;
4371
- } else if (!document.querySelector(".overlay.screenLock")) {
4372
- handleBlur(e);
4373
- }
4374
- },
4298
+ id: controller.props.id,
4299
+ onBlur: controller.onBlur.bind(controller),
4300
+ ref: controller.ref.bind(controller),
4375
4301
  children: /* @__PURE__ */ jsx(
4376
4302
  IconInput,
4377
4303
  {
4378
- additionalButtons: (
4379
- // mostrar sólo si el campo tiene valor, no está en modo placeholder,
4380
- // no es readOnly/disabled Y el input está enfocado
4381
- inputValue && inputValue !== getMaskForDateFormat().replaceAll(
4382
- "9",
4383
- DEFAULT_MASK_PLACEHOLDER
4384
- ) && !props.readOnly && !props.disabled && isFocused ? additionalButtons : void 0
4385
- ),
4386
- buttonProps,
4387
- className: `${stateError !== null ? "field__withError" : ""}`,
4304
+ additionalButtons: controller.inputValue && getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== controller.inputValue ? /* @__PURE__ */ jsx(
4305
+ Close,
4306
+ {
4307
+ as: "button",
4308
+ onClick: controller.clear.bind(controller),
4309
+ className: "delete_date_button",
4310
+ onMouseDown: (e) => {
4311
+ e.preventDefault();
4312
+ e.stopPropagation();
4313
+ }
4314
+ }
4315
+ ) : void 0,
4316
+ buttonProps: { disabled },
4388
4317
  icon: FaCalendarAlt,
4389
- inputProps,
4390
- isLoading,
4391
- mask: getCustomMask ? getCustomMask() : getMaskForDateFormat(),
4392
- maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
4393
- onClick: (ev) => {
4394
- const tooltip = ApiaUtil.instance.tooltips.open({
4395
- attachToElement() {
4396
- return ev.target.closest(
4397
- "button"
4398
- );
4399
- },
4400
- attachToElementAnchorPoint: "center",
4401
- closeOnClick: false,
4402
- closeOnClickOut: true,
4403
- closeOnEscape: true,
4404
- closeOnMouseLeaveTooltip: false,
4405
- closeOnMouseLeaveAttachedElement: false,
4406
- closeOnScrollOut: true,
4407
- children: CalModalRenderer ? /* @__PURE__ */ jsx(
4408
- CalModalRenderer,
4409
- {
4410
- calValue,
4411
- locale: DEFAULT_LOCALE,
4412
- handleClickDay: (ev2) => {
4413
- selectDate(ev2);
4414
- setCalValue(ev2);
4415
- tooltip.close();
4416
- }
4417
- }
4418
- ) : /* @__PURE__ */ jsx(
4419
- CalModal,
4420
- {
4421
- calValue,
4422
- locale: DEFAULT_LOCALE,
4423
- handleClickDay: (ev2) => {
4424
- selectDate(ev2);
4425
- setCalValue(ev2);
4426
- tooltip.close();
4427
- }
4428
- }
4429
- ),
4430
- initialFocusGetter(el) {
4431
- return el.querySelector(`.react-calendar__tile--active`);
4432
- },
4433
- minSize: { width: 350, height: 310 }
4434
- });
4318
+ inputProps: {
4319
+ disabled,
4320
+ onChange: controller.onInputChange.bind(controller),
4321
+ value: controller.inputValue,
4322
+ id: outerId,
4323
+ name: outerId
4435
4324
  },
4436
- readOnly: props.readOnly
4325
+ mask: getMaskForDateFormat(),
4326
+ maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
4327
+ onClick: controller.openCalendar.bind(controller),
4328
+ readOnly: readonly
4437
4329
  }
4438
4330
  )
4439
4331
  }
4440
- ) });
4332
+ );
4441
4333
  }
4442
4334
  );
4443
4335
 
@@ -7079,11 +6971,9 @@ const IconsListNonForwarded = (props, ref) => {
7079
6971
  render = useCallback(() => doRender((current) => !current), []);
7080
6972
  const storeId = useMemo(() => uniqueId("IconsList"), []);
7081
6973
  const [actions, useProps, , , Context] = useStore({ storeId });
7082
- const rows = Math.ceil(
7083
- propsRef.current.icons.length / (props.iconsPerRow ? props.iconsPerRow : breakPoint)
7084
- );
6974
+ const rows = Math.ceil(propsRef.current.icons.length / breakPoint);
7085
6975
  const sx = useStyles({
7086
- breakPoint: props.iconsPerRow ? props.iconsPerRow : breakPoint,
6976
+ breakPoint,
7087
6977
  containerWidth,
7088
6978
  iconWidth: propsRef.current.iconWidth ?? 100,
7089
6979
  verticalGap: propsRef.current.verticalGap,
@@ -7094,7 +6984,7 @@ const IconsListNonForwarded = (props, ref) => {
7094
6984
  }, [breakPoint]);
7095
6985
  const IconRenderer = propsRef.current.iconRenderer ?? DefaultIconRenderer;
7096
6986
  const gridRef = useProps("grid", {
7097
- columns: props.iconsPerRow ? props.iconsPerRow : breakPoint,
6987
+ columns: breakPoint,
7098
6988
  iconsCount: propsRef.current.icons.length,
7099
6989
  rows
7100
6990
  });
@@ -7109,7 +6999,7 @@ const IconsListNonForwarded = (props, ref) => {
7109
6999
  storeId,
7110
7000
  children: /* @__PURE__ */ jsx(Box, { ref: gridRef, children: Array(rows).fill(1).map((_, i) => {
7111
7001
  const icons = getRowIcons({
7112
- breakPoint: props.iconsPerRow ? props.iconsPerRow : breakPoint,
7002
+ breakPoint,
7113
7003
  i,
7114
7004
  icons: propsRef.current.icons
7115
7005
  });
@@ -8828,6 +8718,253 @@ const MDRenderer = ({ str }) => {
8828
8718
  };
8829
8719
  var index = memo(MDRenderer);
8830
8720
 
8721
+ const SwitchCard = observer(
8722
+ ({
8723
+ align = "left",
8724
+ icon,
8725
+ label,
8726
+ notSwitchedLabel,
8727
+ onClose,
8728
+ onSwitch,
8729
+ switchedLabel,
8730
+ switchProps,
8731
+ value,
8732
+ disabled
8733
+ }) => {
8734
+ const [isSwitched, setIsSwitched] = useState(toBoolean(value));
8735
+ useEffect(() => {
8736
+ setIsSwitched(toBoolean(value));
8737
+ }, [value]);
8738
+ const handleSwitchChange = (e) => {
8739
+ const newValue = e.target.checked;
8740
+ setIsSwitched(newValue);
8741
+ if (onSwitch) {
8742
+ onSwitch(newValue);
8743
+ }
8744
+ };
8745
+ return /* @__PURE__ */ jsxs(
8746
+ Box,
8747
+ {
8748
+ className: "switch__card",
8749
+ ...getVariant("layout.common.components.switchCard"),
8750
+ children: [
8751
+ align === "left" && /* @__PURE__ */ jsx(
8752
+ Switch,
8753
+ {
8754
+ disabled,
8755
+ checked: isSwitched,
8756
+ ...switchProps,
8757
+ onChange: handleSwitchChange
8758
+ }
8759
+ ),
8760
+ /* @__PURE__ */ jsxs(Box, { className: "label__container", title: label, children: [
8761
+ icon && /* @__PURE__ */ jsx(Icon$1, { name: icon, title: "" }),
8762
+ label
8763
+ ] }),
8764
+ (switchedLabel && isSwitched || align === "right" || onClose) && /* @__PURE__ */ jsxs(Box, { className: "switch__container", children: [
8765
+ !notSwitchedLabel && (isSwitched ? getLabel("lblCanUpdate").text : getLabel("lblCannotUpdate").text),
8766
+ align === "right" && /* @__PURE__ */ jsx(
8767
+ Switch,
8768
+ {
8769
+ disabled,
8770
+ checked: isSwitched,
8771
+ ...switchProps,
8772
+ onChange: handleSwitchChange,
8773
+ className: "switch",
8774
+ title: isSwitched ? getLabel("lblCanUpdate").text : getLabel("lblCannotUpdate").text
8775
+ }
8776
+ ),
8777
+ onClose && !disabled && /* @__PURE__ */ jsx(Close, { disabled, onClick: onClose })
8778
+ ] })
8779
+ ]
8780
+ }
8781
+ );
8782
+ }
8783
+ );
8784
+
8785
+ const PermissionsList = observer(() => {
8786
+ const controller = usePermissionsContext();
8787
+ const state = controller.permissions;
8788
+ return /* @__PURE__ */ jsxs(Box, { className: "permissions__list", children: [
8789
+ state.users && state.users.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
8790
+ /* @__PURE__ */ jsx("span", { children: getLabel("sbtUsers").text }),
8791
+ /* @__PURE__ */ jsx(Box, { as: "ul", children: state.users.map((c) => {
8792
+ return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
8793
+ SwitchCard,
8794
+ {
8795
+ disabled: controller.disabled,
8796
+ label: c.userLogin,
8797
+ align: "right",
8798
+ icon: "User2",
8799
+ onClose: () => controller.onChangeUsers(
8800
+ controller.permissions.users.filter(
8801
+ (s) => s.userId !== c.userId
8802
+ )
8803
+ ),
8804
+ onSwitch: (isSwitched) => c.canUpdate = isSwitched,
8805
+ value: c.canUpdate
8806
+ }
8807
+ ) }, c.userId);
8808
+ }) })
8809
+ ] }),
8810
+ state.pools && state.pools.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
8811
+ /* @__PURE__ */ jsx("span", { children: getLabel("lblPool").text }),
8812
+ /* @__PURE__ */ jsx(Box, { as: "ul", children: state.pools.map((c) => {
8813
+ return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
8814
+ SwitchCard,
8815
+ {
8816
+ label: c.poolName,
8817
+ align: "right",
8818
+ icon: "Groups",
8819
+ onClose: () => controller.onChangePools(
8820
+ controller.permissions.pools.filter(
8821
+ (s) => s.poolId !== c.poolId
8822
+ )
8823
+ ),
8824
+ onSwitch: (isSwitched) => c.canUpdate = isSwitched,
8825
+ value: c.canUpdate
8826
+ }
8827
+ ) }, c.poolName);
8828
+ }) })
8829
+ ] })
8830
+ ] });
8831
+ });
8832
+
8833
+ const UserModalBtn = observer(() => {
8834
+ const context = usePermissionsContext();
8835
+ return /* @__PURE__ */ jsx(
8836
+ SimpleButton,
8837
+ {
8838
+ disabled: context.disabled,
8839
+ variant: "outline",
8840
+ onClick: () => {
8841
+ makeApiaUsersModal2().openModal({
8842
+ title: window.LBL_ADD_USER
8843
+ }).then((selected) => {
8844
+ context.onChangeUsers(
8845
+ selected.reduce(
8846
+ (acc, c) => {
8847
+ const newItem = {
8848
+ userId: c.row.id,
8849
+ userLogin: String(c.row.cells[0].children),
8850
+ canUpdate: false
8851
+ };
8852
+ if (!acc.some((c2) => c2.userId === newItem.userId)) {
8853
+ acc.push(newItem);
8854
+ }
8855
+ return acc;
8856
+ },
8857
+ [...context.permissions.users]
8858
+ )
8859
+ );
8860
+ });
8861
+ },
8862
+ children: getLabel("btnAddUser").text
8863
+ }
8864
+ );
8865
+ });
8866
+
8867
+ const PoolModalBtn = observer(() => {
8868
+ const context = usePermissionsContext();
8869
+ return /* @__PURE__ */ jsx(
8870
+ SimpleButton,
8871
+ {
8872
+ disabled: context.disabled,
8873
+ variant: "outline",
8874
+ onClick: () => {
8875
+ makeApiaPoolsModals2().openModal({
8876
+ title: window.LBL_ADD_GROUP
8877
+ }).then((selected) => {
8878
+ context.onChangePools(
8879
+ selected.reduce(
8880
+ (acc, c) => {
8881
+ const newItem = {
8882
+ poolId: c.row.id,
8883
+ poolName: String(c.row.cells[0].children),
8884
+ canUpdate: false
8885
+ };
8886
+ if (!acc.some((c2) => c2.poolId === newItem.poolId)) {
8887
+ acc.push(newItem);
8888
+ }
8889
+ return acc;
8890
+ },
8891
+ [...context.permissions.pools]
8892
+ )
8893
+ );
8894
+ });
8895
+ },
8896
+ children: getLabel("btnAddPool").text
8897
+ }
8898
+ );
8899
+ });
8900
+
8901
+ const PermissionsContext = createContext(null);
8902
+ function usePermissionsContext() {
8903
+ return useContext(PermissionsContext);
8904
+ }
8905
+ const Permissions = observer(
8906
+ ({
8907
+ everyonePermissionsValue,
8908
+ collapsePermissions,
8909
+ disabled,
8910
+ onChangeEveryonePermissions,
8911
+ onChangeUsers,
8912
+ onChangePools,
8913
+ permissions
8914
+ }) => {
8915
+ return /* @__PURE__ */ jsx(
8916
+ CollapsiblePanel,
8917
+ {
8918
+ label: /* @__PURE__ */ jsx("span", { children: getLabel("lblPer").text }),
8919
+ id: "permissions",
8920
+ collapseIconToRight: true,
8921
+ closedIcon: "ArrowUpThin",
8922
+ openIcon: "ArrowDownThin",
8923
+ className: "uploader__permissions",
8924
+ collapsed: collapsePermissions,
8925
+ children: /* @__PURE__ */ jsx(
8926
+ PermissionsContext.Provider,
8927
+ {
8928
+ value: {
8929
+ onChangeUsers,
8930
+ onChangePools,
8931
+ permissions,
8932
+ disabled
8933
+ },
8934
+ children: /* @__PURE__ */ jsxs(Box, { ...getVariant("layout.common.components.uploader.permissions"), children: [
8935
+ /* @__PURE__ */ jsxs("label", { className: "uploader__permissions_selection", children: [
8936
+ /* @__PURE__ */ jsxs(Box, { children: [
8937
+ /* @__PURE__ */ jsx("span", { children: getLabel("lblTod").text }),
8938
+ /* @__PURE__ */ jsxs(
8939
+ Select,
8940
+ {
8941
+ disabled,
8942
+ onChange: (ev) => {
8943
+ onChangeEveryonePermissions(
8944
+ ev.target.value
8945
+ );
8946
+ },
8947
+ value: everyonePermissionsValue,
8948
+ children: [
8949
+ /* @__PURE__ */ jsx("option", { value: "M", children: getLabel("lblPerMod").text }),
8950
+ /* @__PURE__ */ jsx("option", { value: "R", children: getLabel("lblPerVer").text }),
8951
+ /* @__PURE__ */ jsx("option", { value: "", children: getLabel("lblAccessDenied").text })
8952
+ ]
8953
+ }
8954
+ )
8955
+ ] }),
8956
+ /* @__PURE__ */ jsx(UserModalBtn, {}),
8957
+ /* @__PURE__ */ jsx(PoolModalBtn, {})
8958
+ ] }),
8959
+ /* @__PURE__ */ jsx(PermissionsList, {})
8960
+ ] })
8961
+ }
8962
+ )
8963
+ }
8964
+ );
8965
+ }
8966
+ );
8967
+
8831
8968
  const TabsContext = React__default.createContext(null);
8832
8969
  function useTabsContext() {
8833
8970
  return React__default.useContext(TabsContext);
@@ -9764,6 +9901,119 @@ const FooterButtons = (props) => {
9764
9901
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Box, { ...props }) });
9765
9902
  };
9766
9903
 
9904
+ const AccordionAside = () => {
9905
+ const children = useMenu([1, 2, 3]);
9906
+ return children;
9907
+ };
9908
+
9909
+ const Aside = () => {
9910
+ const children = useMenu([5, 6, 7]);
9911
+ return /* @__PURE__ */ jsx(Fragment, { children });
9912
+ };
9913
+
9914
+ const AsideLoader = (definition) => {
9915
+ React__default.useEffect(() => {
9916
+ const variant = definition.variant ?? "twoColumnsAside";
9917
+ const unregister = menuController.setMenu({
9918
+ menu: /* @__PURE__ */ jsx(Box, { className: "ApplicationMenu", variant: `layout.${variant}`, children: definition.menu ?? definition.children }),
9919
+ stage: definition.stage ?? uniqueId$3()
9920
+ });
9921
+ return () => {
9922
+ unregister();
9923
+ };
9924
+ }, [
9925
+ definition.children,
9926
+ definition.menu,
9927
+ definition.stage,
9928
+ definition.variant
9929
+ ]);
9930
+ return null;
9931
+ };
9932
+
9933
+ const BodyAside = () => {
9934
+ const children = useMenu([1, 2, 3]);
9935
+ return children;
9936
+ };
9937
+
9938
+ const FloatingAside = () => {
9939
+ const isScrollingUp = useMatchScrollDirection("up");
9940
+ const [hasScrolledEnough, setHasScrolledEnough] = React__default.useState(false);
9941
+ useScroll(document, ({ top }) => {
9942
+ const menu = document.getElementById("BodyAside");
9943
+ if (!menu)
9944
+ return false;
9945
+ let computedStyle = 0;
9946
+ if (window.getComputedStyle(menu).paddingTop.match(/\d+/)) {
9947
+ computedStyle = Number(
9948
+ window.getComputedStyle(menu).paddingTop.match(/\d+/)[0]
9949
+ ) + Number(
9950
+ window.getComputedStyle(menu).paddingBottom.match(/\d+/)[0]
9951
+ );
9952
+ }
9953
+ const boxTop = menu.offsetHeight + menu.offsetTop + computedStyle;
9954
+ if (hasScrolledEnough !== boxTop < top)
9955
+ setHasScrolledEnough(boxTop < top);
9956
+ return false;
9957
+ });
9958
+ const children = useMenu([1, 2, 3]);
9959
+ const { Portal } = usePortal({
9960
+ containerId: "NonControlledAppModals",
9961
+ clickOutsideToHide: false,
9962
+ autoRemoveContainer: false,
9963
+ defaultShow: true,
9964
+ escToHide: false
9965
+ });
9966
+ if (!children)
9967
+ return null;
9968
+ return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
9969
+ Box,
9970
+ {
9971
+ ...getVariant("layout.twoColumnsAside.floatingResponsive"),
9972
+ className: isScrollingUp && hasScrolledEnough ? "" : "hidden",
9973
+ children: /* @__PURE__ */ jsx(
9974
+ AccordionItem,
9975
+ {
9976
+ defaultExpanded: false,
9977
+ buttonProps: {
9978
+ label: getLabel("lblMnuOpc").text,
9979
+ ariaLabel: getLabel("lblMnuOpc").title
9980
+ },
9981
+ id: "floatingMenuAccordion",
9982
+ ...getVariant("tabPrimary"),
9983
+ children: isScrollingUp && hasScrolledEnough && children
9984
+ }
9985
+ )
9986
+ }
9987
+ ) });
9988
+ };
9989
+
9990
+ const FooterResponsiveButtons = ({
9991
+ breakpoint = 4,
9992
+ children,
9993
+ className
9994
+ }) => {
9995
+ const { Portal } = usePortal({
9996
+ containerId: "NonControlledAppModals",
9997
+ clickOutsideToHide: false,
9998
+ autoRemoveContainer: false,
9999
+ defaultShow: true,
10000
+ escToHide: false
10001
+ });
10002
+ const appBreakpoint = useBreakpointIndex();
10003
+ const shouldShow = useMatchScrollDirection("down") && breakpoint >= appBreakpoint;
10004
+ if (Array.isArray(children) && children.length === 0)
10005
+ return null;
10006
+ return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
10007
+ Box,
10008
+ {
10009
+ as: "aside",
10010
+ ...getVariant("layout.footerResponsiveButtons"),
10011
+ className: `${className ?? ""} ${shouldShow ? "visible" : "hidden"}`,
10012
+ children
10013
+ }
10014
+ ) });
10015
+ };
10016
+
9767
10017
  const HamburguerMenu = ({
9768
10018
  container = ".TitleContainer",
9769
10019
  header = "MainHeader",
@@ -9876,170 +10126,6 @@ const HamburguerMenu = ({
9876
10126
  ] });
9877
10127
  };
9878
10128
 
9879
- const BodyAside = () => {
9880
- const children = useMenu([1, 2, 3]);
9881
- return children;
9882
- };
9883
-
9884
- const Aside = () => {
9885
- const children = useMenu([5, 6, 7]);
9886
- return /* @__PURE__ */ jsx(Fragment, { children });
9887
- };
9888
-
9889
- const FooterResponsiveButtons = ({
9890
- breakpoint = 4,
9891
- children,
9892
- className
9893
- }) => {
9894
- const { Portal } = usePortal({
9895
- containerId: "NonControlledAppModals",
9896
- clickOutsideToHide: false,
9897
- autoRemoveContainer: false,
9898
- defaultShow: true,
9899
- escToHide: false
9900
- });
9901
- const appBreakpoint = useBreakpointIndex();
9902
- const shouldShow = useMatchScrollDirection("down") && breakpoint >= appBreakpoint;
9903
- if (Array.isArray(children) && children.length === 0)
9904
- return null;
9905
- return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
9906
- Box,
9907
- {
9908
- as: "aside",
9909
- ...getVariant("layout.footerResponsiveButtons"),
9910
- className: `${className ?? ""} ${shouldShow ? "visible" : "hidden"}`,
9911
- children
9912
- }
9913
- ) });
9914
- };
9915
-
9916
- const FloatingAside = () => {
9917
- const isScrollingUp = useMatchScrollDirection("up");
9918
- const [hasScrolledEnough, setHasScrolledEnough] = React__default.useState(false);
9919
- useScroll(document, ({ top }) => {
9920
- const menu = document.getElementById("BodyAside");
9921
- if (!menu)
9922
- return false;
9923
- let computedStyle = 0;
9924
- if (window.getComputedStyle(menu).paddingTop.match(/\d+/)) {
9925
- computedStyle = Number(
9926
- window.getComputedStyle(menu).paddingTop.match(/\d+/)[0]
9927
- ) + Number(
9928
- window.getComputedStyle(menu).paddingBottom.match(/\d+/)[0]
9929
- );
9930
- }
9931
- const boxTop = menu.offsetHeight + menu.offsetTop + computedStyle;
9932
- if (hasScrolledEnough !== boxTop < top)
9933
- setHasScrolledEnough(boxTop < top);
9934
- return false;
9935
- });
9936
- const children = useMenu([1, 2, 3]);
9937
- const { Portal } = usePortal({
9938
- containerId: "NonControlledAppModals",
9939
- clickOutsideToHide: false,
9940
- autoRemoveContainer: false,
9941
- defaultShow: true,
9942
- escToHide: false
9943
- });
9944
- if (!children)
9945
- return null;
9946
- return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
9947
- Box,
9948
- {
9949
- ...getVariant("layout.twoColumnsAside.floatingResponsive"),
9950
- className: isScrollingUp && hasScrolledEnough ? "" : "hidden",
9951
- children: /* @__PURE__ */ jsx(
9952
- AccordionItem,
9953
- {
9954
- defaultExpanded: false,
9955
- buttonProps: {
9956
- label: getLabel("lblMnuOpc").text,
9957
- ariaLabel: getLabel("lblMnuOpc").title
9958
- },
9959
- id: "floatingMenuAccordion",
9960
- ...getVariant("tabPrimary"),
9961
- children: isScrollingUp && hasScrolledEnough && children
9962
- }
9963
- )
9964
- }
9965
- ) });
9966
- };
9967
-
9968
- const AsideLoader = (definition) => {
9969
- React__default.useEffect(() => {
9970
- const variant = definition.variant ?? "twoColumnsAside";
9971
- const unregister = menuController.setMenu({
9972
- menu: /* @__PURE__ */ jsx(Box, { className: "ApplicationMenu", variant: `layout.${variant}`, children: definition.menu ?? definition.children }),
9973
- stage: definition.stage ?? uniqueId$3()
9974
- });
9975
- return () => {
9976
- unregister();
9977
- };
9978
- }, [
9979
- definition.children,
9980
- definition.menu,
9981
- definition.stage,
9982
- definition.variant
9983
- ]);
9984
- return null;
9985
- };
9986
-
9987
- const TwoColumns = ({
9988
- atVeryTop,
9989
- upperAside,
9990
- overHeadAside,
9991
- image,
9992
- title,
9993
- subTitle,
9994
- description,
9995
- underHeadAside,
9996
- mainContent,
9997
- footer,
9998
- asideContent,
9999
- footerButtons
10000
- }) => {
10001
- return /* @__PURE__ */ jsxs(Fragment, { children: [
10002
- /* @__PURE__ */ jsxs(Box, { ...getVariant("layout.twoColumns"), children: [
10003
- /* @__PURE__ */ jsxs(Box, { as: "section", className: "twoColumns__topBox", id: "MainHeader", children: [
10004
- atVeryTop,
10005
- /* @__PURE__ */ jsx(Box, { as: "aside", className: "topBox__upperAside", children: upperAside }),
10006
- overHeadAside,
10007
- /* @__PURE__ */ jsxs(Box, { className: "topBox__heading", children: [
10008
- /* @__PURE__ */ jsx(Box, { as: "header", className: "topBox__imageHeader", children: image }),
10009
- /* @__PURE__ */ jsxs(Box, { as: "header", className: "topBox__header TitleContainer", children: [
10010
- /* @__PURE__ */ jsxs(Box, { className: "topBox__headings", children: [
10011
- /* @__PURE__ */ jsx("h1", { children: title }),
10012
- subTitle && /* @__PURE__ */ jsx("h2", { children: subTitle })
10013
- ] }),
10014
- /* @__PURE__ */ jsx(Box, { as: "p", children: description })
10015
- ] }),
10016
- /* @__PURE__ */ jsxs(Box, { className: "topBox__nav", children: [
10017
- /* @__PURE__ */ jsx(FavoriteIcon, {}),
10018
- /* @__PURE__ */ jsx(HamburguerMenu, {})
10019
- ] })
10020
- ] }),
10021
- underHeadAside
10022
- ] }),
10023
- /* @__PURE__ */ jsxs(Box, { as: "section", className: "twoColumns__section", children: [
10024
- /* @__PURE__ */ jsxs(Box, { as: "main", className: "twoColumns__main", children: [
10025
- /* @__PURE__ */ jsx(BodyAside, {}),
10026
- mainContent
10027
- ] }),
10028
- /* @__PURE__ */ jsx(Box, { as: "nav", id: "MainAside", className: "twoColumns__aside", children: /* @__PURE__ */ jsx(Aside, {}) })
10029
- ] }),
10030
- /* @__PURE__ */ jsx(Box, { as: "footer", className: "twoColumns__footer", children: footer })
10031
- ] }),
10032
- /* @__PURE__ */ jsx(AsideLoader, { children: asideContent }),
10033
- /* @__PURE__ */ jsx(FooterResponsiveButtons, { children: footerButtons }),
10034
- /* @__PURE__ */ jsx(FloatingAside, {})
10035
- ] });
10036
- };
10037
-
10038
- const AccordionAside = () => {
10039
- const children = useMenu([1, 2, 3]);
10040
- return children;
10041
- };
10042
-
10043
10129
  const HeaderButtons = () => {
10044
10130
  const breakPoint = useBreakpointIndex();
10045
10131
  const shouldShowAsFloat = breakPoint === 3;
@@ -10122,52 +10208,6 @@ const CenteredHeaderButtons = () => {
10122
10208
  return /* @__PURE__ */ jsx(Portal3, { children: icon });
10123
10209
  };
10124
10210
 
10125
- const TwoColumnsList = ({
10126
- image,
10127
- subTitle,
10128
- title,
10129
- description,
10130
- favoriteIcon,
10131
- content,
10132
- headerBottom,
10133
- contentFooter,
10134
- footer,
10135
- asideContent,
10136
- footerButtons
10137
- }) => {
10138
- return /* @__PURE__ */ jsxs(Fragment, { children: [
10139
- /* @__PURE__ */ jsxs("div", { ...getVariant("layout.twoColumnsList"), className: "twoColumnsList", children: [
10140
- /* @__PURE__ */ jsxs("div", { className: "twoColumnsList__topBox", id: "MainHeader", children: [
10141
- /* @__PURE__ */ jsxs("header", { className: "topBox__heading", children: [
10142
- /* @__PURE__ */ jsx("section", { className: "topBox__imageHeader", children: image }),
10143
- /* @__PURE__ */ jsxs("section", { className: "topBox__header TitleContainer", children: [
10144
- /* @__PURE__ */ jsxs("div", { className: "topBox__headings", children: [
10145
- /* @__PURE__ */ jsx("h1", { children: title }),
10146
- subTitle && /* @__PURE__ */ jsx("h2", { children: subTitle })
10147
- ] }),
10148
- /* @__PURE__ */ jsx("p", { className: "topBox__description", children: description })
10149
- ] }),
10150
- /* @__PURE__ */ jsxs("nav", { className: "topBox__nav", title: getLabel("lblNavOptions").text, children: [
10151
- favoriteIcon,
10152
- /* @__PURE__ */ jsx(HamburguerMenu, {})
10153
- ] })
10154
- ] }),
10155
- headerBottom
10156
- ] }),
10157
- /* @__PURE__ */ jsxs("section", { className: "twoColumnsList__section", children: [
10158
- /* @__PURE__ */ jsxs("main", { className: "twoColumnsList__main", children: [
10159
- /* @__PURE__ */ jsx("div", { className: "twoColumnsList__content", children: content }),
10160
- /* @__PURE__ */ jsx("div", { className: "twoColumnsList__contentFooter", children: contentFooter })
10161
- ] }),
10162
- /* @__PURE__ */ jsx("aside", { id: "MainAside", className: "twoColumnsList__aside", children: /* @__PURE__ */ jsx(Aside, {}) })
10163
- ] }),
10164
- /* @__PURE__ */ jsx("footer", { className: "twoColumnsList__mainFooter", children: footer })
10165
- ] }),
10166
- /* @__PURE__ */ jsx(AsideLoader, { children: asideContent }),
10167
- /* @__PURE__ */ jsx(FooterResponsiveButtons, { children: footerButtons })
10168
- ] });
10169
- };
10170
-
10171
10211
  var __defProp$5 = Object.defineProperty;
10172
10212
  var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10173
10213
  var __publicField$5 = (obj, key, value) => {
@@ -11234,5 +11274,5 @@ const _FiltersStore = class _FiltersStore {
11234
11274
  __publicField(_FiltersStore, "instance", new _FiltersStore());
11235
11275
  let FiltersStore = _FiltersStore;
11236
11276
 
11237
- export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, LinearSpinnerLock, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, index as MDRenderer, Modal, ModalContext, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, TwoColumns, TwoColumnsList, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, isFavoriteIcon, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
11277
+ export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, LinearSpinnerLock, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, index as MDRenderer, Modal, ModalContext, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, Permissions, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, SwitchCard, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, isFavoriteIcon, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
11238
11278
  //# sourceMappingURL=index.js.map