@ganpatiinfo/gids-web-dom-reference 2.1.1 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "2.1.1",
+	"version": "3.1.0",
 	"private": false,
 	"description": "DOM for components reference implementations",
 	"homepage": "https://ganpatiinfosystem.vercel.app/",
@@ -24,14 +24,14 @@
 		"directory": "packages/private/web-dom-reference"
 	},
 	"dependencies": {
-		"@ganpatiinfo/gids-core-shared": "2.1.1",
-		"@ganpatiinfo/gids-web-shared": "2.1.1"
+		"@ganpatiinfo/gids-core-shared": "3.1.0",
+		"@ganpatiinfo/gids-web-shared": "3.1.0"
 	},
 	"peerDependencies": {
-		"@ganpatiinfo/gids-web-theme-interface": "2.0.7",
-		"@jest/globals": "29.7.0",
-		"@types/jasmine": "5.1.7",
-		"expect": "29.7.0"
+		"@ganpatiinfo/gids-web-theme-interface": "3.1.0",
+		"@jest/globals": "^30.2.0",
+		"@types/jasmine": "^5.1.15",
+		"expect": "^30.2.0"
 	},
 	"peerDependenciesMeta": {
 		"@jest/globals": {

package/src/components/GidsCheckbox/GidsCheckbox.ts

@@ -54,7 +54,7 @@ export const GidsCheckboxDom = ({
 			indeterminate,
 			inputId: realInputId,
 			name,
-            value,
+			value,
 			required,
 			onChange,
 		}),

package/src/components/GidsPagination/GidsPagination.ts

@@ -0,0 +1,233 @@
+import {
+	GidsPaginationCommonProps,
+	GidsPaginationCommonUtils,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	ClassValue,
+	GidsPaginationButtonParamsProps,
+	GidsPaginationWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsPaginationItemDom } from '../_GidsPaginationItem/GidsPaginationItem.js';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsPaginationClassNames, getGidsPaginationDotsClassNames } =
+	GidsPaginationWebUtils;
+const { getPaginationsArr } = GidsPaginationCommonUtils;
+
+export interface GidsPaginationDomProps
+	extends Omit<GidsPaginationCommonProps<string>, 'onClickItem'> {
+	extraClasses?: ClassValue;
+	onClickItem?: ({
+		event,
+		index,
+		page,
+		defaultPage,
+		type,
+	}: GidsPaginationButtonParamsProps<MouseEvent>) => void;
+}
+
+export const GidsPaginationDom = ({
+	selectColor = 'default',
+	variant = 'default',
+	shape = 'circled',
+	size = 'sm',
+	disabled = false,
+	count = 0,
+	defaultPage = 1,
+	page,
+	nextIcon,
+	previousIcon,
+	showFirstButton,
+	showLastButton,
+	hidePrevButton = false,
+	hideNextButton = false,
+	extraClasses,
+	onClickItem,
+}: GidsPaginationDomProps): HTMLDivElement => {
+	const pagination = document.createElement('div');
+	pagination.className = getGidsPaginationClassNames(extraClasses);
+
+	if (count !== undefined && count > 0) {
+		let internalPage = 0;
+		if (defaultPage !== undefined && defaultPage > 0) {
+			internalPage = defaultPage;
+		}
+		if (page !== undefined && page > 0) {
+			internalPage = page;
+		}
+
+		if (showFirstButton) {
+			pagination.appendChild(
+				GidsPaginationItemDom({
+					selectColor: 'none',
+					selected: false,
+					variant,
+					shape,
+					size,
+					isIcon: true,
+					icon: 'backward',
+					disabled: internalPage <= 1 || disabled,
+					onClickItem: (event: MouseEvent) => {
+						if (onClickItem) {
+							onClickItem({
+								event,
+								index: 0,
+								page: 1,
+								defaultPage,
+								type: 'first',
+							});
+						}
+					},
+				}),
+			);
+		}
+
+		if (!hidePrevButton) {
+			const newPagenumber = internalPage > 1 ? internalPage - 1 : 1;
+			// if (internalPage <= 0) {
+			// 	newPagenumber = internalPage > 1 ? internalPage - 1 : 1;
+			// }
+			pagination.appendChild(
+				GidsPaginationItemDom({
+					selectColor: 'none',
+					selected: false,
+					variant,
+					shape,
+					size,
+					isIcon: true,
+					icon:
+						previousIcon !== undefined &&
+						previousIcon !== '' &&
+						previousIcon !== '(none)'
+							? (previousIcon as IconName)
+							: 'chevron-left',
+					disabled: internalPage <= 1 || disabled,
+					onClickItem: (event: MouseEvent) => {
+						if (onClickItem) {
+							onClickItem({
+								event,
+								index: newPagenumber - 1,
+								page: newPagenumber,
+								defaultPage,
+								type: 'previous',
+							});
+						}
+					},
+				}),
+			);
+		}
+
+		const paginationsArr = getPaginationsArr({
+			pageNumber: internalPage,
+			count,
+		});
+
+		const newLength = paginationsArr.length;
+
+		Array.from({ length: newLength }, (_, i) => {
+			const dataObj = paginationsArr[i];
+
+			let selectedPage = false;
+			if (
+				internalPage > 0 &&
+				internalPage === Number(dataObj) &&
+				dataObj !== '...'
+			) {
+				selectedPage = true;
+			}
+
+			if (dataObj === '...') {
+				const terminatorBlock = document.createElement('div');
+				terminatorBlock.className = getGidsPaginationDotsClassNames({ size });
+				terminatorBlock.textContent = '...';
+				pagination.appendChild(terminatorBlock);
+				return;
+			}
+			pagination.appendChild(
+				GidsPaginationItemDom({
+					selectColor,
+					variant,
+					shape,
+					size,
+					children: `${dataObj}`,
+					isIcon: false,
+					icon: '(none)',
+					disabled,
+					selected: selectedPage,
+					onClickItem: (event: MouseEvent) => {
+						if (onClickItem) {
+							onClickItem({
+								event,
+								index: Number(dataObj) - 1,
+								page: Number(dataObj),
+								defaultPage,
+								type: 'page',
+							});
+						}
+					},
+				}),
+			);
+		});
+
+		if (!hideNextButton) {
+			const newPagenumber = internalPage < count ? internalPage + 1 : count;
+			// if (internalPage <= 0) {
+			// 	newPagenumber = internalPage < count ? internalPage + 1 : count;
+			// }
+			pagination.appendChild(
+				GidsPaginationItemDom({
+					selectColor: 'none',
+					selected: false,
+					variant,
+					shape,
+					size,
+					isIcon: true,
+					icon:
+						nextIcon !== undefined && nextIcon !== '' && nextIcon !== '(none)'
+							? (nextIcon as IconName)
+							: 'chevron-right',
+					disabled: internalPage >= count || disabled,
+					onClickItem: (event: MouseEvent) => {
+						if (onClickItem) {
+							onClickItem({
+								event,
+								index: newPagenumber - 1,
+								page: newPagenumber,
+								defaultPage,
+								type: 'next',
+							});
+						}
+					},
+				}),
+			);
+		}
+
+		if (showLastButton) {
+			pagination.appendChild(
+				GidsPaginationItemDom({
+					selectColor: 'none',
+					selected: false,
+					variant,
+					shape,
+					size,
+					isIcon: true,
+					icon: 'forward',
+					disabled: internalPage >= count || disabled,
+					onClickItem: (event: MouseEvent) => {
+						if (onClickItem) {
+							onClickItem({
+								event,
+								index: count - 1,
+								page: count,
+								defaultPage,
+								type: 'last',
+							});
+						}
+					},
+				}),
+			);
+		}
+	}
+
+	return pagination;
+};

package/src/components/GidsRadio/GidsRadio.ts

@@ -6,7 +6,10 @@ import {
 } from '@ganpatiinfo/gids-web-shared';
 import { GidsRadioControlDom } from '../_GidsRadioControl/GidsRadioControl.js';
 import { GidsLabelDom } from '../GidsLabel/GidsLabel.js';
-import { type DomChildren, type DomNodeOrString } from '../../utils/domUtils.js';
+import {
+	type DomChildren,
+	type DomNodeOrString,
+} from '../../utils/domUtils.js';
 
 const { getGidsRadioClassNames } = GidsRadioWebUtils;
 

package/src/components/GidsSectionNotice/GidsSectionNotice.ts

@@ -1,12 +1,12 @@
 import {
-	GidsSectionNoticeCommonUtils,
-	type GidsSectionNoticeCommonProps,
+  GidsSectionNoticeCommonUtils,
+  type GidsSectionNoticeCommonProps,
 } from '@ganpatiinfo/gids-core-shared';
 import { GidsSectionNoticeWebUtils } from '@ganpatiinfo/gids-web-shared';
 import {
-	appendAsChildren,
-	type DomChildren,
-	type DomNodeOrString,
+  appendAsChildren,
+  type DomChildren,
+  type DomNodeOrString,
 } from '../../utils/domUtils.js';
 import { type IconName } from '@ganpatiinfo/gids-web-theme-interface';
 import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
@@ -17,89 +17,89 @@ const { getGidsSectionNoticeClassNames } = GidsSectionNoticeWebUtils;
 const { getSectionNoticeIconName } = GidsSectionNoticeCommonUtils;
 
 export interface GidsSectionNoticeDomProps
-	extends GidsSectionNoticeCommonProps<DomNodeOrString, DomChildren> {
-	onClickDismiss?: (event: MouseEvent) => void;
+  extends GidsSectionNoticeCommonProps<DomNodeOrString, DomChildren> {
+  onClickDismiss?: (event: MouseEvent) => void;
 }
 
 export const GidsSectionNoticeDom = ({
-	appearance = 'information',
-	title,
-	supportingText,
-	children,
-	dismissible = true,
-	onClickDismiss,
+  appearance = 'information',
+  title,
+  supportingText,
+  children,
+  dismissible = true,
+  onClickDismiss,
 }: GidsSectionNoticeDomProps): HTMLDivElement => {
-	const sectionNotice = document.createElement('div');
-	sectionNotice.className = getGidsSectionNoticeClassNames({ appearance });
+  const sectionNotice = document.createElement('div');
+  sectionNotice.className = getGidsSectionNoticeClassNames({ appearance });
 
-	const innerContainer = document.createElement('div');
-	innerContainer.className = 'gids-section-notice__inner-container';
+  const innerContainer = document.createElement('div');
+  innerContainer.className = 'gids-section-notice__inner-container';
 
-	const leadingIconContainer = document.createElement('div');
-	leadingIconContainer.className =
-		'gids-section-notice__leading-icon-container';
+  const leadingIconContainer = document.createElement('div');
+  leadingIconContainer.className =
+    'gids-section-notice__leading-icon-container';
 
-	const leadingIconName = getSectionNoticeIconName({ appearance }) as IconName;
+  const leadingIconName = getSectionNoticeIconName({ appearance }) as IconName;
 
-	const leadingIcon = GidsIconDom({
-		size: 'md',
-		appearance: 'filled',
-		name: leadingIconName,
-		alt: '',
-		className: `gids-section-notice__${appearance}-icon`,
-	});
-	leadingIconContainer.appendChild(leadingIcon);
-	innerContainer.appendChild(leadingIconContainer);
+  const leadingIcon = GidsIconDom({
+    size: 'md',
+    appearance: 'filled',
+    name: leadingIconName,
+    alt: '',
+    className: `gids-section-notice__${appearance}-icon`,
+  });
+  leadingIconContainer.appendChild(leadingIcon);
+  innerContainer.appendChild(leadingIconContainer);
 
-	const contentContainer = document.createElement('div');
-	contentContainer.className = 'gids-section-notice__content-container';
+  const contentContainer = document.createElement('div');
+  contentContainer.className = 'gids-section-notice__content-container';
 
-	const titleElement = document.createElement('div');
-	titleElement.className = 'gids-section-notice__title';
-	appendAsChildren(titleElement, title);
-	contentContainer.appendChild(titleElement);
+  const titleElement = document.createElement('div');
+  titleElement.className = 'gids-section-notice__title';
+  appendAsChildren(titleElement, title);
+  contentContainer.appendChild(titleElement);
 
-	if (supportingText) {
-		const supportingTextElement = document.createElement('div');
-		supportingTextElement.className = 'gids-section-notice__supporting-text';
-		appendAsChildren(supportingTextElement, supportingText);
-		contentContainer.appendChild(supportingTextElement);
-	}
+  if (supportingText) {
+    const supportingTextElement = document.createElement('div');
+    supportingTextElement.className = 'gids-section-notice__supporting-text';
+    appendAsChildren(supportingTextElement, supportingText);
+    contentContainer.appendChild(supportingTextElement);
+  }
 
-	if (children) {
-		contentContainer.appendChild(
-			GidsButtonGroupDom({
-				layout: 'wrap',
-				children: children,
-			}),
-		);
-	}
+  if (children) {
+    contentContainer.appendChild(
+      GidsButtonGroupDom({
+        layout: 'wrap',
+        children: children,
+      }),
+    );
+  }
 
-	innerContainer.appendChild(contentContainer);
+  innerContainer.appendChild(contentContainer);
 
-	if (dismissible && onClickDismiss) {
-		const leadingIcon = GidsIconDom({
-			size: 'sm',
-			appearance: 'filled',
-			name: 'cross',
-			alt: '',
-		});
-		const crossButton = GidsButtonDom({
-			as: 'button',
-			type: 'button',
-			appearance: 'subtle',
-			size: 'sm',
-			width: 'intrinsic',
-			leadingIcon: leadingIcon,
-		});
-		crossButton.addEventListener('click', onClickDismiss);
-		const crossBtnContainer = document.createElement('div');
-		crossBtnContainer.className = 'gids-section-notice__cross-button-container';
-		crossBtnContainer.appendChild(crossButton);
-		innerContainer.appendChild(crossBtnContainer);
-	}
+  if (dismissible && onClickDismiss) {
+    const leadingIcon = GidsIconDom({
+      size: 'sm',
+      appearance: 'filled',
+      name: 'cross',
+      alt: '',
+    });
+    const crossButton = GidsButtonDom({
+      as: 'button',
+      type: 'button',
+      appearance: 'subtle',
+      size: 'sm',
+      width: 'intrinsic',
+      leadingIcon: leadingIcon,
+    });
+    crossButton.addEventListener('click', onClickDismiss);
+    const crossBtnContainer = document.createElement('div');
+    crossBtnContainer.className = 'gids-section-notice__cross-button-container';
+    crossBtnContainer.appendChild(crossButton);
+    innerContainer.appendChild(crossBtnContainer);
+  }
 
-	sectionNotice.appendChild(innerContainer);
+  sectionNotice.appendChild(innerContainer);
 
-	return sectionNotice;
+  return sectionNotice;
 };

package/src/components/GidsSegmentedControl/GidsSegmentedControl.ts

@@ -0,0 +1,75 @@
+import {
+  GidsSegmentedTabItemPressedReturnedProps,
+  type GidsSegmentedControlCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+  type ClassValue,
+  GidsSegmentedControlWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsSegmentedTabItemDom } from '../GidsSegmentedTabItem/GidsSegmentedTabItem.js';
+
+const { getGidsSegmentedControlClassNames } = GidsSegmentedControlWebUtils;
+
+export interface GidsSegmentedControlDomProps extends GidsSegmentedControlCommonProps<
+  DomNodeOrString,
+  string
+> {
+  onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
+  className?: ClassValue;
+}
+
+export const GidsSegmentedControlDom = ({
+  width = 'intrinsic',
+  tabItems,
+  onPress,
+  className,
+}: GidsSegmentedControlDomProps): HTMLDivElement => {
+  const segmentedControl = document.createElement('div');
+  segmentedControl.className = getGidsSegmentedControlClassNames(
+    { width },
+    className,
+  );
+
+  if (tabItems && tabItems.length > 0) {
+    // This function renders (or re-renders) the tabs
+    const renderTabs = (selectedIndex?: number) => {
+      // Clear existing tabs
+      segmentedControl.innerHTML = '';
+
+      if (tabItems && tabItems.length > 0) {
+        tabItems.forEach((tabItem, index) => {
+          // Determine if this tab is selected
+          // Priority: 1. The newly clicked index, 2. The initial tabItem.selected state
+
+          let isSelected = false;
+          if (selectedIndex !== undefined && selectedIndex !== null) {
+            isSelected = index === selectedIndex;
+          } else {
+            isSelected = index === 0 ? true : false;
+          }
+
+          const tabElement = GidsSegmentedTabItemDom({
+            ...tabItem,
+            index,
+            selected: isSelected,
+            width: width,
+            onPress: (returnedProps) => {
+              // Re-render all tabs with the new selection
+              renderTabs(returnedProps.selectedIndex);
+              // Notify external listeners
+              if (onPress) onPress(returnedProps);
+            },
+          });
+
+          segmentedControl.appendChild(tabElement);
+        });
+      }
+    };
+
+    // Initial render
+    renderTabs();
+  }
+
+  return segmentedControl;
+};

package/src/components/GidsSegmentedTabItem/GidsSegmentedTabItem.ts

@@ -0,0 +1,75 @@
+import {
+  type GidsSegmentedTabItemPressedReturnedProps,
+  type GidsSegmentedTabItemCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+  type ClassValue,
+  GidsSegmentedTabItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import clsx from 'clsx';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsBadgeDom } from '../GidsBadge/GidsBadge.js';
+
+const { getGidsSegmentedTabItemClassNames } = GidsSegmentedTabItemWebUtils;
+
+export interface GidsSegmentedTabItemDomProps extends GidsSegmentedTabItemCommonProps<
+  DomNodeOrString,
+  string
+> {
+  onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
+  className?: ClassValue;
+}
+
+export const GidsSegmentedTabItemDom = ({
+  index,
+  label,
+  selected = false,
+  badge = false,
+  badgeAccessibleText,
+  badgeAppearance = 'information',
+  onPress,
+  className,
+  width = 'intrinsic',
+}: GidsSegmentedTabItemDomProps): HTMLButtonElement => {
+  const segmentedTabItem = document.createElement('button');
+  segmentedTabItem.className = getGidsSegmentedTabItemClassNames(
+    { selected, width },
+    className,
+  );
+  segmentedTabItem.setAttribute('data-gids-segmented-item', 'true');
+  segmentedTabItem.setAttribute('aria-selected', selected.toString());
+
+  segmentedTabItem.addEventListener('click', () => {
+    if (onPress) {
+      onPress({
+        selectedIndex: index,
+      });
+    }
+  });
+
+  if (label && label !== '') {
+    if (typeof label === 'string') {
+      const labelElement = document.createElement('label');
+      labelElement.className = clsx('gids-segmented-tab-item__label', {
+        'gids-segmented-tab-item__selected-label': selected,
+      });
+      labelElement.textContent = label;
+      segmentedTabItem.appendChild(labelElement);
+    } else {
+      segmentedTabItem.appendChild(label);
+    }
+  }
+
+  if (badge) {
+    segmentedTabItem.appendChild(
+      GidsBadgeDom({
+        accessibleText: badgeAccessibleText,
+        appearance: badgeAppearance,
+        outline: false,
+        type: 'dot',
+      }),
+    );
+  }
+
+  return segmentedTabItem;
+};