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

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(

package/src/components/GidsColorSwatch/GidsColorSwatch.ts

@@ -0,0 +1,107 @@
+import {
+	GidsColorSwatchTypographyStyle,
+	type GidsColorSwatchWebProps,
+	GidsColorSwatchWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const {
+	getGidsColorSwatchClassNames,
+	getGidsColorSwatchPanelClasses,
+	getGidsColorSwatchLabelClasses,
+} = GidsColorSwatchWebUtils;
+
+type GidsColorSwatchBaseWebProps =
+	GidsColorSwatchWebProps<GidsColorSwatchTypographyStyle>;
+
+export interface GidsColorSwatchDomProps extends GidsColorSwatchBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsColorSwatchDom = ({
+	label,
+	labelColor = 'default',
+	labelTypography = 'label-x-small',
+	labelPosition = 'left',
+	swatchColor,
+	swatchSize = 'xs',
+	swatchShape = 'rectangle',
+	swatchShadow = 'none',
+	borderRadius = 'none',
+	applyBorders = false,
+	borderColor = 'input',
+	borderWidth = 'default',
+	extraClasses,
+}: GidsColorSwatchDomProps): HTMLDivElement => {
+	const colorSwatch = document.createElement('div');
+	colorSwatch.className = getGidsColorSwatchClassNames(
+		{ labelPosition },
+		extraClasses,
+	);
+
+	colorSwatch.setAttribute('swatch-shape', swatchShape);
+	if (swatchColor) {
+		colorSwatch.setAttribute('swatch-color', swatchColor);
+	}
+	colorSwatch.setAttribute('swatch-shadow', swatchShadow);
+	colorSwatch.setAttribute('swatch-size', swatchSize);
+	colorSwatch.setAttribute('border-radius', borderRadius);
+	colorSwatch.setAttribute('border-color', borderColor);
+	colorSwatch.setAttribute('label-color', labelColor);
+
+	if (applyBorders) {
+		colorSwatch.setAttribute('apply-borders', 'true');
+	} else {
+		colorSwatch.removeAttribute('apply-borders');
+	}
+
+	const spanLabel = document.createElement('span');
+	spanLabel.className = getGidsColorSwatchLabelClasses({
+		labelTypography,
+	});
+	spanLabel.style.color =
+		labelColor === 'swatch-color'
+			? `${swatchColor}`
+			: `var(--gids-color-text-default)`;
+
+	if (
+		label &&
+		label !== '' &&
+		(labelPosition === 'top' || labelPosition === 'left')
+	) {
+		spanLabel.textContent = label;
+		colorSwatch.appendChild(spanLabel);
+	}
+
+	if (swatchColor && swatchColor !== '') {
+		const colorSwatchPanel = document.createElement('div');
+		colorSwatchPanel.className = getGidsColorSwatchPanelClasses({
+			swatchShape,
+			swatchSize,
+			applyPanelClass: true,
+		});
+
+		colorSwatchPanel.style.backgroundColor = `${swatchColor}`;
+		if (applyBorders) {
+			colorSwatchPanel.style.border = `var(--gids-border-width-${borderWidth}) solid var(--gids-color-border-${borderColor})`;
+		}
+		if (swatchShadow !== 'none') {
+			colorSwatchPanel.style.boxShadow = `var(--gids-elevation-${swatchShadow})`;
+		}
+		if (swatchShape === 'rectangle' || swatchShape === 'square') {
+			colorSwatchPanel.style.borderRadius = `var(--gids-border-radius-${borderRadius})`;
+		}
+
+		colorSwatch.appendChild(colorSwatchPanel);
+	}
+
+	if (
+		label &&
+		label !== '' &&
+		(labelPosition === 'bottom' || labelPosition === 'right')
+	) {
+		spanLabel.textContent = label;
+		colorSwatch.appendChild(spanLabel);
+	}
+
+	return colorSwatch;
+};