@ganpatiinfo/gids-web-dom-reference 7.2.0 → 9.0.0

package/src/components/GidsDropdownMenuGroup/GidsDropdownMenuGroup.ts

@@ -0,0 +1,46 @@
+import {
+	GidsDropdownMenuGroupWebProps,
+	GidsDropdownMenuGroupWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsSpinnerDom } from '../GidsSpinner/GidsSpinner.js';
+
+const { getGidsDropdownMenuGroupClassNames } = GidsDropdownMenuGroupWebUtils;
+
+export interface GidsDropdownMenuGroupDomProps extends GidsDropdownMenuGroupWebProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsDropdownMenuGroupDom = ({
+	type = 'no-options',
+	supportingText = 'No options',
+	children,
+	extraClasses,
+}: GidsDropdownMenuGroupDomProps): HTMLDivElement => {
+	const dropdownMenuGroup = document.createElement('div');
+	dropdownMenuGroup.className = getGidsDropdownMenuGroupClassNames(
+		{ type },
+		extraClasses,
+	);
+
+	if (type === 'loading') {
+		dropdownMenuGroup.append(
+			GidsSpinnerDom({
+				indeterminate: true,
+				size: 'md',
+			}),
+		);
+	}
+
+	if (type === 'no-options') {
+		const noOptionText = document.createElement('span');
+		noOptionText.textContent = supportingText;
+		appendAsChildren(dropdownMenuGroup, noOptionText);
+	}
+
+	if (type === 'default' && children !== undefined && children !== null) {
+		appendAsChildren(dropdownMenuGroup, children);
+	}
+
+	return dropdownMenuGroup;
+};

package/src/components/GidsDropdownPicker/GidsDropdownPicker.ts

@@ -0,0 +1,144 @@
+import {
+	GidsButtonAppearance,
+	GidsButtonSize,
+	GidsDropdownPickerChangeEventDetail,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	GidsDropdownPickerWebProps,
+	GidsDropdownPickerWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	assignToSlot,
+	DomChildren,
+} from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+
+const { getGidsDropdownPickerClassNames } = GidsDropdownPickerWebUtils;
+
+type GidsDropdownPickerA11yProps = {
+	role?: string | null;
+	'aria-expanded'?: string;
+	'aria-haspopup'?: string;
+	'aria-controls'?: string;
+};
+
+export interface GidsDropdownPickerToggleEventDetail {
+	expanded: boolean;
+	originalEvent?: Event;
+}
+
+type GidsDropdownPickerElement = HTMLElement &
+	GidsDropdownPickerA11yProps & {
+		appearance?: GidsButtonAppearance;
+		expanded?: boolean;
+		disabled?: boolean;
+		loading?: boolean;
+		size?: GidsButtonSize;
+		leadingIcon?: DomChildren;
+		listLoading?: boolean;
+		value?: string;
+		name?: string;
+		leadingAccessory?: DomChildren;
+		onSelectionChange?: (detail: GidsDropdownPickerChangeEventDetail) => void;
+	};
+
+export interface GidsDropdownPickerDomProps
+	extends
+		GidsDropdownPickerWebProps<DomChildren, DomChildren>,
+		GidsDropdownPickerA11yProps {
+	children?: HTMLElement | HTMLElement[];
+	onToggle?: (detail: GidsDropdownPickerToggleEventDetail) => void;
+	extraClasses?: string;
+}
+
+export const GidsDropdownPickerDom = ({
+	idPicker,
+	appearance = 'subtle',
+	expanded,
+	disabled = false,
+	loading = false,
+	value,
+	leadingIcon,
+	name,
+	onSelectionChange,
+	children,
+	onToggle,
+	size = 'sm',
+	extraClasses,
+}: GidsDropdownPickerDomProps): HTMLElement => {
+	const dropdownPicker = document.createElement(
+		'gids-dropdown-picker',
+	) as GidsDropdownPickerElement;
+
+	if (appearance) {
+		dropdownPicker.appearance = appearance;
+	}
+	if (typeof expanded === 'boolean') {
+		dropdownPicker.expanded = expanded;
+	}
+	dropdownPicker.loading = loading;
+
+	if (leadingIcon) {
+		// @ts-expect-error expected err
+		assignToSlot(dropdownPicker, 'leadingIconDropdownPicker', leadingIcon);
+	} else {
+		const leadingIconCust = GidsIconDom({
+			name: 'chevron-down',
+			size: size,
+			appearance: 'regular',
+			alt: '',
+		});
+		assignToSlot(dropdownPicker, 'leadingIconDropdownPicker', leadingIconCust);
+	}
+	dropdownPicker.disabled = disabled;
+	dropdownPicker.size = size;
+	if (typeof value === 'string') {
+		dropdownPicker.value = value;
+	}
+	if (name) {
+		dropdownPicker.name = name;
+	}
+
+	const isInteractive = !disabled;
+	const isExpanded = Boolean(expanded) && isInteractive;
+	const hasMenuContent = children !== undefined;
+
+	const pickerId = typeof idPicker === 'string' ? idPicker : undefined;
+	const menuId = typeof pickerId === 'string' ? `${pickerId}__menu` : undefined;
+
+	if (hasMenuContent) {
+		dropdownPicker.role = 'pickerbox';
+		dropdownPicker['aria-expanded'] = isExpanded ? 'true' : 'false';
+		dropdownPicker['aria-haspopup'] = 'pickerlistbox';
+		if (typeof menuId === 'string') {
+			dropdownPicker['aria-controls'] = menuId;
+		}
+	}
+
+	dropdownPicker.className = getGidsDropdownPickerClassNames(
+		{ expanded: isExpanded },
+		extraClasses,
+	);
+
+	if (onSelectionChange) {
+		dropdownPicker.onSelectionChange = onSelectionChange;
+	}
+
+	if (onToggle) {
+		dropdownPicker.addEventListener(
+			'gidsDropdownPickerToggle',
+			(event: Event) => {
+				onToggle(
+					(event as CustomEvent<GidsDropdownPickerToggleEventDetail>).detail,
+				);
+			},
+		);
+	}
+
+	if (children !== undefined && children !== null) {
+		appendAsChildren(dropdownPicker, children);
+	}
+
+	return dropdownPicker;
+};

package/src/components/GidsEditButton/GidsEditButton.ts

@@ -0,0 +1,71 @@
+import {
+	ClassValue,
+	GidsEditButtonWebProps,
+	GidsEditButtonWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon';
+
+const { getGidsEditButtonClassNames } = GidsEditButtonWebUtils;
+
+export interface GidsEditButtonDomProps extends GidsEditButtonWebProps<DomChildren> {
+	onPressEditButton?: (this: HTMLButtonElement, event: Event) => void;
+	extraClasses?: ClassValue;
+}
+
+export const GidsEditButtonDom = ({
+	disabled,
+	children,
+	size = 'md',
+	editButtonType = 'add',
+	onPressEditButton,
+	extraClasses,
+}: GidsEditButtonDomProps): HTMLButtonElement => {
+	const editButton = document.createElement('button');
+	editButton.className = getGidsEditButtonClassNames({ size }, extraClasses);
+
+	if (disabled) {
+		editButton.setAttribute('disabled', '');
+	} else {
+		editButton.removeAttribute('disabled');
+	}
+
+	const btnIconContainer = document.createElement('div');
+	if (editButtonType === 'custom' && children) {
+		appendAsChildren(btnIconContainer, children);
+	}
+
+	if (editButtonType === 'add') {
+		btnIconContainer.className = disabled
+			? 'gids-edit-button__add gids-edit-button__disabled'
+			: 'gids-edit-button__add';
+		btnIconContainer.append(
+			GidsIconDom({
+				name: 'add',
+				size: size,
+				appearance: 'filled',
+			}),
+		);
+	}
+
+	if (editButtonType === 'remove') {
+		btnIconContainer.className = disabled
+			? 'gids-edit-button__remove gids-edit-button__disabled'
+			: 'gids-edit-button__remove';
+		btnIconContainer.append(
+			GidsIconDom({
+				name: 'remove',
+				appearance: 'filled',
+				size: size,
+			}),
+		);
+	}
+
+	editButton.appendChild(btnIconContainer);
+
+	if (onPressEditButton && !disabled) {
+		editButton.addEventListener('click', onPressEditButton);
+	}
+
+	return editButton;
+};

package/src/components/GidsLevelGauge/GidsLevelGauge.ts

@@ -0,0 +1,46 @@
+import {
+	GidsLevelGaugeWebProps,
+	GidsLevelGaugeWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsLevelGaugeClassNames } = GidsLevelGaugeWebUtils;
+
+type GidsLevelGaugeElement = HTMLElement & GidsLevelGaugeWebProps;
+
+export interface GidsLevelGaugeDomProps extends GidsLevelGaugeWebProps {
+	extraClasses?: string;
+}
+
+export const GidsLevelGaugeDom = ({
+	label,
+	color = 'amber',
+	value = 0,
+	breakpoint = 'desktop',
+	chartLoading = false,
+	chartLoaderSize,
+	chartLoadingSupportingText,
+	chartLoadingTitle,
+	size = 'xxs',
+	extraClasses,
+}: GidsLevelGaugeDomProps): HTMLElement => {
+	const levelGauge = document.createElement(
+		'gids-level-gauge',
+	) as GidsLevelGaugeElement;
+
+	levelGauge.breakpoint = breakpoint;
+	levelGauge.size = size;
+	levelGauge.label = label;
+	levelGauge.value = value;
+	levelGauge.color = color;
+	levelGauge.chartLoading = chartLoading;
+	levelGauge.chartLoaderSize = chartLoaderSize;
+	levelGauge.chartLoadingTitle = chartLoadingTitle;
+	levelGauge.chartLoadingSupportingText = chartLoadingSupportingText;
+
+	levelGauge.className = getGidsLevelGaugeClassNames(
+		{ breakpoint },
+		extraClasses,
+	);
+
+	return levelGauge;
+};

package/src/components/GidsLineChart/GidsLineChart.ts

@@ -0,0 +1,50 @@
+import {
+	GidsLineChartWebProps,
+	GidsLineChartWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsLineChartClassNames } = GidsLineChartWebUtils;
+
+type GidsLineChartElement = HTMLElement & GidsLineChartWebProps;
+
+export interface GidsLineChartDomProps extends GidsLineChartWebProps {
+	extraClasses?: string;
+}
+
+export const GidsLineChartDom = ({
+	breakpoint = 'desktop',
+	legend = 'none',
+	chartData = [],
+	yAxisVisible = false,
+	xAxisLabel,
+	yAxisLabel,
+	dataPoints,
+	chartLoading,
+	chartLoaderSize,
+	chartLoadingTitle,
+	chartLoadingSupportingText,
+	extraClasses,
+}: GidsLineChartDomProps): HTMLElement => {
+	const lineChart = document.createElement(
+		'gids-line-chart',
+	) as GidsLineChartElement;
+
+	lineChart.breakpoint = breakpoint;
+	lineChart.legend = legend;
+	lineChart.chartData = chartData;
+	lineChart.yAxisVisible = yAxisVisible;
+	lineChart.xAxisLabel = xAxisLabel;
+	lineChart.yAxisLabel = yAxisLabel;
+	lineChart.dataPoints = dataPoints;
+	lineChart.chartLoading = chartLoading;
+	lineChart.chartLoaderSize = chartLoaderSize;
+	lineChart.chartLoadingTitle = chartLoadingTitle;
+	lineChart.chartLoadingSupportingText = chartLoadingSupportingText;
+
+	lineChart.className = getGidsLineChartClassNames(
+		{ breakpoint },
+		extraClasses,
+	);
+
+	return lineChart;
+};

package/src/components/GidsListItem/GidsListItem.ts

@@ -0,0 +1,293 @@
+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 {
+		id,
+		index,
+		defaultSelectedIndex,
+		children,
+		disabled = false,
+		selected,
+		editButton,
+		onPressEditButton,
+		onPressListItem,
+		leadingAccessory,
+		leadingSupport,
+		leadingParagraph,
+		trailingContent,
+		trailingAccessory,
+		trailingSupport,
+		trailingParagraph,
+		divider,
+		extraClasses,
+		name,
+		value,
+	} = 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.setAttribute('id', id);
+	listItem.disabled = disabled;
+	if (name) {
+		listItem.name = name;
+	}
+
+	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) {
+		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';
+		if (typeof children === 'string') {
+			leadingLabel.textContent = children;
+		} else {
+			appendAsChildren(leadingLabel, children);
+		}
+
+		appendAsChildren(leadingContentContainer, leadingLabel);
+	}
+
+	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);
+		});
+	}
+
+	let newValue: DomNodeOrString | undefined = value;
+	if (children) {
+		newValue = children;
+	}
+
+	if (typeof newValue === 'string') {
+		listItem.value = newValue;
+	} else {
+		const textContent = newValue?.textContent;
+		if (textContent) {
+			listItem.value = textContent;
+		}
+	}
+
+	return listItem;
+};

package/src/components/GidsMenu/GidsMenu.ts

@@ -0,0 +1,56 @@
+import {
+	GidsMenuWebProps,
+	GidsMenuWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	DomChildren,
+	DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { GidsHeadingDom } from '../GidsHeading/GidsHeading.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,
+			}),
+		);
+	}
+
+	if (children !== undefined && children !== null) {
+		const childrenContainer = document.createElement('div');
+		childrenContainer.className = 'gids-menu__children';
+		appendAsChildren(childrenContainer, children);
+		appendAsChildren(menu, childrenContainer);
+	}
+
+	return menu;
+};