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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "12.0.0",
+	"version": "14.0.0",
 	"private": false,
 	"description": "DOM for components reference implementations",
 	"homepage": "https://ganpatiinfo-design-system.onrender.com/",
@@ -24,11 +24,11 @@
 		"directory": "packages/private/web-dom-reference"
 	},
 	"dependencies": {
-		"@ganpatiinfo/gids-core-shared": "12.0.0",
-		"@ganpatiinfo/gids-web-shared": "11.0.0"
+		"@ganpatiinfo/gids-core-shared": "14.0.0",
+		"@ganpatiinfo/gids-web-shared": "13.0.0"
 	},
 	"peerDependencies": {
-		"@ganpatiinfo/gids-web-theme-interface": "6.0.0",
+		"@ganpatiinfo/gids-web-theme-interface": "7.0.0",
 		"@jest/globals": "^30.2.0",
 		"@types/jasmine": "^5.1.15",
 		"expect": "^30.2.0"

package/src/components/GidsAdvancedTooltip/GidsAdvancedTooltip.ts

@@ -0,0 +1,42 @@
+import {
+	GidsAdvancedTooltipWebProps,
+	GidsAdvancedTooltipWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsAdvancedTooltipClassNames } = GidsAdvancedTooltipWebUtils;
+
+type GidsAdvancedTooltipBaseWebProps = GidsAdvancedTooltipWebProps;
+
+type GidsAdvancedTooltipElement = HTMLElement & GidsAdvancedTooltipBaseWebProps;
+
+export interface GidsAdvancedTooltipDomProps extends GidsAdvancedTooltipBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsAdvancedTooltipDom = ({
+	visible = false,
+	x = 0,
+	y = 0,
+	placement = 'top',
+	offset = 12,
+	items = [],
+	extraClasses,
+}: GidsAdvancedTooltipDomProps): HTMLElement => {
+	const advancedTooltip = document.createElement(
+		'gids-advanced-tooltip',
+	) as GidsAdvancedTooltipElement;
+
+	advancedTooltip.visible = visible;
+	advancedTooltip.x = x;
+	advancedTooltip.y = y;
+	advancedTooltip.placement = placement;
+	advancedTooltip.offset = offset;
+	advancedTooltip.items = items;
+
+	advancedTooltip.className = getGidsAdvancedTooltipClassNames(
+		{ visible },
+		extraClasses,
+	);
+
+	return advancedTooltip;
+};

package/src/components/GidsBasicTableBody/GidsBasicTableBody.ts

@@ -1,27 +1,62 @@
 import {
 	GidsBasicTableBodyWebProps,
 	GidsBasicTableBodyWebUtils,
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 } from '@ganpatiinfo/gids-web-shared';
-import { GidsBasicTableRowDom } from '../GidsBasicTableRow/GidsBasicTableRow';
+import {
+	GidsBasicTableRowActionButtonBaseEvent,
+	GidsBasicTableRowDom,
+} from '../GidsBasicTableRow/GidsBasicTableRow';
 import {
 	IconAppearance,
 	IconName,
 } from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsBasicTableBodyActionButtonEvent } from '@ganpatiinfo/gids-core-shared';
 
 const { getGidsBasicTableBodyClassNames, getConstructedTableBodyData } =
 	GidsBasicTableBodyWebUtils;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableBody` and its props and functions instead.
+ */
 type GidsBasicTableBodyBaseWebProps = GidsBasicTableBodyWebProps<
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	IconName,
 	IconAppearance
 >;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableBody` and its props and functions instead.
+ */
+export type GidsBasicTableBodyActionButtonBaseEvent =
+	GidsBasicTableBodyActionButtonEvent<
+		Event,
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsTableBody` and its props and functions instead.
+ */
 export interface GidsBasicTableBodyDomProps extends GidsBasicTableBodyBaseWebProps {
 	extraClasses?: string;
+	onClickBodyCellActionBtn?: (
+		event: GidsBasicTableBodyActionButtonBaseEvent,
+	) => void;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableBody` and its props and functions instead.
+ */
 export const GidsBasicTableBodyDom = ({
 	width = 'full',
 	tableBodyData = [],
@@ -29,6 +64,9 @@ export const GidsBasicTableBodyDom = ({
 	rowAppearance = 'none',
 	rowLabelTypography = 'label-medium',
 	rowTextAlignment = 'center',
+	tableBodyCellPrimaryActionButtons = [],
+	tableBodyCellSecondaryActionButtons = [],
+	onClickBodyCellActionBtn,
 	extraClasses,
 }: GidsBasicTableBodyDomProps): HTMLElement => {
 	const tableBody = document.createElement('tbody');
@@ -39,7 +77,7 @@ export const GidsBasicTableBodyDom = ({
 
 	if (tableBodyData && tableBodyData.length > 0) {
 		const constructedBodyData = getConstructedTableBodyData<
-			GidsBasicTableCellTypographyStyle,
+			GidsTableCellTypographyStyle,
 			IconName,
 			IconAppearance
 		>({
@@ -50,7 +88,25 @@ export const GidsBasicTableBodyDom = ({
 			tableBorders,
 		});
 
-		constructedBodyData.forEach((constructedBody) => {
+		function onRowActionBtnClick({
+			event,
+			rowIndex,
+		}: {
+			event: GidsBasicTableRowActionButtonBaseEvent;
+			rowIndex: number;
+		}) {
+			if (onClickBodyCellActionBtn) {
+				onClickBodyCellActionBtn({
+					...event,
+					details: {
+						...event.details,
+						rowIndex,
+					},
+				});
+			}
+		}
+
+		constructedBodyData.forEach((constructedBody, indexI) => {
 			const constructedBodyRowItems = constructedBody?.rowItems ?? [];
 
 			tableBody.append(
@@ -59,6 +115,11 @@ export const GidsBasicTableBodyDom = ({
 					layout: 'horizontal',
 					isHeaderRow: false,
 					rows: constructedBodyRowItems,
+					cellPrimaryActionButtons: tableBodyCellPrimaryActionButtons,
+					cellSecondaryActionButtons: tableBodyCellSecondaryActionButtons,
+					onClickRowActionBtn: (
+						event: GidsBasicTableRowActionButtonBaseEvent,
+					) => onRowActionBtnClick({ event, rowIndex: indexI }),
 				}),
 			);
 		});

package/src/components/GidsBasicTableHead/GidsBasicTableHead.ts

@@ -14,6 +14,11 @@ import { GidsTabItemDom } from '../GidsTabItem/GidsTabItem';
 
 const { getGidsBasicTableHeadClassNames } = GidsBasicTableHeadWebUtils;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableToolbarDom` and its props.
+ */
 type GidsBasicTableHeadBaseWebProps = GidsBasicTableHeadWebProps<
 	DomChildren,
 	Event,
@@ -25,10 +30,20 @@ type GidsBasicTableHeadBaseWebProps = GidsBasicTableHeadWebProps<
 		'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onGidsSearchBarClear'
 	>;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableToolbarDom` and its props.
+ */
 export interface GidsBasicTableHeadDomProps extends GidsBasicTableHeadBaseWebProps {
 	extraClasses?: string;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableToolbarDom` and its props.
+ */
 export const GidsBasicTableHeadDom = ({
 	actionGroup = false,
 	allFiltersTabVisible = false,

package/src/components/GidsBasicTableHeader/GidsBasicTableHeader.ts

@@ -1,10 +1,13 @@
 import {
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	GidsBasicTableHeaderWebProps,
 	GidsBasicTableHeaderWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 import { GidsBasicTableRowDom } from '../GidsBasicTableRow/GidsBasicTableRow';
-import { GidsBasicTableRowItem } from '@ganpatiinfo/gids-core-shared';
+import {
+	GidsBasicTableHeaderActionButtonEvent,
+	GidsBasicTableRowItem,
+} from '@ganpatiinfo/gids-core-shared';
 import {
 	IconAppearance,
 	IconName,
@@ -12,16 +15,47 @@ import {
 
 const { getGidsBasicTableHeaderClassNames } = GidsBasicTableHeaderWebUtils;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableHeader` and its props and functions instead.
+ */
 type GidsBasicTableHeaderBaseWebProps = GidsBasicTableHeaderWebProps<
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	IconName,
 	IconAppearance
 >;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableHeader` and its props and functions instead.
+ */
+export type GidsBasicTableHeaderActionButtonBaseEvent =
+	GidsBasicTableHeaderActionButtonEvent<
+		Event,
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsTableHeader` and its props and functions instead.
+ */
 export interface GidsBasicTableHeaderDomProps extends GidsBasicTableHeaderBaseWebProps {
 	extraClasses?: string;
+	onClickHeaderActionBtn?: (
+		event: GidsBasicTableHeaderActionButtonBaseEvent,
+	) => void;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTableHeader` and its props and functions instead.
+ */
 export const GidsBasicTableHeaderDom = ({
 	width = 'full',
 	headerCells = [],
@@ -29,6 +63,9 @@ export const GidsBasicTableHeaderDom = ({
 	labelTypography = 'label-medium',
 	textAlignment = 'center',
 	layout = 'horizontal',
+	cellPrimaryActionButtons,
+	cellSecondaryActionButtons,
+	onClickHeaderActionBtn,
 	extraClasses,
 }: GidsBasicTableHeaderDomProps) => {
 	const basicTableHeader = document.createElement('thead');
@@ -40,14 +77,14 @@ export const GidsBasicTableHeaderDom = ({
 	if (headerCells && headerCells.length > 0) {
 		// 1. Map cells to forward global table header styles/props into each row item
 		const mappedHeaderCells: GidsBasicTableRowItem<
-			GidsBasicTableCellTypographyStyle,
+			GidsTableCellTypographyStyle,
 			IconName,
 			IconAppearance
 		>[] = headerCells.map(
 			(
 				cell,
 			): GidsBasicTableRowItem<
-				GidsBasicTableCellTypographyStyle,
+				GidsTableCellTypographyStyle,
 				IconName,
 				IconAppearance
 			> => ({
@@ -64,6 +101,9 @@ export const GidsBasicTableHeaderDom = ({
 			layout,
 			rows: mappedHeaderCells,
 			isHeaderRow: true,
+			cellPrimaryActionButtons,
+			cellSecondaryActionButtons,
+			onClickRowActionBtn: onClickHeaderActionBtn,
 		});
 
 		basicTableHeader.append(rowContent);

package/src/components/GidsBasicTableRow/GidsBasicTableRow.ts

@@ -1,51 +1,105 @@
 import {
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	type GidsBasicTableRowWebProps,
 	GidsBasicTableRowWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { GidsBasicTableCellDom } from '../GidsBasicTableCell/GidsBasicTableCell';
+import {
+	GidsTableCellActionButtonBaseEvent,
+	GidsTableCellDom,
+} from '../GidsTableCell/GidsTableCell.js';
 import {
 	IconAppearance,
 	IconName,
 } from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsBasicTableRowActionButtonEvent } from '@ganpatiinfo/gids-core-shared';
 
 const { getGidsBasicTableRowClassNames } = GidsBasicTableRowWebUtils;
 
+/**
+ * @deprecated
+ * Use `GidsTableRow` and its props and functions instead.
+ */
 type GidsBasicTableRowBaseWebProps = GidsBasicTableRowWebProps<
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	IconName,
 	IconAppearance
 >;
 
+/**
+ * @deprecated
+ * Use `GidsTableRow` and its props and functions instead.
+ */
+export type GidsBasicTableRowActionButtonBaseEvent =
+	GidsBasicTableRowActionButtonEvent<
+		Event,
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>;
+
+/**
+ * @deprecated
+ * Use `GidsTableRow` and its props and functions instead.
+ */
 export interface GidsBasicTableRowDomProps extends GidsBasicTableRowBaseWebProps {
 	extraClasses?: string;
+	onClickRowActionBtn?: (event: GidsBasicTableRowActionButtonBaseEvent) => void;
 }
 
+/**
+ * @deprecated
+ * Use `GidsTableRow` and its props and functions instead.
+ */
 export const GidsBasicTableRowDom = ({
 	width = 'full',
 	layout = 'horizontal',
 	rows,
 	isHeaderRow = false,
+	cellPrimaryActionButtons,
+	cellSecondaryActionButtons,
+	onClickRowActionBtn,
 	extraClasses,
 }: GidsBasicTableRowDomProps): HTMLElement | DocumentFragment => {
 	const rowClassName = getGidsBasicTableRowClassNames({ width }, extraClasses);
 
+	function onCellActionBtnClick({
+		event,
+		cellIndex,
+	}: {
+		event: GidsTableCellActionButtonBaseEvent;
+		cellIndex: number;
+	}) {
+		if (onClickRowActionBtn) {
+			onClickRowActionBtn({
+				...event,
+				details: {
+					...event.details,
+					cellIndex,
+				},
+			});
+		}
+	}
+
 	// 2. Handling Vertical Layout
 	if (layout === 'vertical' && rows && rows.length > 0) {
 		const fragment = document.createDocumentFragment();
 
-		rows.forEach((tableRow) => {
+		rows.forEach((tableRow, indexI) => {
 			// Create a clean, independent <tr> wrapper for each vertical entry
 			const singleRowEl = document.createElement('tr');
 			singleRowEl.className = rowClassName;
 
 			const rowLabel = tableRow?.label;
 			singleRowEl.append(
-				GidsBasicTableCellDom({
+				GidsTableCellDom({
 					...tableRow,
 					width: width,
 					label: rowLabel,
 					isHeaderCell: isHeaderRow,
+					cellPrimaryActionButtons,
+					cellSecondaryActionButtons,
+					onClickCellActionBtn: (event: GidsTableCellActionButtonBaseEvent) =>
+						onCellActionBtnClick({ event, cellIndex: indexI }),
 				}),
 			);
 
@@ -61,15 +115,19 @@ export const GidsBasicTableRowDom = ({
 	basicTableRow.className = rowClassName;
 
 	if (rows && rows.length > 0) {
-		rows.forEach((tableRow) => {
+		rows.forEach((tableRow, indexJ) => {
 			const rowLabel = tableRow?.label;
 
 			basicTableRow.append(
-				GidsBasicTableCellDom({
+				GidsTableCellDom({
 					...tableRow,
 					width: width,
 					label: rowLabel,
 					isHeaderCell: isHeaderRow,
+					cellPrimaryActionButtons,
+					cellSecondaryActionButtons,
+					onClickCellActionBtn: (event: GidsTableCellActionButtonBaseEvent) =>
+						onCellActionBtnClick({ event, cellIndex: indexJ }),
 				}),
 			);
 		});

package/src/components/GidsBsTable/GidsBsTable.ts

@@ -1,5 +1,5 @@
 import {
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	GidsBsTableWebProps,
 	GidsBsTableWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
@@ -9,12 +9,19 @@ import {
 	GidsBasicTableHeadDom,
 	GidsBasicTableHeadDomProps,
 } from '../GidsBasicTableHead/GidsBasicTableHead';
-import { GidsBasicTableHeaderDom } from '../GidsBasicTableHeader/GidsBasicTableHeader';
-import { GidsBasicTableBodyDom } from '../GidsBasicTableBody/GidsBasicTableBody';
+import {
+	GidsBasicTableHeaderActionButtonBaseEvent,
+	GidsBasicTableHeaderDom,
+} from '../GidsBasicTableHeader/GidsBasicTableHeader';
+import {
+	GidsBasicTableBodyActionButtonBaseEvent,
+	GidsBasicTableBodyDom,
+} from '../GidsBasicTableBody/GidsBasicTableBody';
 import {
 	IconAppearance,
 	IconName,
 } from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsBsTableActionButtonEvent } from '@ganpatiinfo/gids-core-shared';
 
 const {
 	getGidsBsTableClassNames,
@@ -23,8 +30,13 @@ const {
 	getBsTableBodyBorder,
 } = GidsBsTableWebUtils;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTable` and its props and functions instead.
+ */
 type GidsBsTableBaseWebProps = GidsBsTableWebProps<
-	GidsBasicTableCellTypographyStyle,
+	GidsTableCellTypographyStyle,
 	IconName,
 	IconAppearance,
 	DomChildren,
@@ -37,10 +49,33 @@ type GidsBsTableBaseWebProps = GidsBsTableWebProps<
 		'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onGidsSearchBarClear'
 	>;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTable` and its props and functions instead.
+ */
+type GidsBsTableActionButtonBaseEvent = GidsBsTableActionButtonEvent<
+	Event,
+	GidsTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsTable` and its props and functions instead.
+ */
 export interface GidsBsTableDomProps extends GidsBsTableBaseWebProps {
 	extraClasses?: string;
+	onClickBsTableActionBtn?: (event: GidsBsTableActionButtonBaseEvent) => void;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsTable` and its props and functions instead.
+ */
 export const GidsBsTableDom = ({
 	// Table properties
 	topHeaderCells = [],
@@ -57,6 +92,11 @@ export const GidsBsTableDom = ({
 	tableBorders = 'none',
 	tableBorderRadius = [],
 	tableBodyMaxHeight = 200,
+	tableBodyPrimaryActionButtons = [],
+	tableBodySecondaryActionButtons = [],
+	topHeaderPrimaryActionButtons = [],
+	topHeaderSecondaryActionButtons = [],
+	onClickBsTableActionBtn,
 	extraClasses,
 
 	// Table Head properties
@@ -104,16 +144,16 @@ export const GidsBsTableDom = ({
 	headAppearance = 'surface-default',
 	...restProps
 }: GidsBsTableDomProps): HTMLDivElement => {
-	const bsTable = document.createElement('div');
-	bsTable.className = getGidsBsTableClassNames<
-		GidsBasicTableCellTypographyStyle,
+	const bsTableDiv = document.createElement('div');
+	bsTableDiv.className = getGidsBsTableClassNames<
+		GidsTableCellTypographyStyle,
 		IconName,
 		IconAppearance
 	>({ width, tableBorders, tableBorderRadius }, extraClasses);
 
 	// Table Head properties
 	if (isHeadVisible) {
-		bsTable.append(
+		bsTableDiv.append(
 			GidsBasicTableHeadDom({
 				actionGroup,
 				allFiltersTabVisible,
@@ -175,22 +215,38 @@ export const GidsBsTableDom = ({
 	}
 
 	// Table properties
-	const table = document.createElement('table');
-	table.className = getBsTableClasses<
-		GidsBasicTableCellTypographyStyle,
+	const bsTable = document.createElement('table');
+	bsTable.className = getBsTableClasses<
+		GidsTableCellTypographyStyle,
 		IconName,
 		IconAppearance
 	>({ width, isHeadVisible });
 
+	function onActionBtnClick(
+		event:
+			| GidsBasicTableHeaderActionButtonBaseEvent
+			| GidsBasicTableBodyActionButtonBaseEvent,
+	) {
+		if (onClickBsTableActionBtn) {
+			onClickBsTableActionBtn({
+				...event,
+				details: {
+					...event.details,
+					columnIndex: event?.details?.cellIndex,
+				},
+			});
+		}
+	}
+
 	if (isTopHeaderVisible && topHeaderCells && topHeaderCells.length > 0) {
 		// Append Table Header
-		table.append(
+		bsTable.append(
 			GidsBasicTableHeaderDom({
 				appearance: topHeaderAppearance,
 				labelTypography: topHeaderLabelTypography,
 				textAlignment: topHeaderTextAlignment,
 				headerCells: getCustomisedTopHeaderCells<
-					GidsBasicTableCellTypographyStyle,
+					GidsTableCellTypographyStyle,
 					IconName,
 					IconAppearance
 				>({
@@ -198,16 +254,19 @@ export const GidsBsTableDom = ({
 					tableBorders,
 				}),
 				width: isHeadVisible ? 'full' : width,
+				cellPrimaryActionButtons: topHeaderPrimaryActionButtons,
+				cellSecondaryActionButtons: topHeaderSecondaryActionButtons,
+				onClickHeaderActionBtn: onActionBtnClick,
 			}),
 		);
 	}
 
 	if (tableBody && tableBody.length > 0) {
-		table.append(
+		bsTable.append(
 			GidsBasicTableBodyDom({
 				width: isHeadVisible ? 'full' : width,
 				tableBorders: getBsTableBodyBorder<
-					GidsBasicTableCellTypographyStyle,
+					GidsTableCellTypographyStyle,
 					IconName,
 					IconAppearance
 				>({ tableBorders }),
@@ -215,13 +274,16 @@ export const GidsBsTableDom = ({
 				rowAppearance,
 				rowLabelTypography,
 				rowTextAlignment,
+				tableBodyCellPrimaryActionButtons: tableBodyPrimaryActionButtons,
+				tableBodyCellSecondaryActionButtons: tableBodySecondaryActionButtons,
+				onClickBodyCellActionBtn: onActionBtnClick,
 			}),
 		);
 	}
 
-	// Structural Append hierarchy: table -> scroll wrapper -> root container
-	tableScrollContainer.appendChild(table);
-	bsTable.appendChild(tableScrollContainer);
+	// Structural Append hierarchy: bsTable -> scroll wrapper -> root container
+	tableScrollContainer.appendChild(bsTable);
+	bsTableDiv.appendChild(tableScrollContainer);
 
-	return bsTable;
+	return bsTableDiv;
 };

package/src/components/GidsChartLegendItem/GidsChartLegendItem.ts

@@ -17,6 +17,7 @@ export interface GidsChartLegendItemDomProps extends GidsChartLegendItemWebProps
 export const GidsChartLegendItemDom = ({
 	children,
 	seriesType = '1',
+	seriesColor,
 	orientation = 'horizontal',
 	extraClasses,
 }: GidsChartLegendItemDomProps): HTMLElement => {
@@ -29,6 +30,7 @@ export const GidsChartLegendItemDom = ({
 	}
 
 	chartLegendItem.seriesType = seriesType;
+	chartLegendItem.seriesColor = seriesColor;
 	chartLegendItem.orientation = orientation;
 
 	chartLegendItem.className = getGidsChartLegendItemClassNames(