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

package/src/components/GidsTableEntry/GidsTableEntry.ts

@@ -0,0 +1,515 @@
+import {
+	GidsTableEntryTypographyStyle,
+	GidsTableEntryWebProps,
+	GidsTableEntryWebUtils,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsDisplayTagDom } from '../GidsDisplayTag/GidsDisplayTag';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import {
+	GetTableEntryButtonIconNeedType,
+	GidsTableEntryActionEvent,
+	GidsTableEntryActionsSharedDataTypes,
+	GidsTableEntryCommonUtils,
+	GidsTableEntryActionsPositionSharedDataType,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsButtonDom } from '../GidsButton/GidsButton.js';
+import { GidsAvatarGroupDom } from '../GidsAvatarGroup/GidsAvatarGroup';
+import { GidsAvatarDom } from '../GidsAvatar/GidsAvatar';
+import { GidsProgressBarDom } from '../GidsProgressBar/GidsProgressBar';
+import { GidsStatusTagDom } from '../GidsStatusTag/GidsStatusTag';
+import { GidsBadgeDom } from '../GidsBadge/GidsBadge';
+import { GidsColorSwatchDom } from '../GidsColorSwatch/GidsColorSwatch';
+
+const {
+	getGidsTableEntryClassNames,
+	getGidsTableEntryLabelTypographyClass,
+	getTableEntryAlignment,
+} = GidsTableEntryWebUtils;
+const { isTableEntryActionButtonVisible, getTableEntryActionBtnIcon } =
+	GidsTableEntryCommonUtils;
+
+type GidsTableEntryBaseWebProps = GidsTableEntryWebProps<
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance,
+	DomChildren
+>;
+export type GidsTableEntryActionBaseEvent = GidsTableEntryActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsTableEntryDomProps extends GidsTableEntryBaseWebProps {
+	extraClasses?: string;
+	onEntryAction?: (event: GidsTableEntryActionBaseEvent) => void;
+}
+
+export const GidsTableEntryDom = ({
+	id,
+	uniqueKey,
+	extraData,
+	colSpan,
+	label,
+	entryDataTypes = ['text'],
+	displayTags = [],
+	statusTags = [],
+	badges = [],
+	avatars = [],
+	colorSwatches = [],
+	progressBars = [],
+	borderSides = [],
+	borderRadiusSides = [],
+	appearance = 'none',
+	textAlignment = 'center',
+	entryAlignment = 'center',
+	labelTypography = 'label-medium',
+	entryType = 'body',
+	leadingActions = [],
+	trailingActions = [],
+	onEntryAction,
+	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',
+	children,
+	backgroundColor,
+	contentColor,
+	actionsBackgroundColor,
+	actionsContentColor,
+	extraClasses,
+}: GidsTableEntryDomProps): HTMLTableCellElement => {
+	let entryTag = 'td';
+	if (entryType === 'header') {
+		entryTag = 'th';
+	} else if (entryType === 'footer') {
+		entryTag = 'td';
+	}
+
+	const tableEntry = document.createElement(entryTag) as HTMLTableCellElement;
+	tableEntry.className = getGidsTableEntryClassNames(
+		{
+			borderSides,
+			borderRadiusSides,
+			appearance,
+			textAlignment,
+			backgroundColor,
+		},
+		extraClasses,
+	);
+	if (backgroundColor && backgroundColor !== '') {
+		tableEntry.style.backgroundColor = backgroundColor;
+	}
+	if (contentColor && contentColor !== '') {
+		tableEntry.style.color = contentColor;
+		tableEntry.style.setProperty('--gidsIcon-color', contentColor);
+		tableEntry.style.setProperty(
+			'--gidsButton-color-default-text',
+			contentColor,
+		);
+		tableEntry.style.setProperty('--gidsButton-color-icon', contentColor);
+	}
+	if (actionsBackgroundColor && actionsBackgroundColor !== '') {
+		tableEntry.style.setProperty(
+			'--gidsButton-color-default-bg',
+			actionsBackgroundColor,
+		);
+		tableEntry.style.setProperty(
+			'--gidsButton-color-primary-bg',
+			actionsBackgroundColor,
+		);
+		tableEntry.style.setProperty(
+			'--gidsButton-color-subtle-bg',
+			actionsBackgroundColor,
+		);
+	}
+	if (actionsContentColor && contentColor !== '') {
+		tableEntry.style.setProperty(
+			'--gidsButton-color-default-text',
+			actionsContentColor,
+		);
+		tableEntry.style.setProperty(
+			'--gidsButton-color-icon',
+			actionsContentColor,
+		);
+	}
+
+	if (colSpan && colSpan > 0) {
+		tableEntry.colSpan = colSpan;
+	}
+
+	if (id) {
+		tableEntry.setAttribute('id', id);
+	}
+
+	if (uniqueKey) {
+		tableEntry.setAttribute('unique-key', uniqueKey);
+	}
+
+	if (extraData) {
+		tableEntry.setAttribute('extra-data', JSON.stringify(extraData));
+	}
+
+	if (isValidChildren<DomChildren | undefined>(children)) {
+		appendAsChildren(tableEntry, children);
+	} else {
+		const entryContainer = document.createElement('div');
+		entryContainer.className = getTableEntryAlignment({ entryAlignment });
+
+		function makeEntryActionBtnIcon({
+			entryActionBtn,
+			neededIconType = 'leading',
+		}: {
+			entryActionBtn?: GidsTableEntryActionsSharedDataTypes<
+				IconName,
+				IconAppearance
+			>;
+			neededIconType?: GetTableEntryButtonIconNeedType;
+		}) {
+			const tableEntryBtnIcon = getTableEntryActionBtnIcon<
+				IconName,
+				IconAppearance
+			>({
+				entryActionButton: entryActionBtn,
+				neededIconType,
+			});
+
+			return tableEntryBtnIcon?.entryIconName &&
+				tableEntryBtnIcon.entryIconName.toString() !== ''
+				? GidsIconDom({
+						name: tableEntryBtnIcon.entryIconName,
+						size: tableEntryBtnIcon.entryIconSize,
+						appearance: tableEntryBtnIcon.entryIconAppearance,
+					})
+				: undefined;
+		}
+
+		function onActionBtnClick({
+			event,
+			actionIndex,
+			actionPosition,
+		}: {
+			event: Event;
+			actionIndex: number;
+			actionPosition: GidsTableEntryActionsPositionSharedDataType;
+		}) {
+			if (onEntryAction) {
+				onEntryAction({
+					originalEvent: event,
+					details: {
+						appearance,
+						entryDataTypes,
+						displayTags,
+						statusTags,
+						colorSwatches,
+						progressBars,
+						badges,
+						avatars,
+						label,
+						id,
+						extraData,
+						entryType,
+						uniqueKey,
+						actionNumber: `action-btn-${actionIndex + 1}`,
+						actionIndex: actionIndex,
+						actionPosition: actionPosition ?? 'trailing',
+					},
+				});
+			}
+		}
+
+		function makeEntryActionButton({
+			entryActionBtn,
+			actionIndex,
+			actionPosition,
+		}: {
+			entryActionBtn?: GidsTableEntryActionsSharedDataTypes<
+				IconName,
+				IconAppearance
+			>;
+			actionIndex: number;
+			actionPosition: GidsTableEntryActionsPositionSharedDataType;
+		}) {
+			return GidsButtonDom({
+				as: 'button',
+				appearance: entryActionBtn?.appearance ?? 'default',
+				size: entryActionBtn?.size ?? 'md',
+				disabled: entryActionBtn?.disabled,
+				destructive: entryActionBtn?.destructive,
+				positive: entryActionBtn?.positive,
+				loading: entryActionBtn?.loading,
+				width: entryActionBtn?.width ?? 'intrinsic',
+				children: entryActionBtn?.buttonLabel ?? '',
+				type: 'button',
+				leadingIcon: makeEntryActionBtnIcon({
+					entryActionBtn,
+					neededIconType: 'leading',
+				}),
+				trailingIcon: makeEntryActionBtnIcon({
+					entryActionBtn,
+					neededIconType: 'trailing',
+				}),
+				onClick: (event: Event) =>
+					onActionBtnClick({ event, actionIndex, actionPosition }),
+			});
+		}
+
+		if (leadingActions && leadingActions.length > 0) {
+			const entryPrimaryActionBtnContainer = document.createElement('div');
+			entryPrimaryActionBtnContainer.className =
+				'gids-table-entry__leading-actions-container';
+
+			Array.from({ length: leadingActions.length }, (_, indexI) => {
+				const entryPrimaryActionBtnIndex = leadingActions.length - indexI - 1;
+				const entryPrimaryActionBtn =
+					leadingActions[entryPrimaryActionBtnIndex];
+				const entryActionBtnVisible = isTableEntryActionButtonVisible<
+					IconName,
+					IconAppearance
+				>(entryPrimaryActionBtn);
+				if (entryActionBtnVisible) {
+					entryPrimaryActionBtnContainer.append(
+						makeEntryActionButton({
+							entryActionBtn: entryPrimaryActionBtn,
+							actionIndex: entryPrimaryActionBtnIndex,
+							actionPosition: 'leading',
+						}),
+					);
+				}
+			});
+
+			entryContainer.appendChild(entryPrimaryActionBtnContainer);
+		}
+
+		if (entryDataTypes.includes('text') && label && label !== '') {
+			const labelSpan = document.createElement('span');
+			labelSpan.textContent = label;
+			labelSpan.className = `${getGidsTableEntryLabelTypographyClass(labelTypography)}`;
+
+			appendAsChildren(entryContainer, labelSpan);
+		}
+
+		if (
+			entryDataTypes.includes('display-tag') &&
+			displayTags &&
+			displayTags.length > 0
+		) {
+			const displayTagsContainer = document.createElement('div');
+			displayTagsContainer.className =
+				displayTagsOrientation === 'horizontal'
+					? 'gids-table-entry__common-items-container-horizontal'
+					: 'gids-table-entry__common-items-container-vertical';
+
+			displayTags.forEach((displayTag) => {
+				displayTagsContainer.append(
+					GidsDisplayTagDom({
+						label: displayTag?.label ?? '',
+						appearance: displayTag?.displayTagAppearance ?? 'subtle',
+						size: displayTag?.displayTagSize ?? 'xs',
+						icon: displayTag?.displayTagIcon
+							? GidsIconDom({
+									name: displayTag.displayTagIcon,
+									size: displayTag?.displayTagSize ?? 'xs',
+									appearance: displayTag?.displayTagIconAppearance ?? 'regular',
+								})
+							: undefined,
+						color: displayTag?.displayTagColor ?? 'accent-5',
+					}),
+				);
+			});
+
+			appendAsChildren(entryContainer, displayTagsContainer);
+		}
+
+		if (entryDataTypes.includes('avatar') && avatars && avatars.length > 0) {
+			const avatarGroup = GidsAvatarGroupDom({
+				appearance: avatarGroupAppearance ? avatarGroupAppearance : 'spread',
+				layout: avatarGroupLayout ? avatarGroupLayout : 'wrap',
+				children: Array.from({ length: avatars.length }, (_, indexI) => {
+					const avatar = avatars[indexI];
+					return GidsAvatarDom({
+						size: avatarSize,
+						alt: avatar?.avatarAlt ?? '',
+						appearance: avatar?.avatarAppearance ?? 'icon',
+						badge: GidsBadgeDom({
+							appearance: avatar?.avatarBadge?.badgeAppearance ?? 'information',
+							count: avatar?.avatarBadge?.badgeCount ?? undefined,
+							accessibleText: avatar?.avatarBadge?.badgeAccessibleText ?? '',
+							type: avatar?.avatarBadge?.badgeType ?? 'dot',
+							outline: avatar?.avatarBadge?.badgeOutline ?? false,
+						}),
+						color: avatar?.avatarColor ?? 'default',
+						imageSrc: avatar?.avatarImageSrc ?? '',
+						text: avatar?.avatarText ?? '',
+					});
+				}),
+			});
+
+			appendAsChildren(entryContainer, avatarGroup);
+		}
+
+		if (
+			entryDataTypes.includes('progress-bar') &&
+			progressBars &&
+			progressBars.length > 0
+		) {
+			const progressBarsContainer = document.createElement('div');
+			progressBarsContainer.className =
+				progressBarsOrientation === 'horizontal'
+					? 'gids-table-entry__progress-bars-container-horizontal'
+					: 'gids-table-entry__progress-bars-container-vertical';
+			progressBarsContainer.style.setProperty(
+				'--gidsProgressBarContainer-min-width',
+				`${progressBarContainerMinWidth}px`,
+			);
+
+			progressBars.forEach((progressBar) => {
+				progressBarsContainer.appendChild(
+					GidsProgressBarDom({
+						size: progressBarSize,
+						color: progressBar?.progressBarColor ?? 'default',
+						indeterminate: progressBar?.progressBarIndeterminate ?? true,
+						value: progressBar?.progressBarValue,
+						max: progressBar?.progressBarMax ?? 1,
+						endCap: progressBarEndCap,
+					}),
+				);
+			});
+
+			appendAsChildren(entryContainer, progressBarsContainer);
+		}
+
+		if (
+			entryDataTypes.includes('status-tag') &&
+			statusTags &&
+			statusTags.length > 0
+		) {
+			const statusTagsContainer = document.createElement('div');
+			statusTagsContainer.className =
+				statusTagsOrientation === 'horizontal'
+					? 'gids-table-entry__common-items-container-horizontal'
+					: 'gids-table-entry__common-items-container-vertical';
+
+			statusTags.forEach((statusTag) => {
+				statusTagsContainer.appendChild(
+					GidsStatusTagDom({
+						type: statusTag?.statusTagType ?? 'unknown',
+						appearance: statusTagAppearance ?? 'subtle',
+						size: statusTagSize ?? 'sm',
+					}),
+				);
+			});
+
+			appendAsChildren(entryContainer, statusTagsContainer);
+		}
+
+		if (
+			entryDataTypes.includes('color-swatch') &&
+			colorSwatches &&
+			colorSwatches.length > 0
+		) {
+			const colorSwatchesContainer = document.createElement('div');
+			colorSwatchesContainer.className =
+				colorSwatchesOrientation === 'horizontal'
+					? 'gids-table-entry__common-items-container-horizontal'
+					: 'gids-table-entry__common-items-container-vertical';
+
+			colorSwatches.forEach((colorSwatch) => {
+				colorSwatchesContainer.appendChild(
+					GidsColorSwatchDom({
+						label: colorSwatch?.colorSwatchLabel,
+						labelColor: colorSwatchLabelColor,
+						labelTypography: colorSwatchLabelTypography,
+						labelPosition: colorSwatchLabelPosition,
+						swatchColor: colorSwatch?.colorSwatchColor,
+						swatchSize: colorSwatchSize,
+						swatchShape: colorSwatchShape,
+						swatchShadow: colorSwatchShadow,
+						borderRadius: colorSwatchBorderRadius,
+						applyBorders: colorSwatchApplyBorders,
+						borderColor: colorSwatch?.colorSwatchBorderColor,
+						borderWidth: colorSwatchBorderWidth,
+					}),
+				);
+			});
+
+			appendAsChildren(entryContainer, colorSwatchesContainer);
+		}
+
+		if (entryDataTypes.includes('badge') && badges && badges.length > 0) {
+			const badgesContainer = document.createElement('div');
+			badgesContainer.className =
+				badgesOrientation === 'horizontal'
+					? 'gids-table-entry__common-items-container-horizontal'
+					: 'gids-table-entry__common-items-container-vertical';
+
+			badges.forEach((badge) => {
+				badgesContainer.appendChild(
+					GidsBadgeDom({
+						appearance: badge.badgeAppearance ?? 'information',
+						count: badge?.badgeCount ?? undefined,
+						accessibleText: badge?.badgeAccessibleText ?? '',
+						type: badge?.badgeType ?? 'dot',
+						outline: badge?.badgeOutline ?? true,
+					}),
+				);
+			});
+
+			appendAsChildren(entryContainer, badgesContainer);
+		}
+
+		if (trailingActions && trailingActions.length > 0) {
+			const entrySecondaryActionBtnContainer = document.createElement('div');
+			entrySecondaryActionBtnContainer.className =
+				'gids-table-entry__trailing-actions-container';
+
+			Array.from({ length: trailingActions.length }, (_, indexJ) => {
+				const entrySecondaryActionBtn = trailingActions[indexJ];
+				const entryActionBtnVisible = isTableEntryActionButtonVisible<
+					IconName,
+					IconAppearance
+				>(entrySecondaryActionBtn);
+				if (entryActionBtnVisible) {
+					entrySecondaryActionBtnContainer.append(
+						makeEntryActionButton({
+							entryActionBtn: entrySecondaryActionBtn,
+							actionIndex: indexJ,
+							actionPosition: 'trailing',
+						}),
+					);
+				}
+			});
+
+			entryContainer.appendChild(entrySecondaryActionBtnContainer);
+		}
+
+		appendAsChildren(tableEntry, entryContainer);
+	}
+
+	return tableEntry;
+};

package/src/components/GidsTableFooter/GidsTableFooter.ts

@@ -0,0 +1,157 @@
+import {
+	GidsTableEntryTypographyStyle,
+	GidsTableFooterWebUtils,
+	isValidChildren,
+	type GidsTableFooterWebProps,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import { GidsTableFooterActionEvent } from '@ganpatiinfo/gids-core-shared';
+import { GidsTableRowDom } from '../GidsTableRow/GidsTableRow';
+import { GidsTableFooterControlDom } from '../GidsTableFooterControl/GidsTableFooterControl';
+import { GidsTableEntryDom } from '../GidsTableEntry/GidsTableEntry';
+
+const { getGidsTableFooterClassNames } = GidsTableFooterWebUtils;
+
+export type GidsTableFooterNativeInputForwardedDomProps = Partial<
+	Omit<HTMLInputElement, 'value' | 'readOnly' | 'name' | 'disabled'>
+>;
+
+export type GidsTableFooterBaseWebProps = GidsTableFooterWebProps<
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance,
+	DomChildren,
+	DomChildren,
+	GidsTableFooterNativeInputForwardedDomProps,
+	Event
+>;
+
+export type GidsTableFooterActionBaseEvent = GidsTableFooterActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsTableFooterDomProps extends GidsTableFooterBaseWebProps {
+	extraClasses?: string;
+	onFooterAction?: (event: GidsTableFooterActionBaseEvent) => void;
+}
+
+export const GidsTableFooterDom = ({
+	// Table Entry Props
+	appearance = 'none',
+	labelTypography = 'label-medium',
+	textAlignment = 'center',
+	leadingActions = [],
+	trailingActions = [],
+	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 = 'spread',
+	avatarGroupLayout = 'wrap',
+	statusTagAppearance = 'subtle',
+	statusTagSize = 'sm',
+	progressBarContainerMinWidth = 200,
+	displayTagsOrientation = 'horizontal',
+	statusTagsOrientation = 'horizontal',
+	progressBarsOrientation = 'horizontal',
+	colorSwatchesOrientation = 'horizontal',
+	badgesOrientation = 'horizontal',
+
+	// Footer Props
+	footerControlSettings,
+	footerControlChildren,
+	children,
+	footerItems,
+	onFooterAction,
+	extraClasses,
+}: GidsTableFooterDomProps) => {
+	const tableFooter = document.createElement('tfoot');
+	tableFooter.className = getGidsTableFooterClassNames(extraClasses);
+
+	if (isValidChildren<DomChildren>(children)) {
+		appendAsChildren(tableFooter, children);
+	} else {
+		if (footerItems && footerItems.length > 0) {
+			const rowContent = GidsTableRowDom({
+				rows: footerItems,
+				rowType: 'footer',
+				leadingActions,
+				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,
+				onRowAction: onFooterAction,
+			});
+
+			tableFooter.append(rowContent);
+		}
+	}
+
+	const isValidFooterChildren = isValidChildren<DomChildren>(
+		footerControlChildren,
+	);
+
+	if (
+		isValidFooterChildren ||
+		(footerControlSettings && Object.keys(footerControlSettings).length > 0)
+	) {
+		const colSpan = footerItems?.length ?? 1;
+
+		tableFooter.append(
+			GidsTableRowDom({
+				appearance,
+				rowType: 'footer',
+				children: GidsTableEntryDom({
+					appearance,
+					colSpan,
+					entryType: 'footer',
+					children: GidsTableFooterControlDom({
+						...footerControlSettings,
+						children: footerControlChildren,
+					}),
+				}),
+			}),
+		);
+	}
+
+	return tableFooter;
+};