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

package/src/components/GidsSkeleton/GidsSkeleton.ts

@@ -0,0 +1,40 @@
+import {
+	type GidsSkeletonWebProps,
+	GidsSkeletonWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsSkeletonClassNames } = GidsSkeletonWebUtils;
+
+type GidsSkeletonBaseWebProps = GidsSkeletonWebProps;
+
+type GidsSkeletonElement = HTMLElement & GidsSkeletonBaseWebProps;
+
+export interface GidsSkeletonDomProps extends GidsSkeletonBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsSkeletonDom = ({
+	variant = 'text',
+	animation = 'none',
+	width,
+	height,
+	extraClasses,
+}: GidsSkeletonDomProps): HTMLElement => {
+	const skeleton = document.createElement(
+		'gids-skeleton',
+	) as GidsSkeletonElement;
+
+	skeleton.variant = variant;
+	skeleton.animation = animation;
+
+	if (width) {
+		skeleton.width = width;
+	}
+	if (height) {
+		skeleton.height = height;
+	}
+
+	skeleton.className = getGidsSkeletonClassNames(extraClasses);
+
+	return skeleton;
+};

package/src/components/GidsTable/GidsTable.ts

@@ -27,10 +27,13 @@ import {
 	GidsTableBodyActionBaseEvent,
 	GidsTableBodyDom,
 } from '../GidsTableBody/GidsTableBody';
+import { GidsTableFooterDom } from '../GidsTableFooter/GidsTableFooter';
+import { GidsTableFooterControlDom } from '../GidsTableFooterControl/GidsTableFooterControl';
 
 const {
 	getGidsTableClassNames,
 	getCustomisedTableHeaderEntries,
+	getCustomisedTableFooterEntries,
 	getTableBodyBorder,
 } = GidsTableWebUtils;
 
@@ -78,8 +81,8 @@ export const GidsTableDom = ({
 	toolbar,
 	toolbarChildren,
 	children,
-	headerItems,
-	bodyContent,
+	headerItems = [],
+	bodyContent = [],
 	isHeaderVisible,
 	isToolbarVisible,
 	bodySettings,
@@ -90,6 +93,12 @@ export const GidsTableDom = ({
 	tableBodyMaxHeight = 200,
 	horizontalScroll = false,
 	onTableAction,
+	footerItems = [],
+	footerSettings,
+	isFooterVisible = false,
+	isFooterControlVisible = false,
+	footerControlSettings,
+	footerControl,
 	extraClasses,
 }: GidsTableDomProps): HTMLDivElement => {
 	const tableDiv = document.createElement('div');
@@ -117,7 +126,6 @@ export const GidsTableDom = ({
 	 * Scroll container
 	 */
 	const tableScrollContainer = document.createElement('div');
-
 	tableScrollContainer.className = [
 		'gids-table__scroll-container',
 		horizontalScroll ? 'gids-table__scroll-container--horizontal-scroll' : '',
@@ -133,7 +141,6 @@ export const GidsTableDom = ({
 	 * Table
 	 */
 	const table = document.createElement('table');
-
 	table.className = 'gids-table--main-table';
 
 	/*
@@ -187,6 +194,22 @@ export const GidsTableDom = ({
 				}),
 			);
 		}
+
+		/**
+		 * Footer
+		 */
+		if (isFooterVisible && footerItems && footerItems.length > 0) {
+			table.append(
+				GidsTableFooterDom({
+					...footerSettings,
+					footerItems: getCustomisedTableFooterEntries({
+						footerItems,
+						tableBorders,
+					}),
+					onFooterAction: onActionBtnClick,
+				}),
+			);
+		}
 	}
 
 	/*
@@ -199,5 +222,19 @@ export const GidsTableDom = ({
 	tableScrollContainer.appendChild(table);
 	tableDiv.appendChild(tableScrollContainer);
 
+	/*
+	 * Table Footer Control
+	 */
+	if (isFooterControlVisible || isValidChildren(footerControl)) {
+		tableDiv.append(
+			GidsTableFooterControlDom({
+				...footerControlSettings,
+				tableViewControllerSettings:
+					footerControlSettings?.tableViewControllerSettings,
+				children: footerControl,
+			}),
+		);
+	}
+
 	return tableDiv;
 };

package/src/components/GidsTableFooter/GidsTableFooter.ts

@@ -11,8 +11,6 @@ import {
 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;
 
@@ -24,10 +22,7 @@ export type GidsTableFooterBaseWebProps = GidsTableFooterWebProps<
 	GidsTableEntryTypographyStyle,
 	IconName,
 	IconAppearance,
-	DomChildren,
-	DomChildren,
-	GidsTableFooterNativeInputForwardedDomProps,
-	Event
+	DomChildren
 >;
 
 export type GidsTableFooterActionBaseEvent = GidsTableFooterActionEvent<
@@ -47,8 +42,6 @@ export const GidsTableFooterDom = ({
 	appearance = 'none',
 	labelTypography = 'label-medium',
 	textAlignment = 'center',
-	leadingActions = [],
-	trailingActions = [],
 	entryAlignment = 'center',
 	colorSwatchLabelColor = 'default',
 	colorSwatchLabelPosition = 'left',
@@ -74,8 +67,6 @@ export const GidsTableFooterDom = ({
 	badgesOrientation = 'horizontal',
 
 	// Footer Props
-	footerControlSettings,
-	footerControlChildren,
 	children,
 	footerItems,
 	onFooterAction,
@@ -91,8 +82,6 @@ export const GidsTableFooterDom = ({
 			const rowContent = GidsTableRowDom({
 				rows: footerItems,
 				rowType: 'footer',
-				leadingActions,
-				trailingActions,
 				entryAlignment,
 				colorSwatchLabelColor,
 				colorSwatchLabelPosition,
@@ -126,32 +115,5 @@ export const GidsTableFooterDom = ({
 		}
 	}
 
-	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;
 };

package/src/components/GidsTableFooterControl/GidsTableFooterControl.ts

@@ -30,6 +30,7 @@ export interface GidsTableFooterControlDomProps extends GidsTableFooterControlBa
 }
 
 export const GidsTableFooterControlDom = ({
+	appearance = 'surface-default',
 	children,
 	bulkStatus,
 	rangeStatus,
@@ -40,8 +41,14 @@ export const GidsTableFooterControlDom = ({
 	extraClasses,
 }: GidsTableFooterControlDomProps): HTMLDivElement => {
 	const tableFooterControl = document.createElement('div');
-	tableFooterControl.className =
-		getGidsTableFooterControlClassNames(extraClasses);
+	tableFooterControl.className = getGidsTableFooterControlClassNames(
+		{ appearance },
+		extraClasses,
+	);
+
+	if (appearance) {
+		tableFooterControl.setAttribute('control-appearance', appearance);
+	}
 
 	if (isValidChildren(children)) {
 		appendAsChildren(tableFooterControl, children);

package/src/components/GidsTableHeader/GidsTableHeader.ts

@@ -38,8 +38,6 @@ export const GidsTableHeaderDom = ({
 	appearance = 'none',
 	labelTypography = 'label-medium',
 	textAlignment = 'center',
-	leadingActions = [],
-	trailingActions = [],
 	onHeaderAction,
 	extraClasses,
 	entryAlignment = 'center',
@@ -77,8 +75,6 @@ export const GidsTableHeaderDom = ({
 			const rowContent = GidsTableRowDom({
 				rows: headerItems,
 				rowType: 'header',
-				leadingActions,
-				trailingActions,
 				entryAlignment,
 				colorSwatchLabelColor,
 				colorSwatchLabelPosition,

package/src/components/GidsTableRow/GidsTableRow.ts

@@ -38,8 +38,6 @@ export interface GidsTableRowDomProps extends GidsTableRowBaseWebProps {
 export const GidsTableRowDom = ({
 	rows,
 	rowType = 'body',
-	leadingActions,
-	trailingActions,
 	onRowAction,
 	textAlignment = 'center',
 	appearance = 'none',
@@ -114,8 +112,8 @@ export const GidsTableRowDom = ({
 						contentColor,
 						label: rowLabel,
 						entryType: rowType,
-						leadingActions,
-						trailingActions,
+						leadingActions: row?.leadingActions ?? [],
+						trailingActions: row?.trailingActions ?? [],
 						entryAlignment,
 						colorSwatchLabelColor,
 						colorSwatchLabelPosition,

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

package/src/components/_GidsDialogControl/GidsDialogControl.ts

@@ -0,0 +1,198 @@
+import {
+	GidsDialogControlWebProps,
+	GidsDialogControlWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	DomChildren,
+	DomNodeOrString,
+} from '../../utils/domUtils';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsIconDom } from '../GidsIcon/GidsIcon';
+import { GidsButtonDom } from '../GidsButton/GidsButton';
+
+const { getGidsDialogControlClassNames, setupDialogControlDraggable } =
+	GidsDialogControlWebUtils;
+
+type GidsDialogControlBaseWebProps = GidsDialogControlWebProps<
+	DomNodeOrString,
+	Event,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsDialogControlDomProps extends GidsDialogControlBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsDialogControlDom = ({
+	variant = 'alert',
+	maxWidth = 'sm',
+	scrollMode = 'paper',
+	draggable = false,
+	headerTitle,
+	closeVisible = true,
+	children,
+	footerActions = [],
+	onCloseDialogControl,
+	headerDividerVisible = false,
+	footerDividerVisible = false,
+	onDialogControlFooterAction,
+	extraClasses,
+}: GidsDialogControlDomProps): HTMLDialogElement => {
+	const dialogControl = document.createElement('dialog');
+	dialogControl.className = getGidsDialogControlClassNames(
+		{ variant, maxWidth, scrollMode },
+		extraClasses,
+	);
+
+	dialogControl.setAttribute('dialog-variant', variant);
+	dialogControl.setAttribute('max-width', maxWidth);
+	dialogControl.setAttribute('scroll-mode', scrollMode);
+
+	if (headerTitle) {
+		dialogControl.setAttribute('header-title', headerTitle);
+	}
+
+	if (draggable) {
+		dialogControl.setAttribute('dialog-draggable', 'true');
+	} else {
+		dialogControl.removeAttribute('dialog-draggable');
+	}
+
+	if (closeVisible) {
+		dialogControl.setAttribute('close-visible', 'true');
+	} else {
+		dialogControl.removeAttribute('close-visible');
+	}
+
+	// Dialog control header
+	const header = document.createElement('div');
+	header.className = headerDividerVisible
+		? 'gids-dialog-control__header gids-dialog-control__header-divider'
+		: 'gids-dialog-control__header';
+
+	if (headerTitle !== undefined) {
+		const headerTitleEl = document.createElement('h2');
+		headerTitleEl.className = 'gids-dialog-control__title';
+		headerTitleEl.textContent = headerTitle;
+		header.appendChild(headerTitleEl);
+	}
+
+	function onDialogControlClose(event: Event) {
+		if (onCloseDialogControl) {
+			onCloseDialogControl({
+				originalEvent: event,
+			});
+		}
+	}
+
+	// Render structural Close Icon layout button if visible setting rule matches
+	if (closeVisible) {
+		const closeButton = GidsButtonDom({
+			appearance: 'subtle',
+			size: 'md',
+			width: 'intrinsic',
+			leadingIcon: GidsIconDom({ name: 'cross', size: 'md' }),
+			onClick: onDialogControlClose,
+		});
+		header.appendChild(closeButton);
+	}
+
+	dialogControl.appendChild(header);
+
+	// Dialog control body
+	if (children) {
+		const body = document.createElement('div');
+		body.className = 'gids-dialog-control__body';
+		appendAsChildren(body, children);
+		dialogControl.appendChild(body);
+	}
+
+	// Dialog control footer
+	if (footerActions !== undefined && footerActions.length > 0) {
+		const footer = document.createElement('div');
+		footer.className = footerDividerVisible
+			? 'gids-dialog-control__footer gids-dialog-control__footer-divider'
+			: 'gids-dialog-control__footer';
+
+		footerActions.forEach((action, indexI) => {
+			const buttonChildren: DomChildren = [];
+
+			// Append leading decorative graphic nodes safely if defined
+			if (action.leadingIconName) {
+				buttonChildren.push(
+					GidsIconDom({
+						name: action.leadingIconName,
+						size: action?.leadingIconSize ?? 'md',
+						appearance: action?.leadingIconAppearance ?? 'filled',
+					}),
+				);
+			}
+
+			// Map textual action titles cleanly
+			if (action.buttonLabel) {
+				const labelSpan = document.createElement('span');
+				labelSpan.textContent = action.buttonLabel;
+				buttonChildren.push(labelSpan);
+			}
+
+			// Append trailing decorative graphic nodes safely if defined
+			if (action.trailingIconName) {
+				buttonChildren.push(
+					GidsIconDom({
+						name: action.trailingIconName,
+						size: action.trailingIconSize,
+						appearance: action.trailingIconAppearance,
+					}),
+				);
+			}
+
+			const actionBtnAppearance = action?.appearance ?? 'default';
+			const actionBtnSize = action?.size ?? 'md';
+			const actionBtnWidth = action?.width ?? 'intrinsic';
+			const isDestructive = action?.destructive ?? false;
+			const isDisabled = action?.disabled ?? false;
+			const isLoading = action?.loading ?? false;
+			const isPositive = action?.positive ?? false;
+
+			const actionButton = GidsButtonDom({
+				appearance: actionBtnAppearance,
+				destructive: isDestructive,
+				disabled: isDisabled,
+				loading: isLoading,
+				positive: isPositive,
+				size: actionBtnSize,
+				width: actionBtnWidth,
+				children: buttonChildren,
+				onClick: (event: Event) =>
+					onDialogControlFooterAction?.({
+						originalEvent: event,
+						appearance: actionBtnAppearance,
+						destructive: isDestructive,
+						disabled: isDisabled,
+						buttonLabel: action?.buttonLabel,
+						positive: isPositive,
+						size: actionBtnSize,
+						width: actionBtnWidth,
+						buttonId: action?.buttonId,
+						index: indexI,
+					}),
+			});
+
+			footer.appendChild(actionButton);
+		});
+
+		dialogControl.appendChild(footer);
+	}
+
+	// 5. Initialize Drag Rules Engine (Excludes layout-breaking fullscreen options)
+	if (draggable && variant !== 'full-screen') {
+		setupDialogControlDraggable(dialogControl, header);
+	}
+
+	return dialogControl;
+};