@ganpatiinfo/gids-web-dom-reference 7.1.0 → 8.0.0

package/src/components/GidsListItem/GidsListItem.ts

@@ -0,0 +1,281 @@
+import {
+	ClassValue,
+	GidsListItemWebProps,
+	GidsListItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	DomChildren,
+	DomNodeOrString,
+} from '../../utils/domUtils';
+import { GidsEditButtonDom } from '../GidsEditButton/GidsEditButton';
+import { GidsDividerDom } from '../GidsDivider/GidsDivider';
+import { GidsIconDom } from '../GidsIcon/GidsIcon';
+import { GidsListItemSelectEventDetail } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsListItemClassNames } = GidsListItemWebUtils;
+
+export interface GidsListItemDomProps extends GidsListItemWebProps<
+	DomNodeOrString,
+	DomChildren,
+	DomNodeOrString,
+	DomNodeOrString
+> {
+	name?: string;
+	onPressEditButton?: (this: HTMLButtonElement, event: Event) => void;
+	extraClasses?: ClassValue;
+	onPressListItem?: (event: CustomEvent<GidsListItemSelectEventDetail>) => void;
+}
+
+export const GidsListItemDom = (
+	props: GidsListItemDomProps,
+): HTMLButtonElement => {
+	const {
+		index,
+		defaultSelectedIndex,
+		children,
+		disabled = false,
+		selected,
+		editButton,
+		onPressEditButton,
+		onPressListItem,
+		leadingAccessory,
+		leadingSupport,
+		leadingParagraph,
+		trailingContent,
+		trailingAccessory,
+		trailingSupport,
+		trailingParagraph,
+		divider,
+		extraClasses,
+		value,
+		name,
+	} = props;
+
+	const listItem = document.createElement('button');
+	listItem.type = 'button';
+	listItem.className = getGidsListItemClassNames(
+		{ disabled, selected },
+		extraClasses,
+	);
+	listItem.setAttribute('role', 'list-item-option');
+	listItem.setAttribute('aria-selected', selected ? 'true' : 'false');
+	listItem.disabled = disabled;
+	if (name) {
+		listItem.name = name;
+	}
+
+	if (typeof value === 'string') {
+		listItem.value = value;
+	}
+
+	const mainContainer = document.createElement('div');
+	mainContainer.className = 'gids-list-item__main-container';
+
+	if (
+		editButton !== undefined &&
+		editButton !== null &&
+		editButton !== 'none' &&
+		!disabled
+	) {
+		const editButtonNode = GidsEditButtonDom({
+			size: 'md',
+			editButtonType: editButton,
+			onPressEditButton,
+		});
+		// 2. Stop the event from bubbling up to mainContainer / listItem
+		editButtonNode.addEventListener('click', (event: MouseEvent) => {
+			event.stopPropagation();
+		});
+		mainContainer.append(editButtonNode);
+	}
+
+	if (leadingAccessory !== undefined && leadingAccessory !== null) {
+		const leadingAccessoryContainer = document.createElement('div');
+		leadingAccessoryContainer.className = disabled
+			? 'gids-list-item__leading-accessory-container gids-list-item__accessory-content-disabled'
+			: 'gids-list-item__leading-accessory-container';
+		appendAsChildren(leadingAccessoryContainer, leadingAccessory);
+		appendAsChildren(mainContainer, leadingAccessoryContainer);
+	}
+
+	const middleContentContainer = document.createElement('div');
+	middleContentContainer.className = 'gids-list-item__middle-content-container';
+
+	const leadingContentContainer = document.createElement('div');
+	leadingContentContainer.className =
+		'gids-list-item__leading-content-container';
+
+	if (children !== undefined && children !== null) {
+		if (typeof children === 'string') {
+			const leadingLabel = document.createElement('span');
+			leadingLabel.className = disabled
+				? 'gids-list-item__leading-content-label gids-list-item__text-content-disabled'
+				: 'gids-list-item__leading-content-label';
+			leadingLabel.textContent = children;
+
+			appendAsChildren(leadingContentContainer, leadingLabel);
+		} else {
+			appendAsChildren(leadingContentContainer, children);
+		}
+	}
+
+	if (
+		(leadingSupport !== undefined && leadingSupport !== null) ||
+		(leadingParagraph !== undefined && leadingParagraph !== null)
+	) {
+		const leadingSupportContent = document.createElement('div');
+		leadingSupportContent.className = 'gids-list-item__leading-support-content';
+
+		if (leadingSupport !== undefined && leadingSupport !== null) {
+			if (typeof leadingSupport === 'string') {
+				const leadingContentSupportingText = document.createElement('p');
+				leadingContentSupportingText.className = disabled
+					? 'gids-list-item__leading-content-supporting-text gids-list-item__text-content-disabled'
+					: 'gids-list-item__leading-content-supporting-text';
+				leadingContentSupportingText.textContent = leadingSupport;
+
+				appendAsChildren(leadingSupportContent, leadingContentSupportingText);
+			} else {
+				appendAsChildren(leadingSupportContent, leadingSupport);
+			}
+		}
+
+		if (leadingParagraph !== undefined && leadingParagraph !== null) {
+			if (typeof leadingParagraph === 'string') {
+				const leadingContentParagraphText = document.createElement('p');
+				leadingContentParagraphText.className = disabled
+					? 'gids-list-item__leading-content-paragraph-text gids-list-item__text-content-disabled'
+					: 'gids-list-item__leading-content-paragraph-text';
+				leadingContentParagraphText.textContent = leadingParagraph;
+
+				appendAsChildren(leadingSupportContent, leadingContentParagraphText);
+			} else {
+				appendAsChildren(leadingSupportContent, leadingParagraph);
+			}
+		}
+
+		appendAsChildren(leadingContentContainer, leadingSupportContent);
+	}
+
+	const trailingContentContainer = document.createElement('div');
+	trailingContentContainer.className =
+		'gids-list-item__trailing-content-container';
+
+	if (trailingContent !== undefined && trailingContent !== null) {
+		if (typeof trailingContent === 'string') {
+			const trailingLabel = document.createElement('span');
+			trailingLabel.className = disabled
+				? 'gids-list-item__trailing-content-label gids-list-item__text-content-disabled'
+				: 'gids-list-item__trailing-content-label';
+			trailingLabel.textContent = trailingContent;
+
+			appendAsChildren(trailingContentContainer, trailingLabel);
+		} else {
+			appendAsChildren(trailingContentContainer, trailingContent);
+		}
+	}
+
+	if (
+		(trailingSupport !== undefined && trailingSupport !== null) ||
+		(trailingParagraph !== undefined && trailingParagraph !== null)
+	) {
+		const trailingSupportContent = document.createElement('div');
+		trailingSupportContent.className =
+			'gids-list-item__trailing-support-content';
+
+		if (trailingSupport !== undefined && trailingSupport !== null) {
+			if (typeof trailingSupport === 'string') {
+				const trailingContentSupportingText = document.createElement('p');
+				trailingContentSupportingText.className = disabled
+					? 'gids-list-item__trailing-content-supporting-text gids-list-item__text-content-disabled'
+					: 'gids-list-item__trailing-content-supporting-text';
+				trailingContentSupportingText.textContent = trailingSupport;
+
+				appendAsChildren(trailingSupportContent, trailingContentSupportingText);
+			} else {
+				appendAsChildren(trailingSupportContent, trailingSupport);
+			}
+		}
+
+		if (trailingParagraph !== undefined && trailingParagraph !== null) {
+			if (typeof trailingParagraph === 'string') {
+				const trailingContentParagraphText = document.createElement('p');
+				trailingContentParagraphText.className = disabled
+					? 'gids-list-item__trailing-content-paragraph-text gids-list-item__text-content-disabled'
+					: 'gids-list-item__trailing-content-paragraph-text';
+				trailingContentParagraphText.textContent = trailingParagraph;
+
+				appendAsChildren(trailingSupportContent, trailingContentParagraphText);
+			} else {
+				appendAsChildren(trailingSupportContent, trailingParagraph);
+			}
+		}
+
+		appendAsChildren(trailingContentContainer, trailingSupportContent);
+	}
+
+	appendAsChildren(middleContentContainer, leadingContentContainer);
+	appendAsChildren(middleContentContainer, trailingContentContainer);
+	appendAsChildren(mainContainer, middleContentContainer);
+
+	const trailingAccessoryContainer = document.createElement('div');
+	trailingAccessoryContainer.className = disabled
+		? 'gids-list-item__trailing-accessory-container gids-list-item__accessory-content-disabled'
+		: 'gids-list-item__trailing-accessory-container';
+	if (selected) {
+		trailingAccessoryContainer.append(
+			GidsIconDom({
+				name: 'checkmark',
+				size: 'md',
+				appearance: 'regular',
+			}),
+		);
+		appendAsChildren(mainContainer, trailingAccessoryContainer);
+	} else {
+		if (trailingAccessory !== undefined && trailingAccessory !== null) {
+			appendAsChildren(trailingAccessoryContainer, trailingAccessory);
+			appendAsChildren(mainContainer, trailingAccessoryContainer);
+		}
+	}
+
+	appendAsChildren(listItem, mainContainer);
+	if (divider && !selected) {
+		const dividerWrapper = document.createElement('div');
+		dividerWrapper.className = 'gids-list-item__divider';
+
+		dividerWrapper.append(
+			GidsDividerDom({
+				orientation: 'horizontal',
+			}),
+		);
+
+		appendAsChildren(listItem, dividerWrapper);
+	}
+
+	// --- ADD THIS CODE BLOCK BEFORE THE END OF THE FUNCTION ---
+	if (onPressListItem) {
+		listItem.addEventListener('click', (event: MouseEvent) => {
+			if (event?.defaultPrevented || disabled) {
+				return;
+			}
+			// Create a CustomEvent containing your specific detail payload
+			const customEvent = new CustomEvent<GidsListItemSelectEventDetail>(
+				'onPressListItem',
+				{
+					bubbles: true,
+					composed: true,
+					detail: {
+						selectedIndex: index,
+						defaultSelectedIndex, // Toggles or passes current state
+					},
+				},
+			);
+
+			// If your Storybook/wrapper expects the custom event directly in the callback:
+			onPressListItem(customEvent);
+		});
+	}
+
+	return listItem;
+};

package/src/components/GidsMenu/GidsMenu.ts

@@ -0,0 +1,64 @@
+import {
+	GidsMenuWebProps,
+	GidsMenuWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	DomChildren,
+	DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { GidsHeadingDom } from '../GidsHeading/GidsHeading.js';
+import { testDomChildrenValidity } from '../../utils/childrenValidationUtils.js';
+
+const { getGidsMenuClassNames } = GidsMenuWebUtils;
+
+export interface GidsMenuDomProps extends GidsMenuWebProps<
+	DomChildren,
+	DomNodeOrString
+> {
+	extraClasses?: string;
+}
+
+export const GidsMenuDom = ({
+	children,
+	extraClasses,
+	heading,
+	supportingText,
+	supportingTextTypography,
+	...restProps
+}: GidsMenuDomProps): HTMLDivElement => {
+	const menu = document.createElement('div');
+	menu.className = getGidsMenuClassNames(extraClasses);
+
+	if (
+		(heading !== undefined && heading !== null && heading !== '') ||
+		(supportingText !== undefined &&
+			supportingText !== null &&
+			supportingText !== '')
+	) {
+		menu.append(
+			GidsHeadingDom({
+				heading,
+				supportingText,
+				supportingTextTypography: supportingTextTypography ?? 'eyebrow-medium',
+				...restProps,
+			}),
+		);
+	}
+
+	testDomChildrenValidity({
+		children,
+		classNameToBeValidated: 'gids-list-item',
+		childrenNameToBeValidated: 'GidsListItemDom',
+		currentComponentName: 'GidsMenu',
+	});
+
+	if (children !== undefined && children !== null) {
+		const childrenContainer = document.createElement('div');
+		childrenContainer.className = 'gids-menu__children';
+		appendAsChildren(childrenContainer, children);
+		appendAsChildren(menu, childrenContainer);
+	}
+
+	return menu;
+};

package/src/components/GidsMenuGroup/GidsMenuGroup.ts

@@ -0,0 +1,51 @@
+import {
+	GidsMenuGroupWebProps,
+	GidsMenuGroupWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsSpinnerDom } from '../GidsSpinner/GidsSpinner.js';
+import { testDomChildrenValidity } from '../../utils/childrenValidationUtils.js';
+
+const { getGidsMenuGroupClassNames } = GidsMenuGroupWebUtils;
+
+export interface GidsMenuGroupDomProps extends GidsMenuGroupWebProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsMenuGroupDom = ({
+	type = 'no-options',
+	supportingText = 'No options',
+	children,
+	extraClasses,
+}: GidsMenuGroupDomProps): HTMLDivElement => {
+	const menuGroup = document.createElement('div');
+	menuGroup.className = getGidsMenuGroupClassNames({ type }, extraClasses);
+
+	if (type === 'loading') {
+		menuGroup.append(
+			GidsSpinnerDom({
+				indeterminate: true,
+				size: 'md',
+			}),
+		);
+	}
+
+	if (type === 'no-options') {
+		const noOptionText = document.createElement('span');
+		noOptionText.textContent = supportingText;
+		appendAsChildren(menuGroup, noOptionText);
+	}
+
+	testDomChildrenValidity({
+		children,
+		classNameToBeValidated: 'gids-menu',
+		childrenNameToBeValidated: 'GidsMenuDom',
+		currentComponentName: 'GidsMenuGroup',
+	});
+
+	if (type === 'default' && children !== undefined && children !== null) {
+		appendAsChildren(menuGroup, children);
+	}
+
+	return menuGroup;
+};

package/src/components/GidsOverflowContainer/GidsOverflowContainer.ts

@@ -0,0 +1,27 @@
+import { GidsOverflowContainerCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsOverflowContainerWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const { getGidsOverflowContainerClassNames } = GidsOverflowContainerWebUtils;
+
+export interface GidsOverflowContainerDomProps extends GidsOverflowContainerCommonProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsOverflowContainerDom = ({
+	children,
+	shadowLocation,
+	extraClasses,
+}: GidsOverflowContainerDomProps): HTMLElement => {
+	const overflowContainer = document.createElement('gids-overflow-container');
+	overflowContainer.className =
+		getGidsOverflowContainerClassNames(extraClasses);
+
+	appendAsChildren(overflowContainer, children);
+
+	if (shadowLocation !== undefined) {
+		overflowContainer.setAttribute('shadow-location', shadowLocation);
+	}
+
+	return overflowContainer;
+};

package/src/components/GidsPopover/GidsPopover.ts

@@ -0,0 +1,32 @@
+import {
+	GidsPopoverWebProps,
+	GidsPopoverWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsPopoverClassNames } = GidsPopoverWebUtils;
+
+export interface GidsPopoverDomProps extends GidsPopoverWebProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsPopoverDom = ({
+	placement,
+	htmlFor,
+	extraClasses,
+	children,
+}: GidsPopoverDomProps): HTMLElement => {
+	const popover = document.createElement('gids-popover');
+	popover.className = getGidsPopoverClassNames(extraClasses);
+
+	if (placement !== undefined) {
+		popover.setAttribute('placement', placement);
+	}
+	if (htmlFor !== undefined) {
+		popover.setAttribute('for', htmlFor);
+	}
+
+	appendAsChildren(popover, children);
+
+	return popover;
+};

package/src/components/GidsProgressBar/GidsProgressBar.ts

@@ -0,0 +1,50 @@
+import {
+	GidsProgressBarCommonProps,
+	GidsProgressBarCommonUtils,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	ClassValue,
+	GidsProgressBarWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getDeterminateProgressBarValues } = GidsProgressBarCommonUtils;
+const { getGidsProgressBarClassNames } = GidsProgressBarWebUtils;
+
+export interface GidsProgressBarDomProps extends GidsProgressBarCommonProps {
+	extraClasses?: ClassValue;
+}
+
+export const GidsProgressBarDom = ({
+	size,
+	color,
+	indeterminate,
+	value,
+	max,
+	endCap,
+	extraClasses,
+}: GidsProgressBarDomProps): HTMLDivElement => {
+	const progressBar = document.createElement('div');
+	progressBar.className = getGidsProgressBarClassNames(
+		{ size, color, indeterminate, endCap },
+		extraClasses,
+	);
+
+	progressBar.setAttribute('role', 'progressbar');
+
+	const fill = document.createElement('div');
+	fill.className = 'gids-progress-bar__fill';
+	progressBar.appendChild(fill);
+
+	if (indeterminate !== true) {
+		const { sanitisedValue, progressBarWidth, ariaValueMax } =
+			getDeterminateProgressBarValues({ value, max });
+
+		progressBar.setAttribute('aria-valuenow', String(sanitisedValue));
+		if (ariaValueMax !== undefined) {
+			progressBar.setAttribute('aria-valuemax', String(ariaValueMax));
+		}
+		fill.style.width = progressBarWidth;
+	}
+
+	return progressBar;
+};

package/src/components/GidsTooltip/GidsTooltip.ts

@@ -0,0 +1,37 @@
+import { GidsTooltipWebProps } from '@ganpatiinfo/gids-web-shared';
+import { GidsTooltipWebUtils } from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsTooltipClassNames } = GidsTooltipWebUtils;
+
+export interface GidsTooltipDomProps extends GidsTooltipWebProps {
+	extraClasses?: string;
+}
+
+export const GidsTooltipDom = ({
+	tooltipText,
+	placement,
+	htmlFor,
+	showWithoutDelay,
+	extraClasses,
+}: GidsTooltipDomProps): HTMLElement => {
+	const tooltip = document.createElement('gids-tooltip');
+	tooltip.className = getGidsTooltipClassNames(extraClasses);
+
+	if (tooltipText !== undefined) {
+		tooltip.setAttribute('tooltip-text', tooltipText);
+	}
+
+	if (placement !== undefined) {
+		tooltip.setAttribute('placement', placement);
+	}
+
+	if (htmlFor !== undefined) {
+		tooltip.setAttribute('for', htmlFor);
+	}
+
+	if (showWithoutDelay) {
+		tooltip.setAttribute('show-without-delay', '');
+	}
+
+	return tooltip;
+};

package/src/index.ts

@@ -64,8 +64,25 @@ export * from './components/GidsScrim/GidsScrim.js';
 export * from './components/GidsSideMenuHeader/GidsSideMenuHeader.js';
 export * from './components/GidsSideMenu/GidsSideMenu.js';
 export * from './components/GidsSideNavigation/GidsSideNavigation.js';
+export * from './components/GidsProgressBar/GidsProgressBar.js';
+export * from './components/GidsFeedbackBlock/GidsFeedbackBlock.js';
+export * from './components/GidsOverflowContainer/GidsOverflowContainer.js';
+export * from './components/GidsAccordionItemHeader/GidsAccordionItemHeader.js';
+export * from './components/GidsAccordionItemContent/GidsAccordionItemContent.js';
+export * from './components/GidsAccordionItem/GidsAccordionItem.js';
+export * from './components/GidsAccordion/GidsAccordion.js';
+export * from './components/GidsTooltip/GidsTooltip.js';
+export * from './components/GidsPopover/GidsPopover.js';
+export * from './components/GidsEditButton/GidsEditButton.js';
+export * from './components/GidsListItem/GidsListItem.js';
+export * from './components/GidsMenu/GidsMenu.js';
+export * from './components/GidsMenuGroup/GidsMenuGroup.js';
+export * from './components/GidsDropdownItem/GidsDropdownItem.js';
+export * from './components/GidsDropdownMenu/GidsDropdownMenu.js';
+export * from './components/GidsDropdownMenuGroup/GidsDropdownMenuGroup.js';
 
 /**
  * Utilities
  */
 export * from './utils/domUtils.js';
+export * from './utils/childrenValidationUtils.js';

package/src/utils/childrenValidationUtils.ts

@@ -0,0 +1,47 @@
+import { DomChildren } from './domUtils';
+
+export interface TestDomChildrenValidity {
+	children?: DomChildren;
+	classNameToBeValidated?: string;
+	childrenNameToBeValidated?: string;
+	currentComponentName?: string;
+}
+
+export const testDomChildrenValidity = ({
+	children,
+	classNameToBeValidated,
+	childrenNameToBeValidated,
+	currentComponentName,
+}: TestDomChildrenValidity) => {
+	if (children !== undefined && children !== null) {
+		// --- STRICTOR DOM TYPE VALIDATION BLOCK ---
+		// Normalize children to an array to handle both single items and collections safely
+		const childrenArray = Array.isArray(children) ? children : [children];
+
+		for (const child of childrenArray) {
+			// 1. Ensure the child is a real DOM node/element (ignore raw strings if they aren't allowed)
+			if (child instanceof HTMLElement) {
+				// Standard Check A: Using a custom class list or dataset identifier if GidsListItem sets one
+				const isGidsListItem =
+					child.classList.contains(classNameToBeValidated ?? '') ||
+					child.dataset.component === childrenNameToBeValidated;
+
+				// Standard Check B (Alternative): If GidsListItem returns a custom web component type instance
+				// const isGidsListItem = child.tagName.toLowerCase() === 'gids-list-item';
+
+				if (!isGidsListItem) {
+					throw new Error(
+						`DOM Validation Error: ${currentComponentName} only accepts ${childrenNameToBeValidated} nodes as children. ` +
+							`Received an element with class layout: "${child.className}".`,
+					);
+				}
+			} else {
+				// If a string or a non-element node was passed illegally
+				throw new Error(
+					`DOM Validation Error: Invalid type passed to children. Expected ${childrenNameToBeValidated} DOM elements.`,
+				);
+			}
+		}
+		// --- END OF VALIDATION BLOCK ---
+	}
+};