@wix/patterns 1.229.0 → 1.230.0

package/dist/cjs/components/Kanban/Kanban.js

@@ -11,6 +11,7 @@ var _Stage = require("./Stage");
 var _designSystem = require("@wix/design-system");
 var _CollectionCard = require("../CollectionCard");
 var _KanbanCardDragAndDrop = require("../KanbanDragAndDropDndKit/KanbanCardDragAndDrop");
+var _StagesSkeleton = require("./StagesSkeleton");
 var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/Kanban/Kanban.tsx";
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _Kanban(props) {
@@ -42,7 +43,7 @@ function _Kanban(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 37,
+      lineNumber: 38,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -51,7 +52,7 @@ function _Kanban(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 38,
+      lineNumber: 39,
       columnNumber: 7
     }
   }, stages.map(stage => /*#__PURE__*/_react.default.createElement(_Stage.StageComponent, (0, _extends2.default)({
@@ -63,7 +64,7 @@ function _Kanban(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 40,
+      lineNumber: 41,
       columnNumber: 11
     }
   })))));
@@ -74,7 +75,7 @@ function _Kanban(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 53,
+      lineNumber: 54,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_ToolbarCollection.ToolbarCollection, {
@@ -84,7 +85,7 @@ function _Kanban(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 54,
+      lineNumber: 55,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -95,7 +96,7 @@ function _Kanban(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 55,
+      lineNumber: 56,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -104,18 +105,17 @@ function _Kanban(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 61,
+      lineNumber: 62,
       columnNumber: 11
     }
-  }, props.state.isLoading() ? /*#__PURE__*/_react.default.createElement("div", {
-    "data-hook": "kanban-loading",
+  }, props.state.isLoading() ? /*#__PURE__*/_react.default.createElement(_StagesSkeleton.StagesSkeleton, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
       lineNumber: 63,
-      columnNumber: 15
+      columnNumber: 40
     }
-  }, "loading stages...") : stagesContent))));
+  }) : stagesContent))));
 }
 const Kanban = exports.Kanban = (0, _mobxReactLite.observer)(_Kanban);
 //# sourceMappingURL=Kanban.js.map

package/dist/cjs/components/Kanban/Kanban.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_ToolbarCollection","_mobxReactLite","_Stage","_designSystem","_CollectionCard","_KanbanCardDragAndDrop","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_Kanban","props","state","dataHook","toolbar","useEffect","init","stages","useMemo","activeId","dragAndDropState","activeStageKey","substring","indexOf","KanbanDragAndDropContext","KanbanCardDragAndDrop","stagesContent","createElement","stageId","__self","__source","fileName","lineNumber","columnNumber","Box","direction","gap","map","stage","StageComponent","_extends2","stageKey","key","CollectionCard","errorState","ToolbarCollection","search","sticky","margin","overflow","isLoading","Kanban","exports","observer"],"sources":["../../../../src/components/Kanban/Kanban.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react';\nimport { ToolbarBaseProps, ToolbarCollection } from '../ToolbarCollection';\nimport { observer } from 'mobx-react-lite';\nimport { FiltersMap } from '@wix/bex-core';\nimport { KanbanBaseProps } from './KanbanProps';\nimport { StageComponent } from './Stage';\nimport { Box } from '@wix/design-system';\nimport { CollectionCard } from '../CollectionCard';\nimport { KanbanCardDragAndDrop } from '../KanbanDragAndDropDndKit/KanbanCardDragAndDrop';\n\nexport interface KanbanProps<C, S, F extends FiltersMap>\n  extends ToolbarBaseProps,\n    KanbanBaseProps<C, S, F> {}\n\nfunction _Kanban<C, S, F extends FiltersMap>(props: KanbanProps<C, S, F>) {\n  const { state, dataHook } = props;\n\n  const { toolbar } = state;\n\n  useEffect(() => {\n    props.state.init();\n  }, [props.state]);\n\n  const stages = useMemo(() => {\n    return props.state.stages;\n  }, [props.state.stages]);\n\n  // Calculate active stage key from activeId\n  const activeId = state.dragAndDropState.activeId;\n  const activeStageKey = activeId\n    ? activeId.substring(0, activeId.indexOf('-##-')) || null\n    : null;\n\n  // Wrap with global drag and drop context - always enabled for Kanban\n  const { KanbanDragAndDropContext } = KanbanCardDragAndDrop;\n  const stagesContent = (\n    <KanbanDragAndDropContext state={state} stageId=\"all\">\n      <Box direction=\"horizontal\" gap=\"12px\">\n        {stages.map((stage: S) => (\n          <StageComponent\n            dataHook={`kanban-stage-${props.state.stageKey(stage)}`}\n            key={props.state.stageKey(stage)}\n            activeStageKey={activeStageKey}\n            stageKey={props.state.stageKey(stage)}\n            {...props}\n          />\n        ))}\n      </Box>\n    </KanbanDragAndDropContext>\n  );\n\n  return (\n    <CollectionCard errorState={false} state={toolbar} dataHook={dataHook}>\n      <ToolbarCollection search={true} sticky state={toolbar}>\n        <Box\n          dataHook=\"kanban-test\"\n          margin=\"24px\"\n          overflow=\"auto\"\n          direction=\"vertical\"\n        >\n          <Box dataHook=\"kanban-stages\" direction=\"vertical\">\n            {props.state.isLoading() ? (\n              <div data-hook=\"kanban-loading\">loading stages...</div>\n            ) : (\n              stagesContent\n            )}\n          </Box>\n        </Box>\n      </ToolbarCollection>\n    </CollectionCard>\n  );\n}\n\nexport const Kanban = observer(_Kanban);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ToolbarCollection","_mobxReactLite","_Stage","_designSystem","_CollectionCard","_KanbanCardDragAndDrop","_StagesSkeleton","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_Kanban","props","state","dataHook","toolbar","useEffect","init","stages","useMemo","activeId","dragAndDropState","activeStageKey","substring","indexOf","KanbanDragAndDropContext","KanbanCardDragAndDrop","stagesContent","createElement","stageId","__self","__source","fileName","lineNumber","columnNumber","Box","direction","gap","map","stage","StageComponent","_extends2","stageKey","key","CollectionCard","errorState","ToolbarCollection","search","sticky","margin","overflow","isLoading","StagesSkeleton","Kanban","exports","observer"],"sources":["../../../../src/components/Kanban/Kanban.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react';\nimport { ToolbarBaseProps, ToolbarCollection } from '../ToolbarCollection';\nimport { observer } from 'mobx-react-lite';\nimport { FiltersMap } from '@wix/bex-core';\nimport { KanbanBaseProps } from './KanbanProps';\nimport { StageComponent } from './Stage';\nimport { Box } from '@wix/design-system';\nimport { CollectionCard } from '../CollectionCard';\nimport { KanbanCardDragAndDrop } from '../KanbanDragAndDropDndKit/KanbanCardDragAndDrop';\nimport { StagesSkeleton } from './StagesSkeleton';\n\nexport interface KanbanProps<C, S, F extends FiltersMap>\n  extends ToolbarBaseProps,\n  KanbanBaseProps<C, S, F> { }\n\nfunction _Kanban<C, S, F extends FiltersMap>(props: KanbanProps<C, S, F>) {\n  const { state, dataHook } = props;\n\n  const { toolbar } = state;\n\n  useEffect(() => {\n    props.state.init();\n  }, [props.state]);\n\n  const stages = useMemo(() => {\n    return props.state.stages;\n  }, [props.state.stages]);\n\n  // Calculate active stage key from activeId\n  const activeId = state.dragAndDropState.activeId;\n  const activeStageKey = activeId\n    ? activeId.substring(0, activeId.indexOf('-##-')) || null\n    : null;\n\n  // Wrap with global drag and drop context - always enabled for Kanban\n  const { KanbanDragAndDropContext } = KanbanCardDragAndDrop;\n  const stagesContent = (\n    <KanbanDragAndDropContext state={state} stageId=\"all\">\n      <Box direction=\"horizontal\" gap=\"12px\">\n        {stages.map((stage: S) => (\n          <StageComponent\n            dataHook={`kanban-stage-${props.state.stageKey(stage)}`}\n            key={props.state.stageKey(stage)}\n            activeStageKey={activeStageKey}\n            stageKey={props.state.stageKey(stage)}\n            {...props}\n          />\n        ))}\n      </Box>\n    </KanbanDragAndDropContext>\n  );\n\n  return (\n    <CollectionCard errorState={false} state={toolbar} dataHook={dataHook}>\n      <ToolbarCollection search={true} sticky state={toolbar}>\n        <Box\n          dataHook=\"kanban-test\"\n          margin=\"24px\"\n          overflow=\"auto\"\n          direction=\"vertical\"\n        >\n          <Box dataHook=\"kanban-stages\" direction=\"vertical\">\n            {props.state.isLoading() ? <StagesSkeleton /> : stagesContent}\n          </Box>\n        </Box>\n      </ToolbarCollection>\n    </CollectionCard>\n  );\n}\n\nexport const Kanban = observer(_Kanban);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/Kanban/Kanban.uni.driver.js

@@ -35,7 +35,7 @@ function KanbanUniDriver(base, body) {
   return {
     ...(0, _baseUniDriverFactory.baseUniDriverFactory)(base),
     toolbar: () => toolbar(),
-    isKanbanLoading: () => base.$('[data-hook="kanban-loading"]').exists(),
+    isKanbanLoading: () => base.$('[data-hook="kanban-stages-skeleton"]').exists(),
     stages: {
       count: () => base.$$('[data-hook^="kanban-stage-container"]').count(),
       stageTitle: stageId => {
@@ -75,7 +75,18 @@ function KanbanUniDriver(base, body) {
             await nativeEl.dispatchEvent(new Event('scroll'));
           }
         }
-      }
+      },
+      stageSummaryBadge: stageId => {
+        const counterBadge = (0, _unidriver.CounterBadgeUniDriver)(base.$(`[data-hook^="kanban-stage-title-total-${stageId}"]`), body);
+        return {
+          ...counterBadge,
+          exists: () => counterBadge.exists(),
+          totalItems: () => counterBadge.getContentText()
+        };
+      },
+      addCardButton: stageKey => (0, _unidriver.AddItemUniDriver)(base.$(`[data-hook="kanban-stage-add-card-${stageKey}"]`), body),
+      stagesSkeleton: () => (0, _unidriver.BoxUniDriver)(base.$('[data-hook="kanban-stages-skeleton"]'), body),
+      cardsSkeleton: stageKey => (0, _unidriver.BoxUniDriver)(base.$(`[data-hook="kanban-cards-skeleton-${stageKey}"]`), body)
     },
     cards: {
       count: stageKey => base.$$(`[data-hook^="kanban-card-${stageKey}-"]`).count(),

package/dist/cjs/components/Kanban/Kanban.uni.driver.js.map

@@ -1 +1 @@
-{"version":3,"names":["_CollectionToolbarUni","require","_baseUniDriverFactory","_unidriver","_DragAndDropUni","KanbanUniDriver","base","body","toolbarBase","$","toolbar","CollectionToolbarUniDriver","dragAndDrop","DragAndDropUniDriver","dragCardToStage","sourceStageKey","cardKey","targetStageKey","targetStageElement","exists","Error","sourceStageElement","cardElement","driverDragAndDrop","dragStart","dragEnd","baseUniDriverFactory","isKanbanLoading","stages","count","$$","stageTitle","stageId","TextUniDriver","stageSummary","counterBadge","CounterBadgeUniDriver","totalItems","getContentText","scrollToEndOfStageCardsContainer","stageKey","scrollableElementDataHook","page","getNative","evaluate","_dataHook","scrollableElement","document","querySelector","scrollBy","behavior","top","scrollHeight","waitForTimeout","pageScrollContent","nativeEl","scrollTop","clientHeight","dispatchEvent","Event","cards","getTitle","getPrimaryAction","button","ButtonUniDriver","text","getButtonTextContent","getSecondaryActions","popoverMenu","PopoverMenuUniDriver","triggerButton","getTriggerElement","iconButton","IconButtonUniDriver","clickTriggerElement","click","getActionModal","MessageModalLayoutUniDriver","_default","exports","default"],"sources":["../../../../src/components/Kanban/Kanban.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';\nimport { baseUniDriverFactory } from '../../unidriver/baseUniDriverFactory';\nimport { SledPage } from '@wix/sled-test-runner';\nimport {\n  ButtonUniDriver,\n  CounterBadgeUniDriver,\n  IconButtonUniDriver,\n  MessageModalLayoutUniDriver,\n  PopoverMenuUniDriver,\n  TextUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\nimport { DragAndDropUniDriver } from '../DragAndDrop/DragAndDrop.uni.driver';\n\nexport function KanbanUniDriver(base: UniDriver, body: UniDriver) {\n  const toolbarBase = () => base.$('[data-hook=\"collection-toolbar\"]');\n\n  const toolbar = () => CollectionToolbarUniDriver(toolbarBase(), body);\n\n  const dragAndDrop = () => DragAndDropUniDriver(base);\n\n  const dragCardToStage = async ({\n    sourceStageKey,\n    cardKey,\n    targetStageKey,\n  }: {\n    sourceStageKey: string;\n    cardKey: string;\n    targetStageKey: string;\n  }) => {\n    const targetStageElement = base.$(\n      `[data-hook^=\"kanban-stage-container-${targetStageKey}\"]`,\n    );\n\n    if (!(await targetStageElement.exists())) {\n      throw new Error(`Target stage with key ${targetStageKey} not found`);\n    }\n\n    const sourceStageElement = base.$(\n      `[data-hook^=\"kanban-stage-container-${sourceStageKey}\"]`,\n    );\n\n    if (!(await sourceStageElement.exists())) {\n      throw new Error(`Source stage with key ${sourceStageKey} not found`);\n    }\n\n    const cardElement = base.$(\n      `[data-hook^=\"kanban-card-drag-item-${sourceStageKey}-##-${cardKey}\"]`,\n    );\n\n    if (!(await cardElement.exists())) {\n      throw new Error(\n        `Card with key ${cardKey} not found in stage ${sourceStageKey}`,\n      );\n    }\n\n    const driverDragAndDrop = dragAndDrop();\n    await driverDragAndDrop.dragStart(cardElement);\n    await driverDragAndDrop.dragEnd(targetStageElement);\n  };\n\n  return {\n    ...baseUniDriverFactory(base),\n    toolbar: () => toolbar(),\n    isKanbanLoading: () => base.$('[data-hook=\"kanban-loading\"]').exists(),\n    stages: {\n      count: () => base.$$('[data-hook^=\"kanban-stage-container\"]').count(),\n      stageTitle: (stageId: string) => {\n        return TextUniDriver(\n          base.$(`[data-hook^=\"kanban-stage-title-${stageId}\"]`),\n          body,\n        );\n      },\n      stageSummary: (stageId: string) => {\n        const counterBadge = CounterBadgeUniDriver(\n          base.$(`[data-hook^=\"kanban-stage-title-total-${stageId}\"]`),\n          body,\n        );\n        return {\n          ...counterBadge,\n          exists: () => counterBadge.exists(),\n          totalItems: () => counterBadge.getContentText(),\n        };\n      },\n      scrollToEndOfStageCardsContainer: async (stageKey: string) => {\n        const scrollableElementDataHook = `kanban-stage-cards-container-${stageKey}`;\n\n        const { page } = (await body\n          .$(`[data-hook=\"${scrollableElementDataHook}\"]`)\n          .getNative()) as {\n          page?: SledPage['page'];\n        };\n        // puppeteer\n        if (page?.evaluate) {\n          await page.evaluate((_dataHook: string) => {\n            const scrollableElement = document.querySelector(\n              `[data-hook=\"${_dataHook}\"]`,\n            )!;\n            scrollableElement.scrollBy({\n              behavior: 'smooth',\n              top: scrollableElement.scrollHeight,\n            });\n          }, scrollableElementDataHook);\n          await page.waitForTimeout(1000); // delay scroll resolve by 1 sec\n        }\n        // jsdom\n        else {\n          const pageScrollContent = body.$(\n            `[data-hook=\"${scrollableElementDataHook}\"]`,\n          );\n\n          if (await pageScrollContent.exists()) {\n            // Scroll to the end of pageScrollContent by setting scrollTop to (scrollHeight - clientHeight)\n            const nativeEl = await pageScrollContent.getNative();\n            nativeEl.scrollTop = nativeEl.scrollHeight - nativeEl.clientHeight;\n            await nativeEl.dispatchEvent(new Event('scroll'));\n          }\n        }\n      },\n    },\n    cards: {\n      count: (stageKey: string) =>\n        base.$$(`[data-hook^=\"kanban-card-${stageKey}-\"]`).count(),\n      exists: ({ stageKey, cardKey }: { stageKey: string; cardKey: string }) =>\n        base.$(`[data-hook^=\"kanban-card-${stageKey}-${cardKey}\"]`).exists(),\n      getTitle: ({\n        stageKey,\n        cardKey,\n      }: {\n        stageKey: string;\n        cardKey: string;\n      }) => {\n        return TextUniDriver(\n          base.$(`[data-hook^=\"kanban-card-title-${stageKey}-${cardKey}\"]`),\n          body,\n        );\n      },\n      getPrimaryAction: ({\n        stageKey,\n        cardKey,\n      }: {\n        stageKey: string;\n        cardKey: string;\n      }) => {\n        const button = ButtonUniDriver(\n          base.$(\n            `[data-hook=\"kanban-card-primary-action-${stageKey}-${cardKey}\"]`,\n          ),\n          body,\n        );\n        return {\n          ...button,\n          exists: () => button.exists(),\n          text: () => button.getButtonTextContent(),\n        };\n      },\n      getSecondaryActions: ({\n        stageKey,\n        cardKey,\n      }: {\n        stageKey: string;\n        cardKey: string;\n      }) => {\n        const popoverMenu = PopoverMenuUniDriver(\n          base.$(\n            `[data-hook=\"kanban-card-more-actions-${stageKey}-${cardKey}\"]`,\n          ),\n          body,\n        );\n\n        const triggerButton = popoverMenu.getTriggerElement(\n          `kanban-card-more-actions-trigger-${stageKey}-${cardKey}`,\n        );\n        const iconButton = IconButtonUniDriver(triggerButton, base);\n        return {\n          ...popoverMenu,\n          clickTriggerElement: () => iconButton.click(),\n        };\n      },\n      getActionModal: () =>\n        MessageModalLayoutUniDriver(\n          body.$('[data-hook=\"collection-action-modal\"]'),\n          body,\n        ),\n      dragCardToStage,\n    },\n  };\n}\n\nexport default KanbanUniDriver;\n"],"mappings":";;;;;AACA,IAAAA,qBAAA,GAAAC,OAAA;AACA,IAAAC,qBAAA,GAAAD,OAAA;AAEA,IAAAE,UAAA,GAAAF,OAAA;AAQA,IAAAG,eAAA,GAAAH,OAAA;AAEO,SAASI,eAAeA,CAACC,IAAe,EAAEC,IAAe,EAAE;EAChE,MAAMC,WAAW,GAAGA,CAAA,KAAMF,IAAI,CAACG,CAAC,CAAC,kCAAkC,CAAC;EAEpE,MAAMC,OAAO,GAAGA,CAAA,KAAM,IAAAC,gDAA0B,EAACH,WAAW,CAAC,CAAC,EAAED,IAAI,CAAC;EAErE,MAAMK,WAAW,GAAGA,CAAA,KAAM,IAAAC,oCAAoB,EAACP,IAAI,CAAC;EAEpD,MAAMQ,eAAe,GAAG,MAAAA,CAAO;IAC7BC,cAAc;IACdC,OAAO;IACPC;EAKF,CAAC,KAAK;IACJ,MAAMC,kBAAkB,GAAGZ,IAAI,CAACG,CAAC,CAC/B,uCAAuCQ,cAAc,IACvD,CAAC;IAED,IAAI,EAAE,MAAMC,kBAAkB,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE;MACxC,MAAM,IAAIC,KAAK,CAAC,yBAAyBH,cAAc,YAAY,CAAC;IACtE;IAEA,MAAMI,kBAAkB,GAAGf,IAAI,CAACG,CAAC,CAC/B,uCAAuCM,cAAc,IACvD,CAAC;IAED,IAAI,EAAE,MAAMM,kBAAkB,CAACF,MAAM,CAAC,CAAC,CAAC,EAAE;MACxC,MAAM,IAAIC,KAAK,CAAC,yBAAyBL,cAAc,YAAY,CAAC;IACtE;IAEA,MAAMO,WAAW,GAAGhB,IAAI,CAACG,CAAC,CACxB,sCAAsCM,cAAc,OAAOC,OAAO,IACpE,CAAC;IAED,IAAI,EAAE,MAAMM,WAAW,CAACH,MAAM,CAAC,CAAC,CAAC,EAAE;MACjC,MAAM,IAAIC,KAAK,CACb,iBAAiBJ,OAAO,uBAAuBD,cAAc,EAC/D,CAAC;IACH;IAEA,MAAMQ,iBAAiB,GAAGX,WAAW,CAAC,CAAC;IACvC,MAAMW,iBAAiB,CAACC,SAAS,CAACF,WAAW,CAAC;IAC9C,MAAMC,iBAAiB,CAACE,OAAO,CAACP,kBAAkB,CAAC;EACrD,CAAC;EAED,OAAO;IACL,GAAG,IAAAQ,0CAAoB,EAACpB,IAAI,CAAC;IAC7BI,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAAC,CAAC;IACxBiB,eAAe,EAAEA,CAAA,KAAMrB,IAAI,CAACG,CAAC,CAAC,8BAA8B,CAAC,CAACU,MAAM,CAAC,CAAC;IACtES,MAAM,EAAE;MACNC,KAAK,EAAEA,CAAA,KAAMvB,IAAI,CAACwB,EAAE,CAAC,uCAAuC,CAAC,CAACD,KAAK,CAAC,CAAC;MACrEE,UAAU,EAAGC,OAAe,IAAK;QAC/B,OAAO,IAAAC,wBAAa,EAClB3B,IAAI,CAACG,CAAC,CAAC,mCAAmCuB,OAAO,IAAI,CAAC,EACtDzB,IACF,CAAC;MACH,CAAC;MACD2B,YAAY,EAAGF,OAAe,IAAK;QACjC,MAAMG,YAAY,GAAG,IAAAC,gCAAqB,EACxC9B,IAAI,CAACG,CAAC,CAAC,yCAAyCuB,OAAO,IAAI,CAAC,EAC5DzB,IACF,CAAC;QACD,OAAO;UACL,GAAG4B,YAAY;UACfhB,MAAM,EAAEA,CAAA,KAAMgB,YAAY,CAAChB,MAAM,CAAC,CAAC;UACnCkB,UAAU,EAAEA,CAAA,KAAMF,YAAY,CAACG,cAAc,CAAC;QAChD,CAAC;MACH,CAAC;MACDC,gCAAgC,EAAE,MAAOC,QAAgB,IAAK;QAC5D,MAAMC,yBAAyB,GAAG,gCAAgCD,QAAQ,EAAE;QAE5E,MAAM;UAAEE;QAAK,CAAC,GAAI,MAAMnC,IAAI,CACzBE,CAAC,CAAC,eAAegC,yBAAyB,IAAI,CAAC,CAC/CE,SAAS,CAAC,CAEZ;QACD;QACA,IAAID,IAAI,YAAJA,IAAI,CAAEE,QAAQ,EAAE;UAClB,MAAMF,IAAI,CAACE,QAAQ,CAAEC,SAAiB,IAAK;YACzC,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,aAAa,CAC9C,eAAeH,SAAS,IAC1B,CAAE;YACFC,iBAAiB,CAACG,QAAQ,CAAC;cACzBC,QAAQ,EAAE,QAAQ;cAClBC,GAAG,EAAEL,iBAAiB,CAACM;YACzB,CAAC,CAAC;UACJ,CAAC,EAAEX,yBAAyB,CAAC;UAC7B,MAAMC,IAAI,CAACW,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;QACnC;QACA;QAAA,KACK;UACH,MAAMC,iBAAiB,GAAG/C,IAAI,CAACE,CAAC,CAC9B,eAAegC,yBAAyB,IAC1C,CAAC;UAED,IAAI,MAAMa,iBAAiB,CAACnC,MAAM,CAAC,CAAC,EAAE;YACpC;YACA,MAAMoC,QAAQ,GAAG,MAAMD,iBAAiB,CAACX,SAAS,CAAC,CAAC;YACpDY,QAAQ,CAACC,SAAS,GAAGD,QAAQ,CAACH,YAAY,GAAGG,QAAQ,CAACE,YAAY;YAClE,MAAMF,QAAQ,CAACG,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,CAAC,CAAC;UACnD;QACF;MACF;IACF,CAAC;IACDC,KAAK,EAAE;MACL/B,KAAK,EAAGW,QAAgB,IACtBlC,IAAI,CAACwB,EAAE,CAAC,4BAA4BU,QAAQ,KAAK,CAAC,CAACX,KAAK,CAAC,CAAC;MAC5DV,MAAM,EAAEA,CAAC;QAAEqB,QAAQ;QAAExB;MAA+C,CAAC,KACnEV,IAAI,CAACG,CAAC,CAAC,4BAA4B+B,QAAQ,IAAIxB,OAAO,IAAI,CAAC,CAACG,MAAM,CAAC,CAAC;MACtE0C,QAAQ,EAAEA,CAAC;QACTrB,QAAQ;QACRxB;MAIF,CAAC,KAAK;QACJ,OAAO,IAAAiB,wBAAa,EAClB3B,IAAI,CAACG,CAAC,CAAC,kCAAkC+B,QAAQ,IAAIxB,OAAO,IAAI,CAAC,EACjET,IACF,CAAC;MACH,CAAC;MACDuD,gBAAgB,EAAEA,CAAC;QACjBtB,QAAQ;QACRxB;MAIF,CAAC,KAAK;QACJ,MAAM+C,MAAM,GAAG,IAAAC,0BAAe,EAC5B1D,IAAI,CAACG,CAAC,CACJ,0CAA0C+B,QAAQ,IAAIxB,OAAO,IAC/D,CAAC,EACDT,IACF,CAAC;QACD,OAAO;UACL,GAAGwD,MAAM;UACT5C,MAAM,EAAEA,CAAA,KAAM4C,MAAM,CAAC5C,MAAM,CAAC,CAAC;UAC7B8C,IAAI,EAAEA,CAAA,KAAMF,MAAM,CAACG,oBAAoB,CAAC;QAC1C,CAAC;MACH,CAAC;MACDC,mBAAmB,EAAEA,CAAC;QACpB3B,QAAQ;QACRxB;MAIF,CAAC,KAAK;QACJ,MAAMoD,WAAW,GAAG,IAAAC,+BAAoB,EACtC/D,IAAI,CAACG,CAAC,CACJ,wCAAwC+B,QAAQ,IAAIxB,OAAO,IAC7D,CAAC,EACDT,IACF,CAAC;QAED,MAAM+D,aAAa,GAAGF,WAAW,CAACG,iBAAiB,CACjD,oCAAoC/B,QAAQ,IAAIxB,OAAO,EACzD,CAAC;QACD,MAAMwD,UAAU,GAAG,IAAAC,8BAAmB,EAACH,aAAa,EAAEhE,IAAI,CAAC;QAC3D,OAAO;UACL,GAAG8D,WAAW;UACdM,mBAAmB,EAAEA,CAAA,KAAMF,UAAU,CAACG,KAAK,CAAC;QAC9C,CAAC;MACH,CAAC;MACDC,cAAc,EAAEA,CAAA,KACd,IAAAC,sCAA2B,EACzBtE,IAAI,CAACE,CAAC,CAAC,uCAAuC,CAAC,EAC/CF,IACF,CAAC;MACHO;IACF;EACF,CAAC;AACH;AAAC,IAAAgE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc3E,eAAe","ignoreList":[]}
+{"version":3,"names":["_CollectionToolbarUni","require","_baseUniDriverFactory","_unidriver","_DragAndDropUni","KanbanUniDriver","base","body","toolbarBase","$","toolbar","CollectionToolbarUniDriver","dragAndDrop","DragAndDropUniDriver","dragCardToStage","sourceStageKey","cardKey","targetStageKey","targetStageElement","exists","Error","sourceStageElement","cardElement","driverDragAndDrop","dragStart","dragEnd","baseUniDriverFactory","isKanbanLoading","stages","count","$$","stageTitle","stageId","TextUniDriver","stageSummary","counterBadge","CounterBadgeUniDriver","totalItems","getContentText","scrollToEndOfStageCardsContainer","stageKey","scrollableElementDataHook","page","getNative","evaluate","_dataHook","scrollableElement","document","querySelector","scrollBy","behavior","top","scrollHeight","waitForTimeout","pageScrollContent","nativeEl","scrollTop","clientHeight","dispatchEvent","Event","stageSummaryBadge","addCardButton","AddItemUniDriver","stagesSkeleton","BoxUniDriver","cardsSkeleton","cards","getTitle","getPrimaryAction","button","ButtonUniDriver","text","getButtonTextContent","getSecondaryActions","popoverMenu","PopoverMenuUniDriver","triggerButton","getTriggerElement","iconButton","IconButtonUniDriver","clickTriggerElement","click","getActionModal","MessageModalLayoutUniDriver","_default","exports","default"],"sources":["../../../../src/components/Kanban/Kanban.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';\nimport { baseUniDriverFactory } from '../../unidriver/baseUniDriverFactory';\nimport { SledPage } from '@wix/sled-test-runner';\nimport {\n  AddItemUniDriver,\n  BoxUniDriver,\n  ButtonUniDriver,\n  CounterBadgeUniDriver,\n  IconButtonUniDriver,\n  MessageModalLayoutUniDriver,\n  PopoverMenuUniDriver,\n  TextUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\nimport { DragAndDropUniDriver } from '../DragAndDrop/DragAndDrop.uni.driver';\n\nexport function KanbanUniDriver(base: UniDriver, body: UniDriver) {\n  const toolbarBase = () => base.$('[data-hook=\"collection-toolbar\"]');\n\n  const toolbar = () => CollectionToolbarUniDriver(toolbarBase(), body);\n\n  const dragAndDrop = () => DragAndDropUniDriver(base);\n\n  const dragCardToStage = async ({\n    sourceStageKey,\n    cardKey,\n    targetStageKey,\n  }: {\n    sourceStageKey: string;\n    cardKey: string;\n    targetStageKey: string;\n  }) => {\n    const targetStageElement = base.$(\n      `[data-hook^=\"kanban-stage-container-${targetStageKey}\"]`,\n    );\n\n    if (!(await targetStageElement.exists())) {\n      throw new Error(`Target stage with key ${targetStageKey} not found`);\n    }\n\n    const sourceStageElement = base.$(\n      `[data-hook^=\"kanban-stage-container-${sourceStageKey}\"]`,\n    );\n\n    if (!(await sourceStageElement.exists())) {\n      throw new Error(`Source stage with key ${sourceStageKey} not found`);\n    }\n\n    const cardElement = base.$(\n      `[data-hook^=\"kanban-card-drag-item-${sourceStageKey}-##-${cardKey}\"]`,\n    );\n\n    if (!(await cardElement.exists())) {\n      throw new Error(\n        `Card with key ${cardKey} not found in stage ${sourceStageKey}`,\n      );\n    }\n\n    const driverDragAndDrop = dragAndDrop();\n    await driverDragAndDrop.dragStart(cardElement);\n    await driverDragAndDrop.dragEnd(targetStageElement);\n  };\n\n  return {\n    ...baseUniDriverFactory(base),\n    toolbar: () => toolbar(),\n    isKanbanLoading: () =>\n      base.$('[data-hook=\"kanban-stages-skeleton\"]').exists(),\n    stages: {\n      count: () => base.$$('[data-hook^=\"kanban-stage-container\"]').count(),\n      stageTitle: (stageId: string) => {\n        return TextUniDriver(\n          base.$(`[data-hook^=\"kanban-stage-title-${stageId}\"]`),\n          body,\n        );\n      },\n      stageSummary: (stageId: string) => {\n        const counterBadge = CounterBadgeUniDriver(\n          base.$(`[data-hook^=\"kanban-stage-title-total-${stageId}\"]`),\n          body,\n        );\n        return {\n          ...counterBadge,\n          exists: () => counterBadge.exists(),\n          totalItems: () => counterBadge.getContentText(),\n        };\n      },\n      scrollToEndOfStageCardsContainer: async (stageKey: string) => {\n        const scrollableElementDataHook = `kanban-stage-cards-container-${stageKey}`;\n\n        const { page } = (await body\n          .$(`[data-hook=\"${scrollableElementDataHook}\"]`)\n          .getNative()) as {\n            page?: SledPage['page'];\n          };\n        // puppeteer\n        if (page?.evaluate) {\n          await page.evaluate((_dataHook: string) => {\n            const scrollableElement = document.querySelector(\n              `[data-hook=\"${_dataHook}\"]`,\n            )!;\n            scrollableElement.scrollBy({\n              behavior: 'smooth',\n              top: scrollableElement.scrollHeight,\n            });\n          }, scrollableElementDataHook);\n          await page.waitForTimeout(1000); // delay scroll resolve by 1 sec\n        }\n        // jsdom\n        else {\n          const pageScrollContent = body.$(\n            `[data-hook=\"${scrollableElementDataHook}\"]`,\n          );\n\n          if (await pageScrollContent.exists()) {\n            // Scroll to the end of pageScrollContent by setting scrollTop to (scrollHeight - clientHeight)\n            const nativeEl = await pageScrollContent.getNative();\n            nativeEl.scrollTop = nativeEl.scrollHeight - nativeEl.clientHeight;\n            await nativeEl.dispatchEvent(new Event('scroll'));\n          }\n        }\n      },\n      stageSummaryBadge: (stageId: string) => {\n        const counterBadge = CounterBadgeUniDriver(\n          base.$(`[data-hook^=\"kanban-stage-title-total-${stageId}\"]`),\n          body,\n        );\n        return {\n          ...counterBadge,\n          exists: () => counterBadge.exists(),\n          totalItems: () => counterBadge.getContentText(),\n        };\n      },\n      addCardButton: (stageKey: string) =>\n        AddItemUniDriver(\n          base.$(`[data-hook=\"kanban-stage-add-card-${stageKey}\"]`),\n          body,\n        ),\n      stagesSkeleton: () =>\n        BoxUniDriver(base.$('[data-hook=\"kanban-stages-skeleton\"]'), body),\n      cardsSkeleton: (stageKey: string) =>\n        BoxUniDriver(\n          base.$(`[data-hook=\"kanban-cards-skeleton-${stageKey}\"]`),\n          body,\n        ),\n    },\n    cards: {\n      count: (stageKey: string) =>\n        base.$$(`[data-hook^=\"kanban-card-${stageKey}-\"]`).count(),\n      exists: ({ stageKey, cardKey }: { stageKey: string; cardKey: string }) =>\n        base.$(`[data-hook^=\"kanban-card-${stageKey}-${cardKey}\"]`).exists(),\n      getTitle: ({\n        stageKey,\n        cardKey,\n      }: {\n        stageKey: string;\n        cardKey: string;\n      }) => {\n        return TextUniDriver(\n          base.$(`[data-hook^=\"kanban-card-title-${stageKey}-${cardKey}\"]`),\n          body,\n        );\n      },\n      getPrimaryAction: ({\n        stageKey,\n        cardKey,\n      }: {\n        stageKey: string;\n        cardKey: string;\n      }) => {\n        const button = ButtonUniDriver(\n          base.$(\n            `[data-hook=\"kanban-card-primary-action-${stageKey}-${cardKey}\"]`,\n          ),\n          body,\n        );\n        return {\n          ...button,\n          exists: () => button.exists(),\n          text: () => button.getButtonTextContent(),\n        };\n      },\n      getSecondaryActions: ({\n        stageKey,\n        cardKey,\n      }: {\n        stageKey: string;\n        cardKey: string;\n      }) => {\n        const popoverMenu = PopoverMenuUniDriver(\n          base.$(\n            `[data-hook=\"kanban-card-more-actions-${stageKey}-${cardKey}\"]`,\n          ),\n          body,\n        );\n\n        const triggerButton = popoverMenu.getTriggerElement(\n          `kanban-card-more-actions-trigger-${stageKey}-${cardKey}`,\n        );\n        const iconButton = IconButtonUniDriver(triggerButton, base);\n        return {\n          ...popoverMenu,\n          clickTriggerElement: () => iconButton.click(),\n        };\n      },\n      getActionModal: () =>\n        MessageModalLayoutUniDriver(\n          body.$('[data-hook=\"collection-action-modal\"]'),\n          body,\n        ),\n      dragCardToStage,\n    },\n  };\n}\n\nexport default KanbanUniDriver;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/Kanban/Stage.js

@@ -12,6 +12,7 @@ var _KanbanCardDragAndDrop = require("../KanbanDragAndDropDndKit/KanbanCardDragA
 var _state = require("../../state");
 var _core = require("@wix/wix-style-react-incubator/dnd-kit/core");
 var _mobx = require("mobx");
+var _CardsSkeleton = require("./CardsSkeleton");
 var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/Kanban/Stage.tsx";
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _StageComponent({
@@ -76,6 +77,7 @@ function _StageComponent({
   const {
     DraggableCard
   } = _KanbanCardDragAndDrop.KanbanCardDragAndDrop;
+  const isStageLoading = stageState.isLoading();
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     ref: setDroppableRef,
     "data-hook": `kanban-stage-container-${stageState.stageKey}`,
@@ -105,16 +107,16 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 88,
+      lineNumber: 91,
       columnNumber: 5
     }
   }), /*#__PURE__*/React.createElement(_designSystem.Box, {
-    width: "246px",
+    width: "270px",
     direction: "vertical",
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 114,
+      lineNumber: 117,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -122,7 +124,7 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 115,
+      lineNumber: 118,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(_designSystem.Box, {
@@ -131,7 +133,7 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 116,
+      lineNumber: 119,
       columnNumber: 11
     }
   }, /*#__PURE__*/React.createElement(_designSystem.Box, {
@@ -142,7 +144,7 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 117,
+      lineNumber: 120,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement(_designSystem.Box, {
@@ -150,7 +152,7 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
+      lineNumber: 126,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(_designSystem.Text, {
@@ -160,43 +162,64 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 124,
+      lineNumber: 127,
       columnNumber: 17
     }
-  }, stageState.stageName), /*#__PURE__*/React.createElement(_designSystem.CounterBadge, {
+  }, stageState.stageName), !isStageLoading ? /*#__PURE__*/React.createElement(_designSystem.CounterBadge, {
     dataHook: `kanban-stage-title-total-${stageState.stageKey}`,
     skin: "light",
     truncate: false,
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 131,
-      columnNumber: 17
+      lineNumber: 135,
+      columnNumber: 19
     }
-  }, stageState.totalItems())), /*#__PURE__*/React.createElement(_designSystem.Box, {
+  }, stageState.totalItems()) : null), /*#__PURE__*/React.createElement(_designSystem.Box, {
+    gap: "0.2em",
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 139,
+      lineNumber: 145,
       columnNumber: 15
     }
+  }, /*#__PURE__*/React.createElement(_designSystem.Text, {
+    size: "tiny",
+    weight: "thin",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 146,
+      columnNumber: 17
+    }
+  }, "Total:"), !isStageLoading ? /*#__PURE__*/React.createElement(_designSystem.Text, {
+    size: "tiny",
+    weight: "thin",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 150,
+      columnNumber: 19
+    }
   }, stageSummary == null ? void 0 : stageSummary({
     stage: stageState.stage
-  }))), /*#__PURE__*/React.createElement(_designSystem.Box, {
+  })) : null)), !isStageLoading ? /*#__PURE__*/React.createElement(_designSystem.Box, {
+    paddingBottom: "12px",
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 141,
-      columnNumber: 13
+      lineNumber: 157,
+      columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(_designSystem.AddItem, {
     size: "tiny",
     removePadding: true,
+    dataHook: `kanban-stage-add-card-${stageState.stageKey}`,
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 142,
-      columnNumber: 15
+      lineNumber: 158,
+      columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(_designSystem.Box, {
     paddingTop: "9px",
@@ -204,23 +227,24 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 143,
-      columnNumber: 17
+      lineNumber: 163,
+      columnNumber: 19
     }
-  }, "Add Card")))), stageState.isLoading() ? /*#__PURE__*/React.createElement("div", {
+  }, "Add Card"))) : null), isStageLoading ? /*#__PURE__*/React.createElement(_CardsSkeleton.CardsSkeleton, {
+    stageKey: stageState.stageKey,
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 150,
+      lineNumber: 171,
       columnNumber: 13
     }
-  }, "loading cards...") : /*#__PURE__*/React.createElement(_designSystem.Box, {
+  }) : /*#__PURE__*/React.createElement(_designSystem.Box, {
     paddingBottom: "12px",
     direction: "vertical",
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 152,
+      lineNumber: 173,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -232,13 +256,17 @@ function _StageComponent({
       maxHeight: 'calc(100vh - 420px)',
       display: 'flex',
       flexDirection: 'column',
-      gap: '12px'
+      gap: '12px',
+      alignItems: 'center',
+      overflowX: 'hidden',
+      scrollbarWidth: 'thin',
+      scrollbarColor: '#CFD1DC transparent'
     },
     onScroll: handleScroll,
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 153,
+      lineNumber: 174,
       columnNumber: 15
     }
   }, items == null ? void 0 : items.map(item => /*#__PURE__*/React.createElement(DraggableCard, {
@@ -259,7 +287,7 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 167,
+      lineNumber: 192,
       columnNumber: 19
     }
   }, _Card.CardComponent)), stageState.itemsCollectionState.status.isLoading && /*#__PURE__*/React.createElement("div", {
@@ -267,7 +295,7 @@ function _StageComponent({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 187,
+      lineNumber: 212,
       columnNumber: 19
     }
   }, "Loading more..."))))));

package/dist/cjs/components/Kanban/Stage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_Card","_KanbanCardDragAndDrop","_state","_core","_mobx","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_StageComponent","dataHook","state","stageSummary","activeStageKey","stageKey","props","stageState","kanbanStageStates","handleScroll","scrollTop","scrollHeight","clientHeight","currentTarget","itemsCollectionState","fetchedLastPage","result","status","isFetching","fetchMore","keyedItems","isOver","setNodeRef","setDroppableRef","useDroppable","id","isDndSourceStage","items","useMemo","map","keyedItem","index","itemActionsState","ItemActionsState","fade","collection","originalItem","item","itemIndex","renderItem","stage","key","actionCell","length","DraggableCard","KanbanCardDragAndDrop","createElement","_extends2","ref","style","width","backgroundColor","borderRadius","display","flexDirection","transition","border","process","env","NODE_ENV","onPointerUp","action","dragAndDropState","activeId","handleDragEnd","over","active","__self","__source","fileName","lineNumber","columnNumber","Box","direction","padding","marginBottom","gap","Text","size","weight","stageName","CounterBadge","skin","truncate","totalItems","AddItem","removePadding","paddingTop","paddingBottom","isLoading","overflow","height","minHeight","maxHeight","onScroll","cardProps","dataExtension","tags","CardComponent","className","StageComponent","exports","observer"],"sources":["../../../../src/components/Kanban/Stage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AddItem, Box, CounterBadge, Text } from '@wix/design-system';\nimport { FiltersMap, KeyedItem } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport { CardComponent, KanbanCardProps } from './Card';\nimport { KanbanBaseProps } from './KanbanProps';\nimport { KanbanCardDragAndDrop } from '../KanbanDragAndDropDndKit/KanbanCardDragAndDrop';\nimport { ItemActionsState } from '../../state';\nimport { useDroppable } from '@wix/wix-style-react-incubator/dnd-kit/core';\nimport { KanbanState } from '../../state/KanbanState';\nimport { action } from 'mobx';\n\ninterface StageComponentProps<T, S, F extends FiltersMap> {\n  dataHook: string;\n  state: KanbanState<T, S, F>;\n  stageSummary?: KanbanBaseProps<T, S, F>['stageSummary'];\n  renderItem?: KanbanBaseProps<T, S, F>['renderItem'];\n  noResultsState?: KanbanBaseProps<T, S, F>['noResultsState'];\n  actionCell?: KanbanBaseProps<T, S, F>['actionCell'];\n  dataExtension?: KanbanBaseProps<T, S, F>['dataExtension'];\n  tags?: KanbanBaseProps<T, S, F>['tags'];\n  activeStageKey?: string | null; // Active source stage key\n  stageKey: string;\n}\n\nfunction _StageComponent<T, S, F extends FiltersMap>({\n  dataHook,\n  state,\n  stageSummary,\n  activeStageKey,\n  stageKey,\n  ...props\n}: StageComponentProps<T, S, F>) {\n  const stageState = state.kanbanStageStates[stageKey];\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;\n    if (\n      scrollHeight - scrollTop <= clientHeight + 10 &&\n      !stageState.itemsCollectionState.fetchedLastPage &&\n      !stageState.itemsCollectionState.result.status.isFetching\n    ) {\n      stageState.fetchMore();\n    }\n  };\n\n  const {\n    result: { keyedItems },\n  } = stageState.itemsCollectionState;\n\n  // Make the stage droppable\n  const { isOver, setNodeRef: setDroppableRef } = useDroppable({\n    id: stageState.stageKey,\n  });\n\n  // Check if this stage is the source stage (where drag originated)\n  const isDndSourceStage = activeStageKey === stageState.stageKey;\n\n  const items: KanbanCardProps<T, S, F>[] = React.useMemo(() => {\n    return keyedItems.map((keyedItem: KeyedItem<T>, index: number) => {\n      const itemActionsState = new ItemActionsState({\n        fade: 'static',\n        keyedItem,\n        collection: stageState.itemsCollectionState,\n      });\n\n      return {\n        keyedItem,\n        stageKey: stageState.stageKey,\n        originalItem: keyedItem.item,\n        itemIndex: index,\n        itemActionsState,\n        item: {\n          ...props.renderItem?.({\n            stage: stageState.stage,\n            item: keyedItem.item,\n          }),\n          key: keyedItem.key,\n        },\n        actionCell: props.actionCell,\n      };\n    });\n  }, [keyedItems, keyedItems.length]);\n\n  const { DraggableCard } = KanbanCardDragAndDrop;\n\n  return (\n    <div\n      ref={setDroppableRef}\n      data-hook={`kanban-stage-container-${stageState.stageKey}`}\n      style={{\n        width: '270px',\n        backgroundColor: isOver && !isDndSourceStage ? '#9C9EA6' : '#F4F7FF',\n        borderRadius: '8px',\n        display: 'flex',\n        flexDirection: 'column',\n        transition: 'background-color 0.2s ease',\n        border:\n          isOver && !isDndSourceStage\n            ? '2px dashed #2196F3'\n            : '2px solid transparent',\n      }}\n      {...(process.env.NODE_ENV === 'test' && {\n        onPointerUp: action(() => {\n          if (state.dragAndDropState.activeId) {\n            state.dragAndDropState.handleDragEnd({\n              over: { id: stageState.stageKey },\n              active: { id: state.dragAndDropState.activeId },\n            } as any);\n          }\n        }),\n      })}\n    >\n      <Box width=\"246px\" direction=\"vertical\">\n        <div data-hook={dataHook}>\n          <Box direction=\"vertical\" padding=\"12px\">\n            <Box\n              marginBottom=\"24px\"\n              direction=\"vertical\"\n              padding=\"12px 6px 0 6px\"\n              borderRadius=\"8px\"\n            >\n              <Box gap=\"6px\">\n                <Text\n                  size=\"small\"\n                  weight=\"bold\"\n                  dataHook={`kanban-stage-title-${stageState.stageKey}`}\n                >\n                  {stageState.stageName}\n                </Text>\n                <CounterBadge\n                  dataHook={`kanban-stage-title-total-${stageState.stageKey}`}\n                  skin=\"light\"\n                  truncate={false}\n                >\n                  {stageState.totalItems()}\n                </CounterBadge>\n              </Box>\n              <Box>{stageSummary?.({ stage: stageState.stage })}</Box>\n            </Box>\n            <Box>\n              <AddItem size=\"tiny\" removePadding={true}>\n                <Box paddingTop=\"9px\" paddingBottom=\"9px\">\n                  Add Card\n                </Box>\n              </AddItem>\n            </Box>\n          </Box>\n          {stageState.isLoading() ? (\n            <div>loading cards...</div>\n          ) : (\n            <Box paddingBottom=\"12px\" direction=\"vertical\">\n              <div\n                data-hook={`kanban-stage-cards-container-${stageState.stageKey}`}\n                style={{\n                  overflow: 'auto',\n                  height: '100%',\n                  minHeight: '430px',\n                  maxHeight: 'calc(100vh - 420px)',\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: '12px',\n                }}\n                onScroll={handleScroll}\n              >\n                {items?.map((item) => (\n                  <DraggableCard\n                    key={`${item.stageKey}-##-${item.item.key}`}\n                    id={`${item.stageKey}-##-${item.item.key}`}\n                    state={state}\n                    cardProps={{\n                      keyedItem: item.keyedItem,\n                      originalItem: item.keyedItem.item,\n                      itemIndex: item.itemIndex,\n                      item: item.item,\n                      stageKey: item.stageKey,\n                      actionCell: item.actionCell,\n                      itemActionsState: item.itemActionsState,\n                      dataExtension: props.dataExtension,\n                      tags: props.tags,\n                    }}\n                  >\n                    {CardComponent}\n                  </DraggableCard>\n                ))}\n                {stageState.itemsCollectionState.status.isLoading && (\n                  <div className=\"text-sm text-center text-gray-500\">\n                    Loading more...\n                  </div>\n                )}\n              </div>\n            </Box>\n          )}\n        </div>\n      </Box>\n    </div>\n  );\n}\n\nexport const StageComponent = observer(_StageComponent);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_Card","_KanbanCardDragAndDrop","_state","_core","_mobx","_CardsSkeleton","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_StageComponent","dataHook","state","stageSummary","activeStageKey","stageKey","props","stageState","kanbanStageStates","handleScroll","scrollTop","scrollHeight","clientHeight","currentTarget","itemsCollectionState","fetchedLastPage","result","status","isFetching","fetchMore","keyedItems","isOver","setNodeRef","setDroppableRef","useDroppable","id","isDndSourceStage","items","useMemo","map","keyedItem","index","itemActionsState","ItemActionsState","fade","collection","originalItem","item","itemIndex","renderItem","stage","key","actionCell","length","DraggableCard","KanbanCardDragAndDrop","isStageLoading","isLoading","createElement","_extends2","ref","style","width","backgroundColor","borderRadius","display","flexDirection","transition","border","process","env","NODE_ENV","onPointerUp","action","dragAndDropState","activeId","handleDragEnd","over","active","__self","__source","fileName","lineNumber","columnNumber","Box","direction","padding","marginBottom","gap","Text","size","weight","stageName","CounterBadge","skin","truncate","totalItems","paddingBottom","AddItem","removePadding","paddingTop","CardsSkeleton","overflow","height","minHeight","maxHeight","alignItems","overflowX","scrollbarWidth","scrollbarColor","onScroll","cardProps","dataExtension","tags","CardComponent","className","StageComponent","exports","observer"],"sources":["../../../../src/components/Kanban/Stage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AddItem, Box, CounterBadge, Text } from '@wix/design-system';\nimport { FiltersMap, KeyedItem } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport { CardComponent, KanbanCardProps } from './Card';\nimport { KanbanBaseProps } from './KanbanProps';\nimport { KanbanCardDragAndDrop } from '../KanbanDragAndDropDndKit/KanbanCardDragAndDrop';\nimport { ItemActionsState } from '../../state';\nimport { useDroppable } from '@wix/wix-style-react-incubator/dnd-kit/core';\nimport { KanbanState } from '../../state/KanbanState';\nimport { action } from 'mobx';\nimport { CardsSkeleton } from './CardsSkeleton';\n\ninterface StageComponentProps<T, S, F extends FiltersMap> {\n  dataHook: string;\n  state: KanbanState<T, S, F>;\n  stageSummary?: KanbanBaseProps<T, S, F>['stageSummary'];\n  renderItem?: KanbanBaseProps<T, S, F>['renderItem'];\n  noResultsState?: KanbanBaseProps<T, S, F>['noResultsState'];\n  actionCell?: KanbanBaseProps<T, S, F>['actionCell'];\n  dataExtension?: KanbanBaseProps<T, S, F>['dataExtension'];\n  tags?: KanbanBaseProps<T, S, F>['tags'];\n  activeStageKey?: string | null; // Active source stage key\n  stageKey: string;\n}\n\nfunction _StageComponent<T, S, F extends FiltersMap>({\n  dataHook,\n  state,\n  stageSummary,\n  activeStageKey,\n  stageKey,\n  ...props\n}: StageComponentProps<T, S, F>) {\n  const stageState = state.kanbanStageStates[stageKey];\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;\n    if (\n      scrollHeight - scrollTop <= clientHeight + 10 &&\n      !stageState.itemsCollectionState.fetchedLastPage &&\n      !stageState.itemsCollectionState.result.status.isFetching\n    ) {\n      stageState.fetchMore();\n    }\n  };\n\n  const {\n    result: { keyedItems },\n  } = stageState.itemsCollectionState;\n\n  // Make the stage droppable\n  const { isOver, setNodeRef: setDroppableRef } = useDroppable({\n    id: stageState.stageKey,\n  });\n\n  // Check if this stage is the source stage (where drag originated)\n  const isDndSourceStage = activeStageKey === stageState.stageKey;\n\n  const items: KanbanCardProps<T, S, F>[] = React.useMemo(() => {\n    return keyedItems.map((keyedItem: KeyedItem<T>, index: number) => {\n      const itemActionsState = new ItemActionsState({\n        fade: 'static',\n        keyedItem,\n        collection: stageState.itemsCollectionState,\n      });\n\n      return {\n        keyedItem,\n        stageKey: stageState.stageKey,\n        originalItem: keyedItem.item,\n        itemIndex: index,\n        itemActionsState,\n        item: {\n          ...props.renderItem?.({\n            stage: stageState.stage,\n            item: keyedItem.item,\n          }),\n          key: keyedItem.key,\n        },\n        actionCell: props.actionCell,\n      };\n    });\n  }, [keyedItems, keyedItems.length]);\n\n  const { DraggableCard } = KanbanCardDragAndDrop;\n\n  const isStageLoading = stageState.isLoading();\n\n  return (\n    <div\n      ref={setDroppableRef}\n      data-hook={`kanban-stage-container-${stageState.stageKey}`}\n      style={{\n        width: '270px',\n        backgroundColor: isOver && !isDndSourceStage ? '#9C9EA6' : '#F4F7FF',\n        borderRadius: '8px',\n        display: 'flex',\n        flexDirection: 'column',\n        transition: 'background-color 0.2s ease',\n        border:\n          isOver && !isDndSourceStage\n            ? '2px dashed #2196F3'\n            : '2px solid transparent',\n      }}\n      {...(process.env.NODE_ENV === 'test' && {\n        onPointerUp: action(() => {\n          if (state.dragAndDropState.activeId) {\n            state.dragAndDropState.handleDragEnd({\n              over: { id: stageState.stageKey },\n              active: { id: state.dragAndDropState.activeId },\n            } as any);\n          }\n        }),\n      })}\n    >\n      <Box width=\"270px\" direction=\"vertical\">\n        <div data-hook={dataHook}>\n          <Box direction=\"vertical\" padding=\"12px\">\n            <Box\n              marginBottom=\"24px\"\n              direction=\"vertical\"\n              padding=\"12px 6px 0 6px\"\n              borderRadius=\"8px\"\n            >\n              <Box gap=\"6px\">\n                <Text\n                  size=\"small\"\n                  weight=\"bold\"\n                  dataHook={`kanban-stage-title-${stageState.stageKey}`}\n                >\n                  {stageState.stageName}\n                </Text>\n                {!isStageLoading ? (\n                  <CounterBadge\n                    dataHook={`kanban-stage-title-total-${stageState.stageKey}`}\n                    skin=\"light\"\n                    truncate={false}\n                  >\n                    {stageState.totalItems()}\n                  </CounterBadge>\n                ) : null}\n              </Box>\n\n              <Box gap=\"0.2em\">\n                <Text size=\"tiny\" weight=\"thin\">\n                  Total:\n                </Text>\n                {!isStageLoading ? (\n                  <Text size=\"tiny\" weight=\"thin\">\n                    {stageSummary?.({ stage: stageState.stage })}\n                  </Text>\n                ) : null}\n              </Box>\n            </Box>\n            {!isStageLoading ? (\n              <Box paddingBottom=\"12px\">\n                <AddItem\n                  size=\"tiny\"\n                  removePadding={true}\n                  dataHook={`kanban-stage-add-card-${stageState.stageKey}`}\n                >\n                  <Box paddingTop=\"9px\" paddingBottom=\"9px\">\n                    Add Card\n                  </Box>\n                </AddItem>\n              </Box>\n            ) : null}\n          </Box>\n          {isStageLoading ? (\n            <CardsSkeleton stageKey={stageState.stageKey} />\n          ) : (\n            <Box paddingBottom=\"12px\" direction=\"vertical\">\n              <div\n                data-hook={`kanban-stage-cards-container-${stageState.stageKey}`}\n                style={{\n                  overflow: 'auto',\n                  height: '100%',\n                  minHeight: '430px',\n                  maxHeight: 'calc(100vh - 420px)',\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: '12px',\n                  alignItems: 'center',\n                  overflowX: 'hidden',\n                  scrollbarWidth: 'thin',\n                  scrollbarColor: '#CFD1DC transparent',\n                }}\n                onScroll={handleScroll}\n              >\n                {items?.map((item) => (\n                  <DraggableCard\n                    key={`${item.stageKey}-##-${item.item.key}`}\n                    id={`${item.stageKey}-##-${item.item.key}`}\n                    state={state}\n                    cardProps={{\n                      keyedItem: item.keyedItem,\n                      originalItem: item.keyedItem.item,\n                      itemIndex: item.itemIndex,\n                      item: item.item,\n                      stageKey: item.stageKey,\n                      actionCell: item.actionCell,\n                      itemActionsState: item.itemActionsState,\n                      dataExtension: props.dataExtension,\n                      tags: props.tags,\n                    }}\n                  >\n                    {CardComponent}\n                  </DraggableCard>\n                ))}\n                {stageState.itemsCollectionState.status.isLoading && (\n                  <div className=\"text-sm text-center text-gray-500\">\n                    Loading more...\n                  </div>\n                )}\n              </div>\n            </Box>\n          )}\n        </div>\n      </Box>\n    </div>\n  );\n}\n\nexport const StageComponent = observer(_StageComponent);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/Kanban/StagesSkeleton.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StagesSkeleton = StagesSkeleton;
+var _designSystem = require("@wix/design-system");
+var _react = _interopRequireDefault(require("react"));
+var _StagesSkeleton = _interopRequireDefault(require("./StagesSkeleton.scss"));
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/Kanban/StagesSkeleton.tsx"; // @ts-expect-error
+const numberOfStages = 6;
+function StageSkeleton({
+  index
+}) {
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    key: index,
+    width: "270px",
+    dataHook: "kanban-stage-skeleton",
+    backgroundColor: "#E5E6E9",
+    borderRadius: "8px",
+    padding: "12px",
+    direction: "vertical",
+    height: "calc(100vh - 300px)",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 10,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "246px",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonGroup, {
+    skin: "dark",
+    backgroundColor: "#E5E6E9",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 21,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    gap: "12px",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 22,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
+    className: _StagesSkeleton.default.skeletonLine,
+    width: "185px",
+    marginBottom: "5px",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 13
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
+    className: _StagesSkeleton.default.skeletonLine,
+    width: "104px",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 13
+    }
+  })))));
+}
+function StagesSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "horizontal",
+    gap: "12px",
+    dataHook: "kanban-stages-skeleton",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 38,
+      columnNumber: 5
+    }
+  }, Array.from({
+    length: numberOfStages
+  }, (_, index) => /*#__PURE__*/_react.default.createElement(StageSkeleton, {
+    index: index,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 40,
+      columnNumber: 9
+    }
+  })));
+}
+//# sourceMappingURL=StagesSkeleton.js.map

package/dist/cjs/components/Kanban/StagesSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_designSystem","require","_react","_interopRequireDefault","_StagesSkeleton","_jsxFileName","numberOfStages","StageSkeleton","index","default","createElement","Box","key","width","dataHook","backgroundColor","borderRadius","padding","direction","height","__self","__source","fileName","lineNumber","columnNumber","SkeletonGroup","skin","gap","SkeletonLine","className","styles","skeletonLine","marginBottom","StagesSkeleton","Array","from","length","_"],"sources":["../../../../src/components/Kanban/StagesSkeleton.tsx"],"sourcesContent":["import { Box, SkeletonGroup, SkeletonLine } from '@wix/design-system';\nimport React from 'react';\n// @ts-expect-error\nimport styles from './StagesSkeleton.scss';\n\nconst numberOfStages = 6;\n\nfunction StageSkeleton({ index }: { index: number }) {\n  return (\n    <Box\n      key={index}\n      width=\"270px\"\n      dataHook=\"kanban-stage-skeleton\"\n      backgroundColor=\"#E5E6E9\"\n      borderRadius=\"8px\"\n      padding=\"12px\"\n      direction=\"vertical\"\n      height=\"calc(100vh - 300px)\"\n    >\n      <Box width=\"246px\">\n        <SkeletonGroup skin=\"dark\" backgroundColor=\"#E5E6E9\">\n          <Box direction=\"vertical\" gap=\"12px\">\n            <SkeletonLine\n              className={styles.skeletonLine}\n              width=\"185px\"\n              marginBottom=\"5px\"\n            />\n            <SkeletonLine className={styles.skeletonLine} width=\"104px\" />\n          </Box>\n        </SkeletonGroup>\n      </Box>\n    </Box>\n  );\n}\n\nexport function StagesSkeleton() {\n  return (\n    <Box direction=\"horizontal\" gap=\"12px\" dataHook=\"kanban-stages-skeleton\">\n      {Array.from({ length: numberOfStages }, (_, index) => (\n        <StageSkeleton index={index} />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":";;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,eAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA2C,IAAAI,YAAA,yGAD3C;AAGA,MAAMC,cAAc,GAAG,CAAC;AAExB,SAASC,aAAaA,CAAC;EAAEC;AAAyB,CAAC,EAAE;EACnD,oBACEN,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAAW,GAAG;IACFC,GAAG,EAAEJ,KAAM;IACXK,KAAK,EAAC,OAAO;IACbC,QAAQ,EAAC,uBAAuB;IAChCC,eAAe,EAAC,SAAS;IACzBC,YAAY,EAAC,KAAK;IAClBC,OAAO,EAAC,MAAM;IACdC,SAAS,EAAC,UAAU;IACpBC,MAAM,EAAC,qBAAqB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAE5BtB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAAW,GAAG;IAACE,KAAK,EAAC,OAAO;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAChBtB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAAyB,aAAa;IAACC,IAAI,EAAC,MAAM;IAACX,eAAe,EAAC,SAAS;IAAAK,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClDtB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAAW,GAAG;IAACO,SAAS,EAAC,UAAU;IAACS,GAAG,EAAC,MAAM;IAAAP,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClCtB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAA4B,YAAY;IACXC,SAAS,EAAEC,uBAAM,CAACC,YAAa;IAC/BlB,KAAK,EAAC,OAAO;IACbmB,YAAY,EAAC,KAAK;IAAAZ,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,CACnB,CAAC,eACFtB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAA4B,YAAY;IAACC,SAAS,EAAEC,uBAAM,CAACC,YAAa;IAAClB,KAAK,EAAC,OAAO;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC1D,CACQ,CACZ,CACF,CAAC;AAEV;AAEO,SAASS,cAAcA,CAAA,EAAG;EAC/B,oBACE/B,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAAW,GAAG;IAACO,SAAS,EAAC,YAAY;IAACS,GAAG,EAAC,MAAM;IAACb,QAAQ,EAAC,wBAAwB;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,GACrEU,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAE9B;EAAe,CAAC,EAAE,CAAC+B,CAAC,EAAE7B,KAAK,kBAC/CN,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACH,aAAa;IAACC,KAAK,EAAEA,KAAM;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC/B,CACE,CAAC;AAEV","ignoreList":[]}