@apia/components 4.0.45 → 5.0.0

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, 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, dateToApiaFormat, dateFromApiaFormat, 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,6 +2261,12 @@ class ApiaUtilParsers {
2252
2261
  }
2253
2262
  return aux ? parseFloat(aux) : parseFloat(value);
2254
2263
  }
2264
+ dateToApiaString(value) {
2265
+ return dateToApiaFormat(value);
2266
+ }
2267
+ dateFromApiaString(value) {
2268
+ return dateFromApiaFormat(value);
2269
+ }
2255
2270
  /**
2256
2271
  * Hay muchos valores que podrían querer ser interpretados como booleano
2257
2272
  *
@@ -2324,10 +2339,10 @@ parseCellValue_fn = function(cellValue) {
2324
2339
  return cellValue.match(/^\s*"?([^"]+)"?[\s\r\n]*$/)?.[1] ?? cellValue;
2325
2340
  };
2326
2341
 
2327
- var __defProp$j = Object.defineProperty;
2328
- var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2329
- var __publicField$j = (obj, key, value) => {
2330
- __defNormalProp$j(obj, key + "" , value);
2342
+ var __defProp$k = Object.defineProperty;
2343
+ var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2344
+ var __publicField$k = (obj, key, value) => {
2345
+ __defNormalProp$k(obj, key + "" , value);
2331
2346
  return value;
2332
2347
  };
2333
2348
  let maxId = 0;
@@ -2335,14 +2350,14 @@ class ApiaUtilTooltip {
2335
2350
  constructor(props, close) {
2336
2351
  this.props = props;
2337
2352
  this.close = close;
2338
- __publicField$j(this, "id", `tooltip__${maxId++}`);
2353
+ __publicField$k(this, "id", `tooltip__${maxId++}`);
2339
2354
  }
2340
2355
  }
2341
2356
 
2342
- var __defProp$i = Object.defineProperty;
2343
- var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2344
- var __publicField$i = (obj, key, value) => {
2345
- __defNormalProp$i(obj, typeof key !== "symbol" ? key + "" : key, value);
2357
+ var __defProp$j = Object.defineProperty;
2358
+ var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2359
+ var __publicField$j = (obj, key, value) => {
2360
+ __defNormalProp$j(obj, typeof key !== "symbol" ? key + "" : key, value);
2346
2361
  return value;
2347
2362
  };
2348
2363
  var __accessCheck$9 = (obj, member, msg) => {
@@ -2375,7 +2390,7 @@ class AutomaticTooltip {
2375
2390
  __privateAdd$9(this, _timeout$1, 500);
2376
2391
  __privateAdd$9(this, _tooltipTimeout, 0);
2377
2392
  __privateAdd$9(this, _unsuscribe, null);
2378
- __publicField$i(this, "ref", (el) => {
2393
+ __publicField$j(this, "ref", (el) => {
2379
2394
  var _a, _b;
2380
2395
  (_a = __privateGet$7(this, _unsuscribe)) == null ? void 0 : _a.call(this);
2381
2396
  const listener = () => {
@@ -2407,7 +2422,7 @@ class AutomaticTooltip {
2407
2422
  }
2408
2423
  });
2409
2424
  __privateAdd$9(this, _tooltip, null);
2410
- __publicField$i(this, "update", (tooltip) => {
2425
+ __publicField$j(this, "update", (tooltip) => {
2411
2426
  __privateSet$5(this, _tooltip, tooltip);
2412
2427
  });
2413
2428
  __privateSet$5(this, _tooltip, tooltip);
@@ -2758,10 +2773,10 @@ const Tooltip = ({
2758
2773
  );
2759
2774
  };
2760
2775
 
2761
- var __defProp$h = Object.defineProperty;
2762
- var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2763
- var __publicField$h = (obj, key, value) => {
2764
- __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
2776
+ var __defProp$i = Object.defineProperty;
2777
+ var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2778
+ var __publicField$i = (obj, key, value) => {
2779
+ __defNormalProp$i(obj, typeof key !== "symbol" ? key + "" : key, value);
2765
2780
  return value;
2766
2781
  };
2767
2782
  var __accessCheck$8 = (obj, member, msg) => {
@@ -2781,7 +2796,7 @@ var _emitter$2, _shoutChangedList;
2781
2796
  class ApiaUtilTooltips {
2782
2797
  constructor() {
2783
2798
  __privateAdd$8(this, _emitter$2, new EventEmitter());
2784
- __publicField$h(this, "tooltips", []);
2799
+ __publicField$i(this, "tooltips", []);
2785
2800
  __privateAdd$8(this, _shoutChangedList, () => {
2786
2801
  __privateGet$6(this, _emitter$2).emit("changedList", [...this.tooltips]);
2787
2802
  });
@@ -2789,7 +2804,7 @@ class ApiaUtilTooltips {
2789
2804
  * Permite crear un tooltip que se abrirá automáticamente al estar parado
2790
2805
  * sobre un elemento durante 300ms
2791
2806
  */
2792
- __publicField$h(this, "useHover", (tooltip) => {
2807
+ __publicField$i(this, "useHover", (tooltip) => {
2793
2808
  let tt = void 0;
2794
2809
  tt = useMemo(() => {
2795
2810
  tt?.ref(null);
@@ -2800,15 +2815,15 @@ class ApiaUtilTooltips {
2800
2815
  });
2801
2816
  return tt;
2802
2817
  });
2803
- __publicField$h(this, "close", (id) => {
2818
+ __publicField$i(this, "close", (id) => {
2804
2819
  this.tooltips = this.tooltips.filter((current) => current.id !== id);
2805
2820
  __privateGet$6(this, _shoutChangedList).call(this);
2806
2821
  });
2807
- __publicField$h(this, "closeAll", () => {
2822
+ __publicField$i(this, "closeAll", () => {
2808
2823
  this.tooltips = [];
2809
2824
  __privateGet$6(this, _shoutChangedList).call(this);
2810
2825
  });
2811
- __publicField$h(this, "open", (tooltip) => {
2826
+ __publicField$i(this, "open", (tooltip) => {
2812
2827
  const controller = new ApiaUtilTooltip(tooltip, () => {
2813
2828
  this.close(controller.id);
2814
2829
  controller.props.onClose?.();
@@ -2821,7 +2836,7 @@ class ApiaUtilTooltips {
2821
2836
  __privateGet$6(this, _shoutChangedList).call(this);
2822
2837
  return controller;
2823
2838
  });
2824
- __publicField$h(this, "Component", () => {
2839
+ __publicField$i(this, "Component", () => {
2825
2840
  const [tooltips, setTooltips] = useState(this.tooltips);
2826
2841
  useMount(() => {
2827
2842
  const unsuscribeToList = __privateGet$6(this, _emitter$2).on("changedList", (ev) => {
@@ -2863,10 +2878,10 @@ class ApiaUtilTooltips {
2863
2878
  _emitter$2 = new WeakMap();
2864
2879
  _shoutChangedList = new WeakMap();
2865
2880
 
2866
- var __defProp$g = Object.defineProperty;
2867
- var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2868
- var __publicField$g = (obj, key, value) => {
2869
- __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
2881
+ var __defProp$h = Object.defineProperty;
2882
+ var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2883
+ var __publicField$h = (obj, key, value) => {
2884
+ __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
2870
2885
  return value;
2871
2886
  };
2872
2887
  var __accessCheck$7 = (obj, member, msg) => {
@@ -2903,7 +2918,7 @@ class ApiaUtilMenu {
2903
2918
  constructor() {
2904
2919
  __privateAdd$7(this, _emitter$1, new EventEmitter());
2905
2920
  __privateAdd$7(this, _items$1, []);
2906
- __publicField$g(this, "menuProps", null);
2921
+ __publicField$h(this, "menuProps", null);
2907
2922
  __privateAdd$7(this, _hooks, {
2908
2923
  useIsOpen: () => {
2909
2924
  const [isOpen, setIsOpen] = useState(false);
@@ -2918,10 +2933,10 @@ class ApiaUtilMenu {
2918
2933
  ];
2919
2934
  }
2920
2935
  });
2921
- __publicField$g(this, "close", () => {
2936
+ __publicField$h(this, "close", () => {
2922
2937
  __privateGet$5(this, _emitter$1).emit("toggle", false);
2923
2938
  });
2924
- __publicField$g(this, "open", ({
2939
+ __publicField$h(this, "open", ({
2925
2940
  menuProps,
2926
2941
  items
2927
2942
  }) => {
@@ -2962,7 +2977,7 @@ class ApiaUtilMenu {
2962
2977
  return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key }, children);
2963
2978
  }) });
2964
2979
  });
2965
- __publicField$g(this, "Component", () => {
2980
+ __publicField$h(this, "Component", () => {
2966
2981
  const [isOpen, close] = __privateGet$5(this, _hooks).useIsOpen();
2967
2982
  if (!isOpen)
2968
2983
  return null;
@@ -2987,17 +3002,17 @@ _hooks = new WeakMap();
2987
3002
  _maxId = new WeakMap();
2988
3003
  _RenderMenu = new WeakMap();
2989
3004
 
2990
- var __defProp$f = Object.defineProperty;
2991
- var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2992
- var __publicField$f = (obj, key, value) => {
2993
- __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
3005
+ var __defProp$g = Object.defineProperty;
3006
+ var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3007
+ var __publicField$g = (obj, key, value) => {
3008
+ __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
2994
3009
  return value;
2995
3010
  };
2996
3011
  class ApiaUtilMouse extends EventEmitter {
2997
3012
  constructor() {
2998
3013
  super();
2999
- __publicField$f(this, "x", 0);
3000
- __publicField$f(this, "y", 0);
3014
+ __publicField$g(this, "x", 0);
3015
+ __publicField$g(this, "y", 0);
3001
3016
  document.addEventListener("mousemove", (ev) => {
3002
3017
  this.x = ev.clientX;
3003
3018
  this.y = ev.clientY;
@@ -3009,10 +3024,10 @@ class ApiaUtilMouse extends EventEmitter {
3009
3024
  }
3010
3025
  }
3011
3026
 
3012
- var __defProp$e = Object.defineProperty;
3013
- var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3014
- var __publicField$e = (obj, key, value) => {
3015
- __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
3027
+ var __defProp$f = Object.defineProperty;
3028
+ var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3029
+ var __publicField$f = (obj, key, value) => {
3030
+ __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
3016
3031
  return value;
3017
3032
  };
3018
3033
  var __accessCheck$6 = (obj, member, msg) => {
@@ -3036,15 +3051,15 @@ var __privateSet$3 = (obj, member, value, setter) => {
3036
3051
  var _instance;
3037
3052
  const _ApiaUtil = class _ApiaUtil {
3038
3053
  constructor() {
3039
- __publicField$e(this, "dialogs");
3040
- __publicField$e(this, "menu");
3041
- __publicField$e(this, "modals");
3042
- __publicField$e(this, "mouse");
3043
- __publicField$e(this, "notifications");
3044
- __publicField$e(this, "parsers");
3045
- __publicField$e(this, "tabs");
3046
- __publicField$e(this, "tooltips");
3047
- __publicField$e(this, "Component", () => {
3054
+ __publicField$f(this, "dialogs");
3055
+ __publicField$f(this, "menu");
3056
+ __publicField$f(this, "modals");
3057
+ __publicField$f(this, "mouse");
3058
+ __publicField$f(this, "notifications");
3059
+ __publicField$f(this, "parsers");
3060
+ __publicField$f(this, "tabs");
3061
+ __publicField$f(this, "tooltips");
3062
+ __publicField$f(this, "Component", () => {
3048
3063
  return /* @__PURE__ */ jsxs(Fragment, { children: [
3049
3064
  /* @__PURE__ */ jsx(this.dialogs.Component, {}),
3050
3065
  /* @__PURE__ */ jsx(this.modals.Component, {}),
@@ -3057,7 +3072,7 @@ const _ApiaUtil = class _ApiaUtil {
3057
3072
  this.menu = new ApiaUtilMenu();
3058
3073
  this.modals = new ApiaUtilModals();
3059
3074
  this.mouse = new ApiaUtilMouse();
3060
- this.notifications = new ApiaUtilNotifications();
3075
+ this.notifications = new ApiaUtilNotifications(this);
3061
3076
  this.parsers = new ApiaUtilParsers();
3062
3077
  this.tabs = new ApiaUtilTabsController();
3063
3078
  this.tooltips = new ApiaUtilTooltips();
@@ -3073,22 +3088,22 @@ _instance = new WeakMap();
3073
3088
  __privateAdd$6(_ApiaUtil, _instance, void 0);
3074
3089
  let ApiaUtil = _ApiaUtil;
3075
3090
 
3076
- var __defProp$d = Object.defineProperty;
3077
- var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3078
- var __publicField$d = (obj, key, value) => {
3079
- __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
3091
+ var __defProp$e = Object.defineProperty;
3092
+ var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3093
+ var __publicField$e = (obj, key, value) => {
3094
+ __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
3080
3095
  return value;
3081
3096
  };
3082
3097
  class ScreenLocker {
3083
3098
  constructor() {
3084
- __publicField$d(this, "emitter", new StatefulEmitter({
3099
+ __publicField$e(this, "emitter", new StatefulEmitter({
3085
3100
  locks: {
3086
3101
  common: { count: 0 },
3087
3102
  linear: { count: 0 },
3088
3103
  white: { count: 1 }
3089
3104
  }
3090
3105
  }));
3091
- __publicField$d(this, "lock", (options) => {
3106
+ __publicField$e(this, "lock", (options) => {
3092
3107
  this.emitter.setState("locks", (s) => {
3093
3108
  const key = options?.type ?? "common";
3094
3109
  return {
@@ -3104,11 +3119,11 @@ class ScreenLocker {
3104
3119
  };
3105
3120
  });
3106
3121
  });
3107
- __publicField$d(this, "hasReleased", false);
3122
+ __publicField$e(this, "hasReleased", false);
3108
3123
  /**
3109
3124
  * 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.
3110
3125
  */
3111
- __publicField$d(this, "release", () => {
3126
+ __publicField$e(this, "release", () => {
3112
3127
  if (this.hasReleased)
3113
3128
  return;
3114
3129
  this.hasReleased = true;
@@ -3124,11 +3139,11 @@ class ScreenLocker {
3124
3139
  /**
3125
3140
  * This method notifies when the screenLock is released by the first time.
3126
3141
  */
3127
- __publicField$d(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
3142
+ __publicField$e(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
3128
3143
  /**
3129
3144
  * This component is the responsible for putting the lock courtain in the browser when it's required. It must be used once per application.
3130
3145
  */
3131
- __publicField$d(this, "Component", () => {
3146
+ __publicField$e(this, "Component", () => {
3132
3147
  const locks = this.emitter.useState("locks");
3133
3148
  const style = {
3134
3149
  alignItems: "center",
@@ -3201,10 +3216,10 @@ const OptionsBox = observer(() => {
3201
3216
  }) });
3202
3217
  });
3203
3218
 
3204
- var __defProp$c = Object.defineProperty;
3205
- var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3206
- var __publicField$c = (obj, key, value) => {
3207
- __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
3219
+ var __defProp$d = Object.defineProperty;
3220
+ var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3221
+ var __publicField$d = (obj, key, value) => {
3222
+ __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
3208
3223
  return value;
3209
3224
  };
3210
3225
  var __accessCheck$5 = (obj, member, msg) => {
@@ -3228,7 +3243,7 @@ var __privateSet$2 = (obj, member, value, setter) => {
3228
3243
  var _actualSearch, _timeout;
3229
3244
  class AutocompleteController {
3230
3245
  constructor(properties) {
3231
- __publicField$c(this, "state", {
3246
+ __publicField$d(this, "state", {
3232
3247
  disabled: false,
3233
3248
  readOnly: false,
3234
3249
  id: uniqueId$3("autocomplete"),
@@ -3261,13 +3276,17 @@ class AutocompleteController {
3261
3276
  }
3262
3277
  });
3263
3278
  __privateAdd$5(this, _timeout, 0);
3264
- __publicField$c(this, "tooltipRef", null);
3279
+ __publicField$d(this, "tooltipRef", null);
3265
3280
  Object.assign(this.state, properties);
3266
3281
  if (properties.value) {
3267
3282
  this.state.showValue = String(
3268
3283
  properties.options?.find((c) => c.value === properties.value)?.label
3269
3284
  );
3270
3285
  this.state.focusedValue = properties.value;
3286
+ } else if (properties.options) {
3287
+ this.state.value = properties.options[0]?.value;
3288
+ this.state.showValue = properties.options[0]?.label?.toString?.() || "";
3289
+ properties.onChange?.(this.state.value, this);
3271
3290
  }
3272
3291
  makeAutoObservable(this, {
3273
3292
  getAutocompleteBox: false,
@@ -3462,7 +3481,7 @@ class AutocompleteController {
3462
3481
  _actualSearch = new WeakMap();
3463
3482
  _timeout = new WeakMap();
3464
3483
 
3465
- const SearchBox = observer((props) => {
3484
+ const UnobservedSearchBox = forwardRef((props, ref) => {
3466
3485
  const handler = useAutocompleteContext();
3467
3486
  const breakpoint = useBreakpointIndex();
3468
3487
  const inputRef = useRef(null);
@@ -3478,6 +3497,7 @@ const SearchBox = observer((props) => {
3478
3497
  breakpoint <= 3 ? /* @__PURE__ */ jsx(
3479
3498
  Select,
3480
3499
  {
3500
+ ref,
3481
3501
  disabled: handler.state.disabled,
3482
3502
  onChange: (ev) => {
3483
3503
  handler.setValue(ev.target.value);
@@ -3489,7 +3509,13 @@ const SearchBox = observer((props) => {
3489
3509
  Input,
3490
3510
  {
3491
3511
  ...props,
3492
- ref: inputRef,
3512
+ ref: (el) => {
3513
+ inputRef.current = el;
3514
+ try {
3515
+ ref(el);
3516
+ } catch (_) {
3517
+ }
3518
+ },
3493
3519
  className: `autocomplete__search ${handler.state.disabled ? "disabled" : ""} ${handler.state.readOnly ? "readOnly" : ""}`,
3494
3520
  onChange: async (ev) => {
3495
3521
  handler.search(ev.target.value);
@@ -3521,6 +3547,9 @@ const SearchBox = observer((props) => {
3521
3547
  ] })
3522
3548
  ] });
3523
3549
  });
3550
+ const SearchBox = observer(
3551
+ UnobservedSearchBox
3552
+ );
3524
3553
 
3525
3554
  const KeyHandler$1 = observer((props) => {
3526
3555
  const handler = useAutocompleteContext();
@@ -3593,7 +3622,7 @@ const KeyHandler$1 = observer((props) => {
3593
3622
  );
3594
3623
  });
3595
3624
 
3596
- const Autocomplete = (props) => {
3625
+ const Autocomplete = forwardRef((props, ref) => {
3597
3626
  const [handler] = useState(() => {
3598
3627
  const newHandler = props.handler ?? new AutocompleteController(props.properties ?? {});
3599
3628
  props.getHandler?.(newHandler);
@@ -3616,10 +3645,10 @@ const Autocomplete = (props) => {
3616
3645
  className: `autocomplete ${props.properties?.className || ""}`,
3617
3646
  "data-autocomplete-box": handler.state.id,
3618
3647
  ...getVariant("layout.common.components.autocomplete"),
3619
- children: /* @__PURE__ */ jsx(SearchBox, { ...props.inputProps })
3648
+ children: /* @__PURE__ */ jsx(SearchBox, { ref, ...props.inputProps })
3620
3649
  }
3621
3650
  ) });
3622
- };
3651
+ });
3623
3652
 
3624
3653
  const AutogrowTextarea = observer(
3625
3654
  (props) => {
@@ -3996,30 +4025,6 @@ const Checkbox$1 = forwardRef(
3996
4025
  );
3997
4026
  Checkbox$1.displayName = "Checkbox";
3998
4027
 
3999
- const CalModal = React__default.forwardRef(
4000
- ({ handleClickDay, calValue, locale }) => {
4001
- return /* @__PURE__ */ jsx(
4002
- Box,
4003
- {
4004
- ...getVariant("layout.common.components.datePicker"),
4005
- className: "datePicker",
4006
- children: /* @__PURE__ */ jsx(
4007
- Calendar,
4008
- {
4009
- onClickDay: handleClickDay,
4010
- locale,
4011
- value: calValue || /* @__PURE__ */ new Date(),
4012
- nextLabel: "\u203A",
4013
- next2Label: "\xBB",
4014
- prevLabel: "\u2039",
4015
- prev2Label: "\xAB"
4016
- }
4017
- )
4018
- }
4019
- );
4020
- }
4021
- );
4022
-
4023
4028
  const IconInput = ({
4024
4029
  additionalButtons,
4025
4030
  additionalButtonsPosition = "before",
@@ -4096,6 +4101,50 @@ const IconInput = ({
4096
4101
  );
4097
4102
  };
4098
4103
 
4104
+ const CalModal = React__default.forwardRef(
4105
+ ({ handleClickDay, calValue, locale, onBlur }) => {
4106
+ const uns = useRef(() => {
4107
+ });
4108
+ return /* @__PURE__ */ jsx(
4109
+ Box,
4110
+ {
4111
+ ...getVariant("layout.common.components.datePicker"),
4112
+ className: "datePicker",
4113
+ ref: (el) => {
4114
+ uns.current();
4115
+ if (el instanceof HTMLElement) {
4116
+ const h = (ev) => {
4117
+ onBlur?.(ev);
4118
+ };
4119
+ el.addEventListener("blur", h, { capture: true });
4120
+ uns.current = () => {
4121
+ el.removeEventListener("blur", h, { capture: true });
4122
+ };
4123
+ }
4124
+ },
4125
+ children: /* @__PURE__ */ jsx(
4126
+ Calendar,
4127
+ {
4128
+ onClickDay: handleClickDay,
4129
+ locale,
4130
+ value: calValue || /* @__PURE__ */ new Date(),
4131
+ nextLabel: "\u203A",
4132
+ next2Label: "\xBB",
4133
+ prevLabel: "\u2039",
4134
+ prev2Label: "\xAB"
4135
+ }
4136
+ )
4137
+ }
4138
+ );
4139
+ }
4140
+ );
4141
+
4142
+ var __defProp$c = Object.defineProperty;
4143
+ var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4144
+ var __publicField$c = (obj, key, value) => {
4145
+ __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
4146
+ return value;
4147
+ };
4099
4148
  const DEFAULT_LOCALE = window.LANG_CODE;
4100
4149
  const DEFAULT_MASK_PLACEHOLDER = "_";
4101
4150
  const dateFormat = getDateFormat();
@@ -4104,331 +4153,210 @@ const getMaskForDateFormat = () => {
4104
4153
  return "9999/99/99";
4105
4154
  return "99/99/9999";
4106
4155
  };
4107
- const DateInput = React__default.forwardRef(
4108
- ({
4109
- allowPickBeforeToday,
4110
- buttonProps: outerButtonProps,
4111
- CalModalRenderer,
4112
- className,
4113
- error,
4114
- getCustomMask,
4115
- inputClassName,
4116
- isLoading,
4117
- onBlur,
4118
- onChange,
4119
- onDelete,
4120
- onError,
4121
- renderLabel,
4122
- value: outerValue,
4123
- avoidErrorMessage,
4124
- ...props
4125
- }, ref) => {
4126
- const id = React__default.useMemo(uniqueId$3, []);
4127
- const [inputValue, setInputValue] = React__default.useState(outerValue ?? "");
4128
- const [calValue, setCalValue] = React__default.useState();
4129
- const boxRef = React__default.useRef(null);
4130
- const { deleteFiltersTimestamp, ...otherProps } = props;
4131
- const hasBlured = useRef(false);
4132
- const [stateError, setError] = React__default.useState(error ?? null);
4133
- const [isFocused, setIsFocused] = React__default.useState(false);
4134
- const lastEmittedValue = React__default.useRef(outerValue ?? "");
4135
- useUpdateEffect$1(() => {
4136
- setInputValue(outerValue ?? "");
4137
- lastEmittedValue.current = outerValue;
4138
- }, [outerValue]);
4139
- useUpdateEffect$1(() => {
4140
- setError(error ?? null);
4141
- }, [error]);
4142
- useUpdateEffect$1(() => {
4143
- setError(null);
4144
- if (deleteFiltersTimestamp !== void 0) {
4145
- setCalendarValue("");
4146
- }
4147
- }, [deleteFiltersTimestamp]);
4148
- useUpdateEffect$1(() => {
4149
- if (onError)
4150
- onError(stateError);
4151
- if (stateError) {
4152
- setInputValue("");
4153
- }
4154
- if (onError)
4155
- onError(stateError ?? "");
4156
- }, [stateError]);
4157
- const shoutOnChange = React__default.useCallback(
4158
- (newValue) => {
4159
- lastEmittedValue.current = newValue;
4160
- return onChange?.(newValue) ?? true;
4156
+ class DateInputController {
4157
+ constructor() {
4158
+ __publicField$c(this, "props", {});
4159
+ __publicField$c(this, "state", {});
4160
+ __publicField$c(this, "_ref", null);
4161
+ __publicField$c(this, "error", false);
4162
+ __publicField$c(this, "inputValue", "");
4163
+ __publicField$c(this, "value", null);
4164
+ __publicField$c(this, "previousValue", "");
4165
+ this.props.id = uniqueId$4("date-input");
4166
+ makeAutoObservable(this);
4167
+ }
4168
+ clear() {
4169
+ this.setValueFromString("");
4170
+ this.focus();
4171
+ }
4172
+ focus() {
4173
+ const input = this._ref?.querySelector("input");
4174
+ if (input) {
4175
+ input.focus();
4176
+ setTimeout(() => {
4177
+ window.requestAnimationFrame(() => {
4178
+ input.setSelectionRange(0, input.value.length);
4179
+ });
4180
+ }, 0);
4181
+ }
4182
+ }
4183
+ ref(el) {
4184
+ this._ref = el;
4185
+ }
4186
+ get calendarElementId() {
4187
+ return `DateModal${this.props.id}`;
4188
+ }
4189
+ isInsidePicker(el) {
4190
+ return !!el?.closest(`#${this.props.id}, #${this.calendarElementId}`);
4191
+ }
4192
+ onBlur(ev) {
4193
+ if (!this.isInsidePicker(ev.relatedTarget)) {
4194
+ if (this.error) {
4195
+ this.inputValue = "";
4196
+ this.value = null;
4197
+ this.error = false;
4198
+ }
4199
+ this.props.onBlur?.(this.inputValue, ev);
4200
+ }
4201
+ }
4202
+ onInputChange(ev) {
4203
+ this.setValueFromString(ev.target.value);
4204
+ }
4205
+ onCalendarSelect(value) {
4206
+ this.setValue(value);
4207
+ }
4208
+ openCalendar(ev) {
4209
+ const tooltip = ApiaUtil.instance.tooltips.open({
4210
+ attachToElement() {
4211
+ return ev.target.closest("button");
4161
4212
  },
4162
- [onChange]
4163
- );
4164
- const setCalendarValue = React__default.useCallback(
4165
- (value, nocheck, avoidShout) => {
4166
- if (value === "") {
4167
- if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== inputValue)
4168
- void shoutOnChange("");
4169
- setInputValue("");
4170
- setCalValue(/* @__PURE__ */ new Date());
4171
- return;
4172
- }
4173
- let newDate = dayjs(value, dateFormat);
4174
- if (!newDate.isValid())
4175
- newDate = dayjs(/* @__PURE__ */ new Date(), dateFormat);
4176
- const formattedDate = newDate.format(dateFormat);
4177
- const today = /* @__PURE__ */ new Date();
4178
- today.setHours(0, 0, 0, 0);
4179
- if (formattedDate !== inputValue && nocheck !== true) {
4180
- void shoutOnChange("");
4181
- setInputValue("");
4182
- setError(window.MSG_INVALID_DATE);
4183
- } else if (allowPickBeforeToday === false && newDate.isBefore(today)) {
4184
- void shoutOnChange("");
4185
- setInputValue("");
4186
- setError(window.MSG_FEC_FIN_MAY_FEC_INI);
4187
- } else {
4188
- if (avoidShout) {
4189
- setInputValue(formattedDate);
4190
- setError(null);
4191
- setCalValue(newDate.toDate());
4192
- } else {
4193
- const shoutResult = shoutOnChange(
4194
- value === "" ? "" : formattedDate
4195
- );
4196
- if (shoutResult === false) {
4197
- setInputValue(shoutResult || "");
4198
- setError(null);
4199
- setCalValue(/* @__PURE__ */ new Date());
4200
- } else if (typeof shoutResult === "string") {
4201
- setInputValue("");
4202
- setError(shoutResult);
4203
- setCalValue(/* @__PURE__ */ new Date());
4204
- } else {
4205
- setInputValue(formattedDate);
4206
- setError(null);
4207
- setCalValue(newDate.toDate());
4208
- }
4213
+ attachToElementAnchorPoint: "center",
4214
+ closeOnClick: false,
4215
+ closeOnClickOut: true,
4216
+ closeOnEscape: true,
4217
+ closeOnMouseLeaveTooltip: false,
4218
+ closeOnMouseLeaveAttachedElement: false,
4219
+ closeOnScrollOut: true,
4220
+ children: /* @__PURE__ */ jsx("div", { id: this.calendarElementId, children: /* @__PURE__ */ jsx(
4221
+ CalModal,
4222
+ {
4223
+ calValue: this.value || /* @__PURE__ */ new Date(),
4224
+ locale: DEFAULT_LOCALE,
4225
+ handleClickDay: (date) => {
4226
+ tooltip.close();
4227
+ this.onCalendarSelect(date);
4228
+ this.focus();
4209
4229
  }
4210
4230
  }
4231
+ ) }),
4232
+ initialFocusGetter(el) {
4233
+ return el.querySelector(`.react-calendar__tile--active`);
4211
4234
  },
4212
- [allowPickBeforeToday, inputValue, shoutOnChange]
4213
- );
4214
- const selectDate = React__default.useCallback(
4215
- (val) => {
4216
- const newValue = dayjs(val).format(dateFormat);
4217
- setCalendarValue(newValue, true);
4218
- },
4219
- [setCalendarValue]
4220
- );
4221
- useEffect(() => {
4222
- if (stateError !== "" && stateError !== null && !avoidErrorMessage) {
4223
- ApiaUtil.instance.notifications.notify({
4224
- message: stateError,
4225
- type: "warning"
4235
+ minSize: { width: 350, height: 310 },
4236
+ onClose: () => {
4237
+ window.requestAnimationFrame(() => {
4238
+ if (!this.isInsidePicker(document.activeElement)) {
4239
+ this.props.onBlur?.(this.inputValue);
4240
+ }
4226
4241
  });
4227
4242
  }
4228
- }, [avoidErrorMessage, stateError]);
4229
- const handleBlur = React__default.useCallback(
4230
- (ev) => {
4231
- hasBlured.current = true;
4232
- if (ev.target.value && !dayjs(ev.target.value, dateFormat, true).isValid()) {
4233
- setInputValue("");
4234
- onError?.(window.MSG_INVALID_DATE);
4235
- return;
4236
- }
4237
- if (onBlur && !isChild(ev.relatedTarget, (current) => {
4238
- return current.id === `DateModal${id}` || current.id === `DateInput${id}`;
4239
- })) {
4240
- const newEvent = {
4241
- ...ev,
4242
- target: ev.target.matches("input.dateInput") ? ev.target : ev.target.closest(".dateInput")?.querySelector(
4243
- "input"
4244
- )
4245
- };
4246
- const actualBlur = onBlur instanceof Promise ? onBlur : (ev2) => new Promise((resolve) => {
4247
- const result = onBlur?.(ev2);
4248
- resolve(result);
4249
- });
4250
- void actualBlur(newEvent).then((result) => {
4251
- if (typeof result === "string") {
4252
- setError(result);
4253
- } else if (result === false) {
4254
- setInputValue("");
4255
- }
4256
- });
4257
- }
4258
- },
4259
- [id, onBlur, onError]
4260
- );
4261
- const inputProps = React__default.useMemo(
4262
- () => ({
4263
- ...otherProps,
4264
- className: `dateInput ${inputClassName ?? ""}`,
4265
- value: stateError ? "" : renderLabel ? renderLabel(inputValue) : inputValue,
4266
- ref,
4267
- onChange: (ev) => {
4268
- if (props.readOnly) {
4269
- return;
4270
- }
4271
- setInputValue(ev.target.value);
4272
- if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "") {
4273
- setError(null);
4274
- const hasPlaceHolder = ev.target.value.match(/_/);
4275
- if (!hasPlaceHolder)
4276
- return onChange?.(ev.target.value);
4277
- }
4278
- },
4279
- onBlur: (ev) => {
4280
- setIsFocused(false);
4281
- if (!(props.readOnly || getCustomMask || document.querySelector(".overlay.screenLock")))
4282
- setCalendarValue(ev.target.value, false, true);
4283
- if (hasBlured.current) {
4284
- hasBlured.current = false;
4285
- } else if (!document.querySelector(".overlay.screenLock")) {
4286
- handleBlur(ev);
4287
- }
4288
- },
4289
- onFocus: () => {
4290
- setIsFocused(true);
4291
- },
4292
- onKeyDown: (ev) => {
4293
- if (ev.key === "Enter")
4294
- setCalendarValue(inputValue);
4243
+ });
4244
+ }
4245
+ setValueFromString(str, fire = true) {
4246
+ if (str === "") {
4247
+ this.inputValue = "";
4248
+ this.setValue(null, fire);
4249
+ } else if (str !== this.inputValue) {
4250
+ const hasPlaceHolder = str.match(/_/);
4251
+ if (!hasPlaceHolder) {
4252
+ const value = dayjs(str, dateFormat);
4253
+ const formattedDate = value.format(dateFormat);
4254
+ if (value.isValid() && formattedDate === str) {
4255
+ this.setValue(value.toDate(), fire);
4256
+ } else {
4257
+ this.inputValue = str;
4258
+ this.props.onError?.(getLabel("msgInvalidDate").text);
4259
+ this.error = true;
4295
4260
  }
4296
- }),
4297
- // eslint-disable-next-line react-hooks/exhaustive-deps
4298
- [
4299
- otherProps,
4300
- inputClassName,
4301
- stateError,
4302
- renderLabel,
4303
- inputValue,
4304
- ref,
4305
- props.readOnly,
4306
- getCustomMask,
4307
- setCalendarValue,
4308
- handleBlur
4309
- ]
4310
- );
4311
- const buttonProps = React__default.useMemo(
4312
- () => ({
4313
- disabled: props.disabled || props.readOnly,
4314
- "aria-label": window.LBL_PICK_DATE,
4315
- ...outerButtonProps
4316
- }),
4317
- [outerButtonProps, props.disabled, props.readOnly]
4318
- );
4319
- const additionalButtons = React__default.useMemo(() => {
4320
- const doDelete = (e) => {
4321
- e?.stopPropagation();
4322
- setCalendarValue("");
4323
- onDelete?.();
4324
- document.querySelector(`#DateInput${id} input`)?.focus();
4325
- };
4326
- return /* @__PURE__ */ jsx(
4327
- "span",
4328
- {
4329
- role: "button",
4330
- tabIndex: 0,
4331
- onMouseDown: (e) => {
4332
- e.preventDefault();
4333
- e.stopPropagation();
4334
- },
4335
- onClick: (e) => {
4336
- e.stopPropagation();
4337
- doDelete(e);
4338
- },
4339
- onKeyDown: (e) => {
4340
- if (e.key === "Enter" || e.key === " ") {
4341
- e.preventDefault();
4342
- doDelete(e);
4343
- }
4344
- },
4345
- "aria-label": getLabel("btnAiDelete").text,
4346
- title: getLabel("btnAiDelete").text,
4347
- children: /* @__PURE__ */ jsx(Close, { type: "button", className: "delete_date_button" })
4348
- }
4349
- );
4350
- }, [id, onDelete, setCalendarValue]);
4351
- return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
4261
+ } else {
4262
+ this.inputValue = str;
4263
+ }
4264
+ }
4265
+ }
4266
+ async setValue(date, fire = true) {
4267
+ this.error = false;
4268
+ if (date !== this.value) {
4269
+ const dateValue = dayjs(date);
4270
+ const newValue = dateValue.isValid() ? dateValue.format(dateFormat) : "";
4271
+ const res = fire ? await this.props.onChange?.(newValue) : null;
4272
+ this.inputValue = newValue || "";
4273
+ if (typeof res !== "string") {
4274
+ this.value = date;
4275
+ } else {
4276
+ this.error = true;
4277
+ this.value = null;
4278
+ this.props.onError?.(res);
4279
+ }
4280
+ }
4281
+ }
4282
+ render(props) {
4283
+ const { onBlur, onChange, onError, id } = props;
4284
+ Object.assign(this.props, {
4285
+ onBlur,
4286
+ onChange,
4287
+ onError,
4288
+ id: id ?? this.props.id
4289
+ });
4290
+ const { value, disabled, readonly } = props;
4291
+ Object.assign(this.state, { readonly, value, disabled });
4292
+ if (value !== void 0 && this.previousValue !== value) {
4293
+ this.previousValue = value;
4294
+ this.setValueFromString(value, false);
4295
+ }
4296
+ }
4297
+ }
4298
+ const DateInput = observer(
4299
+ ({
4300
+ className,
4301
+ disabled,
4302
+ id: outerId,
4303
+ inputRef,
4304
+ onBlur,
4305
+ onChange,
4306
+ onError,
4307
+ readonly,
4308
+ value: outerValue
4309
+ }) => {
4310
+ const controller = useMemo(() => new DateInputController(), []);
4311
+ controller.render({
4312
+ className,
4313
+ disabled,
4314
+ id: outerId,
4315
+ inputRef,
4316
+ onBlur,
4317
+ onChange,
4318
+ onError,
4319
+ readonly,
4320
+ value: outerValue
4321
+ });
4322
+ return /* @__PURE__ */ jsx(
4352
4323
  Box,
4353
4324
  {
4354
4325
  ...getVariant("forms.dateInput"),
4355
4326
  className: `${className ?? ""} dateInput`,
4356
- id: `DateInput${id}`,
4357
- ref: boxRef,
4358
- onBlur: (e) => {
4359
- setIsFocused(false);
4360
- if (hasBlured.current) {
4361
- hasBlured.current = false;
4362
- } else if (!document.querySelector(".overlay.screenLock")) {
4363
- handleBlur(e);
4364
- }
4365
- },
4327
+ id: controller.props.id,
4328
+ onBlur: controller.onBlur.bind(controller),
4329
+ ref: controller.ref.bind(controller),
4366
4330
  children: /* @__PURE__ */ jsx(
4367
4331
  IconInput,
4368
4332
  {
4369
- additionalButtons: (
4370
- // mostrar sólo si el campo tiene valor, no está en modo placeholder,
4371
- // no es readOnly/disabled Y el input está enfocado
4372
- inputValue && inputValue !== getMaskForDateFormat().replaceAll(
4373
- "9",
4374
- DEFAULT_MASK_PLACEHOLDER
4375
- ) && !props.readOnly && !props.disabled && isFocused ? additionalButtons : void 0
4376
- ),
4377
- buttonProps,
4378
- className: `${stateError !== null ? "field__withError" : ""}`,
4333
+ additionalButtons: controller.inputValue && getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== controller.inputValue ? /* @__PURE__ */ jsx(
4334
+ Close,
4335
+ {
4336
+ as: "button",
4337
+ onClick: controller.clear.bind(controller),
4338
+ className: "delete_date_button",
4339
+ onMouseDown: (e) => {
4340
+ e.preventDefault();
4341
+ e.stopPropagation();
4342
+ }
4343
+ }
4344
+ ) : void 0,
4345
+ buttonProps: { disabled },
4379
4346
  icon: FaCalendarAlt,
4380
- inputProps,
4381
- isLoading,
4382
- mask: getCustomMask ? getCustomMask() : getMaskForDateFormat(),
4383
- maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
4384
- onClick: (ev) => {
4385
- const tooltip = ApiaUtil.instance.tooltips.open({
4386
- attachToElement() {
4387
- return ev.target.closest(
4388
- "button"
4389
- );
4390
- },
4391
- attachToElementAnchorPoint: "center",
4392
- closeOnClick: false,
4393
- closeOnClickOut: true,
4394
- closeOnEscape: true,
4395
- closeOnMouseLeaveTooltip: false,
4396
- closeOnMouseLeaveAttachedElement: false,
4397
- closeOnScrollOut: true,
4398
- children: CalModalRenderer ? /* @__PURE__ */ jsx(
4399
- CalModalRenderer,
4400
- {
4401
- calValue,
4402
- locale: DEFAULT_LOCALE,
4403
- handleClickDay: (ev2) => {
4404
- selectDate(ev2);
4405
- setCalValue(ev2);
4406
- tooltip.close();
4407
- }
4408
- }
4409
- ) : /* @__PURE__ */ jsx(
4410
- CalModal,
4411
- {
4412
- calValue,
4413
- locale: DEFAULT_LOCALE,
4414
- handleClickDay: (ev2) => {
4415
- selectDate(ev2);
4416
- setCalValue(ev2);
4417
- tooltip.close();
4418
- }
4419
- }
4420
- ),
4421
- initialFocusGetter(el) {
4422
- return el.querySelector(`.react-calendar__tile--active`);
4423
- },
4424
- minSize: { width: 350, height: 310 }
4425
- });
4347
+ inputProps: {
4348
+ disabled,
4349
+ onChange: controller.onInputChange.bind(controller),
4350
+ value: controller.inputValue
4426
4351
  },
4427
- readOnly: props.readOnly
4352
+ mask: getMaskForDateFormat(),
4353
+ maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
4354
+ onClick: controller.openCalendar.bind(controller),
4355
+ readOnly: readonly
4428
4356
  }
4429
4357
  )
4430
4358
  }
4431
- ) });
4359
+ );
4432
4360
  }
4433
4361
  );
4434
4362
 
@@ -4651,7 +4579,7 @@ const FieldLabel = forwardRef(
4651
4579
  {
4652
4580
  as: as ?? "label",
4653
4581
  ...props,
4654
- className: `fieldLabel ${props.className ?? ""}`,
4582
+ className: `fieldLabel ${props.className ?? ""} ${error ? "field_with_error" : ""}`,
4655
4583
  ...getVariant("layout.common.components.fieldLabel"),
4656
4584
  "aria-label": props["aria-label"] ?? label,
4657
4585
  ref,
@@ -7070,9 +6998,11 @@ const IconsListNonForwarded = (props, ref) => {
7070
6998
  render = useCallback(() => doRender((current) => !current), []);
7071
6999
  const storeId = useMemo(() => uniqueId("IconsList"), []);
7072
7000
  const [actions, useProps, , , Context] = useStore({ storeId });
7073
- const rows = Math.ceil(propsRef.current.icons.length / breakPoint);
7001
+ const rows = Math.ceil(
7002
+ propsRef.current.icons.length / (props.iconsPerRow ? props.iconsPerRow : breakPoint)
7003
+ );
7074
7004
  const sx = useStyles({
7075
- breakPoint,
7005
+ breakPoint: props.iconsPerRow ? props.iconsPerRow : breakPoint,
7076
7006
  containerWidth,
7077
7007
  iconWidth: propsRef.current.iconWidth ?? 100,
7078
7008
  verticalGap: propsRef.current.verticalGap,
@@ -7083,7 +7013,7 @@ const IconsListNonForwarded = (props, ref) => {
7083
7013
  }, [breakPoint]);
7084
7014
  const IconRenderer = propsRef.current.iconRenderer ?? DefaultIconRenderer;
7085
7015
  const gridRef = useProps("grid", {
7086
- columns: breakPoint,
7016
+ columns: props.iconsPerRow ? props.iconsPerRow : breakPoint,
7087
7017
  iconsCount: propsRef.current.icons.length,
7088
7018
  rows
7089
7019
  });
@@ -7098,7 +7028,7 @@ const IconsListNonForwarded = (props, ref) => {
7098
7028
  storeId,
7099
7029
  children: /* @__PURE__ */ jsx(Box, { ref: gridRef, children: Array(rows).fill(1).map((_, i) => {
7100
7030
  const icons = getRowIcons({
7101
- breakPoint,
7031
+ breakPoint: props.iconsPerRow ? props.iconsPerRow : breakPoint,
7102
7032
  i,
7103
7033
  icons: propsRef.current.icons
7104
7034
  });
@@ -7714,7 +7644,7 @@ const Dropzone = ({
7714
7644
  return /* @__PURE__ */ jsxs(
7715
7645
  Box,
7716
7646
  {
7717
- ...getVariant("layout.execution.components.uploader.dropzone"),
7647
+ ...getVariant("layout.common.components.uploader.dropzone"),
7718
7648
  className: "dropzone__container",
7719
7649
  children: [
7720
7650
  /* @__PURE__ */ jsxs(
@@ -8817,6 +8747,253 @@ const MDRenderer = ({ str }) => {
8817
8747
  };
8818
8748
  var index = memo(MDRenderer);
8819
8749
 
8750
+ const SwitchCard = observer(
8751
+ ({
8752
+ align = "left",
8753
+ icon,
8754
+ label,
8755
+ notSwitchedLabel,
8756
+ onClose,
8757
+ onSwitch,
8758
+ switchedLabel,
8759
+ switchProps,
8760
+ value,
8761
+ disabled
8762
+ }) => {
8763
+ const [isSwitched, setIsSwitched] = useState(toBoolean(value));
8764
+ useEffect(() => {
8765
+ setIsSwitched(toBoolean(value));
8766
+ }, [value]);
8767
+ const handleSwitchChange = (e) => {
8768
+ const newValue = e.target.checked;
8769
+ setIsSwitched(newValue);
8770
+ if (onSwitch) {
8771
+ onSwitch(newValue);
8772
+ }
8773
+ };
8774
+ return /* @__PURE__ */ jsxs(
8775
+ Box,
8776
+ {
8777
+ className: "switch__card",
8778
+ ...getVariant("layout.common.components.switchCard"),
8779
+ children: [
8780
+ align === "left" && /* @__PURE__ */ jsx(
8781
+ Switch,
8782
+ {
8783
+ disabled,
8784
+ checked: isSwitched,
8785
+ ...switchProps,
8786
+ onChange: handleSwitchChange
8787
+ }
8788
+ ),
8789
+ /* @__PURE__ */ jsxs(Box, { className: "label__container", title: label, children: [
8790
+ icon && /* @__PURE__ */ jsx(Icon$1, { name: icon, title: "" }),
8791
+ label
8792
+ ] }),
8793
+ (switchedLabel && isSwitched || align === "right" || onClose) && /* @__PURE__ */ jsxs(Box, { className: "switch__container", children: [
8794
+ !notSwitchedLabel && (isSwitched ? getLabel("lblCanUpdate").text : getLabel("lblCannotUpdate").text),
8795
+ align === "right" && /* @__PURE__ */ jsx(
8796
+ Switch,
8797
+ {
8798
+ disabled,
8799
+ checked: isSwitched,
8800
+ ...switchProps,
8801
+ onChange: handleSwitchChange,
8802
+ className: "switch",
8803
+ title: isSwitched ? getLabel("lblCanUpdate").text : getLabel("lblCannotUpdate").text
8804
+ }
8805
+ ),
8806
+ onClose && !disabled && /* @__PURE__ */ jsx(Close, { disabled, onClick: onClose })
8807
+ ] })
8808
+ ]
8809
+ }
8810
+ );
8811
+ }
8812
+ );
8813
+
8814
+ const PermissionsList = observer(() => {
8815
+ const controller = usePermissionsContext();
8816
+ const state = controller.permissions;
8817
+ return /* @__PURE__ */ jsxs(Box, { className: "permissions__list", children: [
8818
+ state.users && state.users.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
8819
+ /* @__PURE__ */ jsx("span", { children: getLabel("sbtUsers").text }),
8820
+ /* @__PURE__ */ jsx(Box, { as: "ul", children: state.users.map((c) => {
8821
+ return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
8822
+ SwitchCard,
8823
+ {
8824
+ disabled: controller.disabled,
8825
+ label: c.userLogin,
8826
+ align: "right",
8827
+ icon: "User2",
8828
+ onClose: () => controller.onChangeUsers(
8829
+ controller.permissions.users.filter(
8830
+ (s) => s.userId !== c.userId
8831
+ )
8832
+ ),
8833
+ onSwitch: (isSwitched) => c.canUpdate = isSwitched,
8834
+ value: c.canUpdate
8835
+ }
8836
+ ) }, c.userId);
8837
+ }) })
8838
+ ] }),
8839
+ state.pools && state.pools.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
8840
+ /* @__PURE__ */ jsx("span", { children: getLabel("lblPool").text }),
8841
+ /* @__PURE__ */ jsx(Box, { as: "ul", children: state.pools.map((c) => {
8842
+ return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
8843
+ SwitchCard,
8844
+ {
8845
+ label: c.poolName,
8846
+ align: "right",
8847
+ icon: "Groups",
8848
+ onClose: () => controller.onChangePools(
8849
+ controller.permissions.pools.filter(
8850
+ (s) => s.poolId !== c.poolId
8851
+ )
8852
+ ),
8853
+ onSwitch: (isSwitched) => c.canUpdate = isSwitched,
8854
+ value: c.canUpdate
8855
+ }
8856
+ ) }, c.poolName);
8857
+ }) })
8858
+ ] })
8859
+ ] });
8860
+ });
8861
+
8862
+ const UserModalBtn = observer(() => {
8863
+ const context = usePermissionsContext();
8864
+ return /* @__PURE__ */ jsx(
8865
+ SimpleButton,
8866
+ {
8867
+ disabled: context.disabled,
8868
+ variant: "outline",
8869
+ onClick: () => {
8870
+ makeApiaUsersModal2().openModal({
8871
+ title: window.LBL_ADD_USER
8872
+ }).then((selected) => {
8873
+ context.onChangeUsers(
8874
+ selected.reduce(
8875
+ (acc, c) => {
8876
+ const newItem = {
8877
+ userId: c.row.id,
8878
+ userLogin: String(c.row.cells[0].children),
8879
+ canUpdate: false
8880
+ };
8881
+ if (!acc.some((c2) => c2.userId === newItem.userId)) {
8882
+ acc.push(newItem);
8883
+ }
8884
+ return acc;
8885
+ },
8886
+ [...context.permissions.users]
8887
+ )
8888
+ );
8889
+ });
8890
+ },
8891
+ children: getLabel("btnAddUser").text
8892
+ }
8893
+ );
8894
+ });
8895
+
8896
+ const PoolModalBtn = observer(() => {
8897
+ const context = usePermissionsContext();
8898
+ return /* @__PURE__ */ jsx(
8899
+ SimpleButton,
8900
+ {
8901
+ disabled: context.disabled,
8902
+ variant: "outline",
8903
+ onClick: () => {
8904
+ makeApiaPoolsModals2().openModal({
8905
+ title: window.LBL_ADD_GROUP
8906
+ }).then((selected) => {
8907
+ context.onChangePools(
8908
+ selected.reduce(
8909
+ (acc, c) => {
8910
+ const newItem = {
8911
+ poolId: c.row.id,
8912
+ poolName: String(c.row.cells[0].children),
8913
+ canUpdate: false
8914
+ };
8915
+ if (!acc.some((c2) => c2.poolId === newItem.poolId)) {
8916
+ acc.push(newItem);
8917
+ }
8918
+ return acc;
8919
+ },
8920
+ [...context.permissions.pools]
8921
+ )
8922
+ );
8923
+ });
8924
+ },
8925
+ children: getLabel("btnAddPool").text
8926
+ }
8927
+ );
8928
+ });
8929
+
8930
+ const PermissionsContext = createContext(null);
8931
+ function usePermissionsContext() {
8932
+ return useContext(PermissionsContext);
8933
+ }
8934
+ const Permissions = observer(
8935
+ ({
8936
+ everyonePermissionsValue,
8937
+ collapsePermissions,
8938
+ disabled,
8939
+ onChangeEveryonePermissions,
8940
+ onChangeUsers,
8941
+ onChangePools,
8942
+ permissions
8943
+ }) => {
8944
+ return /* @__PURE__ */ jsx(
8945
+ CollapsiblePanel,
8946
+ {
8947
+ label: /* @__PURE__ */ jsx("span", { children: getLabel("lblPer").text }),
8948
+ id: "permissions",
8949
+ collapseIconToRight: true,
8950
+ closedIcon: "ArrowUpThin",
8951
+ openIcon: "ArrowDownThin",
8952
+ className: "uploader__permissions",
8953
+ collapsed: collapsePermissions,
8954
+ children: /* @__PURE__ */ jsx(
8955
+ PermissionsContext.Provider,
8956
+ {
8957
+ value: {
8958
+ onChangeUsers,
8959
+ onChangePools,
8960
+ permissions,
8961
+ disabled
8962
+ },
8963
+ children: /* @__PURE__ */ jsxs(Box, { ...getVariant("layout.common.components.uploader.permissions"), children: [
8964
+ /* @__PURE__ */ jsxs("label", { className: "uploader__permissions_selection", children: [
8965
+ /* @__PURE__ */ jsxs(Box, { children: [
8966
+ /* @__PURE__ */ jsx("span", { children: getLabel("lblTod").text }),
8967
+ /* @__PURE__ */ jsxs(
8968
+ Select,
8969
+ {
8970
+ disabled,
8971
+ onChange: (ev) => {
8972
+ onChangeEveryonePermissions(
8973
+ ev.target.value
8974
+ );
8975
+ },
8976
+ value: everyonePermissionsValue,
8977
+ children: [
8978
+ /* @__PURE__ */ jsx("option", { value: "M", children: getLabel("lblPerMod").text }),
8979
+ /* @__PURE__ */ jsx("option", { value: "R", children: getLabel("lblPerVer").text }),
8980
+ /* @__PURE__ */ jsx("option", { value: "", children: getLabel("lblAccessDenied").text })
8981
+ ]
8982
+ }
8983
+ )
8984
+ ] }),
8985
+ /* @__PURE__ */ jsx(UserModalBtn, {}),
8986
+ /* @__PURE__ */ jsx(PoolModalBtn, {})
8987
+ ] }),
8988
+ /* @__PURE__ */ jsx(PermissionsList, {})
8989
+ ] })
8990
+ }
8991
+ )
8992
+ }
8993
+ );
8994
+ }
8995
+ );
8996
+
8820
8997
  const TabsContext = React__default.createContext(null);
8821
8998
  function useTabsContext() {
8822
8999
  return React__default.useContext(TabsContext);
@@ -9753,119 +9930,6 @@ const FooterButtons = (props) => {
9753
9930
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Box, { ...props }) });
9754
9931
  };
9755
9932
 
9756
- const AccordionAside = () => {
9757
- const children = useMenu([1, 2, 3]);
9758
- return children;
9759
- };
9760
-
9761
- const Aside = () => {
9762
- const children = useMenu([5, 6, 7]);
9763
- return /* @__PURE__ */ jsx(Fragment, { children });
9764
- };
9765
-
9766
- const AsideLoader = (definition) => {
9767
- React__default.useEffect(() => {
9768
- const variant = definition.variant ?? "twoColumnsAside";
9769
- const unregister = menuController.setMenu({
9770
- menu: /* @__PURE__ */ jsx(Box, { className: "ApplicationMenu", variant: `layout.${variant}`, children: definition.menu ?? definition.children }),
9771
- stage: definition.stage ?? uniqueId$3()
9772
- });
9773
- return () => {
9774
- unregister();
9775
- };
9776
- }, [
9777
- definition.children,
9778
- definition.menu,
9779
- definition.stage,
9780
- definition.variant
9781
- ]);
9782
- return null;
9783
- };
9784
-
9785
- const BodyAside = () => {
9786
- const children = useMenu([1, 2, 3]);
9787
- return children;
9788
- };
9789
-
9790
- const FloatingAside = () => {
9791
- const isScrollingUp = useMatchScrollDirection("up");
9792
- const [hasScrolledEnough, setHasScrolledEnough] = React__default.useState(false);
9793
- useScroll(document, ({ top }) => {
9794
- const menu = document.getElementById("BodyAside");
9795
- if (!menu)
9796
- return false;
9797
- let computedStyle = 0;
9798
- if (window.getComputedStyle(menu).paddingTop.match(/\d+/)) {
9799
- computedStyle = Number(
9800
- window.getComputedStyle(menu).paddingTop.match(/\d+/)[0]
9801
- ) + Number(
9802
- window.getComputedStyle(menu).paddingBottom.match(/\d+/)[0]
9803
- );
9804
- }
9805
- const boxTop = menu.offsetHeight + menu.offsetTop + computedStyle;
9806
- if (hasScrolledEnough !== boxTop < top)
9807
- setHasScrolledEnough(boxTop < top);
9808
- return false;
9809
- });
9810
- const children = useMenu([1, 2, 3]);
9811
- const { Portal } = usePortal({
9812
- containerId: "NonControlledAppModals",
9813
- clickOutsideToHide: false,
9814
- autoRemoveContainer: false,
9815
- defaultShow: true,
9816
- escToHide: false
9817
- });
9818
- if (!children)
9819
- return null;
9820
- return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
9821
- Box,
9822
- {
9823
- ...getVariant("layout.twoColumnsAside.floatingResponsive"),
9824
- className: isScrollingUp && hasScrolledEnough ? "" : "hidden",
9825
- children: /* @__PURE__ */ jsx(
9826
- AccordionItem,
9827
- {
9828
- defaultExpanded: false,
9829
- buttonProps: {
9830
- label: getLabel("lblMnuOpc").text,
9831
- ariaLabel: getLabel("lblMnuOpc").title
9832
- },
9833
- id: "floatingMenuAccordion",
9834
- ...getVariant("tabPrimary"),
9835
- children: isScrollingUp && hasScrolledEnough && children
9836
- }
9837
- )
9838
- }
9839
- ) });
9840
- };
9841
-
9842
- const FooterResponsiveButtons = ({
9843
- breakpoint = 4,
9844
- children,
9845
- className
9846
- }) => {
9847
- const { Portal } = usePortal({
9848
- containerId: "NonControlledAppModals",
9849
- clickOutsideToHide: false,
9850
- autoRemoveContainer: false,
9851
- defaultShow: true,
9852
- escToHide: false
9853
- });
9854
- const appBreakpoint = useBreakpointIndex();
9855
- const shouldShow = useMatchScrollDirection("down") && breakpoint >= appBreakpoint;
9856
- if (Array.isArray(children) && children.length === 0)
9857
- return null;
9858
- return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
9859
- Box,
9860
- {
9861
- as: "aside",
9862
- ...getVariant("layout.footerResponsiveButtons"),
9863
- className: `${className ?? ""} ${shouldShow ? "visible" : "hidden"}`,
9864
- children
9865
- }
9866
- ) });
9867
- };
9868
-
9869
9933
  const HamburguerMenu = ({
9870
9934
  container = ".TitleContainer",
9871
9935
  header = "MainHeader",
@@ -9978,6 +10042,170 @@ const HamburguerMenu = ({
9978
10042
  ] });
9979
10043
  };
9980
10044
 
10045
+ const BodyAside = () => {
10046
+ const children = useMenu([1, 2, 3]);
10047
+ return children;
10048
+ };
10049
+
10050
+ const Aside = () => {
10051
+ const children = useMenu([5, 6, 7]);
10052
+ return /* @__PURE__ */ jsx(Fragment, { children });
10053
+ };
10054
+
10055
+ const FooterResponsiveButtons = ({
10056
+ breakpoint = 4,
10057
+ children,
10058
+ className
10059
+ }) => {
10060
+ const { Portal } = usePortal({
10061
+ containerId: "NonControlledAppModals",
10062
+ clickOutsideToHide: false,
10063
+ autoRemoveContainer: false,
10064
+ defaultShow: true,
10065
+ escToHide: false
10066
+ });
10067
+ const appBreakpoint = useBreakpointIndex();
10068
+ const shouldShow = useMatchScrollDirection("down") && breakpoint >= appBreakpoint;
10069
+ if (Array.isArray(children) && children.length === 0)
10070
+ return null;
10071
+ return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
10072
+ Box,
10073
+ {
10074
+ as: "aside",
10075
+ ...getVariant("layout.footerResponsiveButtons"),
10076
+ className: `${className ?? ""} ${shouldShow ? "visible" : "hidden"}`,
10077
+ children
10078
+ }
10079
+ ) });
10080
+ };
10081
+
10082
+ const FloatingAside = () => {
10083
+ const isScrollingUp = useMatchScrollDirection("up");
10084
+ const [hasScrolledEnough, setHasScrolledEnough] = React__default.useState(false);
10085
+ useScroll(document, ({ top }) => {
10086
+ const menu = document.getElementById("BodyAside");
10087
+ if (!menu)
10088
+ return false;
10089
+ let computedStyle = 0;
10090
+ if (window.getComputedStyle(menu).paddingTop.match(/\d+/)) {
10091
+ computedStyle = Number(
10092
+ window.getComputedStyle(menu).paddingTop.match(/\d+/)[0]
10093
+ ) + Number(
10094
+ window.getComputedStyle(menu).paddingBottom.match(/\d+/)[0]
10095
+ );
10096
+ }
10097
+ const boxTop = menu.offsetHeight + menu.offsetTop + computedStyle;
10098
+ if (hasScrolledEnough !== boxTop < top)
10099
+ setHasScrolledEnough(boxTop < top);
10100
+ return false;
10101
+ });
10102
+ const children = useMenu([1, 2, 3]);
10103
+ const { Portal } = usePortal({
10104
+ containerId: "NonControlledAppModals",
10105
+ clickOutsideToHide: false,
10106
+ autoRemoveContainer: false,
10107
+ defaultShow: true,
10108
+ escToHide: false
10109
+ });
10110
+ if (!children)
10111
+ return null;
10112
+ return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
10113
+ Box,
10114
+ {
10115
+ ...getVariant("layout.twoColumnsAside.floatingResponsive"),
10116
+ className: isScrollingUp && hasScrolledEnough ? "" : "hidden",
10117
+ children: /* @__PURE__ */ jsx(
10118
+ AccordionItem,
10119
+ {
10120
+ defaultExpanded: false,
10121
+ buttonProps: {
10122
+ label: getLabel("lblMnuOpc").text,
10123
+ ariaLabel: getLabel("lblMnuOpc").title
10124
+ },
10125
+ id: "floatingMenuAccordion",
10126
+ ...getVariant("tabPrimary"),
10127
+ children: isScrollingUp && hasScrolledEnough && children
10128
+ }
10129
+ )
10130
+ }
10131
+ ) });
10132
+ };
10133
+
10134
+ const AsideLoader = (definition) => {
10135
+ React__default.useEffect(() => {
10136
+ const variant = definition.variant ?? "twoColumnsAside";
10137
+ const unregister = menuController.setMenu({
10138
+ menu: /* @__PURE__ */ jsx(Box, { className: "ApplicationMenu", variant: `layout.${variant}`, children: definition.menu ?? definition.children }),
10139
+ stage: definition.stage ?? uniqueId$3()
10140
+ });
10141
+ return () => {
10142
+ unregister();
10143
+ };
10144
+ }, [
10145
+ definition.children,
10146
+ definition.menu,
10147
+ definition.stage,
10148
+ definition.variant
10149
+ ]);
10150
+ return null;
10151
+ };
10152
+
10153
+ const TwoColumns = ({
10154
+ atVeryTop,
10155
+ upperAside,
10156
+ overHeadAside,
10157
+ image,
10158
+ title,
10159
+ subTitle,
10160
+ description,
10161
+ underHeadAside,
10162
+ mainContent,
10163
+ footer,
10164
+ asideContent,
10165
+ footerButtons
10166
+ }) => {
10167
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
10168
+ /* @__PURE__ */ jsxs(Box, { ...getVariant("layout.twoColumns"), children: [
10169
+ /* @__PURE__ */ jsxs(Box, { as: "section", className: "twoColumns__topBox", id: "MainHeader", children: [
10170
+ atVeryTop,
10171
+ /* @__PURE__ */ jsx(Box, { as: "aside", className: "topBox__upperAside", children: upperAside }),
10172
+ overHeadAside,
10173
+ /* @__PURE__ */ jsxs(Box, { className: "topBox__heading", children: [
10174
+ /* @__PURE__ */ jsx(Box, { as: "header", className: "topBox__imageHeader", children: image }),
10175
+ /* @__PURE__ */ jsxs(Box, { as: "header", className: "topBox__header TitleContainer", children: [
10176
+ /* @__PURE__ */ jsxs(Box, { className: "topBox__headings", children: [
10177
+ /* @__PURE__ */ jsx("h1", { children: title }),
10178
+ subTitle && /* @__PURE__ */ jsx("h2", { children: subTitle })
10179
+ ] }),
10180
+ /* @__PURE__ */ jsx(Box, { as: "p", children: description })
10181
+ ] }),
10182
+ /* @__PURE__ */ jsxs(Box, { className: "topBox__nav", children: [
10183
+ /* @__PURE__ */ jsx(FavoriteIcon, {}),
10184
+ /* @__PURE__ */ jsx(HamburguerMenu, {})
10185
+ ] })
10186
+ ] }),
10187
+ underHeadAside
10188
+ ] }),
10189
+ /* @__PURE__ */ jsxs(Box, { as: "section", className: "twoColumns__section", children: [
10190
+ /* @__PURE__ */ jsxs(Box, { as: "main", className: "twoColumns__main", children: [
10191
+ /* @__PURE__ */ jsx(BodyAside, {}),
10192
+ mainContent
10193
+ ] }),
10194
+ /* @__PURE__ */ jsx(Box, { as: "nav", id: "MainAside", className: "twoColumns__aside", children: /* @__PURE__ */ jsx(Aside, {}) })
10195
+ ] }),
10196
+ /* @__PURE__ */ jsx(Box, { as: "footer", className: "twoColumns__footer", children: footer })
10197
+ ] }),
10198
+ /* @__PURE__ */ jsx(AsideLoader, { children: asideContent }),
10199
+ /* @__PURE__ */ jsx(FooterResponsiveButtons, { children: footerButtons }),
10200
+ /* @__PURE__ */ jsx(FloatingAside, {})
10201
+ ] });
10202
+ };
10203
+
10204
+ const AccordionAside = () => {
10205
+ const children = useMenu([1, 2, 3]);
10206
+ return children;
10207
+ };
10208
+
9981
10209
  const HeaderButtons = () => {
9982
10210
  const breakPoint = useBreakpointIndex();
9983
10211
  const shouldShowAsFloat = breakPoint === 3;
@@ -10060,6 +10288,52 @@ const CenteredHeaderButtons = () => {
10060
10288
  return /* @__PURE__ */ jsx(Portal3, { children: icon });
10061
10289
  };
10062
10290
 
10291
+ const TwoColumnsList = ({
10292
+ image,
10293
+ subTitle,
10294
+ title,
10295
+ description,
10296
+ favoriteIcon,
10297
+ content,
10298
+ headerBottom,
10299
+ contentFooter,
10300
+ footer,
10301
+ asideContent,
10302
+ footerButtons
10303
+ }) => {
10304
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
10305
+ /* @__PURE__ */ jsxs("div", { ...getVariant("layout.twoColumnsList"), className: "twoColumnsList", children: [
10306
+ /* @__PURE__ */ jsxs("div", { className: "twoColumnsList__topBox", id: "MainHeader", children: [
10307
+ /* @__PURE__ */ jsxs("header", { className: "topBox__heading", children: [
10308
+ /* @__PURE__ */ jsx("section", { className: "topBox__imageHeader", children: image }),
10309
+ /* @__PURE__ */ jsxs("section", { className: "topBox__header TitleContainer", children: [
10310
+ /* @__PURE__ */ jsxs("div", { className: "topBox__headings", children: [
10311
+ /* @__PURE__ */ jsx("h1", { children: title }),
10312
+ subTitle && /* @__PURE__ */ jsx("h2", { children: subTitle })
10313
+ ] }),
10314
+ /* @__PURE__ */ jsx("p", { className: "topBox__description", children: description })
10315
+ ] }),
10316
+ /* @__PURE__ */ jsxs("nav", { className: "topBox__nav", title: getLabel("lblNavOptions").text, children: [
10317
+ favoriteIcon,
10318
+ /* @__PURE__ */ jsx(HamburguerMenu, {})
10319
+ ] })
10320
+ ] }),
10321
+ headerBottom
10322
+ ] }),
10323
+ /* @__PURE__ */ jsxs("section", { className: "twoColumnsList__section", children: [
10324
+ /* @__PURE__ */ jsxs("main", { className: "twoColumnsList__main", children: [
10325
+ /* @__PURE__ */ jsx("div", { className: "twoColumnsList__content", children: content }),
10326
+ /* @__PURE__ */ jsx("div", { className: "twoColumnsList__contentFooter", children: contentFooter })
10327
+ ] }),
10328
+ /* @__PURE__ */ jsx("aside", { id: "MainAside", className: "twoColumnsList__aside", children: /* @__PURE__ */ jsx(Aside, {}) })
10329
+ ] }),
10330
+ /* @__PURE__ */ jsx("footer", { className: "twoColumnsList__mainFooter", children: footer })
10331
+ ] }),
10332
+ /* @__PURE__ */ jsx(AsideLoader, { children: asideContent }),
10333
+ /* @__PURE__ */ jsx(FooterResponsiveButtons, { children: footerButtons })
10334
+ ] });
10335
+ };
10336
+
10063
10337
  var __defProp$5 = Object.defineProperty;
10064
10338
  var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10065
10339
  var __publicField$5 = (obj, key, value) => {
@@ -11126,5 +11400,5 @@ const _FiltersStore = class _FiltersStore {
11126
11400
  __publicField(_FiltersStore, "instance", new _FiltersStore());
11127
11401
  let FiltersStore = _FiltersStore;
11128
11402
 
11129
- 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, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, isFavoriteIcon, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
11403
+ 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, TwoColumns, TwoColumnsList, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, isFavoriteIcon, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
11130
11404
  //# sourceMappingURL=index.js.map