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

package/src/components/GidsDialog/GidsDialog.ts

@@ -0,0 +1,161 @@
+import {
+	GidsDialogWebUtils,
+	type GidsDialogWebProps,
+} from '@ganpatiinfo/gids-web-shared';
+import { DomNodeOrString } from '../../utils/domUtils.js';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsDialogControlDom } from '../_GidsDialogControl/GidsDialogControl.js';
+import { GidsDialogControlCloseEvent } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsDialogClassNames } = GidsDialogWebUtils;
+
+type GidsDialogBaseWebProps = GidsDialogWebProps<
+	DomNodeOrString,
+	Event,
+	IconName,
+	IconAppearance
+>;
+
+// 1. Create a custom type that represents your modified element
+export type GidsDialogCustomElement = HTMLDialogElement & {
+	element: HTMLDialogElement;
+	open: (parent?: HTMLElement) => void;
+	close: () => void;
+};
+
+export type GidsDialogDomProps = GidsDialogBaseWebProps;
+
+export const GidsDialogDom = ({
+	variant = 'alert',
+	maxWidth = 'sm',
+	scrollMode = 'paper',
+	draggable = false,
+	headerTitle,
+	closeVisible = true,
+	children,
+	footerActions = [],
+	headerDividerVisible = false,
+	footerDividerVisible = false,
+	transition = 'none',
+	cancellable,
+	onCloseDialog,
+	onDialogFooterAction,
+}: GidsDialogDomProps): GidsDialogCustomElement => {
+	const nativeClose = HTMLDialogElement.prototype.close;
+
+	function executeClose(event: GidsDialogControlCloseEvent<Event>) {
+		if (onCloseDialog) {
+			onCloseDialog({ originalEvent: event?.originalEvent });
+		}
+		dialog.close();
+	}
+
+	// 1. Generate the pristine native dialog instance directly from the control function
+	const dialog = GidsDialogControlDom({
+		variant,
+		maxWidth,
+		scrollMode,
+		draggable,
+		headerTitle,
+		closeVisible,
+		children,
+		footerActions,
+		headerDividerVisible,
+		footerDividerVisible,
+		onCloseDialogControl: executeClose,
+		onDialogControlFooterAction: onDialogFooterAction,
+	}) as unknown as GidsDialogCustomElement;
+
+	// 2. CRITICAL BODY SCROLL PROTECTION: Inject layout protections inline immediately
+	if (scrollMode === 'body') {
+		dialog.style.setProperty('position', 'absolute', 'important');
+		dialog.style.setProperty('max-height', 'none', 'important');
+		dialog.style.setProperty('overflow', 'visible', 'important');
+	}
+
+	// 3. RESTORED: Backdrop-only click cancellation logic for DOM target implementation
+	if (cancellable) {
+		dialog.addEventListener('click', (event: MouseEvent) => {
+			if (event.target === dialog) {
+				const rect = dialog.getBoundingClientRect();
+				const isOutside =
+					event.clientX < rect.left ||
+					event.clientX > rect.right ||
+					event.clientY < rect.top ||
+					event.clientY > rect.bottom;
+
+				if (isOutside) {
+					executeClose({ originalEvent: event });
+				}
+			}
+		});
+	}
+
+	dialog.element = dialog as unknown as HTMLDialogElement;
+
+	// 4. Overwrite orchestration controllers cleanly via Object.defineProperty
+	Object.defineProperty(dialog, 'open', {
+		value: (parent: HTMLElement = document.body) => {
+			// Append the node directly to the DOM tree first
+			if (!dialog.isConnected) {
+				parent.appendChild(dialog);
+			}
+
+			if (scrollMode === 'body') {
+				document.body.style.overflow = 'hidden';
+			}
+
+			// Add base classes and transition modifiers ONLY when open() runs to stop the jumping bug
+			dialog.classList.add('gids-dialog');
+
+			const transitionClasses = getGidsDialogClassNames({ transition });
+			if (transitionClasses) {
+				transitionClasses.split(' ').forEach((className) => {
+					if (className.trim()) {
+						dialog.classList.add(className.trim());
+					}
+				});
+			}
+
+			// Force a quick layout reflow to initialize your animation coordinates perfectly
+			void dialog.offsetHeight;
+
+			// Open modal cleanly on the top layer
+			dialog.showModal();
+		},
+		writable: true,
+		configurable: true,
+	});
+
+	Object.defineProperty(dialog, 'close', {
+		value: () => {
+			if (scrollMode === 'body') {
+				document.body.style.overflow = '';
+			}
+
+			// Clean up all added classes on close so they completely reset for the next run
+			dialog.classList.remove('gids-dialog');
+			const transitionClasses = getGidsDialogClassNames({ transition });
+			if (transitionClasses) {
+				transitionClasses.split(' ').forEach((className) => {
+					if (className.trim()) {
+						dialog.classList.remove(className.trim());
+					}
+				});
+			}
+
+			nativeClose.call(dialog);
+
+			if (dialog.isConnected) {
+				dialog.remove();
+			}
+		},
+		writable: true,
+		configurable: true,
+	});
+
+	return dialog;
+};

package/src/components/GidsHeaderNavigation/GidsHeaderNavigation.ts

@@ -0,0 +1,75 @@
+import {
+	GidsHeaderNavigationWebProps,
+	GidsHeaderNavigationWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsHeaderNavigationClassNames } = GidsHeaderNavigationWebUtils;
+
+export type GidsHeaderNavigationBaseWebProps = GidsHeaderNavigationWebProps<
+	Event,
+	IconName
+>;
+
+type GidsHeaderNavigationElement = HTMLElement &
+	GidsHeaderNavigationBaseWebProps;
+
+export interface GidsHeaderNavigationDomProps extends GidsHeaderNavigationBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsHeaderNavigationDom = ({
+	type = 'gap',
+	navMenus = [],
+	appearance = 'default',
+	selectionAppearance = 'default',
+	applyShadow = false,
+	borderRadius = 'none',
+	mode = 'wrap',
+	applySeparators = false,
+	size = 'md',
+	selectionType = 'single-deselection-not-allowed',
+	defaultNavItemId,
+	defaultNavMenuId,
+	defaultNavMenuItemId,
+	onHeaderNavigationItemChange,
+	extraClasses,
+}: GidsHeaderNavigationDomProps): HTMLElement => {
+	const headerNavigation = document.createElement(
+		'gids-header-navigation',
+	) as GidsHeaderNavigationElement;
+
+	headerNavigation.setAttribute('header-nav-appearance', appearance);
+	headerNavigation.setAttribute('header-nav-size', size);
+	headerNavigation.setAttribute(
+		'header-nav-selection-appearance',
+		selectionAppearance,
+	);
+	headerNavigation.setAttribute('header-nav-type', type);
+
+	headerNavigation.navMenus = navMenus;
+	headerNavigation.appearance = appearance;
+	headerNavigation.selectionAppearance = selectionAppearance;
+	headerNavigation.applyShadow = applyShadow;
+	headerNavigation.borderRadius = borderRadius;
+	headerNavigation.mode = mode;
+	headerNavigation.applySeparators = applySeparators;
+	headerNavigation.size = size;
+	headerNavigation.type = type;
+	headerNavigation.selectionType = selectionType;
+	headerNavigation.defaultNavItemId = defaultNavItemId;
+	headerNavigation.defaultNavMenuId = defaultNavMenuId;
+	headerNavigation.defaultNavMenuItemId = defaultNavMenuItemId;
+
+	headerNavigation.className = getGidsHeaderNavigationClassNames(
+		{ mode, type },
+		extraClasses,
+	);
+
+	if (onHeaderNavigationItemChange) {
+		headerNavigation.onHeaderNavigationItemChange =
+			onHeaderNavigationItemChange;
+	}
+
+	return headerNavigation;
+};

package/src/components/GidsHeaderNavigationItem/GidsHeaderNavigationItem.ts

@@ -0,0 +1,103 @@
+import {
+	GidsHeaderNavigationItemWebProps,
+	GidsHeaderNavigationItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { assignToSlot, DomChildren } from '../../utils/domUtils';
+
+const { getGidsHeaderNavigationItemClassNames } =
+	GidsHeaderNavigationItemWebUtils;
+
+export type GidsHeaderNavigationItemBaseWebProps =
+	GidsHeaderNavigationItemWebProps<Event, DomChildren>;
+
+type GidsHeaderNavigationItemElement = HTMLElement &
+	GidsHeaderNavigationItemBaseWebProps;
+
+export interface GidsHeaderNavigationItemDomProps extends GidsHeaderNavigationItemBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsHeaderNavigationItemDom = ({
+	id,
+	menuId,
+	appearance = 'default',
+	selectionAppearance = 'default',
+	expanded = false,
+	selected = false,
+	selectedMenuItemId,
+	label,
+	leadingIcon,
+	menuItems = [],
+	size = 'sm',
+	borderRadius = 'none',
+	applyShadow = false,
+	selectionType = 'single-deselection-allowed',
+	onPressNavigationItem,
+	onMenuItemChange,
+	extraClasses,
+}: GidsHeaderNavigationItemDomProps): HTMLElement => {
+	const headerNavigationItem = document.createElement(
+		'gids-header-navigation-item',
+	) as GidsHeaderNavigationItemElement;
+
+	headerNavigationItem.setAttribute('id', id);
+	headerNavigationItem.setAttribute('header-nav-item-appearance', appearance);
+	headerNavigationItem.setAttribute('header-nav-item-size', size);
+	headerNavigationItem.setAttribute(
+		'header-nav-item-selection-appearance',
+		selectionAppearance,
+	);
+	if (menuId) {
+		headerNavigationItem.setAttribute('menu-id', menuId);
+	}
+	if (selected) {
+		headerNavigationItem.setAttribute('header-nav-item-selected', 'true');
+	} else {
+		headerNavigationItem.removeAttribute('header-nav-item-selected');
+	}
+	if (expanded) {
+		headerNavigationItem.setAttribute('header-nav-item-expanded', 'true');
+	} else {
+		headerNavigationItem.removeAttribute('header-nav-item-expanded');
+	}
+
+	headerNavigationItem.id = id;
+	headerNavigationItem.appearance = appearance;
+	headerNavigationItem.selectionAppearance = selectionAppearance;
+	headerNavigationItem.selected = selected;
+	headerNavigationItem.label = label;
+	headerNavigationItem.menuItems = menuItems;
+	headerNavigationItem.size = size;
+	headerNavigationItem.expanded = expanded;
+	headerNavigationItem.borderRadius = borderRadius;
+	headerNavigationItem.applyShadow = applyShadow;
+	headerNavigationItem.selectedMenuItemId = selectedMenuItemId;
+	headerNavigationItem.selectionType = selectionType;
+
+	if (leadingIcon) {
+		// @ts-expect-error error expected
+		assignToSlot(headerNavigationItem, 'headerNavItemLeadingIcon', leadingIcon);
+	}
+
+	headerNavigationItem.className = getGidsHeaderNavigationItemClassNames(
+		{
+			selected,
+			appearance,
+			selectionAppearance,
+			size,
+			applyShadow,
+			borderRadius,
+		},
+		extraClasses,
+	);
+
+	if (onPressNavigationItem) {
+		headerNavigationItem.onPressNavigationItem = onPressNavigationItem;
+	}
+
+	if (onMenuItemChange) {
+		headerNavigationItem.onMenuItemChange = onMenuItemChange;
+	}
+
+	return headerNavigationItem;
+};

package/src/components/GidsMatrixTable/GidsMatrixTable.ts

@@ -21,12 +21,22 @@ const {
 	getMatrixTableClasses,
 } = GidsMatrixTableWebUtils;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
 type GidsMatrixTableBaseWebProps = GidsMatrixTableWebProps<
 	GidsTableCellTypographyStyle,
 	IconName,
 	IconAppearance
 >;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
 type GidsMatrixTableActionButtonBaseEvent =
 	GidsMatrixTableBodyActionButtonEvent<
 		Event,
@@ -35,6 +45,11 @@ type GidsMatrixTableActionButtonBaseEvent =
 		IconAppearance
 	>;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
 export interface GidsMatrixTableDomProps extends GidsMatrixTableBaseWebProps {
 	extraClasses?: string;
 	onClickMatrixTableActionBtn?: (
@@ -42,6 +57,11 @@ export interface GidsMatrixTableDomProps extends GidsMatrixTableBaseWebProps {
 	) => void;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTable` and its props and functions instead.
+ */
 export const GidsMatrixTableDom = ({
 	topHeaderCells = [],
 	tableBodyItems = [],

package/src/components/GidsMatrixTableBody/GidsMatrixTableBody.ts

@@ -20,11 +20,22 @@ import {
 const { getGidsMatrixTableBodyClassNames, getConstructedMatrixTableBodyItems } =
 	GidsMatrixTableBodyWebUtils;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
 type GidsMatrixTableBodyBaseWebProps = GidsMatrixTableBodyWebProps<
 	GidsTableCellTypographyStyle,
 	IconName,
 	IconAppearance
 >;
+
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
 export type GidsMatrixTableBodyActionButtonBaseEvent =
 	GidsMatrixTableBodyActionButtonEvent<
 		Event,
@@ -33,6 +44,11 @@ export type GidsMatrixTableBodyActionButtonBaseEvent =
 		IconAppearance
 	>;
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
 export interface GidsMatrixTableBodyDomProps extends GidsMatrixTableBodyBaseWebProps {
 	extraClasses?: string;
 	onClickMatrixBodyCellActionBtn?: (
@@ -40,6 +56,11 @@ export interface GidsMatrixTableBodyDomProps extends GidsMatrixTableBodyBaseWebP
 	) => void;
 }
 
+/**
+ * @deprecated
+ *
+ * Use `GidsCrossTableBody` and its props and functions instead.
+ */
 export const GidsMatrixTableBodyDom = ({
 	width = 'full',
 	tableBodyItems = [],

package/src/components/GidsMenu/GidsMenu.ts

@@ -8,6 +8,7 @@ import {
 	DomNodeOrString,
 } from '../../utils/domUtils.js';
 import { GidsHeadingDom } from '../GidsHeading/GidsHeading.js';
+import { GidsDividerDom } from '../GidsDivider/GidsDivider.js';
 
 const { getGidsMenuClassNames } = GidsMenuWebUtils;
 
@@ -24,6 +25,7 @@ export const GidsMenuDom = ({
 	heading,
 	supportingText,
 	supportingTextTypography,
+	isHeaderDividerVisible = false,
 	...restProps
 }: GidsMenuDomProps): HTMLDivElement => {
 	const menu = document.createElement('div');
@@ -45,6 +47,19 @@ export const GidsMenuDom = ({
 		);
 	}
 
+	if (isHeaderDividerVisible) {
+		const dividerContainer = document.createElement('div');
+		dividerContainer.className = 'gids-menu__header-divider';
+
+		dividerContainer.append(
+			GidsDividerDom({
+				orientation: 'horizontal',
+			}),
+		);
+
+		menu.append(dividerContainer);
+	}
+
 	if (children !== undefined && children !== null) {
 		const childrenContainer = document.createElement('div');
 		childrenContainer.className = 'gids-menu__children';

package/src/components/GidsProfile/GidsProfile.ts

@@ -0,0 +1,120 @@
+import {
+	GidsProfileWebProps,
+	GidsProfileWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsProfileClassNames } = GidsProfileWebUtils;
+
+export type GidsProfileBaseWebProps = GidsProfileWebProps<
+	Event,
+	IconName,
+	IconAppearance,
+	string
+>;
+
+type GidsProfileElement = HTMLElement & GidsProfileBaseWebProps;
+
+export interface GidsProfileDomProps extends GidsProfileBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsProfileDom = ({
+	id,
+	menuId,
+	profileControlAppearance = 'default',
+	profileControlAvatarProps,
+	profileControlAvatarVisible = true,
+	profileControlAvatarBadgeVisible = true,
+	profileControlBorderRadius = 'none',
+	profileControlLeadingIcon,
+	profileControlShadow = 'none',
+	profileControlSupportingText,
+	profileControlTitle,
+	profileControlTrailingIcon,
+	profileMenuItems = [],
+	headerDividerVisible = false,
+	headerVisible = false,
+	headerItem,
+	expanded = false,
+	listSectionDividerVisible = false,
+	profileControlLeadingIconSize = 'sm',
+	profileControlTrailingIconSize = 'sm',
+	profileControlLeadingIconAppearance = 'filled',
+	profileControlTrailingIconAppearance = 'filled',
+	onHeaderAvatarPress,
+	onHeaderSupportingTextPress,
+	onHeaderTitlePress,
+	onProfileMenuItemPress,
+	onPressProfileControl,
+	extraClasses,
+}: GidsProfileDomProps): HTMLElement => {
+	const profile = document.createElement('gids-profile') as GidsProfileElement;
+
+	profile.setAttribute('id', id);
+
+	if (expanded) {
+		profile.setAttribute('menu-expanded', 'true');
+	} else {
+		profile.removeAttribute('menu-expanded');
+	}
+
+	profile.id = id;
+	profile.menuId = menuId;
+	profile.expanded = expanded;
+	profile.profileControlAppearance = profileControlAppearance;
+	profile.profileControlBorderRadius = profileControlBorderRadius;
+	profile.profileControlShadow = profileControlShadow;
+	profile.profileControlAvatarProps = profileControlAvatarProps;
+	profile.profileControlAvatarVisible = profileControlAvatarVisible;
+	profile.profileControlLeadingIcon = profileControlLeadingIcon;
+	profile.profileControlLeadingIconSize = profileControlLeadingIconSize;
+	profile.profileControlTrailingIconSize = profileControlTrailingIconSize;
+	profile.profileControlLeadingIconAppearance =
+		profileControlLeadingIconAppearance;
+	profile.profileControlTrailingIconAppearance =
+		profileControlTrailingIconAppearance;
+	profile.profileControlSupportingText = profileControlSupportingText;
+	profile.profileControlTitle = profileControlTitle;
+	profile.profileControlTrailingIcon = profileControlTrailingIcon;
+	profile.profileMenuItems = profileMenuItems;
+	profile.headerDividerVisible = headerDividerVisible;
+	profile.headerVisible = headerVisible;
+	profile.headerItem = headerItem;
+	profile.listSectionDividerVisible = listSectionDividerVisible;
+	profile.profileControlAvatarBadgeVisible = profileControlAvatarBadgeVisible;
+
+	profile.className = getGidsProfileClassNames(
+		{
+			profileControlAppearance,
+			profileControlBorderRadius,
+			profileControlShadow,
+		},
+		extraClasses,
+	);
+
+	if (onHeaderAvatarPress) {
+		profile.onHeaderAvatarPress = onHeaderAvatarPress;
+	}
+
+	if (onHeaderTitlePress) {
+		profile.onHeaderTitlePress = onHeaderTitlePress;
+	}
+
+	if (onHeaderSupportingTextPress) {
+		profile.onHeaderSupportingTextPress = onHeaderSupportingTextPress;
+	}
+
+	if (onProfileMenuItemPress) {
+		profile.onProfileMenuItemPress = onProfileMenuItemPress;
+	}
+
+	if (onPressProfileControl) {
+		profile.onPressProfileControl = onPressProfileControl;
+	}
+
+	return profile;
+};

package/src/components/GidsProfileMenu/GidsProfileMenu.ts

@@ -0,0 +1,60 @@
+import {
+	GidsProfileMenuWebProps,
+	GidsProfileMenuWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsProfileMenuClassNames } = GidsProfileMenuWebUtils;
+
+export type GidsProfileMenuBaseWebProps = GidsProfileMenuWebProps<
+	Event,
+	string
+>;
+
+type GidsProfileMenuElement = HTMLElement & GidsProfileMenuBaseWebProps;
+
+export interface GidsProfileMenuDomProps extends GidsProfileMenuBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsProfileMenuDom = ({
+	headerItem,
+	headerVisible = false,
+	profileMenuItems = [],
+	listSectionDividerVisible = false,
+	headerDividerVisible = true,
+	onHeaderAvatarPress,
+	onHeaderTitlePress,
+	onHeaderSupportingTextPress,
+	onProfileMenuItemPress,
+	extraClasses,
+}: GidsProfileMenuDomProps): HTMLElement => {
+	const profileMenu = document.createElement(
+		'gids-profile-menu',
+	) as GidsProfileMenuElement;
+
+	profileMenu.headerItem = headerItem;
+	profileMenu.headerVisible = headerVisible;
+	profileMenu.profileMenuItems = profileMenuItems;
+	profileMenu.listSectionDividerVisible = listSectionDividerVisible;
+	profileMenu.headerDividerVisible = headerDividerVisible;
+
+	profileMenu.className = getGidsProfileMenuClassNames(extraClasses);
+
+	if (onHeaderAvatarPress) {
+		profileMenu.onHeaderAvatarPress = onHeaderAvatarPress;
+	}
+
+	if (onHeaderTitlePress) {
+		profileMenu.onHeaderTitlePress = onHeaderTitlePress;
+	}
+
+	if (onHeaderSupportingTextPress) {
+		profileMenu.onHeaderSupportingTextPress = onHeaderSupportingTextPress;
+	}
+
+	if (onProfileMenuItemPress) {
+		profileMenu.onProfileMenuItemPress = onProfileMenuItemPress;
+	}
+
+	return profileMenu;
+};