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

package/src/components/GidsCrossTable/GidsCrossTable.ts

@@ -0,0 +1,259 @@
+import {
+	GidsCrossTableActionEvent,
+	GidsCrossTableToolbarSettings,
+	GidsInputStatus,
+} from '@ganpatiinfo/gids-core-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import { HtmlInputAttributes } from '../GidsInput/GidsInput';
+import {
+	GidsTableToolbarDom,
+	GidsTableToolbarDomProps,
+} from '../GidsTableToolbar/GidsTableToolbar';
+import {
+	GidsCrossTableWebProps,
+	GidsCrossTableWebUtils,
+	GidsTableEntryTypographyStyle,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import {
+	GidsTableHeaderActionBaseEvent,
+	GidsTableHeaderDom,
+} from '../GidsTableHeader/GidsTableHeader';
+import {
+	GidsCrossTableBodyActionBaseEvent,
+	GidsCrossTableBodyDom,
+} from '../GidsCrossTableBody/GidsCrossTableBody';
+import { GidsTableFooterDom } from '../GidsTableFooter/GidsTableFooter';
+import { GidsTableFooterControlDom } from '../GidsTableFooterControl/GidsTableFooterControl';
+
+const {
+	getGidsCrossTableClassNames,
+	getCustomisedCrossTableHeaderEntries,
+	getCustomisedCrossTableFooterEntries,
+	getCrossTableBodyBorder,
+} = GidsCrossTableWebUtils;
+
+export type GidsCrossTableToolbarBaseSettings = GidsCrossTableToolbarSettings<
+	DomChildren,
+	Event,
+	Element,
+	HtmlInputAttributes,
+	GidsInputStatus
+> &
+	Pick<
+		GidsTableToolbarDomProps,
+		'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onGidsSearchBarClear'
+	>;
+
+type GidsCrossTableBaseWebProps = Omit<
+	GidsCrossTableWebProps<
+		DomChildren,
+		GidsTableEntryTypographyStyle,
+		IconName,
+		IconAppearance,
+		DomChildren,
+		Event,
+		Element,
+		HtmlInputAttributes
+	>,
+	'toolbarSettings'
+> & {
+	toolbarSettings?: GidsCrossTableToolbarBaseSettings;
+};
+
+type GidsCrossTableActionBaseEvent = GidsCrossTableActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsCrossTableDomProps extends GidsCrossTableBaseWebProps {
+	extraClasses?: string;
+	onCrossTableAction?: (event: GidsCrossTableActionBaseEvent) => void;
+}
+
+export const GidsCrossTableDom = ({
+	toolbar,
+	toolbarChildren,
+	children,
+	headerItems = [],
+	bodyContent = [],
+	isHeaderVisible,
+	isToolbarVisible,
+	bodySettings,
+	toolbarSettings,
+	headerSettings,
+	tableBorders,
+	tableBorderRadius,
+	tableBodyMaxHeight = 200,
+	horizontalScroll = false,
+	crossHeaderSettings,
+	onCrossTableAction,
+	footerItems = [],
+	footerSettings,
+	isFooterVisible = false,
+	isFooterControlVisible = false,
+	footerControlSettings,
+	footerControl,
+	extraClasses,
+}: GidsCrossTableDomProps): HTMLDivElement => {
+	/*
+	 * Cross Table Root
+	 */
+	const crossTableDiv = document.createElement('div');
+	crossTableDiv.className = getGidsCrossTableClassNames(
+		{ tableBorders, tableBorderRadius },
+		extraClasses,
+	);
+
+	/*
+	 * Toolbar
+	 */
+	if (isValidChildren<DomChildren>(toolbar)) {
+		appendAsChildren(crossTableDiv, toolbar);
+	} else if (isToolbarVisible) {
+		const tableToolbar = GidsTableToolbarDom({
+			...toolbarSettings,
+			children: toolbarChildren as Element,
+		});
+
+		crossTableDiv.append(tableToolbar);
+	}
+
+	/*
+	 * Scroll Container
+	 */
+	const tableScrollContainer = document.createElement('div');
+	tableScrollContainer.className = [
+		'gids-cross-table__scroll-container',
+		horizontalScroll
+			? 'gids-cross-table__scroll-container--horizontal-scroll'
+			: '',
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	if (tableBodyMaxHeight) {
+		tableScrollContainer.style.maxHeight = `${tableBodyMaxHeight}px`;
+	}
+
+	/*
+	 * Cross Table
+	 */
+	const crossTable = document.createElement('table');
+	crossTable.className = 'gids-cross-table__main-table';
+
+	/*
+	 * Horizontal scroll is enabled:
+	 *
+	 * The table is allowed to become wider than the viewport.
+	 *
+	 * Horizontal scroll is disabled:
+	 *
+	 * The table stays 100% wide and cells wrap exactly like GidsTable.
+	 */
+	if (horizontalScroll) {
+		crossTable.classList.add('gids-cross-table__main-table--horizontal-scroll');
+	}
+
+	/*
+	 * Custom Children
+	 */
+	if (isValidChildren(children)) {
+		appendAsChildren(crossTable, children);
+	} else {
+		function onActionBtnClick(
+			event: GidsTableHeaderActionBaseEvent | GidsCrossTableBodyActionBaseEvent,
+		) {
+			if (onCrossTableAction) {
+				onCrossTableAction({
+					...event,
+					details: {
+						...event.details,
+						columnIndex: event?.details?.entryIndex,
+					},
+				});
+			}
+		}
+
+		/*
+		 * Header
+		 */
+		if (isHeaderVisible && headerItems && headerItems.length > 0) {
+			const crossTableHeader = GidsTableHeaderDom({
+				...headerSettings,
+				headerItems: getCustomisedCrossTableHeaderEntries({
+					headerItems: [{}, ...headerItems],
+					tableBorders,
+				}),
+				onHeaderAction: onActionBtnClick,
+			});
+
+			crossTable.append(crossTableHeader);
+		}
+
+		/*
+		 * Body
+		 */
+		if (bodyContent && bodyContent.length > 0) {
+			crossTable.append(
+				GidsCrossTableBodyDom({
+					bodyBorder: getCrossTableBodyBorder({
+						tableBorders,
+					}),
+					bodyContent,
+					bodySettings,
+					crossHeaderSettings,
+					onCrossTableBodyAction: onActionBtnClick,
+				}),
+			);
+		}
+
+		/*
+		 * Footer
+		 */
+		if (isFooterVisible && footerItems && footerItems.length > 0) {
+			const crossTableFooter = GidsTableFooterDom({
+				...footerSettings,
+				footerItems: getCustomisedCrossTableFooterEntries({
+					footerItems: [{}, ...footerItems],
+					tableBorders,
+				}),
+				onFooterAction: onActionBtnClick,
+			});
+
+			crossTable.append(crossTableFooter);
+		}
+	}
+
+	/*
+	 * Put cross table inside scroll container
+	 */
+	tableScrollContainer.appendChild(crossTable);
+
+	/*
+	 * Put scroll container inside Cross Table div
+	 */
+	crossTableDiv.appendChild(tableScrollContainer);
+
+	/*
+	 * Footer Control
+	 */
+	if (isFooterControlVisible || isValidChildren(footerControl)) {
+		crossTableDiv.append(
+			GidsTableFooterControlDom({
+				...footerControlSettings,
+				tableViewControllerSettings:
+					footerControlSettings?.tableViewControllerSettings,
+				children: footerControl,
+			}),
+		);
+	}
+
+	return crossTableDiv;
+};

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