@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/design/paginators/Paginator.js

@@ -0,0 +1,211 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { SimpleButton } from '../../form/buttons/SimpleButton';
+import { SelectDropdown } from '../../form/formFields/subComponents/InputVariants';
+import './paginator.css';
+export const Paginator = ({
+  id,
+  page,
+  totalPages,
+  pageSize = 20,
+  allowPageSizeChange,
+  onPageChange,
+  onPageSizeChange,
+  paginationType = 'buttons',
+  paginatorPosition = paginationType === 'showMore' ? 'center' : 'right',
+  buttonConfig,
+  maxButtonsVisible = 5
+}) => {
+  const [displayedButtonLimit, setDisplayedButtonLimit] = useState(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);
+  const [activePage, setActivePage] = useState(0);
+  const [isPageSizeChangeAllowed, setIsPageSizeChangeAllowed] = useState(false);
+  const [pageNumberButtonsVisible, setPageNumberButtonsVisible] = useState(Array.from({
+    length: displayedButtonLimit
+  }, (_, i) => i + 1));
+  const lowestPageNumberVisible = useRef(1);
+  const highestPageNumberVisible = useRef(displayedButtonLimit);
+  const pageSizeChangePosition = paginatorPosition === 'center' ? 'right' : paginatorPosition === 'right' ? 'left' : 'right';
+  const isNonNullPrevIcon = buttonConfig?.previousButton?.icon !== null;
+  const isNonNullNextIcon = buttonConfig?.nextButton?.icon !== null;
+  const isNonNullFirstIcon = buttonConfig?.firstButton?.icon !== null;
+  const isNonNullLastIcon = buttonConfig?.lastButton?.icon !== null;
+  const updateVisiblePageNumbers = newPage => {
+    if (newPage >= lowestPageNumberVisible.current && newPage <= highestPageNumberVisible.current) {
+      return;
+    }
+    if (newPage < lowestPageNumberVisible.current) {
+      lowestPageNumberVisible.current = newPage;
+      highestPageNumberVisible.current = newPage + displayedButtonLimit - 1;
+    } else if (newPage > highestPageNumberVisible.current) {
+      highestPageNumberVisible.current = newPage;
+      lowestPageNumberVisible.current = newPage - displayedButtonLimit + 1;
+    }
+    const newVisiblePages = Array.from({
+      length: displayedButtonLimit
+    }, (_, i) => lowestPageNumberVisible.current + i).filter(pageNum => pageNum >= 1 && pageNum <= totalPages);
+    setPageNumberButtonsVisible(newVisiblePages);
+  };
+
+  // ensure lowest and highest visible page numbers are within a valid range
+  const resetVisiblePageNumbers = page => {
+    lowestPageNumberVisible.current = 1;
+    highestPageNumberVisible.current = displayedButtonLimit;
+    const newVisiblePages = Array.from({
+      length: displayedButtonLimit
+    }, (_, i) => i + 1).filter(pageNum => pageNum >= 1 && pageNum <= totalPages);
+    setPageNumberButtonsVisible(newVisiblePages);
+    updateVisiblePageNumbers(page);
+  };
+  const handlePageChange = newPage => {
+    if (newPage < 1 || newPage > totalPages) {
+      return;
+    }
+    setActivePage(newPage);
+    onPageChange(newPage);
+    updateVisiblePageNumbers(newPage);
+  };
+  const handlePageSizeChange = event => {
+    onPageSizeChange && onPageSizeChange(Number(event.target.value));
+  };
+  const requiresPagination = () => {
+    if (paginationType === 'buttons') {
+      return totalPages > 1;
+    }
+    if (paginationType === 'showMore') {
+      return page < totalPages;
+    }
+    return false;
+  };
+  useEffect(() => {
+    const newPage = page > totalPages ? totalPages : page < 1 ? 1 : page;
+    if (newPage !== page) {
+      onPageChange(newPage);
+    }
+    setActivePage(newPage);
+    if (newPage < lowestPageNumberVisible.current || newPage > highestPageNumberVisible.current || displayedButtonLimit !== pageNumberButtonsVisible.length) {
+      resetVisiblePageNumbers(newPage);
+    }
+    setIsPageSizeChangeAllowed(allowPageSizeChange === true && paginationType === 'buttons');
+  }, [page, totalPages, displayedButtonLimit]);
+  useEffect(() => {
+    setDisplayedButtonLimit(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);
+  }, [totalPages, maxButtonsVisible]);
+  if (!requiresPagination()) {
+    return null;
+  }
+  const pageSizeChange = () => /*#__PURE__*/React.createElement("div", {
+    className: "pageSizeChangeContainer"
+  }, /*#__PURE__*/React.createElement(SelectDropdown, {
+    field: {
+      id: `paginator_${id}_pageSizeChange`,
+      name: `paginator_${id}_pageSizeChange`,
+      options: [{
+        label: '10',
+        value: 10
+      }, {
+        label: '20',
+        value: 20
+      }, {
+        label: '50',
+        value: 50
+      }, {
+        label: '100',
+        value: 100
+      }],
+      includeEmptyOption: false,
+      defaultValue: pageSize,
+      onChange: handlePageSizeChange
+    },
+    label: {
+      text: 'Items per page'
+    },
+    layout: 'horizontal',
+    customCssClasses: {
+      wrapper: 'pageSizeChange'
+    }
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    id: `paginator_${id}`,
+    className: `paginator ${paginationType} position_${paginatorPosition} ${isPageSizeChangeAllowed ? 'withPageSizeChange' : ''}`
+  }, paginationType === 'buttons' && /*#__PURE__*/React.createElement(React.Fragment, null, isPageSizeChangeAllowed && pageSizeChangePosition === 'left' && pageSizeChange(), /*#__PURE__*/React.createElement("div", {
+    className: "paginatorControls"
+  }, /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `paginator_${id}_first`,
+    disabled: activePage === 1,
+    onClickHandler: () => handlePageChange(1),
+    leftIcon: isNonNullFirstIcon ? {
+      icon: buttonConfig?.firstButton?.icon || 'first'
+    } : undefined,
+    hideLabel: buttonConfig?.firstButton?.label ? false : true,
+    label: buttonConfig?.firstButton?.label || 'Go to first item',
+    buttonStyle: {
+      size: 'compact'
+    }
+  }), /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `paginator_${id}_previous`,
+    disabled: activePage === 1,
+    onClickHandler: () => handlePageChange(activePage - 1),
+    leftIcon: isNonNullPrevIcon ? {
+      icon: buttonConfig?.previousButton?.icon || 'previous2'
+    } : undefined,
+    hideLabel: buttonConfig?.previousButton?.label ? false : true,
+    label: buttonConfig?.previousButton?.label || `Show previous ${pageSize} items`,
+    buttonStyle: {
+      size: 'compact'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "paginatorPageButtonsWrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "paginatorPageButtonsScroller"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "paginatorPageButtons"
+  }, pageNumberButtonsVisible.map(pageNumber => /*#__PURE__*/React.createElement(SimpleButton, {
+    key: `paginator_${id}_page_${pageNumber}`,
+    id: `paginator_${id}_page_${pageNumber}`,
+    disabled: activePage === pageNumber,
+    onClickHandler: () => handlePageChange(pageNumber),
+    label: String(pageNumber),
+    buttonStyle: {
+      size: 'compact'
+    }
+  }))))), /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `paginator_${id}_next`,
+    disabled: activePage === totalPages,
+    onClickHandler: () => handlePageChange(activePage + 1),
+    rightIcon: isNonNullNextIcon ? {
+      icon: buttonConfig?.nextButton?.icon || 'next2'
+    } : undefined,
+    hideLabel: buttonConfig?.nextButton?.label ? false : true,
+    label: buttonConfig?.nextButton?.label || `Show next ${pageSize} items`,
+    buttonStyle: {
+      size: 'compact'
+    }
+  }), /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `paginator_${id}_last`,
+    disabled: activePage === totalPages,
+    onClickHandler: () => handlePageChange(totalPages),
+    rightIcon: isNonNullLastIcon ? {
+      icon: buttonConfig?.lastButton?.icon || 'last'
+    } : undefined,
+    hideLabel: buttonConfig?.lastButton?.label ? false : true,
+    label: buttonConfig?.lastButton?.label || 'Go to last item',
+    buttonStyle: {
+      size: 'compact'
+    }
+  })), isPageSizeChangeAllowed && pageSizeChangePosition === 'right' && pageSizeChange()), paginationType === 'showMore' && /*#__PURE__*/React.createElement("div", {
+    className: "showMore"
+  }, /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `paginator_${id}_previous`,
+    onClickHandler: () => handlePageChange(activePage + 1),
+    rightIcon: {
+      icon: 'arrowDown'
+    },
+    label: "Show more items",
+    buttonStyle: {
+      size: 'compact'
+    }
+  })));
+};
+export default Paginator;
+//# sourceMappingURL=Paginator.js.map

package/dist/esm/components/design/paginators/Paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paginator.js","names":["React","useEffect","useRef","useState","SimpleButton","SelectDropdown","Paginator","id","page","totalPages","pageSize","allowPageSizeChange","onPageChange","onPageSizeChange","paginationType","paginatorPosition","buttonConfig","maxButtonsVisible","displayedButtonLimit","setDisplayedButtonLimit","activePage","setActivePage","isPageSizeChangeAllowed","setIsPageSizeChangeAllowed","pageNumberButtonsVisible","setPageNumberButtonsVisible","Array","from","length","_","i","lowestPageNumberVisible","highestPageNumberVisible","pageSizeChangePosition","isNonNullPrevIcon","previousButton","icon","isNonNullNextIcon","nextButton","isNonNullFirstIcon","firstButton","isNonNullLastIcon","lastButton","updateVisiblePageNumbers","newPage","current","newVisiblePages","filter","pageNum","resetVisiblePageNumbers","handlePageChange","handlePageSizeChange","event","Number","target","value","requiresPagination","pageSizeChange","createElement","className","field","name","options","label","includeEmptyOption","defaultValue","onChange","text","layout","customCssClasses","wrapper","Fragment","disabled","onClickHandler","leftIcon","undefined","hideLabel","buttonStyle","size","map","pageNumber","key","String","rightIcon"],"sources":["../../../../../src/components/design/paginators/Paginator.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactElement, useEffect, useRef, useState } from 'react';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { SelectDropdown } from '../../form/formFields/subComponents/InputVariants';\nimport { GenericFunction } from '../../../interfaces/generic.interface';\n\nimport './paginator.scss';\n\nexport interface IconLabelProp {\n  icon?: string | ReactElement | null;\n  label?: string | null;\n}\n\nexport interface PaginatorProps {\n  id: string;\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  onPageChange: GenericFunction;\n  allowPageSizeChange?: boolean;\n  onPageSizeChange?: GenericFunction;\n  paginationType?: 'buttons' | 'showMore';\n  paginatorPosition?: 'left' | 'right' | 'center';\n  buttonConfig?: {\n    previousButton?: IconLabelProp;\n    nextButton?: IconLabelProp;\n    firstButton?: IconLabelProp;\n    lastButton?: IconLabelProp;\n  };\n  maxButtonsVisible?: number;\n}\n\nexport const Paginator: React.FC<PaginatorProps> = (\n  {\n    id,\n    page,\n    totalPages,\n    pageSize = 20,\n    allowPageSizeChange,\n    onPageChange,\n    onPageSizeChange,\n    paginationType = 'buttons',\n    paginatorPosition = paginationType === 'showMore' ? 'center' : 'right',\n    buttonConfig,\n    maxButtonsVisible = 5,\n  }\n) => {\n\n  const [displayedButtonLimit, setDisplayedButtonLimit] = useState<number>(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n  const [activePage, setActivePage] = useState(0);\n  const [isPageSizeChangeAllowed, setIsPageSizeChangeAllowed] = useState<boolean>(false);\n  const [pageNumberButtonsVisible, setPageNumberButtonsVisible] = useState<number[]>(Array.from({ length: displayedButtonLimit }, (_, i) => i + 1));\n  \n  const lowestPageNumberVisible = useRef(1);\n  const highestPageNumberVisible = useRef(displayedButtonLimit);\n\n  const pageSizeChangePosition = paginatorPosition === 'center' ? 'right' : paginatorPosition === 'right' ? 'left' : 'right';\n\n  const isNonNullPrevIcon = buttonConfig?.previousButton?.icon !== null;\n  const isNonNullNextIcon = buttonConfig?.nextButton?.icon !== null;\n  const isNonNullFirstIcon = buttonConfig?.firstButton?.icon !== null;\n  const isNonNullLastIcon = buttonConfig?.lastButton?.icon !== null;\n\n  const updateVisiblePageNumbers = (newPage: number) => {\n    if (newPage >= lowestPageNumberVisible.current && newPage <= highestPageNumberVisible.current) {\n      return;\n    }\n    if (newPage < lowestPageNumberVisible.current) {\n      lowestPageNumberVisible.current = newPage;\n      highestPageNumberVisible.current = newPage + displayedButtonLimit - 1;\n    } else if (newPage > highestPageNumberVisible.current) {\n      highestPageNumberVisible.current = newPage;\n      lowestPageNumberVisible.current = newPage - displayedButtonLimit + 1;\n    }\n\n    const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => lowestPageNumberVisible.current + i).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n    setPageNumberButtonsVisible(newVisiblePages);\n  };\n\n  // ensure lowest and highest visible page numbers are within a valid range\n  const resetVisiblePageNumbers = (page: number) => {\n    lowestPageNumberVisible.current = 1;\n    highestPageNumberVisible.current = displayedButtonLimit;\n\n    const newVisiblePages = Array.from({ length: displayedButtonLimit }, (_, i) => i + 1).filter((pageNum) => pageNum >= 1 && pageNum <= totalPages);\n\n    setPageNumberButtonsVisible(newVisiblePages);\n    updateVisiblePageNumbers(page);\n  };\n\n  const handlePageChange = (newPage: number) => {\n    if (newPage < 1 || newPage > totalPages) {\n      return;\n    }\n    setActivePage(newPage);\n    onPageChange(newPage);\n    updateVisiblePageNumbers(newPage);\n  };\n\n  const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onPageSizeChange && onPageSizeChange(Number(event.target.value));\n  };\n\n  const requiresPagination = () => {\n    if (paginationType === 'buttons') {\n      return totalPages > 1;\n    }\n\n    if (paginationType === 'showMore') {\n      return page < totalPages;\n    }\n    return false;\n  };\n\n  useEffect(() => {\n    const newPage = page > totalPages ? totalPages : page < 1 ? 1 : page;\n    if (newPage !== page) {\n      onPageChange(newPage);\n    }\n    setActivePage(newPage);\n    if (newPage < lowestPageNumberVisible.current || newPage > highestPageNumberVisible.current || displayedButtonLimit !== pageNumberButtonsVisible.length) {\n      resetVisiblePageNumbers(newPage);\n    }\n    setIsPageSizeChangeAllowed(allowPageSizeChange === true && paginationType === 'buttons');\n  }, [page, totalPages, displayedButtonLimit]);\n\n  useEffect(() => {\n    setDisplayedButtonLimit(maxButtonsVisible > totalPages ? totalPages : maxButtonsVisible);\n  }, [totalPages, maxButtonsVisible]);\n\n  if (!requiresPagination()) {\n    return null;\n  }\n\n  const pageSizeChange = () => ( \n    <div className=\"pageSizeChangeContainer\">\n      <SelectDropdown {\n        ...{\n          field: {\n            id: `paginator_${ id }_pageSizeChange`,\n            name: `paginator_${ id }_pageSizeChange`,\n            options: [\n              {\n                label: '10',\n                value: 10,\n              },\n              {\n                label: '20',\n                value: 20,\n              },\n              {\n                label: '50',\n                value: 50,\n              },\n              {\n                label: '100',\n                value: 100,\n              },\n            ],\n            includeEmptyOption: false,\n            defaultValue: pageSize,\n            onChange: handlePageSizeChange,\n          },\n          label: {\n            text: 'Items per page',\n          },\n          layout: 'horizontal',\n          customCssClasses: {\n            wrapper: 'pageSizeChange',\n          }\n        }\n      }\n      />\n    </div>\n  );\n\n  return (\n    <div id={ `paginator_${ id }` } className={ `paginator ${ paginationType } position_${ paginatorPosition } ${ isPageSizeChangeAllowed ? 'withPageSizeChange' : '' }` }>\n      { paginationType === 'buttons' && (\n        <>\n          { isPageSizeChangeAllowed && pageSizeChangePosition === 'left' && pageSizeChange() }\n          <div className=\"paginatorControls\">\n\n            <SimpleButton\n              id={ `paginator_${ id }_first` }\n              disabled={ activePage === 1 }\n              onClickHandler={ () => handlePageChange(1) }\n              leftIcon={ isNonNullFirstIcon ? { icon: buttonConfig?.firstButton?.icon || 'first' } : undefined }\n              hideLabel={ buttonConfig?.firstButton?.label ? false : true }\n              label={ buttonConfig?.firstButton?.label || 'Go to first item' }\n              buttonStyle={ { size: 'compact' } }\n            />\n            <SimpleButton\n              id={ `paginator_${ id }_previous` }\n              disabled={ activePage === 1 }\n              onClickHandler={ () => handlePageChange(activePage - 1) }\n              leftIcon={ isNonNullPrevIcon ? { icon: buttonConfig?.previousButton?.icon || 'previous2' } : undefined }\n              hideLabel={ buttonConfig?.previousButton?.label ? false : true }\n              label={ buttonConfig?.previousButton?.label || `Show previous ${ pageSize } items` }\n              buttonStyle={ { size: 'compact' } }\n            />\n\n            <div className=\"paginatorPageButtonsWrapper\">\n              <div className=\"paginatorPageButtonsScroller\">\n                <div className=\"paginatorPageButtons\">\n                  {\n                    pageNumberButtonsVisible.map((pageNumber) => (\n                      <SimpleButton\n                        key={ `paginator_${ id }_page_${ pageNumber }` }\n                        id={ `paginator_${ id }_page_${ pageNumber }` }\n                        disabled={ activePage === pageNumber }\n                        onClickHandler={ () => handlePageChange(pageNumber) }\n                        label={ String(pageNumber) }\n                        buttonStyle={ { size: 'compact' } }\n                      />\n                    ))\n                  }\n                </div>\n              </div>\n            </div>\n\n            <SimpleButton\n              id={ `paginator_${ id }_next` }\n              disabled={ activePage === totalPages }\n              onClickHandler={ () => handlePageChange(activePage + 1) }\n              rightIcon={ isNonNullNextIcon ? { icon: buttonConfig?.nextButton?.icon || 'next2' } : undefined }\n              hideLabel={ buttonConfig?.nextButton?.label ? false : true }\n              label={ buttonConfig?.nextButton?.label || `Show next ${ pageSize } items` }\n              buttonStyle={ { size: 'compact' } }\n            />\n            <SimpleButton\n              id={ `paginator_${ id }_last` }\n              disabled={ activePage === totalPages }\n              onClickHandler={ () => handlePageChange(totalPages) }\n              rightIcon={ isNonNullLastIcon ? { icon: buttonConfig?.lastButton?.icon || 'last' } : undefined }\n              hideLabel={ buttonConfig?.lastButton?.label ? false : true }\n              label={ buttonConfig?.lastButton?.label || 'Go to last item' }\n              buttonStyle={ { size: 'compact' } }\n            />\n\n          </div>\n          { isPageSizeChangeAllowed && pageSizeChangePosition === 'right' && pageSizeChange() }\n        </>\n      ) }\n      { paginationType === 'showMore' && (\n        <div className=\"showMore\">\n          <SimpleButton\n            id={ `paginator_${ id }_previous` }\n            onClickHandler={ () => handlePageChange(activePage + 1) }\n            rightIcon={ { icon: 'arrowDown' } }\n            label=\"Show more items\"\n            buttonStyle={ { size: 'compact' } }\n          />\n        </div>\n      ) }\n    </div>\n  );\n};\n\nexport default Paginator;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/paginators/paginator.css

@@ -0,0 +1,67 @@
+.paginator {
+  display: flex;
+  align-items: center;
+}
+.paginator.showMore, .paginator.infiniteScroll {
+  justify-content: center;
+}
+.paginator.withPageSizeChange .pageSizeChange {
+  margin: 0 0 0 10px;
+}
+.paginator.withPageSizeChange .pageSizeChange label {
+  column-gap: 10px;
+}
+.paginator.withPageSizeChange .pageSizeChange label .labelText {
+  width: 60px;
+  font-size: 13px;
+}
+.paginator.withPageSizeChange .pageSizeChange label select {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 5px;
+  text-align: center;
+}
+.paginator.position_left.withPageSizeChange, .paginator.position_right.withPageSizeChange {
+  justify-content: space-between;
+}
+.paginator.position_center.withPageSizeChange {
+  gap: 10px;
+  justify-content: center;
+}
+.paginator.position_left {
+  justify-content: flex-start;
+}
+.paginator.position_right {
+  justify-content: flex-end;
+}
+.paginator.position_center {
+  justify-content: center;
+}
+.paginator .paginatorControls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  flex-wrap: nowrap;
+  max-width: 100%;
+}
+.paginator .paginatorControls .paginatorPageButtonsWrapper {
+  max-width: calc(100% - 70px);
+  overflow: hidden;
+}
+.paginator .paginatorControls .paginatorPageButtonsWrapper .paginatorPageButtonsScroller {
+  overflow: hidden;
+  max-width: 100%;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.paginator .paginatorControls .paginatorPageButtonsWrapper .paginatorPageButtonsScroller .paginatorPageButtons {
+  position: relative;
+  flex: 1;
+  padding: 2px 0; /* Catering for focus/active outline */
+  white-space: nowrap;
+}
+.paginator .paginatorControls .paginatorPageButtonsWrapper .paginatorPageButtonsScroller .paginatorPageButtons button {
+  margin: 0 2px;
+  min-width: 40px;
+}

package/dist/esm/components/design/paginators/scrollingPaginator/ScrollingPaginator.js

@@ -0,0 +1,54 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import { Spinner } from '../../../design/spinner/Spinner';
+import './scrollingPaginator.css';
+export const ScrollingPaginator = ({
+  id,
+  isMoreAvailable,
+  isLoadingMore,
+  onLoadMore = () => Promise.resolve(),
+  containerSize = 'm',
+  children
+}) => {
+  const scrollHolder = useRef(null);
+  const scrollContent = useRef(null);
+  const handleLoadMore = async () => {
+    if (!isMoreAvailable || isLoadingMore) {
+      return;
+    }
+    await onLoadMore();
+  };
+  const scrollListener = event => {
+    const target = event.target;
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight
+    } = target;
+    if (scrollTop >= scrollHeight - clientHeight - 20) {
+      handleLoadMore();
+    }
+  };
+  useEffect(() => {
+    if (scrollHolder && scrollHolder.current && isMoreAvailable) {
+      scrollHolder.current.addEventListener('scroll', scrollListener);
+    }
+    return () => {
+      scrollHolder.current?.removeEventListener('scroll', scrollListener);
+    };
+  }, [scrollHolder, isMoreAvailable]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: `ScrollingPaginator_${id}`,
+    className: `scrollingPaginator scrollingPaginator_${containerSize} ${isLoadingMore ? 'isLoadingMore' : ''}`,
+    ref: scrollHolder
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: scrollContent
+  }, children), isLoadingMore && /*#__PURE__*/React.createElement("div", {
+    className: "scrollingPaginatorLoading"
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "xs"
+  }), " Loading more items..."));
+};
+export default ScrollingPaginator;
+//# sourceMappingURL=ScrollingPaginator.js.map

package/dist/esm/components/design/paginators/scrollingPaginator/ScrollingPaginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollingPaginator.js","names":["React","useEffect","useRef","Spinner","ScrollingPaginator","id","isMoreAvailable","isLoadingMore","onLoadMore","Promise","resolve","containerSize","children","scrollHolder","scrollContent","handleLoadMore","scrollListener","event","target","scrollTop","scrollHeight","clientHeight","current","addEventListener","removeEventListener","createElement","className","ref","size"],"sources":["../../../../../../src/components/design/paginators/scrollingPaginator/ScrollingPaginator.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef } from 'react';\nimport { Spinner } from '../../../design/spinner/Spinner';\n\nimport './scrollingPaginator.scss';\n\ninterface ScrollingPaginatorProps {\n  id: string;\n  isMoreAvailable: boolean;\n  isLoadingMore: boolean;\n  onLoadMore?: () => Promise<void>;\n  containerSize?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'fullParent';\n  children: React.ReactNode;\n}\n\nexport const ScrollingPaginator: React.FC<ScrollingPaginatorProps> = (\n  {\n    id,\n    isMoreAvailable,\n    isLoadingMore,\n    onLoadMore = () => Promise.resolve(),\n    containerSize = 'm',\n    children,\n  }\n) => {\n  const scrollHolder = useRef<HTMLDivElement>(null);\n  const scrollContent = useRef<HTMLDivElement>(null);\n\n  const handleLoadMore = async () => {\n    if (!isMoreAvailable || isLoadingMore) {\n      return;\n    }\n    await onLoadMore();\n  };\n\n  const scrollListener = (event: Event) => {\n    const target = event.target as HTMLDivElement;\n\n    const { scrollTop, scrollHeight, clientHeight } = target;\n\n    if (scrollTop >= (scrollHeight - clientHeight) - 20) {\n      handleLoadMore();\n    }\n  };\n\n  useEffect(() => {\n    if (scrollHolder && scrollHolder.current && isMoreAvailable) {\n      scrollHolder.current.addEventListener('scroll', scrollListener);\n    }\n\n    return () => {\n      scrollHolder.current?.removeEventListener('scroll', scrollListener);\n    };\n  }, [scrollHolder, isMoreAvailable]);\n\n  return (\n    <div id={ `ScrollingPaginator_${ id }` } className={ `scrollingPaginator scrollingPaginator_${ containerSize } ${ isLoadingMore ? 'isLoadingMore' : '' }` } ref={ scrollHolder }>\n      <div ref={ scrollContent }>\n        {\n          children\n        }\n      </div>\n      {\n        isLoadingMore && (\n          <div className=\"scrollingPaginatorLoading\">\n            <Spinner size=\"xs\" /> Loading more items...\n          </div>\n        )\n      }\n    </div>\n  );\n};\n\nexport default ScrollingPaginator;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SAASC,OAAO,QAAQ,iCAAiC;AAEzD,OAAO,2BAA2B;AAWlC,OAAO,MAAMC,kBAAqD,GAAGA,CACnE;EACEC,EAAE;EACFC,eAAe;EACfC,aAAa;EACbC,UAAU,GAAGA,CAAA,KAAMC,OAAO,CAACC,OAAO,CAAC,CAAC;EACpCC,aAAa,GAAG,GAAG;EACnBC;AACF,CAAC,KACE;EACH,MAAMC,YAAY,GAAGX,MAAM,CAAiB,IAAI,CAAC;EACjD,MAAMY,aAAa,GAAGZ,MAAM,CAAiB,IAAI,CAAC;EAElD,MAAMa,cAAc,GAAG,MAAAA,CAAA,KAAY;IACjC,IAAI,CAACT,eAAe,IAAIC,aAAa,EAAE;MACrC;IACF;IACA,MAAMC,UAAU,CAAC,CAAC;EACpB,CAAC;EAED,MAAMQ,cAAc,GAAIC,KAAY,IAAK;IACvC,MAAMC,MAAM,GAAGD,KAAK,CAACC,MAAwB;IAE7C,MAAM;MAAEC,SAAS;MAAEC,YAAY;MAAEC;IAAa,CAAC,GAAGH,MAAM;IAExD,IAAIC,SAAS,IAAKC,YAAY,GAAGC,YAAY,GAAI,EAAE,EAAE;MACnDN,cAAc,CAAC,CAAC;IAClB;EACF,CAAC;EAEDd,SAAS,CAAC,MAAM;IACd,IAAIY,YAAY,IAAIA,YAAY,CAACS,OAAO,IAAIhB,eAAe,EAAE;MAC3DO,YAAY,CAACS,OAAO,CAACC,gBAAgB,CAAC,QAAQ,EAAEP,cAAc,CAAC;IACjE;IAEA,OAAO,MAAM;MACXH,YAAY,CAACS,OAAO,EAAEE,mBAAmB,CAAC,QAAQ,EAAER,cAAc,CAAC;IACrE,CAAC;EACH,CAAC,EAAE,CAACH,YAAY,EAAEP,eAAe,CAAC,CAAC;EAEnC,oBACEN,KAAA,CAAAyB,aAAA;IAAKpB,EAAE,EAAG,sBAAuBA,EAAE,EAAK;IAACqB,SAAS,EAAG,yCAA0Cf,aAAa,IAAMJ,aAAa,GAAG,eAAe,GAAG,EAAE,EAAK;IAACoB,GAAG,EAAGd;EAAc,gBAC9Kb,KAAA,CAAAyB,aAAA;IAAKE,GAAG,EAAGb;EAAe,GAEtBF,QAEC,CAAC,EAEJL,aAAa,iBACXP,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAA2B,gBACxC1B,KAAA,CAAAyB,aAAA,CAACtB,OAAO;IAACyB,IAAI,EAAC;EAAI,CAAE,CAAC,0BAClB,CAGN,CAAC;AAEV,CAAC;AAED,eAAexB,kBAAkB","ignoreList":[]}

package/dist/esm/components/design/paginators/scrollingPaginator/scrollingPaginator.css

@@ -0,0 +1,36 @@
+.scrollingPaginator {
+  overflow-y: auto;
+}
+.scrollingPaginator.scrollingPaginator_xs {
+  max-height: 200px;
+}
+.scrollingPaginator.scrollingPaginator_s {
+  max-height: 300px;
+}
+.scrollingPaginator.scrollingPaginator_m {
+  max-height: 400px;
+}
+.scrollingPaginator.scrollingPaginator_l {
+  max-height: 500px;
+}
+.scrollingPaginator.scrollingPaginator_xl {
+  max-height: 600px;
+}
+.scrollingPaginator.scrollingPaginator_fullParent {
+  max-height: 100%;
+}
+.scrollingPaginator.isLoadingMore {
+  position: relative;
+}
+.scrollingPaginator .scrollingPaginatorLoading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  gap: 10px;
+  z-index: 10;
+  margin: -40px 0 0;
+  height: 30px;
+}

package/dist/esm/components/design/revealMore/RevealMore.js

@@ -0,0 +1,13 @@
+'use client';
+
+import React from 'react';
+import './revealMore.css';
+import { RevealMoreInline } from './RevealMoreInline';
+import { RevealMoreBelow } from './RevealMoreBelow';
+export const RevealMore = props => {
+  if (props.labelStyle === 'inline') {
+    return /*#__PURE__*/React.createElement(RevealMoreInline, props);
+  }
+  return /*#__PURE__*/React.createElement(RevealMoreBelow, props);
+};
+//# sourceMappingURL=RevealMore.js.map

package/dist/esm/components/design/revealMore/RevealMore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealMore.js","names":["React","RevealMoreInline","RevealMoreBelow","RevealMore","props","labelStyle","createElement"],"sources":["../../../../../src/components/design/revealMore/RevealMore.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport './revealMore.scss';\nimport { RevealMoreProps } from './types/revealMoreTypes';\nimport { RevealMoreInline } from './RevealMoreInline';\nimport { RevealMoreBelow } from './RevealMoreBelow';\n\nexport const RevealMore: React.FC<RevealMoreProps> = (props) => {\n  if (props.labelStyle === 'inline') {\n    return <RevealMoreInline { ...props } />;\n  }\n  \n  return <RevealMoreBelow { ...props } />;\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAO,mBAAmB;AAE1B,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,OAAO,MAAMC,UAAqC,GAAIC,KAAK,IAAK;EAC9D,IAAIA,KAAK,CAACC,UAAU,KAAK,QAAQ,EAAE;IACjC,oBAAOL,KAAA,CAAAM,aAAA,CAACL,gBAAgB,EAAMG,KAAS,CAAC;EAC1C;EAEA,oBAAOJ,KAAA,CAAAM,aAAA,CAACJ,eAAe,EAAME,KAAS,CAAC;AACzC,CAAC","ignoreList":[]}

package/dist/esm/components/design/revealMore/RevealMoreBelow.js

@@ -0,0 +1,63 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import { SimpleButton } from '../../..';
+import { useRevealMoreLogic } from './hooks/useRevealMoreLogic';
+import { useCustomButton } from './hooks/useCustomButton';
+export const RevealMoreBelow = props => {
+  const {
+    children,
+    lineClamp = 2,
+    customCssClass
+  } = props;
+  const {
+    isExpanded,
+    isOverflowing,
+    setIsOverflowing,
+    toggleExpand
+  } = useRevealMoreLogic();
+  const {
+    renderCustomButton
+  } = useCustomButton(toggleExpand);
+  const contentRef = useRef(null);
+  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;
+  useEffect(() => {
+    const el = contentRef.current;
+    if (el) {
+      setIsOverflowing(el.scrollHeight > el.clientHeight);
+    }
+  }, [children, lineClamp]);
+  const elementStyle = {
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: lineClamp
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `revealMore revealMore_below ${customCssClass || ''}`
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: 'revealMore_content',
+    style: isExpanded ? {
+      ...elementStyle,
+      WebkitLineClamp: 'none'
+    } : elementStyle
+  }, children), isOverflowing && (isCustomButton ? renderCustomButton(isExpanded ? props.revealLessButton : props.revealMoreButton) : /*#__PURE__*/React.createElement(SimpleButton, {
+    onClickHandler: () => {
+      toggleExpand();
+      if (isExpanded) {
+        props.revealLessLabelOnClickHandler?.();
+      } else {
+        props.revealMoreLabelOnClickHandler?.();
+      }
+    },
+    id: "revealMore_button-below",
+    cssClass: "button compact",
+    label: isExpanded ? props.revealLessLabel || 'Reveal Less' : props.revealMoreLabel || 'Reveal More',
+    leftIcon: props.icon ? {
+      icon: isExpanded ? props.icon.onRevealLess : props.icon.onRevealMore
+    } : undefined,
+    "aria-hidden": props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true
+  })));
+};
+//# sourceMappingURL=RevealMoreBelow.js.map

package/dist/esm/components/design/revealMore/RevealMoreBelow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealMoreBelow.js","names":["React","useRef","useEffect","SimpleButton","useRevealMoreLogic","useCustomButton","RevealMoreBelow","props","children","lineClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","renderCustomButton","contentRef","isCustomButton","el","current","scrollHeight","clientHeight","elementStyle","overflow","display","WebkitBoxOrient","WebkitLineClamp","createElement","className","ref","style","revealLessButton","revealMoreButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore","undefined"],"sources":["../../../../../src/components/design/revealMore/RevealMoreBelow.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport { SimpleButton } from '../../..';\nimport { RevealMoreBelowProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreBelow: React.FC<RevealMoreBelowProps> = (props) => {\n  const {\n    children,\n    lineClamp = 2,\n    customCssClass\n  } = props;\n\n  const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n  const { renderCustomButton } = useCustomButton(toggleExpand);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n  useEffect(() => {\n    const el = contentRef.current;\n    if (el) {\n      setIsOverflowing(el.scrollHeight > el.clientHeight);\n    }\n  }, [children, lineClamp]);\n\n  const elementStyle: React.CSSProperties = {\n    overflow: 'hidden',\n    display: '-webkit-box',\n    WebkitBoxOrient: 'vertical',\n    WebkitLineClamp: lineClamp,\n  };\n\n  return (\n    <div className={ `revealMore revealMore_below ${ customCssClass || '' }` }>\n      <div\n        ref={ contentRef }\n        className={ 'revealMore_content' }\n        style={ isExpanded ? { ...elementStyle, WebkitLineClamp: 'none' } : elementStyle }\n      >\n        { children }\n      </div>\n      { isOverflowing && (\n        isCustomButton ? (\n          renderCustomButton(\n            isExpanded ? props.revealLessButton : props.revealMoreButton\n          )\n        ) : (\n          <SimpleButton\n            onClickHandler={ () => {\n              toggleExpand();\n              if (isExpanded) {\n                (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n              } else {\n                (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n              }\n            } }\n            id='revealMore_button-below'\n            cssClass=\"button compact\"\n            label={\n              isExpanded \n                ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n                : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n            }\n            leftIcon={\n              (props as ManagedButtonProps).icon ? { \n                icon: isExpanded \n                  ? (props as ManagedButtonProps).icon!.onRevealLess \n                  : (props as ManagedButtonProps).icon!.onRevealMore \n              } : undefined\n            }\n            aria-hidden = { props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true }\n          />\n        )\n      ) }\n    </div>\n  );\n};"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAChD,SAASC,YAAY,QAAQ,UAAU;AAEvC,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,OAAO,MAAMC,eAA+C,GAAIC,KAAK,IAAK;EACxE,MAAM;IACJC,QAAQ;IACRC,SAAS,GAAG,CAAC;IACbC;EACF,CAAC,GAAGH,KAAK;EAET,MAAM;IAAEI,UAAU;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAa,CAAC,GAAGV,kBAAkB,CAAC,CAAC;EAC1F,MAAM;IAAEW;EAAmB,CAAC,GAAGV,eAAe,CAACS,YAAY,CAAC;EAC5D,MAAME,UAAU,GAAGf,MAAM,CAAiB,IAAI,CAAC;EAE/C,MAAMgB,cAAc,GAAG,kBAAkB,IAAIV,KAAK,IAAI,kBAAkB,IAAIA,KAAK;EAEjFL,SAAS,CAAC,MAAM;IACd,MAAMgB,EAAE,GAAGF,UAAU,CAACG,OAAO;IAC7B,IAAID,EAAE,EAAE;MACNL,gBAAgB,CAACK,EAAE,CAACE,YAAY,GAAGF,EAAE,CAACG,YAAY,CAAC;IACrD;EACF,CAAC,EAAE,CAACb,QAAQ,EAAEC,SAAS,CAAC,CAAC;EAEzB,MAAMa,YAAiC,GAAG;IACxCC,QAAQ,EAAE,QAAQ;IAClBC,OAAO,EAAE,aAAa;IACtBC,eAAe,EAAE,UAAU;IAC3BC,eAAe,EAAEjB;EACnB,CAAC;EAED,oBACET,KAAA,CAAA2B,aAAA;IAAKC,SAAS,EAAG,+BAAgClB,cAAc,IAAI,EAAE;EAAK,gBACxEV,KAAA,CAAA2B,aAAA;IACEE,GAAG,EAAGb,UAAY;IAClBY,SAAS,EAAG,oBAAsB;IAClCE,KAAK,EAAGnB,UAAU,GAAG;MAAE,GAAGW,YAAY;MAAEI,eAAe,EAAE;IAAO,CAAC,GAAGJ;EAAc,GAEhFd,QACC,CAAC,EACJI,aAAa,KACbK,cAAc,GACZF,kBAAkB,CAChBJ,UAAU,GAAGJ,KAAK,CAACwB,gBAAgB,GAAGxB,KAAK,CAACyB,gBAC9C,CAAC,gBAEDhC,KAAA,CAAA2B,aAAA,CAACxB,YAAY;IACX8B,cAAc,EAAGA,CAAA,KAAM;MACrBnB,YAAY,CAAC,CAAC;MACd,IAAIH,UAAU,EAAE;QACbJ,KAAK,CAAwB2B,6BAA6B,GAAG,CAAC;MACjE,CAAC,MAAM;QACJ3B,KAAK,CAAwB4B,6BAA6B,GAAG,CAAC;MACjE;IACF,CAAG;IACHC,EAAE,EAAC,yBAAyB;IAC5BC,QAAQ,EAAC,gBAAgB;IACzBC,KAAK,EACH3B,UAAU,GACLJ,KAAK,CAAwBgC,eAAe,IAAI,aAAa,GAC7DhC,KAAK,CAAwBiC,eAAe,IAAI,aACtD;IACDC,QAAQ,EACLlC,KAAK,CAAwBmC,IAAI,GAAG;MACnCA,IAAI,EAAE/B,UAAU,GACXJ,KAAK,CAAwBmC,IAAI,CAAEC,YAAY,GAC/CpC,KAAK,CAAwBmC,IAAI,CAAEE;IAC1C,CAAC,GAAGC,SACL;IACD,eAAgBtC,KAAK,CAAC2B,6BAA6B,IAAI3B,KAAK,CAAC4B,6BAA6B,GAAG,KAAK,GAAG;EAAM,CAC5G,CACF,CAEA,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/revealMore/RevealMoreInline.js

@@ -0,0 +1,57 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { SimpleButton } from '../../..';
+import { useRevealMoreLogic } from './hooks/useRevealMoreLogic';
+import { useCustomButton } from './hooks/useCustomButton';
+export const RevealMoreInline = props => {
+  const {
+    children,
+    characterClamp = 100,
+    customCssClass
+  } = props;
+  const {
+    isExpanded,
+    isOverflowing,
+    setIsOverflowing,
+    toggleExpand
+  } = useRevealMoreLogic();
+  const {
+    renderCustomButton
+  } = useCustomButton(toggleExpand);
+  const [truncatedText, setTruncatedText] = useState('');
+  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;
+  useEffect(() => {
+    const text = children;
+    const limit = characterClamp;
+    if (text.length > limit) {
+      setTruncatedText(text.substring(0, limit));
+      setIsOverflowing(true);
+    } else {
+      setTruncatedText(text);
+      setIsOverflowing(false);
+    }
+  }, [children, characterClamp]);
+  const displayText = isExpanded ? children : truncatedText;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `revealMore revealMore_inline ${customCssClass || ''}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "revealMore_content"
+  }, displayText, isOverflowing && (isCustomButton ? renderCustomButton(isExpanded ? props.revealLessButton : props.revealMoreButton) : /*#__PURE__*/React.createElement(SimpleButton, {
+    onClickHandler: () => {
+      toggleExpand();
+      if (isExpanded) {
+        props.revealLessLabelOnClickHandler?.();
+      } else {
+        props.revealMoreLabelOnClickHandler?.();
+      }
+    },
+    id: "revealMore_button-inline",
+    cssClass: "button compact text_only",
+    label: isExpanded ? props.revealLessLabel || 'Reveal Less' : props.revealMoreLabel || 'Reveal More',
+    leftIcon: props.icon ? {
+      icon: isExpanded ? props.icon.onRevealLess : props.icon.onRevealMore
+    } : undefined
+  }))));
+};
+//# sourceMappingURL=RevealMoreInline.js.map

package/dist/esm/components/design/revealMore/RevealMoreInline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealMoreInline.js","names":["React","useState","useEffect","SimpleButton","useRevealMoreLogic","useCustomButton","RevealMoreInline","props","children","characterClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","renderCustomButton","truncatedText","setTruncatedText","isCustomButton","text","limit","length","substring","displayText","createElement","className","revealLessButton","revealMoreButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore","undefined"],"sources":["../../../../../src/components/design/revealMore/RevealMoreInline.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useEffect } from 'react';\nimport { SimpleButton } from '../../..';\nimport { RevealMoreInlineProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreInline: React.FC<RevealMoreInlineProps> = (props) => {\n  const {\n    children,\n    characterClamp = 100,\n    customCssClass\n  } = props;\n\n  const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n  const { renderCustomButton } = useCustomButton(toggleExpand);\n  const [truncatedText, setTruncatedText] = useState('');\n\n  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n  useEffect(() => {\n    const text = children as string;\n    const limit = characterClamp;\n    \n    if (text.length > limit) {\n      setTruncatedText(text.substring(0, limit));\n      setIsOverflowing(true);\n    } else {\n      setTruncatedText(text);\n      setIsOverflowing(false);\n    }\n  }, [children, characterClamp]);\n\n  const displayText = isExpanded ? (children as string) : truncatedText;\n\n  return (\n    <div className={ `revealMore revealMore_inline ${ customCssClass || '' }` }>\n      <span className=\"revealMore_content\">\n        { displayText }\n        { isOverflowing && (\n          isCustomButton ? (\n            renderCustomButton(\n              isExpanded ? props.revealLessButton : props.revealMoreButton\n            )\n          ) : (\n            <SimpleButton\n              onClickHandler={ () => {\n                toggleExpand();\n                if (isExpanded) {\n                  (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n                } else {\n                  (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n                }\n              } }\n              id='revealMore_button-inline'\n              cssClass=\"button compact text_only\"\n              label={\n                isExpanded \n                  ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n                  : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n              }\n              leftIcon={\n                (props as ManagedButtonProps).icon ? { \n                  icon: isExpanded \n                    ? (props as ManagedButtonProps).icon!.onRevealLess \n                    : (props as ManagedButtonProps).icon!.onRevealMore \n                } : undefined\n              }\n            />\n          )\n        ) }\n      </span>\n    </div>\n  );\n};"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,YAAY,QAAQ,UAAU;AAEvC,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,OAAO,MAAMC,gBAAiD,GAAIC,KAAK,IAAK;EAC1E,MAAM;IACJC,QAAQ;IACRC,cAAc,GAAG,GAAG;IACpBC;EACF,CAAC,GAAGH,KAAK;EAET,MAAM;IAAEI,UAAU;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAa,CAAC,GAAGV,kBAAkB,CAAC,CAAC;EAC1F,MAAM;IAAEW;EAAmB,CAAC,GAAGV,eAAe,CAACS,YAAY,CAAC;EAC5D,MAAM,CAACE,aAAa,EAAEC,gBAAgB,CAAC,GAAGhB,QAAQ,CAAC,EAAE,CAAC;EAEtD,MAAMiB,cAAc,GAAG,kBAAkB,IAAIX,KAAK,IAAI,kBAAkB,IAAIA,KAAK;EAEjFL,SAAS,CAAC,MAAM;IACd,MAAMiB,IAAI,GAAGX,QAAkB;IAC/B,MAAMY,KAAK,GAAGX,cAAc;IAE5B,IAAIU,IAAI,CAACE,MAAM,GAAGD,KAAK,EAAE;MACvBH,gBAAgB,CAACE,IAAI,CAACG,SAAS,CAAC,CAAC,EAAEF,KAAK,CAAC,CAAC;MAC1CP,gBAAgB,CAAC,IAAI,CAAC;IACxB,CAAC,MAAM;MACLI,gBAAgB,CAACE,IAAI,CAAC;MACtBN,gBAAgB,CAAC,KAAK,CAAC;IACzB;EACF,CAAC,EAAE,CAACL,QAAQ,EAAEC,cAAc,CAAC,CAAC;EAE9B,MAAMc,WAAW,GAAGZ,UAAU,GAAIH,QAAQ,GAAcQ,aAAa;EAErE,oBACEhB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAG,gCAAiCf,cAAc,IAAI,EAAE;EAAK,gBACzEV,KAAA,CAAAwB,aAAA;IAAMC,SAAS,EAAC;EAAoB,GAChCF,WAAW,EACXX,aAAa,KACbM,cAAc,GACZH,kBAAkB,CAChBJ,UAAU,GAAGJ,KAAK,CAACmB,gBAAgB,GAAGnB,KAAK,CAACoB,gBAC9C,CAAC,gBAED3B,KAAA,CAAAwB,aAAA,CAACrB,YAAY;IACXyB,cAAc,EAAGA,CAAA,KAAM;MACrBd,YAAY,CAAC,CAAC;MACd,IAAIH,UAAU,EAAE;QACbJ,KAAK,CAAwBsB,6BAA6B,GAAG,CAAC;MACjE,CAAC,MAAM;QACJtB,KAAK,CAAwBuB,6BAA6B,GAAG,CAAC;MACjE;IACF,CAAG;IACHC,EAAE,EAAC,0BAA0B;IAC7BC,QAAQ,EAAC,0BAA0B;IACnCC,KAAK,EACHtB,UAAU,GACLJ,KAAK,CAAwB2B,eAAe,IAAI,aAAa,GAC7D3B,KAAK,CAAwB4B,eAAe,IAAI,aACtD;IACDC,QAAQ,EACL7B,KAAK,CAAwB8B,IAAI,GAAG;MACnCA,IAAI,EAAE1B,UAAU,GACXJ,KAAK,CAAwB8B,IAAI,CAAEC,YAAY,GAC/C/B,KAAK,CAAwB8B,IAAI,CAAEE;IAC1C,CAAC,GAAGC;EACL,CACF,CACF,CAEC,CACH,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/revealMore/hooks/useCustomButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export const useCustomButton = toggleExpand => {
+  const renderCustomButton = button => {
+    return /*#__PURE__*/React.cloneElement(button, {
+      onClickHandler: event => {
+        if (button.props.onClickHandler) {
+          button.props.onClickHandler(event);
+        }
+        toggleExpand();
+      }
+    });
+  };
+  return {
+    renderCustomButton
+  };
+};
+//# sourceMappingURL=useCustomButton.js.map

package/dist/esm/components/design/revealMore/hooks/useCustomButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomButton.js","names":["React","useCustomButton","toggleExpand","renderCustomButton","button","cloneElement","onClickHandler","event","props"],"sources":["../../../../../../src/components/design/revealMore/hooks/useCustomButton.ts"],"sourcesContent":["import React from 'react';\n\nexport const useCustomButton = (toggleExpand: () => void) => {\n  const renderCustomButton = (button: React.ReactElement) => {\n    return React.cloneElement(button, {\n      onClickHandler: (event: any) => {\n        if (button.props.onClickHandler) {\n          button.props.onClickHandler(event);\n        }\n        \n        toggleExpand();\n      },\n    });\n  };\n\n  return { renderCustomButton };\n};"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAO,MAAMC,eAAe,GAAIC,YAAwB,IAAK;EAC3D,MAAMC,kBAAkB,GAAIC,MAA0B,IAAK;IACzD,oBAAOJ,KAAK,CAACK,YAAY,CAACD,MAAM,EAAE;MAChCE,cAAc,EAAGC,KAAU,IAAK;QAC9B,IAAIH,MAAM,CAACI,KAAK,CAACF,cAAc,EAAE;UAC/BF,MAAM,CAACI,KAAK,CAACF,cAAc,CAACC,KAAK,CAAC;QACpC;QAEAL,YAAY,CAAC,CAAC;MAChB;IACF,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IAAEC;EAAmB,CAAC;AAC/B,CAAC","ignoreList":[]}

package/dist/esm/components/design/revealMore/hooks/useRevealMoreLogic.js

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+export const useRevealMoreLogic = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return {
+    isExpanded,
+    isOverflowing,
+    setIsOverflowing,
+    toggleExpand
+  };
+};
+//# sourceMappingURL=useRevealMoreLogic.js.map

package/dist/esm/components/design/revealMore/hooks/useRevealMoreLogic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRevealMoreLogic.js","names":["useState","useRevealMoreLogic","isExpanded","setIsExpanded","isOverflowing","setIsOverflowing","toggleExpand"],"sources":["../../../../../../src/components/design/revealMore/hooks/useRevealMoreLogic.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport const useRevealMoreLogic = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  \n  const toggleExpand = () => {\n    setIsExpanded(!isExpanded);\n  };\n  \n  return {\n    isExpanded,\n    isOverflowing,\n    setIsOverflowing,\n    toggleExpand\n  };\n};"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAEhC,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGH,QAAQ,CAAC,KAAK,CAAC;EACnD,MAAM,CAACI,aAAa,EAAEC,gBAAgB,CAAC,GAAGL,QAAQ,CAAC,KAAK,CAAC;EAEzD,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACzBH,aAAa,CAAC,CAACD,UAAU,CAAC;EAC5B,CAAC;EAED,OAAO;IACLA,UAAU;IACVE,aAAa;IACbC,gBAAgB;IAChBC;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/components/design/revealMore/revealMore.css

@@ -0,0 +1,10 @@
+.revealMore.revealMore_below {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+}
+.revealMore #revealMore_button-inline {
+  padding: 0;
+  margin-left: 5px;
+}