@apia/scheduler-component 5.0.0 → 5.0.3

package/dist/Scheduler/Navigation.js

@@ -0,0 +1,115 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import dayjs from 'dayjs';
+import { dateFormat } from './SchedulerTablePlugin.js';
+import { useCallback } from 'react';
+import { SimpleButton, DateInput } from '@apia/components';
+import { Box } from '@apia/theme';
+import { Icon } from '@apia/icons';
+import { observer } from 'mobx-react-lite';
+import { useScheduler } from './index.js';
+
+const Navigation = observer(() => {
+  const controller = useScheduler();
+  const mondayWeek = controller.getState().data?.mondayWeek;
+  const {
+    isDisabled,
+    isTodayLoading,
+    isLastWeekLoading,
+    isDateInputLoading,
+    isNextWeekLoading,
+    isDeleteLoading
+  } = {
+    isDisabled: controller.getState()?.isLoading !== "NotLoading",
+    isTodayLoading: controller.getState()?.isLoading === "Today",
+    isLastWeekLoading: controller.getState()?.isLoading === "LastWeek",
+    isDateInputLoading: controller.getState()?.isLoading === "DateInput",
+    isNextWeekLoading: controller.getState()?.isLoading === "NextWeek",
+    isDeleteLoading: controller.getState()?.isLoading === "DeleteWeek"
+  };
+  const onTodayHandler = () => {
+    controller.setState({ isLoading: "Today" });
+    controller.makeDaysStage();
+    controller.loadWeek(dayjs().subtract(1, "day").format(dateFormat));
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { className: "scheduler__navigator", children: [
+    /* @__PURE__ */ jsx(
+      SimpleButton,
+      {
+        variant: "outline",
+        className: "scheduler__navigator_todayBtn",
+        disabled: isDisabled,
+        "aria-label": window.LBL_TODAY,
+        isLoading: isTodayLoading,
+        onClick: useCallback(onTodayHandler, [controller]),
+        type: "button",
+        children: window.LBL_TODAY
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SimpleButton,
+      {
+        variant: "outline",
+        className: "scheduler__navigator_lastBtn",
+        disabled: isDisabled,
+        title: window.LBL_SCHED_LAST_WEEK_TOOLTIP,
+        "aria-label": window.LBL_SCHED_LAST_WEEK_TEXT,
+        isLoading: isLastWeekLoading,
+        onClick: () => controller.goPreviousWeek(),
+        type: "button",
+        children: "<"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DateInput,
+      {
+        className: "scheduler__navigator_dateInput",
+        disabled: isDisabled,
+        isLoading: isDateInputLoading,
+        getCustomMask: useCallback(() => {
+          return "";
+        }, []),
+        renderLabel: controller.parsedDateLabel,
+        onChange: (newDate) => {
+          if (newDate) {
+            controller.setState({ isLoading: "DateInput" });
+            controller.loadWeek(
+              dayjs(newDate, dateFormat).format(dateFormat)
+            );
+          }
+        },
+        value: mondayWeek
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SimpleButton,
+      {
+        variant: "outline",
+        className: "scheduler__navigator_nextBtn",
+        disabled: isDisabled,
+        title: window.LBL_SCHED_NEXT_WEEK_TOOLTIP,
+        "aria-label": window.LBL_SCHED_NEXT_WEEK_TEXT,
+        isLoading: isNextWeekLoading,
+        onClick: () => controller.goNextWeek(),
+        type: "button",
+        children: ">"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SimpleButton,
+      {
+        variant: "outline-danger",
+        title: window.LBL_SCHED_RESET_TOOLTIP,
+        "aria-label": window.LBL_SCHED_RESET_TEXT,
+        className: "scheduler__navigator_DeleteBtn",
+        disabled: isDisabled,
+        isLoading: isDeleteLoading,
+        onClick: () => controller.deleteDate(),
+        type: "button",
+        children: /* @__PURE__ */ jsx(Icon, { name: "Trash", title: window.LBL_SCHED_RESET_TEXT })
+      }
+    )
+  ] }) });
+});
+
+export { Navigation };
+//# sourceMappingURL=Navigation.js.map

package/dist/Scheduler/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../src/Scheduler/Navigation.tsx"],"sourcesContent":["import dayjs from 'dayjs';\r\nimport { dateFormat } from './SchedulerTablePlugin';\r\nimport { useCallback } from 'react';\r\nimport { DateInput, SimpleButton } from '@apia/components';\r\nimport { Box } from '@apia/theme';\r\nimport { Icon } from '@apia/icons';\r\nimport { observer } from 'mobx-react-lite';\r\nimport { useScheduler } from '.';\r\n\r\nexport const Navigation = observer(() => {\r\n  const controller = useScheduler();\r\n  const mondayWeek = controller.getState().data?.mondayWeek;\r\n\r\n  const {\r\n    isDisabled,\r\n    isTodayLoading,\r\n    isLastWeekLoading,\r\n    isDateInputLoading,\r\n    isNextWeekLoading,\r\n    isDeleteLoading,\r\n  } = {\r\n    isDisabled: controller.getState()?.isLoading !== 'NotLoading',\r\n    isTodayLoading: controller.getState()?.isLoading === 'Today',\r\n    isLastWeekLoading: controller.getState()?.isLoading === 'LastWeek',\r\n    isDateInputLoading: controller.getState()?.isLoading === 'DateInput',\r\n    isNextWeekLoading: controller.getState()?.isLoading === 'NextWeek',\r\n    isDeleteLoading: controller.getState()?.isLoading === 'DeleteWeek',\r\n  };\r\n\r\n  const onTodayHandler = () => {\r\n    controller.setState({ isLoading: 'Today' });\r\n\r\n    controller.makeDaysStage();\r\n    controller.loadWeek(dayjs().subtract(1, 'day').format(dateFormat));\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Box className=\"scheduler__navigator\">\r\n        <SimpleButton\r\n          variant=\"outline\"\r\n          className=\"scheduler__navigator_todayBtn\"\r\n          disabled={isDisabled}\r\n          aria-label={(window as any).LBL_TODAY}\r\n          isLoading={isTodayLoading}\r\n          onClick={useCallback(onTodayHandler, [controller])}\r\n          type=\"button\"\r\n        >\r\n          {(window as any).LBL_TODAY}\r\n        </SimpleButton>\r\n        <SimpleButton\r\n          variant=\"outline\"\r\n          className=\"scheduler__navigator_lastBtn\"\r\n          disabled={isDisabled}\r\n          title={(window as any).LBL_SCHED_LAST_WEEK_TOOLTIP}\r\n          aria-label={(window as any).LBL_SCHED_LAST_WEEK_TEXT}\r\n          isLoading={isLastWeekLoading}\r\n          onClick={() => controller.goPreviousWeek()}\r\n          type=\"button\"\r\n        >\r\n          &lt;\r\n        </SimpleButton>\r\n        <DateInput\r\n          className=\"scheduler__navigator_dateInput\"\r\n          disabled={isDisabled}\r\n          isLoading={isDateInputLoading}\r\n          getCustomMask={useCallback(() => {\r\n            return '';\r\n          }, [])}\r\n          renderLabel={controller.parsedDateLabel}\r\n          onChange={(newDate) => {\r\n            if (newDate) {\r\n              controller.setState({ isLoading: 'DateInput' });\r\n              controller.loadWeek(\r\n                dayjs(newDate, dateFormat).format(dateFormat),\r\n              );\r\n            }\r\n          }}\r\n          value={mondayWeek}\r\n        />\r\n        <SimpleButton\r\n          variant=\"outline\"\r\n          className=\"scheduler__navigator_nextBtn\"\r\n          disabled={isDisabled}\r\n          title={(window as any).LBL_SCHED_NEXT_WEEK_TOOLTIP}\r\n          aria-label={(window as any).LBL_SCHED_NEXT_WEEK_TEXT}\r\n          isLoading={isNextWeekLoading}\r\n          onClick={() => controller.goNextWeek()}\r\n          type=\"button\"\r\n        >\r\n          &gt;\r\n        </SimpleButton>\r\n        <SimpleButton\r\n          variant=\"outline-danger\"\r\n          title={(window as any).LBL_SCHED_RESET_TOOLTIP}\r\n          aria-label={(window as any).LBL_SCHED_RESET_TEXT}\r\n          className=\"scheduler__navigator_DeleteBtn\"\r\n          disabled={isDisabled}\r\n          isLoading={isDeleteLoading}\r\n          onClick={() => controller.deleteDate()}\r\n          type=\"button\"\r\n        >\r\n          <Icon name=\"Trash\" title={(window as any).LBL_SCHED_RESET_TEXT} />\r\n        </SimpleButton>\r\n      </Box>\r\n    </>\r\n  );\r\n});\r\n"],"names":[],"mappings":"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"}

package/dist/Scheduler/ReserveDetails.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getLabel, arrayOrArray } from '@apia/util';
+import { Box, getVariant } from '@apia/theme';
+import { observer } from 'mobx-react-lite';
+
+const ReserveDetails = observer(
+  ({ processes }) => {
+    let content = /* @__PURE__ */ jsx(Box, { className: "no__appoinments", children: /* @__PURE__ */ jsxs(Box, { as: "span", children: [
+      getLabel("lblNoAppoinments").text,
+      " "
+    ] }) });
+    if (processes.length > 0)
+      content = /* @__PURE__ */ jsxs("table", { className: "appoinments__details", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: getLabel("lblId").text }),
+          /* @__PURE__ */ jsx("th", { children: getLabel("flaAtr").text })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: processes?.map((c) => {
+          const attributes = arrayOrArray(c.attributes.attribute);
+          return attributes.map((attr, index) => /* @__PURE__ */ jsxs("tr", { children: [
+            index === 0 && /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: "appoinments__details_id",
+                rowSpan: attributes.length,
+                children: c.id
+              }
+            ),
+            /* @__PURE__ */ jsxs("td", { className: "appoinments__details_attribute", children: [
+              attr.title,
+              ": ",
+              attr.value
+            ] })
+          ] }, `${c.id}-${index}`));
+        }) })
+      ] });
+    return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.components.scheduler.details"), children: content });
+  }
+);
+
+export { ReserveDetails };
+//# sourceMappingURL=ReserveDetails.js.map

package/dist/Scheduler/ReserveDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReserveDetails.js","sources":["../../src/Scheduler/ReserveDetails.tsx"],"sourcesContent":["import { arrayOrArray, getLabel } from '@apia/util';\r\nimport { Box, getVariant } from '@apia/theme';\r\nimport { observer } from 'mobx-react-lite';\r\nexport type TProcesses = {\r\n  id: number;\r\n  attributes: {\r\n    attribute: {\r\n      title: string;\r\n      value: string;\r\n    }[];\r\n  };\r\n}[];\r\n\r\nexport const ReserveDetails = observer(\r\n  ({ processes }: { processes: TProcesses }) => {\r\n    let content = (\r\n      <Box className=\"no__appoinments\">\r\n        <Box as=\"span\">{getLabel('lblNoAppoinments').text} </Box>\r\n      </Box>\r\n    );\r\n    if (processes.length > 0)\r\n      content = (\r\n        <table className=\"appoinments__details\">\r\n          <thead>\r\n            <tr>\r\n              <th>{getLabel('lblId').text}</th>\r\n              <th>{getLabel('flaAtr').text}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            {processes?.map((c) => {\r\n              const attributes = arrayOrArray(c.attributes.attribute);\r\n              return attributes.map((attr, index) => (\r\n                <tr key={`${c.id}-${index}`}>\r\n                  {index === 0 && (\r\n                    <td\r\n                      className=\"appoinments__details_id\"\r\n                      rowSpan={attributes.length}\r\n                    >\r\n                      {c.id}\r\n                    </td>\r\n                  )}\r\n                  <td className=\"appoinments__details_attribute\">\r\n                    {attr.title}: {attr.value}\r\n                  </td>\r\n                </tr>\r\n              ));\r\n            })}\r\n          </tbody>\r\n        </table>\r\n      );\r\n    return (\r\n      <Box {...getVariant('layout.common.components.scheduler.details')}>\r\n        {content}\r\n      </Box>\r\n    );\r\n  },\r\n);\r\n"],"names":[],"mappings":";;;;;AAaO,MAAM,cAAA,GAAiB,QAAA;AAAA,EAC5B,CAAC,EAAE,SAAA,EAAU,KAAiC;AAC5C,IAAA,IAAI,OAAA,uBACD,GAAA,EAAA,EAAI,SAAA,EAAU,mBACb,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,IAAG,MAAA,EAAQ,QAAA,EAAA;AAAA,MAAA,QAAA,CAAS,kBAAkB,CAAA,CAAE,IAAA;AAAA,MAAK;AAAA,KAAA,EAAC,CAAA,EACrD,CAAA;AAEF,IAAA,IAAI,UAAU,MAAA,GAAS,CAAA;AACrB,MAAA,OAAA,mBACE,IAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,sBAAA,EACf,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAA,EAAA,EACC,+BAAC,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAI,QAAA,EAAA,QAAA,CAAS,OAAO,CAAA,CAAE,IAAA,EAAK,CAAA;AAAA,0BAC5B,GAAA,CAAC,IAAA,EAAA,EAAI,QAAA,EAAA,QAAA,CAAS,QAAQ,EAAE,IAAA,EAAK;AAAA,SAAA,EAC/B,CAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,SAAA,EAAW,GAAA,CAAI,CAAC,CAAA,KAAM;AACrB,UAAA,MAAM,UAAA,GAAa,YAAA,CAAa,CAAA,CAAE,UAAA,CAAW,SAAS,CAAA;AACtD,UAAA,OAAO,WAAW,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,0BAC1B,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,YAAA,KAAA,KAAU,CAAA,oBACT,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAU,yBAAA;AAAA,gBACV,SAAS,UAAA,CAAW,MAAA;AAAA,gBAEnB,QAAA,EAAA,CAAA,CAAE;AAAA;AAAA,aACL;AAAA,4BAEF,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gCAAA,EACX,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,KAAA;AAAA,cAAM,IAAA;AAAA,cAAG,IAAA,CAAK;AAAA,aAAA,EACtB;AAAA,WAAA,EAAA,EAXO,GAAG,CAAA,CAAE,EAAE,CAAA,CAAA,EAAI,KAAK,EAYzB,CACD,CAAA;AAAA,SACF,CAAA,EACH;AAAA,OAAA,EACF,CAAA;AAEJ,IAAA,2BACG,GAAA,EAAA,EAAK,GAAG,UAAA,CAAW,4CAA4C,GAC7D,QAAA,EAAA,OAAA,EACH,CAAA;AAAA;AAGN;;;;"}

package/dist/Scheduler/SchedulerTablePlugin.js

@@ -0,0 +1,100 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { observer } from 'mobx-react-lite';
+import { ApiaUtil, SimpleButton, IconButton } from '@apia/components';
+import { Box, getVariant } from '@apia/theme';
+import { getDateFormat, toBoolean, getLabel } from '@apia/util';
+import dayjs from 'dayjs';
+import { Icon } from '@apia/icons';
+import { ReserveDetails } from './ReserveDetails.js';
+import { useScheduler } from './index.js';
+
+const dateFormat = getDateFormat();
+const CellRenderer = observer(({ cell }) => {
+  const controller = useScheduler();
+  const state = controller.getState();
+  if (cell.getState("content")) {
+    return cell.getState("content");
+  }
+  const properties = cell.getState("properties");
+  if (!state)
+    return;
+  const isSelected = state.selectedCell === properties.cellId;
+  const ariaLabel = !properties.isEnabled ? `${dayjs(properties.weekDay, dateFormat).add(Number(properties.dayNumber) - 1, "day").format(dateFormat)},${properties.hour.slice(0, -2) ?? ""}:${properties.hour.slice(2) ?? ""}, ${String("disabled")}
+              ` : `${dayjs(properties.weekDay, dateFormat).add(Number(properties.dayNumber) - 1, "day").format(dateFormat)},${properties.hour.slice(
+    0,
+    -2
+  )}:${properties.hour.slice(2)}, ${String(
+    properties.valuePlusOverassign
+  )}
+              `;
+  const title = !properties.isEnabled ? "" : `${dayjs(properties.weekDay, dateFormat).add(Number(properties.dayNumber) - 1, "day").format(dateFormat)},${properties.hour.slice(
+    0,
+    -2
+  )}:${properties.hour.slice(2)} ${String(
+    toBoolean(state.initialProps.showDisponibility) ? `, ${properties.valuePlusOverassign}` : ""
+  )}
+              `;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: `scheduler_cell ${properties.isOverassignClassName ? "td_overassign" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          SimpleButton,
+          {
+            tabIndex: 0,
+            title,
+            "aria-label": ariaLabel,
+            disabled: !properties.isEnabled,
+            ...getVariant("transparentIcon"),
+            onClick: () => controller.retriever.selectDayHandler({
+              cellId: properties.cellId,
+              weekDay: properties.weekDay,
+              dayNumber: properties.dayNumber,
+              hour: properties.hour,
+              currentDayDefinition: properties.currentDayDefinition,
+              controller
+            }),
+            className: `sched_cell__btn `,
+            children: [
+              isSelected && /* @__PURE__ */ jsx(Icon, { title: "", name: "Check" }),
+              !isSelected && properties.isEnabled && toBoolean(state.initialProps.showDisponibility) && Number(properties.valuePlusOverassign)
+            ]
+          }
+        ),
+        properties.currentDayDefinition?.type === "laboral" && ApiaUtil.instance.parsers.parseBool(
+          state.initialProps.showAttributes ?? "false"
+        ) && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: 24,
+            icon: "Search",
+            ...getVariant("transparentIcon"),
+            className: `schd__info ${!properties.isEnabled ? "schd__info_disabledColor" : ""}`,
+            onClick: async () => {
+              const processes = await controller.loadInfo(
+                properties.dayNumber,
+                properties.hour
+              );
+              ApiaUtil.instance.modals.open({
+                title: getLabel("lblAppointmentDetails").text,
+                children: /* @__PURE__ */ jsx(ReserveDetails, { processes }),
+                variant: "layout.execution.form.fields.scheduler.details"
+              });
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+class SchedulerTablePlugin {
+  getRenderers() {
+    return {
+      cell: CellRenderer
+    };
+  }
+}
+
+export { SchedulerTablePlugin, dateFormat };
+//# sourceMappingURL=SchedulerTablePlugin.js.map

package/dist/Scheduler/SchedulerTablePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchedulerTablePlugin.js","sources":["../../src/Scheduler/SchedulerTablePlugin.tsx"],"sourcesContent":["import { Cell, TablePlugin } from '@apia/table2-component';\r\nimport { observer } from 'mobx-react-lite';\r\nimport { SimpleButton, IconButton, ApiaUtil } from '@apia/components';\r\nimport { Box, getVariant } from '@apia/theme';\r\nimport { getDateFormat, getLabel, TDateFormat, toBoolean } from '@apia/util';\r\nimport dayjs from 'dayjs';\r\nimport { Icon } from '@apia/icons';\r\nimport { ReserveDetails } from './ReserveDetails';\r\nimport { useScheduler } from '.';\r\nimport { TTskSchDay } from '@apia/scheduler-controller';\r\n\r\nexport const dateFormat: TDateFormat = getDateFormat();\r\n\r\ntype CellProperties = {\r\n  cellId: string;\r\n  currentDayDefinition: TTskSchDay;\r\n  isEnabled: boolean;\r\n  isQueriedDisabled: boolean;\r\n  weekDay: string;\r\n  dayNumber: number;\r\n  hour: string;\r\n  value: number;\r\n  valuePlusOverassign: number;\r\n  isOverassignClassName: boolean;\r\n};\r\n\r\nconst CellRenderer = observer(({ cell }: { cell: Cell }) => {\r\n  const controller = useScheduler();\r\n  const state = controller.getState();\r\n  if (cell.getState('content')) {\r\n    return cell.getState('content');\r\n  }\r\n  const properties = cell.getState('properties') as CellProperties;\r\n  if (!state) return;\r\n  const isSelected = state.selectedCell === properties.cellId;\r\n  const ariaLabel = !properties!.isEnabled\r\n    ? `${dayjs(properties!.weekDay, dateFormat)\r\n        .add(Number(properties!.dayNumber) - 1, 'day')\r\n        .format(dateFormat)},${\r\n        properties!.hour.slice(0, -2) ?? ''\r\n      }:${properties!.hour.slice(2) ?? ''}, ${String('disabled')}\r\n              `\r\n    : `${dayjs(properties!.weekDay, dateFormat)\r\n        .add(Number(properties!.dayNumber) - 1, 'day')\r\n        .format(dateFormat)},${properties!.hour.slice(\r\n        0,\r\n        -2,\r\n      )}:${properties!.hour.slice(2)}, ${String(\r\n        properties!.valuePlusOverassign,\r\n      )}\r\n              `;\r\n\r\n  const title = !properties!.isEnabled\r\n    ? ''\r\n    : `${dayjs(properties!.weekDay, dateFormat)\r\n        .add(Number(properties!.dayNumber) - 1, 'day')\r\n        .format(dateFormat)},${properties!.hour.slice(\r\n        0,\r\n        -2,\r\n      )}:${properties!.hour.slice(2)} ${String(\r\n        toBoolean(state.initialProps.showDisponibility)\r\n          ? `, ${properties!.valuePlusOverassign}`\r\n          : '',\r\n      )}\r\n              `;\r\n\r\n  return (\r\n    <Box\r\n      className={`scheduler_cell ${\r\n        properties!.isOverassignClassName ? 'td_overassign' : ''\r\n      }`}\r\n    >\r\n      <SimpleButton\r\n        tabIndex={0}\r\n        title={title}\r\n        aria-label={ariaLabel}\r\n        disabled={!properties!.isEnabled}\r\n        {...getVariant('transparentIcon')}\r\n        onClick={() =>\r\n          controller.retriever.selectDayHandler({\r\n            cellId: properties.cellId,\r\n            weekDay: properties.weekDay,\r\n            dayNumber: properties.dayNumber,\r\n            hour: properties.hour,\r\n            currentDayDefinition: properties.currentDayDefinition,\r\n            controller: controller,\r\n          })\r\n        }\r\n        className={`sched_cell__btn `}\r\n      >\r\n        {isSelected && <Icon title=\"\" name=\"Check\" />}\r\n        {!isSelected &&\r\n          properties!.isEnabled &&\r\n          toBoolean(state.initialProps.showDisponibility) &&\r\n          Number(properties!.valuePlusOverassign)}\r\n      </SimpleButton>\r\n\r\n      {properties!.currentDayDefinition?.type === 'laboral' &&\r\n        ApiaUtil.instance.parsers.parseBool(\r\n          state.initialProps.showAttributes ?? 'false',\r\n        ) && (\r\n          <IconButton\r\n            size={24}\r\n            icon=\"Search\"\r\n            {...getVariant('transparentIcon')}\r\n            className={`schd__info ${!properties!.isEnabled ? 'schd__info_disabledColor' : ''}`}\r\n            onClick={async () => {\r\n              const processes = await controller.loadInfo(\r\n                properties.dayNumber,\r\n                properties.hour,\r\n              );\r\n\r\n              ApiaUtil.instance.modals.open({\r\n                title: getLabel('lblAppointmentDetails').text,\r\n                children: <ReserveDetails processes={processes} />,\r\n                variant: 'layout.execution.form.fields.scheduler.details',\r\n              });\r\n            }}\r\n          />\r\n        )}\r\n    </Box>\r\n  );\r\n});\r\n\r\nexport class SchedulerTablePlugin implements TablePlugin {\r\n  getRenderers() {\r\n    return {\r\n      cell: CellRenderer,\r\n    };\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/Scheduler/SelectedDayInfo.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Label } from '@apia/theme';
+import { formatMessage } from '@apia/util';
+import { observer } from 'mobx-react-lite';
+import { useScheduler } from './index.js';
+
+const SelectedDateInfo = observer(() => {
+  const controller = useScheduler();
+  const data = controller.getState().data;
+  const selectedDay = controller.getState()?.selectedDay;
+  return /* @__PURE__ */ jsxs(Box, { className: "selectedDateInfo", children: [
+    selectedDay?.day && selectedDay?.hour && /* @__PURE__ */ jsx(Label, { children: formatMessage(window.LBL_SCHED_SELECTED_DATE, {
+      TOK1: selectedDay?.day,
+      TOK2: `${selectedDay.hour.slice(
+        0,
+        -2
+      )}:${selectedDay.hour.slice(2)}`
+    }) }),
+    !selectedDay?.day && !data?.weekNotConfigured && data?.tskSchDay && /* @__PURE__ */ jsx(Label, { sx: { display: "block" }, children: window.LBL_SCHED_DATE_NOT_SELECTED })
+  ] });
+});
+
+export { SelectedDateInfo as default };
+//# sourceMappingURL=SelectedDayInfo.js.map

package/dist/Scheduler/SelectedDayInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedDayInfo.js","sources":["../../src/Scheduler/SelectedDayInfo.tsx"],"sourcesContent":["import { Box, Label } from '@apia/theme';\r\nimport { formatMessage } from '@apia/util';\r\nimport { observer } from 'mobx-react-lite';\r\nimport { useScheduler } from '.';\r\n\r\nconst SelectedDateInfo = observer(() => {\r\n  const controller = useScheduler();\r\n  const data = controller.getState().data;\r\n  const selectedDay = controller.getState()?.selectedDay;\r\n\r\n  return (\r\n    <Box className=\"selectedDateInfo\">\r\n      {selectedDay?.day && selectedDay?.hour && (\r\n        <Label>\r\n          {formatMessage((window as any).LBL_SCHED_SELECTED_DATE, {\r\n            TOK1: selectedDay?.day,\r\n            TOK2: `${selectedDay.hour.slice(\r\n              0,\r\n              -2,\r\n            )}:${selectedDay.hour!.slice(2)}`,\r\n          })}\r\n        </Label>\r\n      )}\r\n      {!selectedDay?.day && !data?.weekNotConfigured && data?.tskSchDay && (\r\n        <Label sx={{ display: 'block' }}>\r\n          {(window as any).LBL_SCHED_DATE_NOT_SELECTED}\r\n        </Label>\r\n      )}\r\n    </Box>\r\n  );\r\n});\r\n\r\nexport default SelectedDateInfo;\r\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,gBAAA,GAAmB,SAAS,MAAM;AACtC,EAAA,MAAM,aAAa,YAAA,EAAa;AAChC,EAAA,MAAM,IAAA,GAAO,UAAA,CAAW,QAAA,EAAS,CAAE,IAAA;AACnC,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,QAAA,EAAS,EAAG,WAAA;AAE3C,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAU,kBAAA,EACZ,QAAA,EAAA;AAAA,IAAA,WAAA,EAAa,OAAO,WAAA,EAAa,IAAA,wBAC/B,KAAA,EAAA,EACE,QAAA,EAAA,aAAA,CAAe,OAAe,uBAAA,EAAyB;AAAA,MACtD,MAAM,WAAA,EAAa,GAAA;AAAA,MACnB,IAAA,EAAM,CAAA,EAAG,WAAA,CAAY,IAAA,CAAK,KAAA;AAAA,QACxB,CAAA;AAAA,QACA;AAAA,OACD,CAAA,CAAA,EAAI,WAAA,CAAY,IAAA,CAAM,KAAA,CAAM,CAAC,CAAC,CAAA;AAAA,KAChC,CAAA,EACH,CAAA;AAAA,IAED,CAAC,WAAA,EAAa,GAAA,IAAO,CAAC,IAAA,EAAM,qBAAqB,IAAA,EAAM,SAAA,oBACtD,GAAA,CAAC,KAAA,EAAA,EAAM,IAAI,EAAE,OAAA,EAAS,OAAA,EAAQ,EAC1B,iBAAe,2BAAA,EACnB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAC;;;;"}

package/dist/Scheduler/Table.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { Table } from '@apia/table2-component';
+import { observer } from 'mobx-react-lite';
+import { Box } from '@apia/theme';
+import { useScheduler } from './index.js';
+
+const SchedTable = observer(() => {
+  const controller = useScheduler();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      onKeyDownCapture: (ev) => {
+        if (ev.code === "ArrowRight" && ev.ctrlKey) {
+          ev.stopPropagation();
+          controller.goNextWeek();
+        }
+        if (ev.code === "ArrowLeft" && ev.ctrlKey) {
+          ev.stopPropagation();
+          controller.goPreviousWeek();
+        }
+      },
+      children: /* @__PURE__ */ jsx(Table, { variant: "secondary", controller: controller.tableController })
+    }
+  );
+});
+
+export { SchedTable };
+//# sourceMappingURL=Table.js.map

package/dist/Scheduler/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../src/Scheduler/Table.tsx"],"sourcesContent":["import { Table } from '@apia/table2-component';\r\nimport { observer } from 'mobx-react-lite';\r\nimport { Box } from '@apia/theme';\r\nimport { useScheduler } from '.';\r\n\r\nexport const SchedTable = observer(() => {\r\n  const controller = useScheduler();\r\n\r\n  return (\r\n    <Box\r\n      onKeyDownCapture={(ev) => {\r\n        if (ev.code === 'ArrowRight' && ev.ctrlKey) {\r\n          ev.stopPropagation();\r\n          controller.goNextWeek();\r\n        }\r\n        if (ev.code === 'ArrowLeft' && ev.ctrlKey) {\r\n          ev.stopPropagation();\r\n          controller.goPreviousWeek();\r\n        }\r\n      }}\r\n    >\r\n      <Table variant=\"secondary\" controller={controller.tableController} />\r\n    </Box>\r\n  );\r\n});\r\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,UAAA,GAAa,SAAS,MAAM;AACvC,EAAA,MAAM,aAAa,YAAA,EAAa;AAEhC,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,gBAAA,EAAkB,CAAC,EAAA,KAAO;AACxB,QAAA,IAAI,EAAA,CAAG,IAAA,KAAS,YAAA,IAAgB,EAAA,CAAG,OAAA,EAAS;AAC1C,UAAA,EAAA,CAAG,eAAA,EAAgB;AACnB,UAAA,UAAA,CAAW,UAAA,EAAW;AAAA;AAExB,QAAA,IAAI,EAAA,CAAG,IAAA,KAAS,WAAA,IAAe,EAAA,CAAG,OAAA,EAAS;AACzC,UAAA,EAAA,CAAG,eAAA,EAAgB;AACnB,UAAA,UAAA,CAAW,cAAA,EAAe;AAAA;AAC5B,OACF;AAAA,MAEA,8BAAC,KAAA,EAAA,EAAM,OAAA,EAAQ,WAAA,EAAY,UAAA,EAAY,WAAW,eAAA,EAAiB;AAAA;AAAA,GACrE;AAEJ,CAAC;;;;"}

package/dist/Scheduler/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Scheduler, ISchedulerDataRetriever, IScheduleInitialProps } from '@apia/scheduler-controller';
+
+declare const SchedulerComponent: (({ controller, retriever, properties, getController, }: {
+    controller?: Scheduler;
+    retriever?: ISchedulerDataRetriever;
+    properties?: IScheduleInitialProps;
+    getController?: (ctrl: Scheduler) => void;
+}) => react_jsx_runtime.JSX.Element | null) & {
+    displayName: string;
+};
+
+export { SchedulerComponent };
+//# sourceMappingURL=index.d.ts.map

package/dist/Scheduler/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/Scheduler/index.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useBreakpointIndex, Box, getVariant } from '@apia/theme';
+import { Navigation } from './Navigation.js';
+import { SchedTable } from './Table.js';
+import { Mini } from './mini/Mini.js';
+import { SchedulerTablePlugin } from './SchedulerTablePlugin.js';
+import { observer } from 'mobx-react-lite';
+import SelectedDateInfo from './SelectedDayInfo.js';
+import { Scheduler } from '@apia/scheduler-controller';
+import { createContext, useState, useContext } from 'react';
+
+const SchedulerController = createContext(null);
+function useScheduler() {
+  return useContext(SchedulerController);
+}
+const SchedulerComponent = observer(
+  ({
+    controller,
+    retriever,
+    properties,
+    getController
+  }) => {
+    if (!controller && !(properties && retriever)) {
+      console.error(
+        "Need to create controller or pass retriever and properties"
+      );
+      return null;
+    }
+    const [actualController] = useState(() => {
+      const ctrl = controller ?? new Scheduler(properties, retriever);
+      getController?.(ctrl);
+      ctrl.tableController.setPlugins((current) => {
+        if (!current.some((plugin) => plugin instanceof SchedulerTablePlugin)) {
+          current.push(new SchedulerTablePlugin());
+        }
+        return current;
+      });
+      return ctrl;
+    });
+    const breakPoint = useBreakpointIndex();
+    return /* @__PURE__ */ jsx(SchedulerController.Provider, { value: actualController, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ...getVariant("layout.common.components.scheduler"),
+        className: "scheduler",
+        children: [
+          /* @__PURE__ */ jsx(Navigation, {}),
+          /* @__PURE__ */ jsx(SelectedDateInfo, {}),
+          breakPoint > 4 ? /* @__PURE__ */ jsx(SchedTable, {}) : /* @__PURE__ */ jsx(Mini, {})
+        ]
+      }
+    ) });
+  }
+);
+
+export { SchedulerComponent, SchedulerController, useScheduler };
+//# sourceMappingURL=index.js.map

package/dist/Scheduler/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Scheduler/index.tsx"],"sourcesContent":["import { Box, getVariant, useBreakpointIndex } from '@apia/theme';\r\nimport { Navigation } from './Navigation';\r\nimport { SchedTable } from './Table';\r\nimport { Mini } from './mini/Mini';\r\nimport { SchedulerTablePlugin } from './SchedulerTablePlugin';\r\nimport { observer } from 'mobx-react-lite';\r\nimport SelectedDateInfo from './SelectedDayInfo';\r\nimport {\r\n  IScheduleInitialProps,\r\n  ISchedulerDataRetriever,\r\n  Scheduler,\r\n} from '@apia/scheduler-controller';\r\nimport { createContext, useContext, useState } from 'react';\r\n\r\nexport const SchedulerController = createContext<Scheduler | null>(null);\r\n\r\nexport function useScheduler() {\r\n  return useContext(SchedulerController)!;\r\n}\r\n\r\nexport const SchedulerComponent = observer(\r\n  ({\r\n    controller,\r\n    retriever,\r\n    properties,\r\n    getController,\r\n  }: {\r\n    controller?: Scheduler;\r\n    retriever?: ISchedulerDataRetriever;\r\n    properties?: IScheduleInitialProps;\r\n    getController?: (ctrl: Scheduler) => void;\r\n  }) => {\r\n    if (!controller && !(properties && retriever)) {\r\n      console.error(\r\n        'Need to create controller or pass retriever and properties',\r\n      );\r\n      return null;\r\n    }\r\n\r\n    const [actualController] = useState(() => {\r\n      const ctrl = controller ?? new Scheduler(properties!, retriever!);\r\n\r\n      getController?.(ctrl);\r\n\r\n      ctrl.tableController.setPlugins((current) => {\r\n        if (!current.some((plugin) => plugin instanceof SchedulerTablePlugin)) {\r\n          current.push(new SchedulerTablePlugin());\r\n        }\r\n        return current;\r\n      });\r\n\r\n      return ctrl;\r\n    });\r\n\r\n    const breakPoint = useBreakpointIndex();\r\n\r\n    return (\r\n      <SchedulerController.Provider value={actualController}>\r\n        <Box\r\n          {...getVariant('layout.common.components.scheduler')}\r\n          className=\"scheduler\"\r\n        >\r\n          <Navigation />\r\n          <SelectedDateInfo />\r\n          {breakPoint > 4 ? <SchedTable /> : <Mini />}\r\n        </Box>\r\n      </SchedulerController.Provider>\r\n    );\r\n  },\r\n);\r\n"],"names":[],"mappings":";;;;;;;;;;;AAcO,MAAM,mBAAA,GAAsB,cAAgC,IAAI;AAEhE,SAAS,YAAA,GAAe;AAC7B,EAAA,OAAO,WAAW,mBAAmB,CAAA;AACvC;AAEO,MAAM,kBAAA,GAAqB,QAAA;AAAA,EAChC,CAAC;AAAA,IACC,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,KAKM;AACJ,IAAA,IAAI,CAAC,UAAA,IAAc,EAAE,UAAA,IAAc,SAAA,CAAA,EAAY;AAC7C,MAAA,OAAA,CAAQ,KAAA;AAAA,QACN;AAAA,OACF;AACA,MAAA,OAAO,IAAA;AAAA;AAGT,IAAA,MAAM,CAAC,gBAAgB,CAAA,GAAI,QAAA,CAAS,MAAM;AACxC,MAAA,MAAM,IAAA,GAAO,UAAA,IAAc,IAAI,SAAA,CAAU,YAAa,SAAU,CAAA;AAEhE,MAAA,aAAA,GAAgB,IAAI,CAAA;AAEpB,MAAA,IAAA,CAAK,eAAA,CAAgB,UAAA,CAAW,CAAC,OAAA,KAAY;AAC3C,QAAA,IAAI,CAAC,OAAA,CAAQ,IAAA,CAAK,CAAC,MAAA,KAAW,MAAA,YAAkB,oBAAoB,CAAA,EAAG;AACrE,UAAA,OAAA,CAAQ,IAAA,CAAK,IAAI,oBAAA,EAAsB,CAAA;AAAA;AAEzC,QAAA,OAAO,OAAA;AAAA,OACR,CAAA;AAED,MAAA,OAAO,IAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,aAAa,kBAAA,EAAmB;AAEtC,IAAA,uBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,OAAO,gBAAA,EACnC,QAAA,kBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACE,GAAG,WAAW,oCAAoC,CAAA;AAAA,QACnD,SAAA,EAAU,WAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA;AAAA,8BACX,gBAAA,EAAA,EAAiB,CAAA;AAAA,UACjB,aAAa,CAAA,mBAAI,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA,uBAAM,IAAA,EAAA,EAAK;AAAA;AAAA;AAAA,KAC3C,EACF,CAAA;AAAA;AAGN;;;;"}

package/dist/Scheduler/mini/Mini.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Box, getVariant, Heading, Spinner } from '@apia/theme';
+import { observer } from 'mobx-react-lite';
+import Stage from './Stage.js';
+import { getSpecificParent } from '@apia/util';
+import { Icon } from '@apia/icons';
+import { useScheduler } from '../index.js';
+
+const Mini = observer(() => {
+  const controller = useScheduler();
+  const data = controller.getState().data;
+  const stage = controller.getState()?.stageData;
+  const stagesLength = controller.getState().stageData?.length;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...getVariant("layout.execution.form.fields.scheduler"),
+      className: "schedulerMini",
+      onKeyDown: (ev) => {
+        if (ev.key.toLowerCase() === "arrowleft") {
+          const stageName = getSpecificParent(
+            ev.target,
+            (current) => current.classList.contains("stage")
+          )?.dataset.name;
+          const stageIndex = stage.findIndex(
+            (current) => current.name === stageName
+          );
+          if (stageIndex <= 0)
+            return;
+          const nextStage = stage[stageIndex - 1]?.name;
+          const firstButton = document.querySelector(
+            `[data-name="${nextStage}"] .selected`
+          ) || document.querySelector(
+            `[data-name="${nextStage}"] button:not(:disabled)`
+          );
+          if (firstButton)
+            firstButton.focus();
+        }
+        if (ev.key.toLowerCase() === "arrowright") {
+          const stageName = getSpecificParent(
+            ev.target,
+            (current) => current.classList.contains("stage")
+          )?.dataset.name;
+          const stageIndex = stage.findIndex(
+            (current) => current.name === stageName
+          );
+          if (stageIndex >= stage.length - 1)
+            return;
+          const nextStage = stage[stageIndex + 1]?.name;
+          const firstButton = document.querySelector(
+            `[data-name="${nextStage}"] .selected`
+          ) || document.querySelector(
+            `[data-name="${nextStage}"] button:not(:disabled)`
+          );
+          if (firstButton)
+            firstButton.focus();
+        }
+      },
+      children: [
+        data?.weekNotConfigured && /* @__PURE__ */ jsx(Heading, { as: "h1", children: window.LBL_SCHED_WEEK_NOT_CONFIGURED }),
+        !data?.weekNotConfigured && data?.tskSchDay && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Stage, { stageIndex: 0 }),
+          stagesLength >= 2 && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "ArrowDown",
+              title: "",
+              className: "schedulerMini_faCaretDown"
+            }
+          ),
+          /* @__PURE__ */ jsx(Stage, { stageIndex: 1 }),
+          stagesLength >= 3 && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "ArrowDown",
+              title: "",
+              className: "schedulerMini_faCaretDown"
+            }
+          ),
+          /* @__PURE__ */ jsx(Stage, { stageIndex: 2 })
+        ] }),
+        !data?.weekNotConfigured && !data?.tskSchDay && /* @__PURE__ */ jsx(Box, { className: "box_spinner", title: window.WAIT_A_SECOND, children: /* @__PURE__ */ jsx(Spinner, {}) })
+      ]
+    }
+  );
+});
+
+export { Mini };
+//# sourceMappingURL=Mini.js.map

package/dist/Scheduler/mini/Mini.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mini.js","sources":["../../../src/Scheduler/mini/Mini.tsx"],"sourcesContent":["import { Box, getVariant, Heading, Spinner } from '@apia/theme';\r\nimport { observer } from 'mobx-react-lite';\r\nimport Stage from './Stage';\r\nimport { getSpecificParent } from '@apia/util';\r\nimport { Icon } from '@apia/icons';\r\nimport { useScheduler } from '..';\r\n\r\nexport const Mini = observer(() => {\r\n  const controller = useScheduler();\r\n  const data = controller.getState().data;\r\n  const stage = controller.getState()?.stageData;\r\n\r\n  const stagesLength = controller.getState().stageData?.length;\r\n\r\n  return (\r\n    <Box\r\n      {...getVariant('layout.execution.form.fields.scheduler')}\r\n      className=\"schedulerMini\"\r\n      onKeyDown={(ev) => {\r\n        if (ev.key.toLowerCase() === 'arrowleft') {\r\n          const stageName = getSpecificParent(\r\n            ev.target as HTMLElement,\r\n            (current) => current.classList.contains('stage'),\r\n          )?.dataset.name as string;\r\n          const stageIndex = stage.findIndex(\r\n            (current) => current.name === stageName,\r\n          );\r\n          if (stageIndex <= 0) return;\r\n\r\n          const nextStage = stage[stageIndex - 1]?.name;\r\n          const firstButton =\r\n            document.querySelector<HTMLElement>(\r\n              `[data-name=\"${nextStage}\"] .selected`,\r\n            ) ||\r\n            document.querySelector<HTMLElement>(\r\n              `[data-name=\"${nextStage}\"] button:not(:disabled)`,\r\n            );\r\n          if (firstButton) firstButton.focus();\r\n        }\r\n        if (ev.key.toLowerCase() === 'arrowright') {\r\n          const stageName = getSpecificParent(\r\n            ev.target as HTMLElement,\r\n            (current) => current.classList.contains('stage'),\r\n          )?.dataset.name as string;\r\n          const stageIndex = stage.findIndex(\r\n            (current) => current.name === stageName,\r\n          );\r\n          if (stageIndex >= stage.length - 1) return;\r\n\r\n          const nextStage = stage[stageIndex + 1]?.name;\r\n          const firstButton =\r\n            document.querySelector<HTMLElement>(\r\n              `[data-name=\"${nextStage}\"] .selected`,\r\n            ) ||\r\n            document.querySelector<HTMLElement>(\r\n              `[data-name=\"${nextStage}\"] button:not(:disabled)`,\r\n            );\r\n          if (firstButton) firstButton.focus();\r\n        }\r\n      }}\r\n    >\r\n      {data?.weekNotConfigured && (\r\n        <Heading as=\"h1\">{window.LBL_SCHED_WEEK_NOT_CONFIGURED}</Heading>\r\n      )}\r\n      {!data?.weekNotConfigured && data?.tskSchDay && (\r\n        <>\r\n          <Stage stageIndex={0} />\r\n          {stagesLength >= 2 && (\r\n            <Icon\r\n              name=\"ArrowDown\"\r\n              title=\"\"\r\n              className=\"schedulerMini_faCaretDown\"\r\n            />\r\n          )}\r\n          <Stage stageIndex={1} />\r\n          {stagesLength >= 3 && (\r\n            <Icon\r\n              name=\"ArrowDown\"\r\n              title=\"\"\r\n              className=\"schedulerMini_faCaretDown\"\r\n            />\r\n          )}\r\n          <Stage stageIndex={2} />\r\n        </>\r\n      )}\r\n      {!data?.weekNotConfigured && !data?.tskSchDay && (\r\n        <Box className=\"box_spinner\" title={window.WAIT_A_SECOND}>\r\n          <Spinner />\r\n        </Box>\r\n      )}\r\n    </Box>\r\n  );\r\n});\r\n"],"names":[],"mappings":";;;;;;;;AAOO,MAAM,IAAA,GAAO,SAAS,MAAM;AACjC,EAAA,MAAM,aAAa,YAAA,EAAa;AAChC,EAAA,MAAM,IAAA,GAAO,UAAA,CAAW,QAAA,EAAS,CAAE,IAAA;AACnC,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,QAAA,EAAS,EAAG,SAAA;AAErC,EAAA,MAAM,YAAA,GAAe,UAAA,CAAW,QAAA,EAAS,CAAE,SAAA,EAAW,MAAA;AAEtD,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAW,wCAAwC,CAAA;AAAA,MACvD,SAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAW,CAAC,EAAA,KAAO;AACjB,QAAA,IAAI,EAAA,CAAG,GAAA,CAAI,WAAA,EAAY,KAAM,WAAA,EAAa;AACxC,UAAA,MAAM,SAAA,GAAY,iBAAA;AAAA,YAChB,EAAA,CAAG,MAAA;AAAA,YACH,CAAC,OAAA,KAAY,OAAA,CAAQ,SAAA,CAAU,SAAS,OAAO;AAAA,aAC9C,OAAA,CAAQ,IAAA;AACX,UAAA,MAAM,aAAa,KAAA,CAAM,SAAA;AAAA,YACvB,CAAC,OAAA,KAAY,OAAA,CAAQ,IAAA,KAAS;AAAA,WAChC;AACA,UAAA,IAAI,UAAA,IAAc,CAAA;AAAG,YAAA;AAErB,UAAA,MAAM,SAAA,GAAY,KAAA,CAAM,UAAA,GAAa,CAAC,CAAA,EAAG,IAAA;AACzC,UAAA,MAAM,cACJ,QAAA,CAAS,aAAA;AAAA,YACP,eAAe,SAAS,CAAA,YAAA;AAAA,eAE1B,QAAA,CAAS,aAAA;AAAA,YACP,eAAe,SAAS,CAAA,wBAAA;AAAA,WAC1B;AACF,UAAA,IAAI,WAAA;AAAa,YAAA,WAAA,CAAY,KAAA,EAAM;AAAA;AAErC,QAAA,IAAI,EAAA,CAAG,GAAA,CAAI,WAAA,EAAY,KAAM,YAAA,EAAc;AACzC,UAAA,MAAM,SAAA,GAAY,iBAAA;AAAA,YAChB,EAAA,CAAG,MAAA;AAAA,YACH,CAAC,OAAA,KAAY,OAAA,CAAQ,SAAA,CAAU,SAAS,OAAO;AAAA,aAC9C,OAAA,CAAQ,IAAA;AACX,UAAA,MAAM,aAAa,KAAA,CAAM,SAAA;AAAA,YACvB,CAAC,OAAA,KAAY,OAAA,CAAQ,IAAA,KAAS;AAAA,WAChC;AACA,UAAA,IAAI,UAAA,IAAc,MAAM,MAAA,GAAS,CAAA;AAAG,YAAA;AAEpC,UAAA,MAAM,SAAA,GAAY,KAAA,CAAM,UAAA,GAAa,CAAC,CAAA,EAAG,IAAA;AACzC,UAAA,MAAM,cACJ,QAAA,CAAS,aAAA;AAAA,YACP,eAAe,SAAS,CAAA,YAAA;AAAA,eAE1B,QAAA,CAAS,aAAA;AAAA,YACP,eAAe,SAAS,CAAA,wBAAA;AAAA,WAC1B;AACF,UAAA,IAAI,WAAA;AAAa,YAAA,WAAA,CAAY,KAAA,EAAM;AAAA;AACrC,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,EAAM,qCACL,GAAA,CAAC,OAAA,EAAA,EAAQ,EAAA,EAAG,IAAA,EAAM,iBAAO,6BAAA,EAA8B,CAAA;AAAA,QAExD,CAAC,IAAA,EAAM,iBAAA,IAAqB,IAAA,EAAM,6BACjC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,YAAY,CAAA,EAAG,CAAA;AAAA,UACrB,gBAAgB,CAAA,oBACf,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,WAAA;AAAA,cACL,KAAA,EAAM,EAAA;AAAA,cACN,SAAA,EAAU;AAAA;AAAA,WACZ;AAAA,0BAEF,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAY,CAAA,EAAG,CAAA;AAAA,UACrB,gBAAgB,CAAA,oBACf,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,WAAA;AAAA,cACL,KAAA,EAAM,EAAA;AAAA,cACN,SAAA,EAAU;AAAA;AAAA,WACZ;AAAA,0BAEF,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAY,CAAA,EAAG;AAAA,SAAA,EACxB,CAAA;AAAA,QAED,CAAC,IAAA,EAAM,iBAAA,IAAqB,CAAC,MAAM,SAAA,oBAClC,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAU,eAAc,KAAA,EAAO,MAAA,CAAO,aAAA,EACzC,QAAA,kBAAA,GAAA,CAAC,WAAQ,CAAA,EACX;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist/Scheduler/mini/Stage.js

@@ -0,0 +1,81 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Box } from '@apia/theme';
+import StageButton from './StageButton.js';
+import { useMountTransition, isChild } from '@apia/util';
+import { observer } from 'mobx-react-lite';
+import { useScheduler } from '../index.js';
+
+const Stage = observer(({ stageIndex }) => {
+  const controller = useScheduler();
+  const stage = controller.getState().stageData?.[stageIndex];
+  const [ref, setRef] = React.useState(null);
+  const focusStage = controller.getState().focusStage;
+  const isMounted = !!stage?.name;
+  const hasTransitionedIn = useMountTransition(isMounted, 1e3);
+  const doFocus = React.useCallback(() => {
+    if (!stage || stage.name === "daysList")
+      return;
+    if (!ref)
+      return;
+    const firstBtn = ref.querySelector(
+      ".stage_btn:not(:disabled)"
+    );
+    if (firstBtn) {
+      firstBtn.focus();
+    }
+  }, [ref, stage]);
+  React.useEffect(() => {
+    if (focusStage === stage?.name)
+      doFocus();
+  }, [focusStage]);
+  React.useLayoutEffect(doFocus, [ref, stage]);
+  const handleFocus = React.useCallback(
+    (sum) => {
+      const focusedElement = document.activeElement;
+      if (isChild(focusedElement, (current) => current === ref) && ref) {
+        const buttons = [
+          ...ref.querySelectorAll(".stage_btn:not(:disabled)")
+        ];
+        if (buttons) {
+          const index = buttons.findIndex(
+            (current) => current === focusedElement
+          );
+          if (buttons[index] === focusedElement && buttons[index - sum]) {
+            buttons[index - sum].focus();
+            controller.setState({ focusStage: stage?.name });
+          }
+        }
+      }
+    },
+    [controller, ref, stage?.name]
+  );
+  const handleKeyDown = React.useCallback(
+    (ev) => {
+      if (ev.key.toLowerCase() === "arrowdown") {
+        ev.preventDefault();
+        handleFocus(-1);
+      }
+      if (ev.key.toLowerCase() === "arrowup") {
+        ev.preventDefault();
+        handleFocus(1);
+      }
+    },
+    [handleFocus]
+  );
+  return stage ? /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-name": stage?.name,
+      className: `stage ${hasTransitionedIn && "in"} ${isMounted && "visible"}`,
+      ref: setRef,
+      onKeyDown: handleKeyDown,
+      children: (hasTransitionedIn || isMounted) && stage?.buttons?.map((elem) => {
+        return /* @__PURE__ */ jsx(StageButton, { button: elem }, elem.title);
+      })
+    }
+  ) : null;
+});
+
+export { Stage as default };
+//# sourceMappingURL=Stage.js.map