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

package/src/components/GidsTableFooterControl/GidsTableFooterControl.ts

@@ -0,0 +1,166 @@
+import {
+	type GidsTableFooterControlWebProps,
+	GidsTableFooterControlWebUtils,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import { GidsPaginatorDom } from '../GidsPaginator/GidsPaginator';
+import { GidsDropdownFieldDom } from '../GidsDropdownField/GidsDropdownField';
+import { GidsDropdownMenuGroupDom } from '../GidsDropdownMenuGroup/GidsDropdownMenuGroup';
+import { GidsDropdownMenuDom } from '../GidsDropdownMenu/GidsDropdownMenu';
+import { GidsDropdownItemDom } from '../GidsDropdownItem/GidsDropdownItem';
+
+const { getGidsTableFooterControlClassNames } = GidsTableFooterControlWebUtils;
+
+type NativeInputForwardedProps = Partial<
+	Omit<HTMLInputElement, 'value' | 'readOnly' | 'name' | 'disabled'>
+>;
+
+export type GidsTableFooterControlBaseWebProps = GidsTableFooterControlWebProps<
+	IconName,
+	DomChildren,
+	NativeInputForwardedProps,
+	DomChildren,
+	Event
+>;
+
+export interface GidsTableFooterControlDomProps extends GidsTableFooterControlBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsTableFooterControlDom = ({
+	appearance = 'surface-default',
+	children,
+	bulkStatus,
+	rangeStatus,
+	tableViewControllerSettings,
+	paginatorSettings,
+	tableViewControllerVisible,
+	paginatorVisible,
+	extraClasses,
+}: GidsTableFooterControlDomProps): HTMLDivElement => {
+	const tableFooterControl = document.createElement('div');
+	tableFooterControl.className = getGidsTableFooterControlClassNames(
+		{ appearance },
+		extraClasses,
+	);
+
+	if (appearance) {
+		tableFooterControl.setAttribute('control-appearance', appearance);
+	}
+
+	if (isValidChildren(children)) {
+		appendAsChildren(tableFooterControl, children);
+	} else {
+		const mainContainer = document.createElement('div');
+		mainContainer.className = 'gids-table-footer-control__main-container';
+
+		const informativeContainer = document.createElement('div');
+		informativeContainer.className =
+			'gids-table-footer-control__informative-container';
+
+		// Table View Controller
+		if (
+			tableViewControllerVisible &&
+			tableViewControllerSettings &&
+			Object.keys(tableViewControllerSettings).length > 0
+		) {
+			const { tableViewControllerOptions, ...restTableViewControllerSettings } =
+				tableViewControllerSettings;
+
+			if (tableViewControllerOptions && tableViewControllerOptions.length) {
+				const sectionsCount = tableViewControllerOptions.length;
+
+				informativeContainer.append(
+					GidsDropdownFieldDom({
+						...restTableViewControllerSettings,
+						inputProps: {
+							...restTableViewControllerSettings.inputProps,
+							placeholder:
+								restTableViewControllerSettings?.inputProps?.placeholder ??
+								'Rows per page',
+						},
+						children: GidsDropdownMenuGroupDom({
+							type: 'default',
+							children: Array.from(
+								{ length: sectionsCount },
+								(_, sectionIndex) => {
+									const section = tableViewControllerOptions[sectionIndex];
+									const items = section?.items ?? [];
+
+									return GidsDropdownMenuDom({
+										sectionLabel: section?.label,
+										children: Array.from(
+											{ length: items.length },
+											(_, optionIndex) => {
+												const item = items[optionIndex];
+												return GidsDropdownItemDom({
+													...item,
+													id: item?.id ?? `${optionIndex + 1}`,
+												});
+											},
+										),
+									});
+								},
+							),
+						}),
+					}),
+				);
+			}
+		}
+
+		// Range Status
+		if (rangeStatus && rangeStatus !== '') {
+			const rangeStatusLabel = document.createElement('span');
+			rangeStatusLabel.className =
+				'gids-table-footer-control__range-status-label';
+			rangeStatusLabel.textContent = rangeStatus;
+
+			appendAsChildren(informativeContainer, rangeStatusLabel);
+		}
+
+		// Bulk Status
+		if (bulkStatus && bulkStatus !== '') {
+			const bulkStatusLabel = document.createElement('span');
+			bulkStatusLabel.className =
+				'gids-table-footer-control__bulk-status-label';
+			bulkStatusLabel.textContent = bulkStatus;
+			informativeContainer.append(bulkStatusLabel);
+
+			appendAsChildren(informativeContainer, bulkStatusLabel);
+		}
+
+		appendAsChildren(mainContainer, informativeContainer);
+
+		// Paginator
+		if (
+			paginatorVisible &&
+			paginatorSettings &&
+			Object.keys(paginatorSettings).length > 0
+		) {
+			const paginatorContainer = document.createElement('div');
+			paginatorContainer.className =
+				'gids-table-footer-control__paginator-container';
+
+			paginatorContainer.append(
+				GidsPaginatorDom({
+					...paginatorSettings,
+					size: paginatorSettings?.size ?? 'md',
+					shape: paginatorSettings?.shape ?? 'rounded',
+					variant: paginatorSettings?.variant ?? 'default',
+					showFirstPageBtn: paginatorSettings?.showFirstPageBtn ?? true,
+					showLastPageBtn: paginatorSettings?.showLastPageBtn ?? true,
+					showNextBtn: paginatorSettings?.showNextBtn ?? true,
+					showPreviousBtn: paginatorSettings?.showPreviousBtn ?? true,
+				}),
+			);
+
+			appendAsChildren(mainContainer, paginatorContainer);
+		}
+
+		appendAsChildren(tableFooterControl, mainContainer);
+	}
+
+	return tableFooterControl;
+};

package/src/components/GidsTableHeader/GidsTableHeader.ts

@@ -0,0 +1,112 @@
+import {
+	GidsTableEntryTypographyStyle,
+	GidsTableHeaderWebProps,
+	GidsTableHeaderWebUtils,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsTableRowDom } from '../GidsTableRow/GidsTableRow';
+import { GidsTableHeaderActionEvent } from '@ganpatiinfo/gids-core-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const { getGidsTableHeaderClassNames } = GidsTableHeaderWebUtils;
+
+type GidsTableHeaderBaseWebProps = GidsTableHeaderWebProps<
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance,
+	DomChildren
+>;
+
+export type GidsTableHeaderActionBaseEvent = GidsTableHeaderActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsTableHeaderDomProps extends GidsTableHeaderBaseWebProps {
+	extraClasses?: string;
+	onHeaderAction?: (event: GidsTableHeaderActionBaseEvent) => void;
+}
+
+export const GidsTableHeaderDom = ({
+	headerItems = [],
+	appearance = 'none',
+	labelTypography = 'label-medium',
+	textAlignment = 'center',
+	onHeaderAction,
+	extraClasses,
+	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',
+	children,
+}: GidsTableHeaderDomProps) => {
+	const tableHeader = document.createElement('thead');
+	tableHeader.className = getGidsTableHeaderClassNames(extraClasses);
+
+	if (isValidChildren<DomChildren>(children)) {
+		appendAsChildren(tableHeader, children);
+	} else {
+		if (headerItems && headerItems.length > 0) {
+			const rowContent = GidsTableRowDom({
+				rows: headerItems,
+				rowType: 'header',
+				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: onHeaderAction,
+			});
+
+			tableHeader.append(rowContent);
+		}
+	}
+
+	return tableHeader;
+};

package/src/components/GidsTableRow/GidsTableRow.ts

@@ -0,0 +1,152 @@
+import {
+	GidsTableEntryTypographyStyle,
+	type GidsTableRowWebProps,
+	GidsTableRowWebUtils,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	GidsTableEntryActionBaseEvent,
+	GidsTableEntryDom,
+} from '../GidsTableEntry/GidsTableEntry.js';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsTableRowActionEvent } from '@ganpatiinfo/gids-core-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsTableRowClassNames } = GidsTableRowWebUtils;
+
+type GidsTableRowBaseWebProps = GidsTableRowWebProps<
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance,
+	DomChildren
+>;
+export type GidsTableRowActionBaseEvent = GidsTableRowActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsTableRowDomProps extends GidsTableRowBaseWebProps {
+	extraClasses?: string;
+	onRowAction?: (event: GidsTableRowActionBaseEvent) => void;
+}
+
+export const GidsTableRowDom = ({
+	rows,
+	rowType = 'body',
+	onRowAction,
+	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,
+}: GidsTableRowDomProps): HTMLElement | DocumentFragment => {
+	const rowClassName = getGidsTableRowClassNames(extraClasses);
+
+	// 3. Handling Horizontal Layout (Standard Single Row)
+	const tableRow = document.createElement('tr');
+	tableRow.className = rowClassName;
+
+	if (isValidChildren<DomChildren>(children)) {
+		appendAsChildren(tableRow, children);
+	} else {
+		function onEntryActionBtnClick({
+			event,
+			entryIndex,
+		}: {
+			event: GidsTableEntryActionBaseEvent;
+			entryIndex: number;
+		}) {
+			if (onRowAction) {
+				onRowAction({
+					...event,
+					details: {
+						...event.details,
+						entryIndex,
+					},
+				});
+			}
+		}
+
+		if (rows && rows.length > 0) {
+			rows.forEach((row, indexJ) => {
+				const rowLabel = row?.label;
+
+				tableRow.append(
+					GidsTableEntryDom({
+						...row,
+						actionsBackgroundColor,
+						actionsContentColor,
+						backgroundColor,
+						contentColor,
+						label: rowLabel,
+						entryType: rowType,
+						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,
+						onEntryAction: (event: GidsTableEntryActionBaseEvent) =>
+							onEntryActionBtnClick({ event, entryIndex: indexJ }),
+					}),
+				);
+			});
+		}
+	}
+
+	return tableRow;
+};

package/src/components/GidsTableToolbar/GidsTableToolbar.ts

@@ -0,0 +1,180 @@
+import {
+	type GidsTableToolbarWebProps,
+	GidsTableToolbarWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import type { HtmlInputAttributes } from '../GidsInput/GidsInput';
+import {
+	GidsSearchBarDom,
+	GidsSearchBarDomProps,
+} from '../GidsSearchBar/GidsSearchBar';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import { GidsActionBarDom } from '../GidsActionBar/GidsActionBar';
+import { GidsTabDom } from '../GidsTab/GidsTab';
+import { GidsTabItemDom } from '../GidsTabItem/GidsTabItem';
+
+const { getGidsTableToolbarClassNames } = GidsTableToolbarWebUtils;
+
+type GidsTableToolbarBaseWebProps = GidsTableToolbarWebProps<
+	DomChildren,
+	Event,
+	Element,
+	HtmlInputAttributes
+> &
+	Pick<
+		GidsSearchBarDomProps,
+		'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onGidsSearchBarClear'
+	>;
+
+export interface GidsTableToolbarDomProps extends GidsTableToolbarBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsTableToolbarDom = ({
+	actionGroup = false,
+	allFiltersTabVisible = false,
+	moreFiltersTabVisible = false,
+	clearAllFiltersVisible = true,
+	clearAllFiltersButtonAppearance = 'primary',
+	primaryFilters = [],
+	secondaryFilters = [],
+	filterSize = 'xs',
+	filterAllIsDefaultSelected = true,
+	dropdownDividerVisible,
+	onToggleActionBarAllFilter,
+	onToggleActionBarDropdownFilter,
+	onToggleActionBarMoreFilter,
+	onToggleActionBarNoneFilter,
+	onDropdownSelectionActionBarFilterChange,
+	onMoreSelectionActionBarFilterChange,
+	onClearAllFiltersButton,
+	actionBarDisabled = false,
+	searchDisabled = false,
+	allFiltersData,
+	moreFiltersData,
+	children,
+	searchVisible = true,
+	filtersVisible = true,
+	childrenPosition = 'top-most',
+	tabVisible = false,
+	tabProps,
+	borderSides = [],
+	borderRadiusSides = [],
+	leadingIcon,
+	leadingLabel,
+	trailingLabel,
+	loading,
+	readOnly,
+	onGidsSearchBarClear,
+	onChange,
+	onInput,
+	onFocus,
+	onBlur,
+	value = '',
+	inputProps,
+	tableToolbarAppearance = 'surface-default',
+	extraClasses,
+	...restProps
+}: GidsTableToolbarDomProps): HTMLElement => {
+	const tableToolbar = document.createElement('div');
+	tableToolbar.className = getGidsTableToolbarClassNames(
+		{ borderSides, borderRadiusSides, tableToolbarAppearance },
+		extraClasses,
+	);
+
+	tableToolbar.setAttribute('table-toolbar-appearance', tableToolbarAppearance);
+
+	const tableToolbarContent = document.createElement('div');
+	tableToolbarContent.className = 'gids-table-toolbar__content-wrapper';
+
+	if (tabVisible && tabProps?.tabItems && tabProps.tabItems.length > 0) {
+		const tabItemsData = tabProps.tabItems;
+		const tabAppearance = tabProps?.appearance ?? 'underlined';
+		const tabWidth = tabProps?.width ?? 'full';
+		tableToolbarContent.append(
+			GidsTabDom({
+				appearance: tabAppearance,
+				width: tabWidth,
+				activeTabId: tabProps?.activeTabId ?? undefined,
+				onPressGidsTab: tabProps?.onPressGidsTab,
+				children: Array.from({ length: tabItemsData.length }, (_, index) => {
+					const tabItem = tabItemsData[index];
+					return GidsTabItemDom({
+						...tabItem,
+						itemId: tabItem?.itemId ?? `${index + 1}`,
+					});
+				}),
+			}),
+		);
+	}
+
+	if (children && childrenPosition === 'top-most') {
+		const childrenContainer = document.createElement('div');
+		childrenContainer.className = 'gids-table-toolbar__children-container';
+
+		appendAsChildren(childrenContainer, children);
+		appendAsChildren(tableToolbarContent, childrenContainer);
+	}
+
+	if (searchVisible) {
+		tableToolbarContent.append(
+			GidsSearchBarDom({
+				...restProps,
+				type: 'default',
+				appearance: 'default',
+				status: 'default',
+				leadingIcon,
+				leadingLabel,
+				trailingLabel,
+				loading,
+				readOnly,
+				onGidsSearchBarClear,
+				onChange,
+				onInput,
+				onFocus,
+				onBlur,
+				value,
+				disabled: searchDisabled,
+				inputProps,
+			}),
+		);
+	}
+
+	if (filtersVisible) {
+		tableToolbarContent.append(
+			GidsActionBarDom({
+				actionGroup,
+				allFiltersTabVisible,
+				moreFiltersTabVisible,
+				clearAllFiltersVisible,
+				clearAllFiltersButtonAppearance,
+				primaryFilters,
+				secondaryFilters,
+				filterSize,
+				filterAllIsDefaultSelected,
+				dropdownDividerVisible,
+				onToggleActionBarAllFilter,
+				onToggleActionBarDropdownFilter,
+				onToggleActionBarMoreFilter,
+				onToggleActionBarNoneFilter,
+				onDropdownSelectionActionBarFilterChange,
+				onMoreSelectionActionBarFilterChange,
+				onClearAllFiltersButton,
+				disabled: actionBarDisabled,
+				allFiltersData,
+				moreFiltersData,
+			}),
+		);
+	}
+
+	if (children && childrenPosition === 'bottom-most') {
+		const childrenContainer = document.createElement('div');
+		childrenContainer.className = 'gids-table-toolbar__children-container';
+
+		appendAsChildren(childrenContainer, children);
+		appendAsChildren(tableToolbarContent, childrenContainer);
+	}
+
+	appendAsChildren(tableToolbar, tableToolbarContent);
+
+	return tableToolbar;
+};

package/src/components/GidsTransferList/GidsTransferList.ts

@@ -0,0 +1,58 @@
+import {
+	type GidsTransferListWebProps,
+	GidsTransferListWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsTransferListClassNames } = GidsTransferListWebUtils;
+
+type GidsTransferListBaseWebProps = GidsTransferListWebProps<Event>;
+
+type GidsTransferListElement = HTMLElement & GidsTransferListBaseWebProps;
+
+export interface GidsTransferListDomProps extends GidsTransferListBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsTransferListDom = ({
+	leftListHeading = 'Choices',
+	rightListHeading = 'Choosen',
+	moveAllVisible = false,
+	transferListType = 'basic',
+	leftListItems = [],
+	rightListItems = [],
+	onTransferAction,
+	onTransferListSelect,
+	listsMaxHeight = '200px',
+	extraClasses,
+}: GidsTransferListDomProps): HTMLElement => {
+	const transferList = document.createElement(
+		'gids-transfer-list',
+	) as GidsTransferListElement;
+
+	transferList.transferListType = transferListType;
+
+	if (transferListType === 'enhanced' && leftListHeading) {
+		transferList.leftListHeading = leftListHeading;
+	}
+
+	if (transferListType === 'enhanced' && rightListHeading) {
+		transferList.rightListHeading = rightListHeading;
+	}
+
+	transferList.moveAllVisible = moveAllVisible;
+	transferList.leftListItems = leftListItems;
+	transferList.rightListItems = rightListItems;
+	transferList.listsMaxHeight = listsMaxHeight;
+
+	transferList.className = getGidsTransferListClassNames(extraClasses);
+
+	if (onTransferAction) {
+		transferList.onTransferAction = onTransferAction;
+	}
+
+	if (onTransferListSelect) {
+		transferList.onTransferListSelect = onTransferListSelect;
+	}
+
+	return transferList;
+};