@ganpatiinfo/gids-web-dom-reference 12.0.0 → 13.0.0

package/src/components/GidsMatrixTable/GidsMatrixTable.ts

@@ -0,0 +1,167 @@
+import { GidsMatrixTableBodyActionButtonEvent } from '@ganpatiinfo/gids-core-shared';
+import {
+	GidsMatrixTableWebProps,
+	GidsMatrixTableWebUtils,
+	GidsTableCellTypographyStyle,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import {
+	GidsBasicTableHeaderActionButtonBaseEvent,
+	GidsBasicTableHeaderDom,
+} from '../GidsBasicTableHeader/GidsBasicTableHeader';
+import { GidsMatrixTableBodyDom } from '../GidsMatrixTableBody/GidsMatrixTableBody';
+
+const {
+	getGidsMatrixTableClassNames,
+	getCustomisedTopHeaderMatrixTableCells,
+	getMatrixTableBodyBorder,
+	getMatrixTableClasses,
+} = GidsMatrixTableWebUtils;
+
+type GidsMatrixTableBaseWebProps = GidsMatrixTableWebProps<
+	GidsTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+type GidsMatrixTableActionButtonBaseEvent =
+	GidsMatrixTableBodyActionButtonEvent<
+		Event,
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>;
+
+export interface GidsMatrixTableDomProps extends GidsMatrixTableBaseWebProps {
+	extraClasses?: string;
+	onClickMatrixTableActionBtn?: (
+		event: GidsMatrixTableActionButtonBaseEvent,
+	) => void;
+}
+
+export const GidsMatrixTableDom = ({
+	topHeaderCells = [],
+	tableBodyItems = [],
+	width = 'full',
+	isTopHeaderVisible = false,
+	topHeaderAppearance = 'none',
+	topHeaderLabelTypography = 'eyebrow-small',
+	topHeaderTextAlignment = 'left',
+	rowAppearance = 'none',
+	rowLabelTypography = 'label-small',
+	rowTextAlignment = 'left',
+	tableBorders = 'none',
+	tableBorderRadius = [],
+	tableBodyMaxHeight = 200,
+	rowCellPrimaryActionButtons = [],
+	rowCellSecondaryActionButtons = [],
+	topHeaderPrimaryActionButtons = [],
+	topHeaderSecondaryActionButtons = [],
+	onClickMatrixTableActionBtn,
+	matrixHeaderAppearance = 'none',
+	matrixHeaderLabelTypography = 'label-medium',
+	matrixHeaderTextAlignment = 'left',
+	matrixHeaderCellPrimaryActionButtons = [],
+	matrixHeaderCellSecondaryActionButtons = [],
+	extraClasses,
+}: GidsMatrixTableDomProps): HTMLElement => {
+	const matrixTableDiv = document.createElement('div');
+	matrixTableDiv.className = getGidsMatrixTableClassNames<
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>({ width, tableBorders, tableBorderRadius }, extraClasses);
+
+	// Wrapper Container to safely handle scroll containment
+	const matrixTableScrollContainer = document.createElement('div');
+	matrixTableScrollContainer.className = 'gids-matrix-table__scroll-container';
+
+	// Safe injection of the custom property value into the container element
+	if (tableBodyMaxHeight) {
+		matrixTableScrollContainer.style.setProperty(
+			'--gidsMatrixTable-body-max-height',
+			`${tableBodyMaxHeight}px`,
+		);
+	}
+
+	const matrixTable = document.createElement('table');
+	matrixTable.className = getMatrixTableClasses<
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>({ width });
+
+	if (isTopHeaderVisible && topHeaderCells && topHeaderCells.length > 0) {
+		function onTopHeaderActionBtnClick(
+			event: GidsBasicTableHeaderActionButtonBaseEvent,
+		) {
+			if (onClickMatrixTableActionBtn) {
+				onClickMatrixTableActionBtn({
+					...event,
+					details: {
+						...event.details,
+						columnIndex: event?.details?.cellIndex,
+						headerType: 'top',
+						rowIndex: event?.details?.cellIndex,
+					},
+				});
+			}
+		}
+
+		// Append Table Header
+		matrixTable.append(
+			GidsBasicTableHeaderDom({
+				appearance: topHeaderAppearance,
+				labelTypography: topHeaderLabelTypography,
+				textAlignment: topHeaderTextAlignment,
+				extraClasses: 'gids-matrix-table__top-thead',
+				headerCells: getCustomisedTopHeaderMatrixTableCells<
+					GidsTableCellTypographyStyle,
+					IconName,
+					IconAppearance
+				>({
+					topHeaderCells,
+					tableBorders,
+				}),
+				width,
+				cellPrimaryActionButtons: topHeaderPrimaryActionButtons,
+				cellSecondaryActionButtons: topHeaderSecondaryActionButtons,
+				onClickHeaderActionBtn: onTopHeaderActionBtnClick,
+			}),
+		);
+	}
+
+	if (tableBodyItems && tableBodyItems.length > 0) {
+		matrixTable.append(
+			GidsMatrixTableBodyDom({
+				width,
+				tableBodyItems,
+				tableBorders: getMatrixTableBodyBorder<
+					GidsTableCellTypographyStyle,
+					IconName,
+					IconAppearance
+				>({ tableBorders }),
+				rowAppearance,
+				rowLabelTypography,
+				rowTextAlignment,
+				matrixHeaderAppearance,
+				matrixHeaderLabelTypography,
+				matrixHeaderTextAlignment,
+				rowCellPrimaryActionButtons,
+				rowCellSecondaryActionButtons,
+				matrixHeaderCellPrimaryActionButtons,
+				matrixHeaderCellSecondaryActionButtons,
+				onClickMatrixBodyCellActionBtn: onClickMatrixTableActionBtn,
+			}),
+		);
+	}
+
+	// Structural Append hierarchy: matrixTable -> scroll wrapper -> root container
+	matrixTableScrollContainer.appendChild(matrixTable);
+	matrixTableDiv.appendChild(matrixTableScrollContainer);
+
+	return matrixTableDiv;
+};

package/src/components/GidsMatrixTableBody/GidsMatrixTableBody.ts

@@ -0,0 +1,164 @@
+import {
+	GidsMatrixTableBodyWebProps,
+	GidsMatrixTableBodyWebUtils,
+	GidsTableCellTypographyStyle,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import {
+	GidsMatrixTableBodyActionButtonEvent,
+	GidsMatrixTableBodyConstructedRowItem,
+	GidsMatrixTableBodyContructedMatrixHeaderItem,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	GidsTableCellActionButtonBaseEvent,
+	GidsTableCellDom,
+} from '../GidsTableCell/GidsTableCell';
+
+const { getGidsMatrixTableBodyClassNames, getConstructedMatrixTableBodyItems } =
+	GidsMatrixTableBodyWebUtils;
+
+type GidsMatrixTableBodyBaseWebProps = GidsMatrixTableBodyWebProps<
+	GidsTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+export type GidsMatrixTableBodyActionButtonBaseEvent =
+	GidsMatrixTableBodyActionButtonEvent<
+		Event,
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>;
+
+export interface GidsMatrixTableBodyDomProps extends GidsMatrixTableBodyBaseWebProps {
+	extraClasses?: string;
+	onClickMatrixBodyCellActionBtn?: (
+		event: GidsMatrixTableBodyActionButtonBaseEvent,
+	) => void;
+}
+
+export const GidsMatrixTableBodyDom = ({
+	width = 'full',
+	tableBodyItems = [],
+	tableBorders = 'none',
+	rowAppearance = 'none',
+	rowLabelTypography = 'label-medium',
+	rowTextAlignment = 'center',
+	matrixHeaderAppearance = 'none',
+	matrixHeaderLabelTypography = 'label-medium',
+	matrixHeaderTextAlignment = 'center',
+	rowCellPrimaryActionButtons = [],
+	rowCellSecondaryActionButtons = [],
+	matrixHeaderCellPrimaryActionButtons = [],
+	matrixHeaderCellSecondaryActionButtons = [],
+	onClickMatrixBodyCellActionBtn,
+	extraClasses,
+}: GidsMatrixTableBodyDomProps): HTMLElement => {
+	const matrixTableBody = document.createElement('tbody');
+	matrixTableBody.className = getGidsMatrixTableBodyClassNames(
+		{ width },
+		extraClasses,
+	);
+
+	if (tableBodyItems && tableBodyItems.length > 0) {
+		const constructedTableBodyItems = getConstructedMatrixTableBodyItems<
+			GidsTableCellTypographyStyle,
+			IconName,
+			IconAppearance
+		>({
+			rowAppearance,
+			rowLabelTypography,
+			rowTextAlignment,
+			matrixHeaderAppearance,
+			matrixHeaderLabelTypography,
+			matrixHeaderTextAlignment,
+			tableBodyItems,
+			tableBorders,
+			matrixHeaderCellPrimaryActionButtons,
+			matrixHeaderCellSecondaryActionButtons,
+		});
+
+		function onMatrixBodyCellActionBtnClick({
+			event,
+			rowIndex,
+			columnIndex,
+			item,
+		}: {
+			event: GidsTableCellActionButtonBaseEvent;
+			rowIndex: number;
+			columnIndex?: number;
+			item?:
+				| GidsMatrixTableBodyConstructedRowItem<
+						GidsTableCellTypographyStyle,
+						IconName,
+						IconAppearance
+				  >
+				| GidsMatrixTableBodyContructedMatrixHeaderItem<
+						GidsTableCellTypographyStyle,
+						IconName,
+						IconAppearance
+				  >;
+		}) {
+			if (onClickMatrixBodyCellActionBtn) {
+				onClickMatrixBodyCellActionBtn({
+					...event,
+					details: {
+						...event.details,
+						rowIndex,
+						columnIndex,
+						isHeaderCell: item?.isHeader,
+						headerType: item?.headerType ?? 'none',
+					},
+				});
+			}
+		}
+
+		constructedTableBodyItems.forEach((constructedTableBodyItem, indexI) => {
+			const { headerItem, rowItems = [] } = constructedTableBodyItem;
+			const tableRowEl = document.createElement('tr');
+
+			tableRowEl.append(
+				GidsTableCellDom({
+					...headerItem,
+					width,
+					isHeaderCell: headerItem?.isHeader ?? true,
+					cellPrimaryActionButtons: matrixHeaderCellPrimaryActionButtons,
+					cellSecondaryActionButtons: matrixHeaderCellSecondaryActionButtons,
+					onClickCellActionBtn: (event: GidsTableCellActionButtonBaseEvent) =>
+						onMatrixBodyCellActionBtnClick({
+							event,
+							rowIndex: indexI,
+							columnIndex: undefined,
+							item: headerItem,
+						}),
+				}),
+			);
+
+			rowItems.forEach((rowItem, indexJ) => {
+				tableRowEl.append(
+					GidsTableCellDom({
+						...rowItem,
+						width,
+						isHeaderCell: rowItem?.isHeader ?? false,
+						cellPrimaryActionButtons: rowCellPrimaryActionButtons,
+						cellSecondaryActionButtons: rowCellSecondaryActionButtons,
+						onClickCellActionBtn: (event: GidsTableCellActionButtonBaseEvent) =>
+							onMatrixBodyCellActionBtnClick({
+								event,
+								rowIndex: indexI,
+								columnIndex: indexJ,
+								item: rowItem,
+							}),
+					}),
+				);
+			});
+
+			matrixTableBody.appendChild(tableRowEl);
+		});
+	}
+
+	return matrixTableBody;
+};

package/src/components/GidsMdTable/GidsMdTable.ts

@@ -1,5 +1,5 @@
 import {
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	GidsMdTableWebProps,
 	GidsMdTableWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
@@ -10,18 +10,30 @@ import {
 
 const { getGidsMdTableClassNames } = GidsMdTableWebUtils;
 
+/**
+ * @deprecated Use `GidsBmdTable` and its props instead. `GidsMdTable` will be removed in a future release.
+ */
 type GidsMdTableBaseWebProps = GidsMdTableWebProps<
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	IconName,
 	IconAppearance
 >;
 
+/**
+ * @deprecated Use `GidsBmdTable` and its props instead. `GidsMdTable` will be removed in a future release.
+ */
 type GidsMdTableElement = HTMLElement & GidsMdTableBaseWebProps;
 
+/**
+ * @deprecated Use `GidsBmdTable` and its props instead. `GidsMdTable` will be removed in a future release.
+ */
 export interface GidsMdTableDomProps extends GidsMdTableBaseWebProps {
 	extraClasses?: string;
 }
 
+/**
+ * @deprecated Use `GidsBmdTable` and its props instead. `GidsMdTable` will be removed in a future release.
+ */
 export const GidsMdTableDom = ({
 	topHeaderCells = [],
 	tableBody = [],

package/src/components/GidsPagination/GidsPagination.ts

@@ -14,8 +14,15 @@ const { getGidsPaginationClassNames, getGidsPaginationDotsClassNames } =
 	GidsPaginationWebUtils;
 const { getPaginationsArr } = GidsPaginationCommonUtils;
 
-export interface GidsPaginationDomProps
-	extends Omit<GidsPaginationCommonProps<string>, 'onClickItem'> {
+/**
+ * @deprecated
+ *
+ * Use `GidsPaginator` and its props and functions instead.
+ */
+export interface GidsPaginationDomProps extends Omit<
+	GidsPaginationCommonProps<string>,
+	'onClickItem'
+> {
 	extraClasses?: ClassValue;
 	onClickItem?: ({
 		event,
@@ -26,6 +33,11 @@ export interface GidsPaginationDomProps
 	}: GidsPaginationButtonParamsProps<MouseEvent>) => void;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsPaginator` and its props and functions instead.
+ */
 export const GidsPaginationDom = ({
 	selectColor = 'default',
 	variant = 'default',

package/src/components/GidsPaginator/GidsPaginator.ts

@@ -0,0 +1,241 @@
+import {
+	GidsPaginatorWebProps,
+	GidsPaginatorWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	GidsPaginatorItemDom,
+	GidsPaginatorItemDomProps,
+} from '../GidsPaginatorItem/GidsPaginatorItem.js';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+import {
+	GidsPaginatorEventDetails,
+	GidsPaginatorItemEvent,
+} from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsPaginatorClassNames } = GidsPaginatorWebUtils;
+
+export type GidsPaginatorBaseWebProps = GidsPaginatorWebProps<IconName, Event>;
+
+export interface GidsPaginatorDomProps extends GidsPaginatorBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsPaginatorDom = ({
+	currentPage = 1,
+	totalPages = 1,
+	size = 'sm',
+	disabled = false,
+	selectColor = 'default',
+	variant = 'default',
+	shape = 'circled',
+	showFirstPageBtn,
+	showLastPageBtn,
+	showNextBtn,
+	showPreviousBtn,
+	onPageChange,
+	extraClasses,
+}: GidsPaginatorDomProps): HTMLDivElement => {
+	const paginator = document.createElement('div');
+	paginator.className = getGidsPaginatorClassNames(extraClasses);
+
+	/*
+	 * Container for pagination items.
+	 */
+	const paginatorItems = document.createElement('div');
+	paginatorItems.className =
+		variant === 'outlined'
+			? 'gids-paginator__shaped-items'
+			: 'gids-paginator__items';
+
+	const createPaginatorItem = ({
+		children,
+		isIcon = false,
+		iconName,
+		selected = false,
+		disabled: itemDisabled = false,
+		onPaginatorItemClick,
+		ellipsis = false,
+	}: Partial<GidsPaginatorItemDomProps> & { ellipsis?: boolean }) => {
+		return GidsPaginatorItemDom({
+			children,
+			isIcon: ellipsis ? false : isIcon,
+			iconName,
+			selected: ellipsis ? false : selected,
+			disabled: disabled || itemDisabled,
+			size,
+			selectColor,
+			variant: ellipsis ? 'default' : variant,
+			shape,
+			onPaginatorItemClick,
+		});
+	};
+
+	const handlePageChange = ({
+		page,
+		event,
+	}: {
+		page: number;
+		event: GidsPaginatorItemEvent<Event>;
+	}) => {
+		if (disabled || page < 1 || page > totalPages || page === currentPage) {
+			return;
+		}
+
+		if (onPageChange) {
+			const pageChangeEventDetail: GidsPaginatorEventDetails<IconName, Event> =
+				{
+					currentPage: page,
+					totalPages,
+					size,
+					variant,
+					shape,
+					selectColor,
+				};
+
+			onPageChange({
+				originalEvent: event?.originalEvent,
+				details: pageChangeEventDetail,
+			});
+		}
+	};
+
+	if (showFirstPageBtn) {
+		/*
+		 * First page button
+		 */
+		paginatorItems.appendChild(
+			createPaginatorItem({
+				isIcon: true,
+				iconName: 'backward',
+				disabled: currentPage <= 1,
+				onPaginatorItemClick: (event: GidsPaginatorItemEvent<Event>) => {
+					handlePageChange({ page: 1, event });
+				},
+			}),
+		);
+	}
+
+	if (showPreviousBtn) {
+		/*
+		 * Previous button
+		 */
+		paginatorItems.appendChild(
+			createPaginatorItem({
+				isIcon: true,
+				iconName: 'chevron-left',
+				disabled: currentPage <= 1,
+				onPaginatorItemClick: (event: GidsPaginatorItemEvent<Event>) => {
+					handlePageChange({ page: currentPage - 1, event });
+				},
+			}),
+		);
+	}
+
+	/*
+	 * Page calculation
+	 *
+	 * Example:
+	 *
+	 * totalPages = 5
+	 * currentPage = 3
+	 *
+	 * Result:
+	 *
+	 * 1 2 3 4 5
+	 *
+	 * For larger page counts:
+	 *
+	 * 1 2 3 4 ... 10
+	 */
+	const pages: Array<number | 'ellipsis'> = [];
+
+	if (totalPages <= 7) {
+		for (let page = 1; page <= totalPages; page++) {
+			pages.push(page);
+		}
+	} else if (currentPage <= 4) {
+		pages.push(1, 2, 3, 4, 'ellipsis', totalPages);
+	} else if (currentPage >= totalPages - 3) {
+		pages.push(
+			1,
+			'ellipsis',
+			totalPages - 3,
+			totalPages - 2,
+			totalPages - 1,
+			totalPages,
+		);
+	} else {
+		pages.push(
+			1,
+			'ellipsis',
+			currentPage - 1,
+			currentPage,
+			currentPage + 1,
+			'ellipsis',
+			totalPages,
+		);
+	}
+
+	/*
+	 * Page buttons
+	 */
+	pages.forEach((page) => {
+		if (page === 'ellipsis') {
+			paginatorItems.appendChild(
+				createPaginatorItem({
+					children: '...',
+					disabled: true,
+					ellipsis: true,
+				}),
+			);
+
+			return;
+		}
+
+		paginatorItems.appendChild(
+			createPaginatorItem({
+				children: String(page),
+				selected: page === currentPage,
+				onPaginatorItemClick: (event: GidsPaginatorItemEvent<Event>) => {
+					handlePageChange({ page, event });
+				},
+			}),
+		);
+	});
+
+	if (showNextBtn) {
+		/*
+		 * Next button
+		 */
+		paginatorItems.appendChild(
+			createPaginatorItem({
+				isIcon: true,
+				iconName: 'chevron-right',
+				disabled: currentPage >= totalPages,
+				onPaginatorItemClick: (event: GidsPaginatorItemEvent<Event>) => {
+					handlePageChange({ page: currentPage + 1, event });
+				},
+			}),
+		);
+	}
+
+	if (showLastPageBtn) {
+		/*
+		 * Last page button
+		 */
+		paginatorItems.appendChild(
+			createPaginatorItem({
+				isIcon: true,
+				iconName: 'forward',
+				disabled: currentPage >= totalPages,
+				onPaginatorItemClick: (event: GidsPaginatorItemEvent<Event>) => {
+					handlePageChange({ page: totalPages, event });
+				},
+			}),
+		);
+	}
+
+	paginator.appendChild(paginatorItems);
+
+	return paginator;
+};

package/src/components/GidsPaginatorItem/GidsPaginatorItem.ts

@@ -0,0 +1,72 @@
+import { GidsPaginatorItemCommonUtils } from '@ganpatiinfo/gids-core-shared';
+import {
+	ClassValue,
+	GidsPaginatorItemWebProps,
+	GidsPaginatorItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsPaginatorItemClassNames } = GidsPaginatorItemWebUtils;
+const { getPaginatorItemIconSize } = GidsPaginatorItemCommonUtils;
+
+export type GidsPaginatorItemBaseWebProps = GidsPaginatorItemWebProps<
+	DomChildren,
+	IconName,
+	Event
+>;
+
+export interface GidsPaginatorItemDomProps extends GidsPaginatorItemBaseWebProps {
+	extraClasses?: ClassValue;
+}
+
+export const GidsPaginatorItemDom = ({
+	selectColor = 'default',
+	variant = 'default',
+	shape = 'circled',
+	size = 'sm',
+	children,
+	isIcon = false,
+	iconName,
+	disabled = false,
+	selected = false,
+	extraClasses,
+	onPaginatorItemClick,
+}: GidsPaginatorItemDomProps): HTMLButtonElement => {
+	const paginatorItem = document.createElement('button');
+	paginatorItem.className = getGidsPaginatorItemClassNames(
+		{ selectColor, shape, size, variant, disabled, selected },
+		extraClasses,
+	);
+
+	if (!isIcon && children) {
+		appendAsChildren(paginatorItem, children);
+	}
+
+	if (
+		isIcon &&
+		iconName &&
+		iconName.toString() !== '' &&
+		iconName.toString() !== '(none)'
+	) {
+		paginatorItem.appendChild(
+			GidsIconDom({
+				size: getPaginatorItemIconSize({ size }),
+				name: iconName,
+				appearance: 'regular',
+				alt: '',
+			}),
+		);
+	}
+
+	if (onPaginatorItemClick && !disabled) {
+		paginatorItem.addEventListener('click', (event: Event) => {
+			onPaginatorItemClick({
+				originalEvent: event,
+			});
+		});
+	}
+
+	return paginatorItem;
+};