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

package/src/components/GidsMatrixTableBody/GidsMatrixTableBody.ts

@@ -0,0 +1,185 @@
+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;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
+type GidsMatrixTableBodyBaseWebProps = GidsMatrixTableBodyWebProps<
+	GidsTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
+export type GidsMatrixTableBodyActionButtonBaseEvent =
+	GidsMatrixTableBodyActionButtonEvent<
+		Event,
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
+export interface GidsMatrixTableBodyDomProps extends GidsMatrixTableBodyBaseWebProps {
+	extraClasses?: string;
+	onClickMatrixBodyCellActionBtn?: (
+		event: GidsMatrixTableBodyActionButtonBaseEvent,
+	) => void;
+}
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
+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/GidsMenu/GidsMenu.ts

@@ -8,6 +8,7 @@ import {
 	DomNodeOrString,
 } from '../../utils/domUtils.js';
 import { GidsHeadingDom } from '../GidsHeading/GidsHeading.js';
+import { GidsDividerDom } from '../GidsDivider/GidsDivider.js';
 
 const { getGidsMenuClassNames } = GidsMenuWebUtils;
 
@@ -24,6 +25,7 @@ export const GidsMenuDom = ({
 	heading,
 	supportingText,
 	supportingTextTypography,
+	isHeaderDividerVisible = false,
 	...restProps
 }: GidsMenuDomProps): HTMLDivElement => {
 	const menu = document.createElement('div');
@@ -45,6 +47,19 @@ export const GidsMenuDom = ({
 		);
 	}
 
+	if (isHeaderDividerVisible) {
+		const dividerContainer = document.createElement('div');
+		dividerContainer.className = 'gids-menu__header-divider';
+
+		dividerContainer.append(
+			GidsDividerDom({
+				orientation: 'horizontal',
+			}),
+		);
+
+		menu.append(dividerContainer);
+	}
+
 	if (children !== undefined && children !== null) {
 		const childrenContainer = document.createElement('div');
 		childrenContainer.className = 'gids-menu__children';

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;
+};

package/src/components/GidsSkeleton/GidsSkeleton.ts

@@ -0,0 +1,40 @@
+import {
+	type GidsSkeletonWebProps,
+	GidsSkeletonWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsSkeletonClassNames } = GidsSkeletonWebUtils;
+
+type GidsSkeletonBaseWebProps = GidsSkeletonWebProps;
+
+type GidsSkeletonElement = HTMLElement & GidsSkeletonBaseWebProps;
+
+export interface GidsSkeletonDomProps extends GidsSkeletonBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsSkeletonDom = ({
+	variant = 'text',
+	animation = 'none',
+	width,
+	height,
+	extraClasses,
+}: GidsSkeletonDomProps): HTMLElement => {
+	const skeleton = document.createElement(
+		'gids-skeleton',
+	) as GidsSkeletonElement;
+
+	skeleton.variant = variant;
+	skeleton.animation = animation;
+
+	if (width) {
+		skeleton.width = width;
+	}
+	if (height) {
+		skeleton.height = height;
+	}
+
+	skeleton.className = getGidsSkeletonClassNames(extraClasses);
+
+	return skeleton;
+};