@cwellt_software/cwellt-reactjs-lib 1.0.4 → 1.0.5

package/dist/index.d.ts

@@ -126,8 +126,8 @@ interface CwTagProps {
     closableTag?: boolean;
     className?: string;
     classNameTag_description?: string;
-    onClickTag?: any;
-    onClickClosableTag?: any;
+    onClickTag?: (clickEvent: React$1.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    onClickClosableTag?: (clickEvent: React$1.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
     idTag?: string;
     ref?: any;
     styleClosableButton?: React$1.CSSProperties;
@@ -174,19 +174,60 @@ interface CwIconProps extends Omit<HTMLProps<HTMLDivElement>, "className"> {
  */
 declare function CwIcon(props: CwIconProps): react_jsx_runtime.JSX.Element;
 
-interface ICwLoadingProps {
-    cwelltClassNameContentLoading?: string;
-    cwelltClassNameLoading?: string;
-    cwelltBooleanLoading?: boolean;
-    cwelltTextLoading?: string;
-    cwelltSizeLoading?: "cwelltSmallLoadingSize" | "cwelltMediumLoadingSize" | "cwelltBigLoadingSize" | "cwelltLargeLoadingSize" | "cwelltExtraLargeLoadingSize";
-    cwelltDelayLoading?: number;
+type LoadingSize = 'small' | 'regular' | 'large';
+type IconPosition = 'inside' | 'outside';
+interface CwLoadingProps {
+    /** Boolean to show/hide loading */
+    isLoading?: boolean;
+    /** Text to display alongside the loading icon */
+    text?: string;
+    /** Controls the size of the loading indicator (small/regular/large) */
+    size?: LoadingSize;
+    /** Position of the icon */
+    iconPosition?: IconPosition;
+    /** Custom icon class (default: 'cwi-plane-solid') */
+    iconName?: string;
+    /** Custom animation (default: 'spin') */
+    animation?: string;
 }
-declare function CwLoading(props: React__default.PropsWithChildren<ICwLoadingProps>): react_jsx_runtime.JSX.Element;
+/**
+ * CwLoading
+ *
+ * A versatile loading component that shows a spinner with optional text
+ * and disables the wrapped content while in loading state.
+ *
+ * @example
+ * // Basic usage
+ * <CwLoading isLoading={isSubmitting}>
+ *   <form>...</form>
+ * </CwLoading>
+ *
+ * // With custom text and size
+ * <CwLoading
+ *   isLoading={isLoading}
+ *   text="Please wait..."
+ *   size="large"
+ * >
+ *   <UserProfile />
+ * </CwLoading>
+ */
+declare function CwLoading({ isLoading, text, size, iconPosition, iconName, animation, children }: React__default.PropsWithChildren<CwLoadingProps>): react_jsx_runtime.JSX.Element;
 
 interface CwLoadingSmallProps {
-    cwelltBooleanLoadingAppointment?: boolean;
+    isLoading?: boolean;
 }
+/**
+ * @deprecated since may 2025. Use <CwLoading size="small"> instead.
+ *
+ * This component will be removed in a future release.
+ *
+ * @example
+ * // Instead of:
+ * <CwLoadingSmall />
+ *
+ * // Use:
+ * <CwLoading size="small" />
+ */
 declare function CwLoadingSmall(CwelltLoadingAppointements: React$1.PropsWithChildren<CwLoadingSmallProps>): react_jsx_runtime.JSX.Element;
 
 type TooltipPosition = "top" | "bottom" | "left" | "right";
@@ -318,18 +359,29 @@ interface CwModalHoverProps extends Omit<HTMLProps<HTMLDialogElement>, "classNam
 declare const CwModalHover: FC<CwModalHoverProps>;
 
 interface CwDialogProps extends Omit<HTMLProps<PropsWithChildren<HTMLDialogElement>>, "className"> {
+    /** Custom footer elements to replace the default footer */
     customFooter?: Array<ReactElement>;
+    /** Custom header elements to replace the default header */
     customHeader?: Array<ReactElement>;
+    /** Text displayed in the dialog header */
     headline?: string;
+    /** Width of the dialog. Accepts number (px) or string with unit (px, rem, vw, vh) */
+    width?: number | string;
+    /** Height of the dialog. Accepts number (px) or string with unit (px, rem, vh). If not provided, height will adjust to content */
+    height?: number | string;
+    /** Legacy way to set dialog dimensions. For backwards compatibility */
     dialogSize?: {
-        width: number | string;
-        height: number | string;
+        width?: number | string;
+        height?: number | string;
     };
-    zIndex?: number;
+    /** Whether to show a semi-transparent background behind the dialog. Default is true */
     scrim?: boolean;
+    /** Function called when the save button is clicked */
     onSave?: () => void;
+    /** Function called when the close button is clicked */
     onClose?: () => void;
-    isReport?: boolean;
+    /** If true, the footer will not be displayed */
+    hideFooter?: boolean;
 }
 declare const CwDialog: FC<CwDialogProps>;
 
@@ -362,115 +414,100 @@ interface Column {
     key: string;
     render?: (item: DataItem) => React__default.ReactNode;
     className?: string;
+    sortable?: boolean;
+    width?: number | string;
 }
 interface DataItem {
-    key: string;
     [key: string]: any;
 }
 interface CwTableProps {
     columns: Column[];
     data: DataItem[];
     pagination?: boolean;
-    itemsPerPage?: number;
+    pageSizeOptions?: number[];
     expandedRowRender?: (record: DataItem) => React__default.ReactNode;
-    onExpand?: any;
+    onExpand?: (record: DataItem) => void;
     classNameContainer?: string;
     className?: string;
-    classNameHeader?: string;
     classNameRow?: string;
     style?: React__default.CSSProperties;
     id?: string;
     textNoData?: string;
+    rowKey?: string;
+    loading?: boolean;
+    scrollHeight?: number | string;
+    stickyHeader?: boolean;
 }
 /**
- * A Table view
- * @param props
+ * A reusable and customizable table component.
+ *
+ * @param props - Component props to configure columns, data, styles, pagination, expanded rows, and more.
+ *
  * @example
  * const columns = [
  *   {
  *     title: 'Name',
  *     dataIndex: 'name',
  *     key: 'name',
+ *     sortable: true, // Column is sortable
+ *     width: 100 // You can define the width of the column
  *   },
  *   {
  *     title: 'Age',
  *     dataIndex: 'age',
  *     key: 'age',
- *     render: (age) => <span>{age} years</span>, // Example of custom rendering
+ *     sortable: true,
+ *     render: (item) => <span>{item.age} years</span> // Custom rendering
  *   },
  *   {
  *     title: 'Address',
  *     dataIndex: 'address',
  *     key: 'address',
- *     render: (address) => (
- *       <a href={`https://maps.google.com/?q=${encodeURIComponent(address)}`} target="_blank">
- *         {address}
+ *     render: (item) => (
+ *       <a href={`https://maps.google.com/?q=${encodeURIComponent(item.address)}`} target="_blank" rel="noreferrer">
+ *         {item.address}
  *       </a>
- *     ), // Example of custom link rendering
- *   },
+ *     ) // Link rendering
+ *   }
  * ];
  *
  * const data = [
- *   {
- *     key: '1',
- *     name: 'Mike',
- *     age: 32,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '2',
- *     name: 'John',
- *     age: 42,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '3',
- *     name: 'Andres',
- *     age: 33,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '4',
- *     name: 'Gabriel',
- *     age: 22,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '5',
- *     name: 'Sergio',
- *     age: 47,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '6',
- *     name: 'Zacarias',
- *     age: 61,
- *     address: '10 Downing Street',
- *   },
+ *   { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
+ *   { key: '2', name: 'John', age: 42, address: '11 Downing Street' },
+ *   { key: '3', name: 'Andres', age: 33, address: '12 Downing Street' },
+ *   { key: '4', name: 'Gabriel', age: 22, address: '13 Downing Street' },
+ *   { key: '5', name: 'Sergio', age: 47, address: '14 Downing Street' },
+ *   { key: '6', name: 'Zacarias', age: 61, address: '15 Downing Street' }
  * ];
  *
- * const generateExpandedContent = (record) => {
- *   var testValue = record;
- *   return (
- *     <div>
- *       Contenido expandido personalizado para {record.name}
- *     </div>
- *   );
- * };
- *
- * ------------------------- render ---------------------------
+ * const generateExpandedContent = (record) => (
+ *   <div>
+ *     Custom expanded content for {record.name}
+ *   </div>
+ * );
  *
  * <CwTable
  *   columns={columns}
- *   data={data} // WTF whatever array of objects you add here, make sure each has a key otherwise everything will expand
- *   itemsPerPage={3}
+ *   data={data}
  *   pagination={true}
+ *   pageSizeOptions={[3, 5, 10]} // Optional, defaults to [5, 10, 20, 50]
  *   expandedRowRender={generateExpandedContent}
- *   onExpand={(e)=> test(e)}
+ *   onExpand={(item) => console.log('Expanded:', item)}
+ *   rowKey="key" // Optional, defaults to 'key'
+ *   textNoData="No data available" // Optional message when no data
+ *   loading={false} // Optional, shows loading indicator
+ *   scrollHeight={300} // Optional scroll height, defaults to 300
+ *   stickyHeader={true} // Optional, makes header sticky on scroll
+ *   classNameContainer="my-table-wrapper" // Optional wrapper class
+ *   className="my-table" // Optional table class
+ *   classNameRow="my-table-row" // Optional class for each row
+ *   id="custom-table-id" // Optional ID for the container
+ *   style={{ border: '1px solid #ccc' }} // Optional inline styles
  * />
+ *
  * @returns React component
  */
-declare function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameRow, style, classNameContainer, id, textNoData }: CwTableProps): react_jsx_runtime.JSX.Element;
+declare function CwTable({ columns, data, pagination, pageSizeOptions, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData, rowKey, loading, scrollHeight, stickyHeader, }: Readonly<CwTableProps>): react_jsx_runtime.JSX.Element;
 
 interface Tab {
     key: string;
@@ -530,6 +567,37 @@ interface CwExpandableProps extends Omit<HTMLProps<PropsWithChildren<HTMLDetails
  */
 declare const CwExpandable: FC<CwExpandableProps>;
 
+/**
+ * Props for the CwKeyValueList component
+ */
+interface CwKeyValueListProps {
+    items: Array<{
+        key: string;
+        label: string;
+        value: any;
+        /** Optional suffix to append to the value (e.g. units, currency symbols) */
+        suffix?: string;
+    }>;
+    className?: string;
+    emptyValue?: React.ReactNode;
+    /** Direction of flex layout: 'row' or 'column' @default "row" **/
+    direction?: 'row' | 'column';
+}
+/**
+ * A component for displaying key-value pairs in a definition list format
+ * Used for read-only display of structured data
+ *
+ * @example
+ * <CwKeyValueList
+ *   items={[
+ *     { key: "length", label: "Length", value: "10", suffix: "m" },
+ *     { key: "width", label: "Width", value: null, suffix: "m" }
+ *   ]}
+ *   emptyValue="N/A"
+ * />
+ */
+declare const CwKeyValueList: React.FC<CwKeyValueListProps>;
+
 interface CwTableGroupedData_Row {
     cells: {
         content: JSX.Element;
@@ -1561,15 +1629,11 @@ declare function CwBtnDownLoadAllInfo({ cw_btnOnclick, cw_btn_disabled }: cw_btn
 declare function CwBtnPropertyFolder({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnAddFolder({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnEditFolder({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
-declare function CwBtnSelectedFolder({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnUploadFiles({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnGoBackFolder({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnBookMark({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
-declare function CwBtnArchive({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
-declare function CwBtnArchiveRestore({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnPublish({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnApprove({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
-declare function CwBtnBookMarkLinkPage({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnBulkDuty({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnDropDownMenu({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnAlert({ cw_btnOnclick, cw_btn_disabled, cw_name }: cw_btnProps): react_jsx_runtime.JSX.Element;
@@ -1951,6 +2015,7 @@ interface SchedulerEventDm {
     width: number;
     order?: number;
     icons?: ReactElement;
+    rectangleColors?: string[];
     tooltip?: ReactNode;
     contextMenuItems?: ItemType[];
     primaryTimeMarkerColor?: string;
@@ -2191,4 +2256,4 @@ declare class OnClickContextMenu implements UiEvent {
     constructor(id: string, clickedMenu: string);
 }
 
-export { type BackgroundEventDm, CblDragAndDrop$1 as CblDragAndDrop, type Column, CwAccordionContainer, CwAlign, type CwAlignProps, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnArchive, CwBtnArchiveRestore, CwBtnBookMark, CwBtnBookMarkLinkPage, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnSelectedFolder, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDef, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, type CwDialogProps, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, type CwExpandableProps, CwFileUpload, type CwFilterTabProps, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, type CwImageAreaMethods, type CwImageAreaProps, CwInput, CwInputDate, CwInputDatePicker, type CwInputDatePickerProps, type CwInputDateProps, CwInputDateText, type CwInputDateTextProps, CwInputDatetime, type CwInputDatetimeProps, CwInputImage, type CwInputImageProps, CwInputNumber, type CwInputNumberProps, CwInputPhone, type CwInputPhoneProps, CwInputText, type CwInputTextProps, type CwInputTimeProps, CwLabel, type CwLabelProps, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, type CwMessageProps, CwMessageType, CwModal, CwModalConfirm, CwModalHover, type CwModalHoverProps, CwModalIframe, CwModalReportFunctional, CwMultiFilter, type CwMultiFilterProps, CwMultiFilterTag, type CwMultiFilterTagProps, CwMultiselect, CwOption, CwOptionList, CwReportModal, type CwReportModalFunctionalProps, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, type CwSelectListProps, CwSuperScheduler, CwTable, CwTableGrouped, type CwTableGroupedData, type CwTableGroupedData_Group, type CwTableGroupedData_Row, type CwTableGroupedProps, CwTabs, CwTag, CwTextArea, type CwTextAreaProps, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, type DataItem, DefaultRowHeader, type ICwMultiFilterTag, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, type OnEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, type PinRowHeaderProps, Resource, type RowHeaderDm, type RowHeaderProps, Scheduler, SchedulerEvent, type SchedulerEventDm, type SchedulerEventState, type SchedulerRowProps, type SchedulerState, SuperScheduler, type SuperSchedulerProps, UiEvent, type Weekday, Weekdays, cblEvent, type cblEventCompProps, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, type resourceCompProps2, useCwMessage };
+export { type BackgroundEventDm, CblDragAndDrop$1 as CblDragAndDrop, type Column, CwAccordionContainer, CwAlign, type CwAlignProps, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnBookMark, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDef, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, type CwDialogProps, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, type CwExpandableProps, CwFileUpload, type CwFilterTabProps, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, type CwImageAreaMethods, type CwImageAreaProps, CwInput, CwInputDate, CwInputDatePicker, type CwInputDatePickerProps, type CwInputDateProps, CwInputDateText, type CwInputDateTextProps, CwInputDatetime, type CwInputDatetimeProps, CwInputImage, type CwInputImageProps, CwInputNumber, type CwInputNumberProps, CwInputPhone, type CwInputPhoneProps, CwInputText, type CwInputTextProps, type CwInputTimeProps, CwKeyValueList, type CwKeyValueListProps, CwLabel, type CwLabelProps, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, type CwMessageProps, CwMessageType, CwModal, CwModalConfirm, CwModalHover, type CwModalHoverProps, CwModalIframe, CwModalReportFunctional, CwMultiFilter, type CwMultiFilterProps, CwMultiFilterTag, type CwMultiFilterTagProps, CwMultiselect, CwOption, CwOptionList, CwReportModal, type CwReportModalFunctionalProps, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, type CwSelectListProps, CwSuperScheduler, CwTable, CwTableGrouped, type CwTableGroupedData, type CwTableGroupedData_Group, type CwTableGroupedData_Row, type CwTableGroupedProps, CwTabs, CwTag, CwTextArea, type CwTextAreaProps, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, type DataItem, DefaultRowHeader, type ICwMultiFilterTag, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, type OnEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, type PinRowHeaderProps, Resource, type RowHeaderDm, type RowHeaderProps, Scheduler, SchedulerEvent, type SchedulerEventDm, type SchedulerEventState, type SchedulerRowProps, type SchedulerState, SuperScheduler, type SuperSchedulerProps, UiEvent, type Weekday, Weekdays, cblEvent, type cblEventCompProps, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, type resourceCompProps2, useCwMessage };