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

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

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