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

package/src/components/GidsCrossTableRow/GidsCrossTableRow.ts

@@ -0,0 +1,230 @@
+import {
+	GidsCrossTableRowWebProps,
+	GidsTableEntryTypographyStyle,
+	GidsCrossTableRowWebUtils,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { DomChildren, appendAsChildren } from '../../utils/domUtils';
+import {
+	GidsTableEntryActionBaseEvent,
+	GidsTableEntryDom,
+} from '../GidsTableEntry/GidsTableEntry';
+import { GidsCrossTableRowActionEvent } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsCrossTableRowClassNames } = GidsCrossTableRowWebUtils;
+
+type GidsCrossTableRowBaseWebProps = GidsCrossTableRowWebProps<
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance,
+	DomChildren
+>;
+export type GidsCrossTableRowActionBaseEvent = GidsCrossTableRowActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsCrossTableRowDomProps extends GidsCrossTableRowBaseWebProps {
+	extraClasses?: string;
+	onCrossTableRowAction?: (event: GidsCrossTableRowActionBaseEvent) => void;
+}
+
+export const GidsCrossTableRowDom = ({
+	rows = [],
+	crossHeaderItem,
+	crossHeaderSettings,
+	onCrossTableRowAction,
+	textAlignment = 'center',
+	appearance = 'none',
+	labelTypography = 'label-medium',
+	entryAlignment = 'center',
+	colorSwatchLabelColor = 'default',
+	colorSwatchLabelPosition = 'left',
+	colorSwatchLabelTypography = 'label-medium',
+	colorSwatchSize = 'sm',
+	colorSwatchShape = 'oval',
+	colorSwatchShadow = 'shadow-overlay',
+	colorSwatchBorderRadius = 'none',
+	colorSwatchApplyBorders = true,
+	colorSwatchBorderWidth = 'thick',
+	progressBarSize = 'sm',
+	progressBarEndCap = true,
+	avatarSize = 'sm',
+	avatarGroupAppearance,
+	avatarGroupLayout,
+	statusTagAppearance = 'subtle',
+	statusTagSize = 'sm',
+	progressBarContainerMinWidth = 200,
+	displayTagsOrientation = 'horizontal',
+	statusTagsOrientation = 'horizontal',
+	progressBarsOrientation = 'horizontal',
+	colorSwatchesOrientation = 'horizontal',
+	badgesOrientation = 'horizontal',
+	actionsBackgroundColor,
+	actionsContentColor,
+	backgroundColor,
+	contentColor,
+	children,
+	extraClasses,
+}: GidsCrossTableRowDomProps): HTMLTableRowElement => {
+	const crossTableRow = document.createElement('tr');
+	crossTableRow.className = getGidsCrossTableRowClassNames(extraClasses);
+
+	if (isValidChildren<DomChildren>(children)) {
+		appendAsChildren(crossTableRow, children);
+
+		return crossTableRow;
+	}
+
+	function onEntryActionBtnClick({
+		event,
+		entryIndex,
+	}: {
+		event: GidsTableEntryActionBaseEvent;
+		entryIndex: number;
+	}) {
+		if (onCrossTableRowAction) {
+			onCrossTableRowAction({
+				...event,
+				details: {
+					...event.details,
+					entryIndex,
+				},
+			});
+		}
+	}
+
+	/*
+	 * Cross Header
+	 *
+	 * IMPORTANT:
+	 * Cross header settings are completely independent
+	 * from the body row settings.
+	 */
+	if (crossHeaderItem && Object.keys(crossHeaderItem).length > 0) {
+		crossTableRow.append(
+			GidsTableEntryDom({
+				...crossHeaderItem,
+				...crossHeaderSettings,
+				label: crossHeaderItem?.label,
+				entryType: 'header',
+				/*
+				 * Cross header uses its own settings first.
+				 */
+				leadingActions: crossHeaderItem?.leadingActions ?? [],
+				trailingActions: crossHeaderItem?.trailingActions ?? [],
+				entryAlignment: crossHeaderSettings?.entryAlignment ?? 'center',
+				colorSwatchLabelColor:
+					crossHeaderSettings?.colorSwatchLabelColor ?? 'default',
+				colorSwatchLabelPosition:
+					crossHeaderSettings?.colorSwatchLabelPosition ?? 'left',
+				colorSwatchLabelTypography:
+					crossHeaderSettings?.colorSwatchLabelTypography ?? 'label-medium',
+				colorSwatchSize: crossHeaderSettings?.colorSwatchSize ?? 'sm',
+				colorSwatchShape: crossHeaderSettings?.colorSwatchShape ?? 'oval',
+				colorSwatchShadow:
+					crossHeaderSettings?.colorSwatchShadow ?? 'shadow-overlay',
+				colorSwatchBorderRadius:
+					crossHeaderSettings?.colorSwatchBorderRadius ?? 'none',
+				colorSwatchApplyBorders:
+					crossHeaderSettings?.colorSwatchApplyBorders ?? true,
+				colorSwatchBorderWidth:
+					crossHeaderSettings?.colorSwatchBorderWidth ?? 'thick',
+				progressBarSize: crossHeaderSettings?.progressBarSize ?? 'sm',
+				progressBarEndCap: crossHeaderSettings?.progressBarEndCap ?? true,
+				avatarSize: crossHeaderSettings?.avatarSize ?? 'sm',
+				avatarGroupAppearance:
+					crossHeaderSettings?.avatarGroupAppearance ?? 'spread',
+				avatarGroupLayout: crossHeaderSettings?.avatarGroupLayout ?? 'wrap',
+				statusTagAppearance:
+					crossHeaderSettings?.statusTagAppearance ?? 'subtle',
+				statusTagSize: crossHeaderSettings?.statusTagSize ?? 'sm',
+				progressBarContainerMinWidth:
+					crossHeaderSettings?.progressBarContainerMinWidth ?? 200,
+				displayTagsOrientation:
+					crossHeaderSettings?.displayTagsOrientation ?? 'horizontal',
+				statusTagsOrientation:
+					crossHeaderSettings?.statusTagsOrientation ?? 'horizontal',
+				progressBarsOrientation:
+					crossHeaderSettings?.progressBarsOrientation ?? 'horizontal',
+				colorSwatchesOrientation:
+					crossHeaderSettings?.colorSwatchesOrientation ?? 'horizontal',
+				badgesOrientation:
+					crossHeaderSettings?.badgesOrientation ?? 'horizontal',
+				textAlignment: crossHeaderSettings?.textAlignment ?? 'center',
+				labelTypography: crossHeaderSettings?.labelTypography ?? 'label-medium',
+				appearance: crossHeaderSettings?.appearance ?? 'none',
+				/*
+				 * Most importantly, colors come from crossHeaderSettings,
+				 * never from the body row.
+				 */
+				onEntryAction: (event: GidsTableEntryActionBaseEvent) =>
+					onEntryActionBtnClick({
+						event,
+						entryIndex: -1,
+					}),
+			}),
+		);
+	}
+
+	/*
+	 * Body Cells
+	 *
+	 * These continue using the normal row settings.
+	 */
+	if (rows && rows.length > 0) {
+		rows.forEach((row, index) => {
+			crossTableRow.append(
+				GidsTableEntryDom({
+					...row,
+					entryType: 'body',
+					leadingActions: row?.leadingActions ?? [],
+					trailingActions: row?.trailingActions ?? [],
+					entryAlignment,
+					colorSwatchLabelColor,
+					colorSwatchLabelPosition,
+					colorSwatchLabelTypography,
+					colorSwatchSize,
+					colorSwatchShape,
+					colorSwatchShadow,
+					colorSwatchBorderRadius,
+					colorSwatchApplyBorders,
+					colorSwatchBorderWidth,
+					progressBarSize,
+					progressBarEndCap,
+					avatarSize,
+					avatarGroupAppearance,
+					avatarGroupLayout,
+					statusTagAppearance,
+					statusTagSize,
+					progressBarContainerMinWidth,
+					displayTagsOrientation,
+					statusTagsOrientation,
+					progressBarsOrientation,
+					colorSwatchesOrientation,
+					badgesOrientation,
+					textAlignment,
+					labelTypography,
+					appearance,
+					backgroundColor,
+					contentColor,
+					actionsBackgroundColor,
+					actionsContentColor,
+					onEntryAction: (event: GidsTableEntryActionBaseEvent) =>
+						onEntryActionBtnClick({
+							event,
+							entryIndex: index,
+						}),
+				}),
+			);
+		});
+	}
+
+	return crossTableRow;
+};

package/src/components/GidsDialog/GidsDialog.ts

@@ -0,0 +1,161 @@
+import {
+	GidsDialogWebUtils,
+	type GidsDialogWebProps,
+} from '@ganpatiinfo/gids-web-shared';
+import { DomNodeOrString } from '../../utils/domUtils.js';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsDialogControlDom } from '../_GidsDialogControl/GidsDialogControl.js';
+import { GidsDialogControlCloseEvent } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsDialogClassNames } = GidsDialogWebUtils;
+
+type GidsDialogBaseWebProps = GidsDialogWebProps<
+	DomNodeOrString,
+	Event,
+	IconName,
+	IconAppearance
+>;
+
+// 1. Create a custom type that represents your modified element
+export type GidsDialogCustomElement = HTMLDialogElement & {
+	element: HTMLDialogElement;
+	open: (parent?: HTMLElement) => void;
+	close: () => void;
+};
+
+export type GidsDialogDomProps = GidsDialogBaseWebProps;
+
+export const GidsDialogDom = ({
+	variant = 'alert',
+	maxWidth = 'sm',
+	scrollMode = 'paper',
+	draggable = false,
+	headerTitle,
+	closeVisible = true,
+	children,
+	footerActions = [],
+	headerDividerVisible = false,
+	footerDividerVisible = false,
+	transition = 'none',
+	cancellable,
+	onCloseDialog,
+	onDialogFooterAction,
+}: GidsDialogDomProps): GidsDialogCustomElement => {
+	const nativeClose = HTMLDialogElement.prototype.close;
+
+	function executeClose(event: GidsDialogControlCloseEvent<Event>) {
+		if (onCloseDialog) {
+			onCloseDialog({ originalEvent: event?.originalEvent });
+		}
+		dialog.close();
+	}
+
+	// 1. Generate the pristine native dialog instance directly from the control function
+	const dialog = GidsDialogControlDom({
+		variant,
+		maxWidth,
+		scrollMode,
+		draggable,
+		headerTitle,
+		closeVisible,
+		children,
+		footerActions,
+		headerDividerVisible,
+		footerDividerVisible,
+		onCloseDialogControl: executeClose,
+		onDialogControlFooterAction: onDialogFooterAction,
+	}) as unknown as GidsDialogCustomElement;
+
+	// 2. CRITICAL BODY SCROLL PROTECTION: Inject layout protections inline immediately
+	if (scrollMode === 'body') {
+		dialog.style.setProperty('position', 'absolute', 'important');
+		dialog.style.setProperty('max-height', 'none', 'important');
+		dialog.style.setProperty('overflow', 'visible', 'important');
+	}
+
+	// 3. RESTORED: Backdrop-only click cancellation logic for DOM target implementation
+	if (cancellable) {
+		dialog.addEventListener('click', (event: MouseEvent) => {
+			if (event.target === dialog) {
+				const rect = dialog.getBoundingClientRect();
+				const isOutside =
+					event.clientX < rect.left ||
+					event.clientX > rect.right ||
+					event.clientY < rect.top ||
+					event.clientY > rect.bottom;
+
+				if (isOutside) {
+					executeClose({ originalEvent: event });
+				}
+			}
+		});
+	}
+
+	dialog.element = dialog as unknown as HTMLDialogElement;
+
+	// 4. Overwrite orchestration controllers cleanly via Object.defineProperty
+	Object.defineProperty(dialog, 'open', {
+		value: (parent: HTMLElement = document.body) => {
+			// Append the node directly to the DOM tree first
+			if (!dialog.isConnected) {
+				parent.appendChild(dialog);
+			}
+
+			if (scrollMode === 'body') {
+				document.body.style.overflow = 'hidden';
+			}
+
+			// Add base classes and transition modifiers ONLY when open() runs to stop the jumping bug
+			dialog.classList.add('gids-dialog');
+
+			const transitionClasses = getGidsDialogClassNames({ transition });
+			if (transitionClasses) {
+				transitionClasses.split(' ').forEach((className) => {
+					if (className.trim()) {
+						dialog.classList.add(className.trim());
+					}
+				});
+			}
+
+			// Force a quick layout reflow to initialize your animation coordinates perfectly
+			void dialog.offsetHeight;
+
+			// Open modal cleanly on the top layer
+			dialog.showModal();
+		},
+		writable: true,
+		configurable: true,
+	});
+
+	Object.defineProperty(dialog, 'close', {
+		value: () => {
+			if (scrollMode === 'body') {
+				document.body.style.overflow = '';
+			}
+
+			// Clean up all added classes on close so they completely reset for the next run
+			dialog.classList.remove('gids-dialog');
+			const transitionClasses = getGidsDialogClassNames({ transition });
+			if (transitionClasses) {
+				transitionClasses.split(' ').forEach((className) => {
+					if (className.trim()) {
+						dialog.classList.remove(className.trim());
+					}
+				});
+			}
+
+			nativeClose.call(dialog);
+
+			if (dialog.isConnected) {
+				dialog.remove();
+			}
+		},
+		writable: true,
+		configurable: true,
+	});
+
+	return dialog;
+};

package/src/components/GidsMatrixTable/GidsMatrixTable.ts

@@ -0,0 +1,187 @@
+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;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
+type GidsMatrixTableBaseWebProps = GidsMatrixTableWebProps<
+	GidsTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
+type GidsMatrixTableActionButtonBaseEvent =
+	GidsMatrixTableBodyActionButtonEvent<
+		Event,
+		GidsTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
+export interface GidsMatrixTableDomProps extends GidsMatrixTableBaseWebProps {
+	extraClasses?: string;
+	onClickMatrixTableActionBtn?: (
+		event: GidsMatrixTableActionButtonBaseEvent,
+	) => void;
+}
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
+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;
+};