@ganpatiinfo/gids-web-dom-reference 9.2.0 → 11.0.0

package/src/components/GidsBasicTableHeader/GidsBasicTableHeader.ts

@@ -0,0 +1,56 @@
+import {
+	GidsBasicTableCellTypographyStyle,
+	GidsBasicTableHeaderWebProps,
+	GidsBasicTableHeaderWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsBasicTableRowDom } from '../GidsBasicTableRow/GidsBasicTableRow';
+import { GidsBasicTableRowItem } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsBasicTableHeaderClassNames } = GidsBasicTableHeaderWebUtils;
+
+type GidsBasicTableHeaderBaseWebProps = GidsBasicTableHeaderWebProps;
+
+export interface GidsBasicTableHeaderDomProps extends GidsBasicTableHeaderBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsBasicTableHeaderDom = ({
+	width = 'full',
+	headerCells = [],
+	appearance = 'none',
+	labelTypography = 'label-medium',
+	textAlignment = 'center',
+	layout = 'horizontal',
+	extraClasses,
+}: GidsBasicTableHeaderDomProps) => {
+	const basicTableHeader = document.createElement('thead');
+	basicTableHeader.className = getGidsBasicTableHeaderClassNames(
+		{ width },
+		extraClasses,
+	);
+
+	if (headerCells && headerCells.length > 0) {
+		// 1. Map cells to forward global table header styles/props into each row item
+		const mappedHeaderCells: GidsBasicTableRowItem<GidsBasicTableCellTypographyStyle>[] =
+			headerCells.map(
+				(cell): GidsBasicTableRowItem<GidsBasicTableCellTypographyStyle> => ({
+					appearance, // Falling back to header level appearance
+					labelTypography, // Falling back to header level typography
+					textAlignment, // Falling back to header level text alignment
+					...cell, // Individual cell settings override header properties if explicitly passed
+				}),
+			);
+
+		// 2. Feed the combined data payload into your Row builder safely
+		const rowContent = GidsBasicTableRowDom({
+			width,
+			layout,
+			rows: mappedHeaderCells,
+			isHeaderRow: true,
+		});
+
+		basicTableHeader.append(rowContent);
+	}
+
+	return basicTableHeader;
+};

package/src/components/GidsBasicTableRow/GidsBasicTableRow.ts

@@ -0,0 +1,70 @@
+import {
+	type GidsBasicTableRowWebProps,
+	GidsBasicTableRowWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsBasicTableCellDom } from '../GidsBasicTableCell/GidsBasicTableCell';
+
+const { getGidsBasicTableRowClassNames } = GidsBasicTableRowWebUtils;
+
+type GidsBasicTableRowBaseWebProps = GidsBasicTableRowWebProps;
+
+export interface GidsBasicTableRowDomProps extends GidsBasicTableRowBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsBasicTableRowDom = ({
+	width = 'full',
+	layout = 'horizontal',
+	rows,
+	isHeaderRow = false,
+	extraClasses,
+}: GidsBasicTableRowDomProps): HTMLElement | DocumentFragment => {
+	const rowClassName = getGidsBasicTableRowClassNames({ width }, extraClasses);
+
+	// 2. Handling Vertical Layout
+	if (layout === 'vertical' && rows && rows.length > 0) {
+		const fragment = document.createDocumentFragment();
+
+		rows.forEach((tableRow) => {
+			// Create a clean, independent <tr> wrapper for each vertical entry
+			const singleRowEl = document.createElement('tr');
+			singleRowEl.className = rowClassName;
+
+			const rowLabel = tableRow?.label;
+			singleRowEl.append(
+				GidsBasicTableCellDom({
+					...tableRow,
+					width: width,
+					label: rowLabel,
+					isHeaderCell: isHeaderRow,
+				}),
+			);
+
+			// Append the constructed row directly to the fragment tree
+			fragment.append(singleRowEl);
+		});
+
+		return fragment;
+	}
+
+	// 3. Handling Horizontal Layout (Standard Single Row)
+	const basicTableRow = document.createElement('tr');
+	basicTableRow.className = rowClassName;
+
+	if (rows && rows.length > 0) {
+		rows.forEach((tableRow) => {
+			const rowLabel = tableRow?.label;
+
+			basicTableRow.append(
+				GidsBasicTableCellDom({
+					...tableRow,
+					width: width,
+					label: rowLabel,
+					isHeaderCell: isHeaderRow,
+				}),
+			);
+		});
+	}
+
+	return basicTableRow;
+};

package/src/components/GidsBsTable/GidsBsTable.ts

@@ -0,0 +1,206 @@
+import {
+	GidsBsTableWebProps,
+	GidsBsTableWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { DomChildren } from '../../utils/domUtils';
+import { HtmlInputAttributes } from '../GidsInput/GidsInput';
+import {
+	GidsBasicTableHeadDom,
+	GidsBasicTableHeadDomProps,
+} from '../GidsBasicTableHead/GidsBasicTableHead';
+import { GidsBasicTableHeaderDom } from '../GidsBasicTableHeader/GidsBasicTableHeader';
+import { GidsBasicTableBodyDom } from '../GidsBasicTableBody/GidsBasicTableBody';
+
+const {
+	getGidsBsTableClassNames,
+	getCustomisedTopHeaderCells,
+	getBsTableClasses,
+	getBsTableBodyBorder,
+} = GidsBsTableWebUtils;
+
+type GidsBsTableBaseWebProps = GidsBsTableWebProps<
+	DomChildren,
+	Event,
+	Element,
+	HtmlInputAttributes
+> &
+	Pick<
+		GidsBasicTableHeadDomProps,
+		'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onGidsSearchBarClear'
+	>;
+
+export interface GidsBsTableDomProps extends GidsBsTableBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsBsTableDom = ({
+	// Table properties
+	topHeaderCells = [],
+	tableBody = [],
+	width = 'full',
+	isTopHeaderVisible = false,
+	isHeadVisible = true,
+	topHeaderAppearance = 'none',
+	topHeaderLabelTypography = 'eyebrow-small',
+	topHeaderTextAlignment = 'left',
+	rowAppearance = 'none',
+	rowLabelTypography = 'label-small',
+	rowTextAlignment = 'left',
+	tableBorders = 'none',
+	tableBorderRadius = [],
+	tableBodyMaxHeight = 200,
+	extraClasses,
+
+	// Table Head properties
+	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,
+	headBorderSides = [],
+	headBorderRadiusSides = [],
+	leadingIcon,
+	leadingLabel,
+	trailingLabel,
+	loading,
+	readOnly,
+	onGidsSearchBarClear,
+	onChange,
+	onInput,
+	onFocus,
+	onBlur,
+	headValue = '',
+	inputProps,
+	headAppearance = 'surface-default',
+	...restProps
+}: GidsBsTableDomProps): HTMLDivElement => {
+	const bsTable = document.createElement('div');
+	bsTable.className = getGidsBsTableClassNames(
+		{ width, tableBorders, tableBorderRadius },
+		extraClasses,
+	);
+
+	// Table Head properties
+	if (isHeadVisible) {
+		bsTable.append(
+			GidsBasicTableHeadDom({
+				actionGroup,
+				allFiltersTabVisible,
+				moreFiltersTabVisible,
+				clearAllFiltersVisible,
+				clearAllFiltersButtonAppearance,
+				primaryFilters,
+				secondaryFilters,
+				filterSize,
+				filterAllIsDefaultSelected,
+				dropdownDividerVisible,
+				onToggleActionBarAllFilter,
+				onToggleActionBarDropdownFilter,
+				onToggleActionBarMoreFilter,
+				onToggleActionBarNoneFilter,
+				onDropdownSelectionActionBarFilterChange,
+				onMoreSelectionActionBarFilterChange,
+				onClearAllFiltersButton,
+				actionBarDisabled,
+				searchDisabled,
+				allFiltersData,
+				moreFiltersData,
+				children,
+				searchVisible,
+				filtersVisible,
+				childrenPosition,
+				tabVisible,
+				tabProps,
+				borderSides: headBorderSides,
+				borderRadiusSides: headBorderRadiusSides,
+				leadingIcon,
+				leadingLabel,
+				trailingLabel,
+				loading,
+				readOnly,
+				onGidsSearchBarClear,
+				onChange,
+				onInput,
+				onFocus,
+				onBlur,
+				value: headValue,
+				inputProps,
+				headAppearance,
+				...restProps,
+			}),
+		);
+	}
+
+	// Wrapper Container to safely handle scroll containment
+	const tableScrollContainer = document.createElement('div');
+	tableScrollContainer.className = 'gids-bs-table__scroll-container';
+
+	// Safe injection of the custom property value into the container element
+	if (tableBodyMaxHeight) {
+		tableScrollContainer.style.setProperty(
+			'--gidsBsTable-body-max-height',
+			`${tableBodyMaxHeight}px`,
+		);
+	}
+
+	// Table properties
+	const table = document.createElement('table');
+	table.className = getBsTableClasses({ width, isHeadVisible });
+
+	if (isTopHeaderVisible && topHeaderCells && topHeaderCells.length > 0) {
+		// Append Table Header
+		table.append(
+			GidsBasicTableHeaderDom({
+				appearance: topHeaderAppearance,
+				labelTypography: topHeaderLabelTypography,
+				textAlignment: topHeaderTextAlignment,
+				headerCells: getCustomisedTopHeaderCells({
+					topHeaderCells,
+					tableBorders,
+				}),
+				width: isHeadVisible ? 'full' : width,
+			}),
+		);
+	}
+
+	if (tableBody && tableBody.length > 0) {
+		table.append(
+			GidsBasicTableBodyDom({
+				width: isHeadVisible ? 'full' : width,
+				tableBorders: getBsTableBodyBorder({ tableBorders }),
+				tableBodyData: tableBody,
+				rowAppearance,
+				rowLabelTypography,
+				rowTextAlignment,
+			}),
+		);
+	}
+
+	// Structural Append hierarchy: table -> scroll wrapper -> root container
+	tableScrollContainer.appendChild(table);
+	bsTable.appendChild(tableScrollContainer);
+
+	return bsTable;
+};

package/src/components/GidsExpansion/GidsExpansion.ts

@@ -0,0 +1,65 @@
+import {
+	GidsExpansionWebProps,
+	GidsExpansionWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const { getGidsExpansionClassNames } = GidsExpansionWebUtils;
+
+type GidsExpansionBaseWebProps = GidsExpansionWebProps<DomChildren>;
+
+type GidsExpansionElement = HTMLElement & GidsExpansionBaseWebProps;
+
+export interface GidsExpansionDomProps extends GidsExpansionBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsExpansionDom = ({
+	expansionId,
+	label,
+	labelLevel = 'h1',
+	expanded,
+	onExpand,
+	disabled,
+	children,
+	extraClasses,
+}: GidsExpansionDomProps): HTMLElement => {
+	const expansion = document.createElement(
+		'gids-expansion',
+	) as GidsExpansionElement;
+
+	expansion.setAttribute('expansion-id', expansionId);
+
+	if (disabled) {
+		expansion.setAttribute('disabled', 'true');
+	} else {
+		expansion.removeAttribute('disabled');
+	}
+
+	expansion.expansionId = expansionId;
+	expansion.label = label;
+	expansion.labelLevel = labelLevel;
+	expansion.disabled = disabled;
+
+	if (typeof expanded === 'boolean') {
+		expansion.expanded = expanded;
+	}
+
+	const isInteractive = !disabled;
+	const isExpanded = Boolean(expanded) && isInteractive;
+
+	if (children) {
+		appendAsChildren(expansion, children);
+	}
+
+	expansion.className = getGidsExpansionClassNames(
+		{ expanded: isExpanded },
+		extraClasses,
+	);
+
+	if (onExpand) {
+		expansion.onExpand = onExpand;
+	}
+
+	return expansion;
+};

package/src/components/GidsExpansionBodyList/GidsExpansionBodyList.ts

@@ -0,0 +1,43 @@
+import {
+	GidsExpansionBodyListWebProps,
+	GidsExpansionBodyListWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsExpansionBodyListClassNames } = GidsExpansionBodyListWebUtils;
+
+type GidsExpansionBodyListBaseWebProps = GidsExpansionBodyListWebProps;
+
+type GidsExpansionBodyListElement = HTMLElement &
+	GidsExpansionBodyListBaseWebProps;
+
+export interface GidsExpansionBodyListDomProps extends GidsExpansionBodyListBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsExpansionBodyListDom = ({
+	expansionBodyListItems,
+	onExpansionBodyListSubtitlePress,
+	onExpansionBodyListSupportingTextPress,
+	extraClasses,
+}: GidsExpansionBodyListDomProps): HTMLElement => {
+	const expansionBodyList = document.createElement(
+		'gids-expansion-body-list',
+	) as GidsExpansionBodyListElement;
+
+	expansionBodyList.expansionBodyListItems = expansionBodyListItems;
+
+	expansionBodyList.className =
+		getGidsExpansionBodyListClassNames(extraClasses);
+
+	if (onExpansionBodyListSubtitlePress) {
+		expansionBodyList.onExpansionBodyListSubtitlePress =
+			onExpansionBodyListSubtitlePress;
+	}
+
+	if (onExpansionBodyListSupportingTextPress) {
+		expansionBodyList.onExpansionBodyListSupportingTextPress =
+			onExpansionBodyListSupportingTextPress;
+	}
+
+	return expansionBodyList;
+};

package/src/components/GidsExpansionBodyListItem/GidsExpansionBodyListItem.ts

@@ -0,0 +1,60 @@
+import {
+	GidsExpansionBodyListItemWebProps,
+	GidsExpansionBodyListItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsExpansionBodyListItemClassNames } =
+	GidsExpansionBodyListItemWebUtils;
+
+type GidsExpansionBodyListItemBaseWebProps = GidsExpansionBodyListItemWebProps;
+
+type GidsExpansionBodyListItemElement = HTMLElement &
+	GidsExpansionBodyListItemBaseWebProps;
+
+export interface GidsExpansionBodyListItemDomProps extends GidsExpansionBodyListItemBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsExpansionBodyListItemDom = ({
+	listItemId,
+	label,
+	subtitle,
+	supportingText,
+	displayTagVisible = false,
+	displayTagColor = 'accent-5',
+	displayTagLabel,
+	displayTagSize = 'xs',
+	displayTagAppearance = 'subtle',
+	onSubtitlePress,
+	onSupportingTextPress,
+	extraClasses,
+}: GidsExpansionBodyListItemDomProps): HTMLElement => {
+	const expansionBodyListItem = document.createElement(
+		'gids-expansion-body-list-item',
+	) as GidsExpansionBodyListItemElement;
+
+	expansionBodyListItem.setAttribute('list-item-id', listItemId);
+
+	expansionBodyListItem.listItemId = listItemId;
+	expansionBodyListItem.label = label;
+	expansionBodyListItem.subtitle = subtitle;
+	expansionBodyListItem.supportingText = supportingText;
+	expansionBodyListItem.displayTagVisible = displayTagVisible;
+	expansionBodyListItem.displayTagColor = displayTagColor;
+	expansionBodyListItem.displayTagLabel = displayTagLabel;
+	expansionBodyListItem.displayTagSize = displayTagSize;
+	expansionBodyListItem.displayTagAppearance = displayTagAppearance;
+
+	expansionBodyListItem.className =
+		getGidsExpansionBodyListItemClassNames(extraClasses);
+
+	if (onSubtitlePress) {
+		expansionBodyListItem.onSubtitlePress = onSubtitlePress;
+	}
+
+	if (onSupportingTextPress) {
+		expansionBodyListItem.onSupportingTextPress = onSupportingTextPress;
+	}
+
+	return expansionBodyListItem;
+};

package/src/components/GidsExpansionGroup/GidsExpansionGroup.ts

@@ -0,0 +1,32 @@
+import {
+	GidsExpansionGroupWebProps,
+	GidsExpansionGroupWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const { getGidsExpansionGroupClassNames } = GidsExpansionGroupWebUtils;
+
+type GidsExpansionGroupBaseWebProps = GidsExpansionGroupWebProps<DomChildren>;
+
+type GidsExpansionGroupElement = HTMLElement & GidsExpansionGroupBaseWebProps;
+
+export interface GidsExpansionGroupDomProps extends GidsExpansionGroupBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsExpansionGroupDom = ({
+	children,
+	extraClasses,
+}: GidsExpansionGroupDomProps): HTMLElement => {
+	const expansionGroup = document.createElement(
+		'gids-expansion-group',
+	) as GidsExpansionGroupElement;
+
+	if (children) {
+		appendAsChildren(expansionGroup, children);
+	}
+
+	expansionGroup.className = getGidsExpansionGroupClassNames(extraClasses);
+
+	return expansionGroup;
+};

package/src/components/GidsMdTable/GidsMdTable.ts

@@ -0,0 +1,57 @@
+import {
+	GidsMdTableWebProps,
+	GidsMdTableWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsMdTableClassNames } = GidsMdTableWebUtils;
+
+type GidsMdTableBaseWebProps = GidsMdTableWebProps;
+
+type GidsMdTableElement = HTMLElement & GidsMdTableBaseWebProps;
+
+export interface GidsMdTableDomProps extends GidsMdTableBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsMdTableDom = ({
+	topHeaderCells = [],
+	tableBody = [],
+	width = 'full',
+	isTopHeaderVisible = false,
+	isSideHeaderVisible = false,
+	topHeaderAppearance = 'none',
+	topHeaderLabelTypography = 'eyebrow-small',
+	topHeaderTextAlignment = 'left',
+	sideHeaderAppearance = 'none',
+	sideHeaderLabelTypography = 'label-small',
+	sideHeaderTextAlignment = 'left',
+	rowAppearance = 'none',
+	rowLabelTypography = 'label-small',
+	rowTextAlignment = 'left',
+	tableBorders = 'none',
+	tableBorderRadius = [],
+	extraClasses,
+}: GidsMdTableDomProps): HTMLElement => {
+	const mdTable = document.createElement('gids-md-table') as GidsMdTableElement;
+
+	mdTable.isTopHeaderVisible = isTopHeaderVisible;
+	mdTable.isSideHeaderVisible = isSideHeaderVisible;
+	mdTable.topHeaderAppearance = topHeaderAppearance;
+	mdTable.topHeaderLabelTypography = topHeaderLabelTypography;
+	mdTable.topHeaderTextAlignment = topHeaderTextAlignment;
+	mdTable.sideHeaderAppearance = sideHeaderAppearance;
+	mdTable.sideHeaderLabelTypography = sideHeaderLabelTypography;
+	mdTable.sideHeaderTextAlignment = sideHeaderTextAlignment;
+	mdTable.rowAppearance = rowAppearance;
+	mdTable.rowLabelTypography = rowLabelTypography;
+	mdTable.rowTextAlignment = rowTextAlignment;
+	mdTable.topHeaderCells = topHeaderCells;
+	mdTable.tableBody = tableBody;
+	mdTable.tableBorders = tableBorders;
+	mdTable.tableBorderRadius = tableBorderRadius;
+	mdTable.width = width;
+
+	mdTable.className = getGidsMdTableClassNames({ width }, extraClasses);
+
+	return mdTable;
+};

package/src/components/GidsSideMenu/GidsSideMenu.ts

@@ -1,31 +1,33 @@
 import {
-  GidsSideMenuWebProps,
-  GidsSideMenuWebUtils,
+	GidsSideMenuWebProps,
+	GidsSideMenuWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
 
 const { getGidsSideMenuClassNames } = GidsSideMenuWebUtils;
 
 export interface GidsSideMenuDomProps extends GidsSideMenuWebProps<DomChildren> {
-  sideMenuExtraClasses?: string;
+	sideMenuExtraClasses?: string;
 }
 
 export const GidsSideMenuDom = ({
-  children,
-  sideMenuAppearance = 'default',
-  sideMenuExtraClasses,
+	children,
+	sideMenuAppearance = 'default',
+	height = 'intrinsic',
+	sideMenuExtraClasses,
 }: GidsSideMenuDomProps): HTMLDivElement => {
-  const sideMenu = document.createElement('div');
-  sideMenu.className = getGidsSideMenuClassNames(
-    { sideMenuAppearance },
-    sideMenuExtraClasses,
-  );
+	const sideMenu = document.createElement('div');
+	sideMenu.className = getGidsSideMenuClassNames(
+		{ sideMenuAppearance, height },
+		sideMenuExtraClasses,
+	);
 
-  sideMenu.setAttribute('side-menu-appearance', sideMenuAppearance);
+	sideMenu.setAttribute('side-menu-appearance', sideMenuAppearance);
+	sideMenu.setAttribute('side-menu-height', height);
 
-  if (children) {
-    appendAsChildren(sideMenu, children);
-  }
+	if (children) {
+		appendAsChildren(sideMenu, children);
+	}
 
-  return sideMenu;
+	return sideMenu;
 };