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

package/src/components/GidsCrossTableBody/GidsCrossTableBody.ts

@@ -0,0 +1,171 @@
+import { GidsCrossTableBodyActionEvent } from '@ganpatiinfo/gids-core-shared';
+import {
+	GidsCrossTableBodyWebProps,
+	GidsCrossTableBodyWebUtils,
+	GidsTableEntryTypographyStyle,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import {
+	GidsCrossTableRowActionBaseEvent,
+	GidsCrossTableRowDom,
+} from '../GidsCrossTableRow/GidsCrossTableRow';
+
+const {
+	getGidsCrossTableBodyClassNames,
+	getConstructedCrossTableBodyContent,
+	getCrossTableBodyRowEntryBackgroundColor,
+	getCrossTableBodyRowEntryContentColor,
+	getCrossTableBodyRowEntryActionsBackgroundColor,
+	getCrossTableBodyRowEntryActionsContentColor,
+} = GidsCrossTableBodyWebUtils;
+
+type GidsCrossTableBodyBaseWebProps = GidsCrossTableBodyWebProps<
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance,
+	DomChildren
+>;
+
+export type GidsCrossTableBodyActionBaseEvent = GidsCrossTableBodyActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsCrossTableBodyDomProps extends GidsCrossTableBodyBaseWebProps {
+	extraClasses?: string;
+	onCrossTableBodyAction?: (event: GidsCrossTableBodyActionBaseEvent) => void;
+}
+
+export const GidsCrossTableBodyDom = ({
+	bodySettings,
+	bodyContent = [],
+	bodyBorder = 'none',
+	crossHeaderSettings,
+	children,
+	onCrossTableBodyAction,
+	extraClasses,
+}: GidsCrossTableBodyDomProps): HTMLElement => {
+	const crossTableBody = document.createElement('tbody');
+
+	crossTableBody.className = getGidsCrossTableBodyClassNames(extraClasses);
+
+	if (isValidChildren<DomChildren>(children)) {
+		appendAsChildren(crossTableBody, children);
+
+		return crossTableBody;
+	}
+
+	if (bodyContent && bodyContent.length > 0) {
+		const constructedCrossTableBodyContent =
+			getConstructedCrossTableBodyContent({
+				bodyContent,
+				bodyBorder,
+			});
+
+		function onCrossTableRowActionBtnClick({
+			event,
+			rowIndex,
+		}: {
+			event: GidsCrossTableRowActionBaseEvent;
+			rowIndex: number;
+		}) {
+			if (onCrossTableBodyAction) {
+				onCrossTableBodyAction({
+					...event,
+					details: {
+						...event.details,
+						rowIndex,
+					},
+				});
+			}
+		}
+
+		constructedCrossTableBodyContent.forEach(
+			(constructedCrossTableBody, indexI) => {
+				const constructedBodyRowItems =
+					constructedCrossTableBody?.rowItems ?? [];
+
+				const rowBgColor = getCrossTableBodyRowEntryBackgroundColor<
+					GidsTableEntryTypographyStyle,
+					IconName,
+					IconAppearance
+				>({
+					bodySettings,
+					rowIndex: indexI,
+				});
+
+				const rowContentColor = getCrossTableBodyRowEntryContentColor<
+					GidsTableEntryTypographyStyle,
+					IconName,
+					IconAppearance
+				>({
+					bodySettings,
+					rowIndex: indexI,
+				});
+
+				const rowActionsBgColor =
+					getCrossTableBodyRowEntryActionsBackgroundColor<
+						GidsTableEntryTypographyStyle,
+						IconName,
+						IconAppearance
+					>({
+						bodySettings,
+						rowIndex: indexI,
+					});
+
+				const rowActionsContentColor =
+					getCrossTableBodyRowEntryActionsContentColor<
+						GidsTableEntryTypographyStyle,
+						IconName,
+						IconAppearance
+					>({
+						bodySettings,
+						rowIndex: indexI,
+					});
+
+				crossTableBody.append(
+					GidsCrossTableRowDom({
+						...bodySettings,
+
+						rows: constructedBodyRowItems,
+						/*
+						 * Cross Header
+						 *
+						 * sideHeaderItem = actual content
+						 * for this specific row.
+						 */
+						crossHeaderItem: constructedCrossTableBody?.crossHeaderItem,
+						/*
+						 * Cross Header Settings
+						 *
+						 * Shared configuration/style for
+						 * all side-header cells.
+						 */
+						crossHeaderSettings,
+						/*
+						 * Body row styling
+						 */
+						backgroundColor: rowBgColor,
+						contentColor: rowContentColor,
+						actionsBackgroundColor: rowActionsBgColor,
+						actionsContentColor: rowActionsContentColor,
+						onCrossTableRowAction: (event: GidsCrossTableRowActionBaseEvent) =>
+							onCrossTableRowActionBtnClick({
+								event,
+								rowIndex: indexI,
+							}),
+					}),
+				);
+			},
+		);
+	}
+
+	return crossTableBody;
+};

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

@@ -21,12 +21,22 @@ const {
 	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,
@@ -35,6 +45,11 @@ type GidsMatrixTableActionButtonBaseEvent =
 		IconAppearance
 	>;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
 export interface GidsMatrixTableDomProps extends GidsMatrixTableBaseWebProps {
 	extraClasses?: string;
 	onClickMatrixTableActionBtn?: (
@@ -42,6 +57,11 @@ export interface GidsMatrixTableDomProps extends GidsMatrixTableBaseWebProps {
 	) => void;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
 export const GidsMatrixTableDom = ({
 	topHeaderCells = [],
 	tableBodyItems = [],

package/src/components/GidsMatrixTableBody/GidsMatrixTableBody.ts

@@ -20,11 +20,22 @@ import {
 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,
@@ -33,6 +44,11 @@ export type GidsMatrixTableBodyActionButtonBaseEvent =
 		IconAppearance
 	>;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
 export interface GidsMatrixTableBodyDomProps extends GidsMatrixTableBodyBaseWebProps {
 	extraClasses?: string;
 	onClickMatrixBodyCellActionBtn?: (
@@ -40,6 +56,11 @@ export interface GidsMatrixTableBodyDomProps extends GidsMatrixTableBodyBaseWebP
 	) => void;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
 export const GidsMatrixTableBodyDom = ({
 	width = 'full',
 	tableBodyItems = [],

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';