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

package/src/components/GidsBasicTableRow/GidsBasicTableRow.ts

@@ -0,0 +1,79 @@
+import {
+	GidsBasicTableCellTypographyStyle,
+	type GidsBasicTableRowWebProps,
+	GidsBasicTableRowWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsBasicTableCellDom } from '../GidsBasicTableCell/GidsBasicTableCell';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsBasicTableRowClassNames } = GidsBasicTableRowWebUtils;
+
+type GidsBasicTableRowBaseWebProps = GidsBasicTableRowWebProps<
+	GidsBasicTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+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,227 @@
+import {
+	GidsBasicTableCellTypographyStyle,
+	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';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+
+const {
+	getGidsBsTableClassNames,
+	getCustomisedTopHeaderCells,
+	getBsTableClasses,
+	getBsTableBodyBorder,
+} = GidsBsTableWebUtils;
+
+type GidsBsTableBaseWebProps = GidsBsTableWebProps<
+	GidsBasicTableCellTypographyStyle,
+	IconName,
+	IconAppearance,
+	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<
+		GidsBasicTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>({ 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<
+		GidsBasicTableCellTypographyStyle,
+		IconName,
+		IconAppearance
+	>({ width, isHeadVisible });
+
+	if (isTopHeaderVisible && topHeaderCells && topHeaderCells.length > 0) {
+		// Append Table Header
+		table.append(
+			GidsBasicTableHeaderDom({
+				appearance: topHeaderAppearance,
+				labelTypography: topHeaderLabelTypography,
+				textAlignment: topHeaderTextAlignment,
+				headerCells: getCustomisedTopHeaderCells<
+					GidsBasicTableCellTypographyStyle,
+					IconName,
+					IconAppearance
+				>({
+					topHeaderCells,
+					tableBorders,
+				}),
+				width: isHeadVisible ? 'full' : width,
+			}),
+		);
+	}
+
+	if (tableBody && tableBody.length > 0) {
+		table.append(
+			GidsBasicTableBodyDom({
+				width: isHeadVisible ? 'full' : width,
+				tableBorders: getBsTableBodyBorder<
+					GidsBasicTableCellTypographyStyle,
+					IconName,
+					IconAppearance
+				>({ 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/GidsMdTable/GidsMdTable.ts

@@ -0,0 +1,66 @@
+import {
+	GidsBasicTableCellTypographyStyle,
+	GidsMdTableWebProps,
+	GidsMdTableWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsMdTableClassNames } = GidsMdTableWebUtils;
+
+type GidsMdTableBaseWebProps = GidsMdTableWebProps<
+	GidsBasicTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+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;
 };

package/src/components/GidsSideNavigation/GidsSideNavigation.ts

@@ -1,97 +1,100 @@
 import {
-  GidsSideNavigationWebProps,
-  GidsSideNavigationWebUtils,
+	GidsSideNavigationWebProps,
+	GidsSideNavigationWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 import { DomChildren } from '../../utils/domUtils.js';
 import { HtmlInputAttributes } from '../GidsInput/GidsInput.js';
 import {
-  type GidsSideMenuHeaderDomProps,
-  GidsSideMenuHeaderDom,
+	type GidsSideMenuHeaderDomProps,
+	GidsSideMenuHeaderDom,
 } from '../GidsSideMenuHeader/GidsSideMenuHeader.js';
 import { GidsSideMenuDom } from '../GidsSideMenu/GidsSideMenu.js';
 
 const { getGidsSideNavigationClassNames } = GidsSideNavigationWebUtils;
 
 export interface GidsSideNavigationDomProps
-  extends
-    GidsSideNavigationWebProps<
-      DomChildren,
-      DomChildren,
-      Element,
-      HtmlInputAttributes
-    >,
-    Pick<
-      GidsSideMenuHeaderDomProps,
-      | 'headerClasses'
-      | 'wrapperClass'
-      | 'onGidsSearchBarClear'
-      | 'className'
-      | 'onBlur'
-      | 'onChange'
-      | 'onFocus'
-      | 'onInput'
-    > {
-  extraSideNavigationClasses?: string;
+	extends
+		GidsSideNavigationWebProps<
+			DomChildren,
+			DomChildren,
+			Element,
+			HtmlInputAttributes
+		>,
+		Pick<
+			GidsSideMenuHeaderDomProps,
+			| 'headerClasses'
+			| 'wrapperClass'
+			| 'onGidsSearchBarClear'
+			| 'className'
+			| 'onBlur'
+			| 'onChange'
+			| 'onFocus'
+			| 'onInput'
+		> {
+	extraSideNavigationClasses?: string;
 }
 
 export const GidsSideNavigationDom = ({
-  sideNavigationAppearance = 'default',
-  headerDividedByDivider = true,
-  headerClasses,
-  extraSideNavigationClasses,
-  customHeaderChildren,
-  isHeaderVisible = true,
-  searchVisible = true,
-  children,
-  onGidsSearchBarClear,
-  onBlur,
-  onChange,
-  onFocus,
-  onInput,
-  ...restProps
+	sideNavigationAppearance = 'default',
+	headerDividedByDivider = true,
+	headerClasses,
+	height = 'intrinsic',
+	extraSideNavigationClasses,
+	customHeaderChildren,
+	isHeaderVisible = true,
+	searchVisible = true,
+	children,
+	onGidsSearchBarClear,
+	onBlur,
+	onChange,
+	onFocus,
+	onInput,
+	...restProps
 }: GidsSideNavigationDomProps): HTMLElement => {
-  const sideNav = document.createElement('nav');
+	const sideNav = document.createElement('nav');
 
-  // FIX: Force set the physical HTML attributes so Stencil is forced to read them on boot
-  sideNav.setAttribute('side-navigation-appearance', sideNavigationAppearance);
-  sideNav.setAttribute('is-header-visible', String(isHeaderVisible));
-  sideNav.setAttribute('search-visible', String(searchVisible));
-  sideNav.setAttribute(
-    'header-divided-by-divider',
-    String(headerDividedByDivider),
-  );
+	// FIX: Force set the physical HTML attributes so Stencil is forced to read them on boot
+	sideNav.setAttribute('side-navigation-appearance', sideNavigationAppearance);
+	sideNav.setAttribute('is-header-visible', String(isHeaderVisible));
+	sideNav.setAttribute('search-visible', String(searchVisible));
+	sideNav.setAttribute('side-navigation-height', height);
+	sideNav.setAttribute(
+		'header-divided-by-divider',
+		String(headerDividedByDivider),
+	);
 
-  sideNav.className = getGidsSideNavigationClassNames(
-    { sideNavigationAppearance },
-    extraSideNavigationClasses,
-  );
+	sideNav.className = getGidsSideNavigationClassNames(
+		{ sideNavigationAppearance },
+		extraSideNavigationClasses,
+	);
 
-  if (isHeaderVisible) {
-    sideNav.append(
-      GidsSideMenuHeaderDom({
-        searchVisible,
-        headerClasses,
-        headerAppearance: sideNavigationAppearance,
-        customChildren: customHeaderChildren,
-        onBlur,
-        onChange,
-        onFocus,
-        onInput,
-        onGidsSearchBarClear,
-        headerDividedByDivider,
-        ...restProps,
-      }),
-    );
-  }
+	if (isHeaderVisible) {
+		sideNav.append(
+			GidsSideMenuHeaderDom({
+				searchVisible,
+				headerClasses,
+				headerAppearance: sideNavigationAppearance,
+				customChildren: customHeaderChildren,
+				onBlur,
+				onChange,
+				onFocus,
+				onInput,
+				onGidsSearchBarClear,
+				headerDividedByDivider,
+				...restProps,
+			}),
+		);
+	}
 
-  if (children) {
-    sideNav.append(
-      GidsSideMenuDom({
-        children,
-        sideMenuAppearance: sideNavigationAppearance,
-      }),
-    );
-  }
+	if (children) {
+		sideNav.append(
+			GidsSideMenuDom({
+				children,
+				sideMenuAppearance: sideNavigationAppearance,
+				height,
+			}),
+		);
+	}
 
-  return sideNav;
+	return sideNav;
 };

package/src/index.ts

@@ -109,6 +109,13 @@ export * from './components/GidsExpansion/GidsExpansion.js';
 export * from './components/GidsExpansionBodyListItem/GidsExpansionBodyListItem.js';
 export * from './components/GidsExpansionBodyList/GidsExpansionBodyList.js';
 export * from './components/GidsExpansionGroup/GidsExpansionGroup.js';
+export * from './components/GidsBasicTableHead/GidsBasicTableHead.js';
+export * from './components/GidsBasicTableCell/GidsBasicTableCell.js';
+export * from './components/GidsBasicTableRow/GidsBasicTableRow.js';
+export * from './components/GidsBasicTableHeader/GidsBasicTableHeader.js';
+export * from './components/GidsMdTable/GidsMdTable.js';
+export * from './components/GidsBsTable/GidsBsTable.js';
+export * from './components/GidsBasicTableBody/GidsBasicTableBody.js';
 
 /**
  * Utilities