@ganpatiinfo/gids-web-dom-reference 2.1.0 → 3.0.0

package/src/components/GidsBaseCard/GidsBaseCard.ts

@@ -0,0 +1,35 @@
+import { type GidsBaseCardCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+	type ClassValue,
+	GidsBaseCardWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	type DomNodeOrString,
+} from '../../utils/domUtils.js';
+
+const { getGidsBaseCardClassNames } = GidsBaseCardWebUtils;
+
+export interface GidsBaseCardDomProps
+	extends GidsBaseCardCommonProps<DomNodeOrString> {
+	extraClasses?: ClassValue;
+}
+
+export const GidsBaseCardDom = ({
+	children,
+	cardType = 'empty',
+	appearance = 'default',
+	extraClasses,
+}: GidsBaseCardDomProps): HTMLDivElement => {
+	const baseCard = document.createElement('div');
+	baseCard.className = getGidsBaseCardClassNames(
+		{ cardType, appearance },
+		extraClasses,
+	);
+
+	if (children) {
+		appendAsChildren(baseCard, children);
+	}
+
+	return baseCard;
+};

package/src/components/GidsCard/GidsCard.ts

@@ -0,0 +1,122 @@
+import {
+	GidsCardCommonUtils,
+	type GidsCardCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	type ClassValue,
+	GidsCardWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
+import { GidsAvatarDom } from '../GidsAvatar/GidsAvatar.js';
+import { GidsBaseCardDom } from '../GidsBaseCard/GidsBaseCard.js';
+
+const { getGidsCardClassNames } = GidsCardWebUtils;
+const { isContentContainerVisible, isSimpleCard } = GidsCardCommonUtils;
+
+export interface GidsCardDomProps
+	extends GidsCardCommonProps<DomChildren, string, string> {
+	extraClasses?: ClassValue;
+}
+
+export const GidsCardDom = ({
+	cardHeaderType = 'image',
+	cardHeaderSrc,
+	children,
+	heading,
+	subHeading,
+	description,
+	baseCardAppearance = 'default',
+	headerVisible,
+	extraClasses,
+}: GidsCardDomProps): HTMLDivElement => {
+	const card = document.createElement('div');
+	card.className = getGidsCardClassNames(
+		{ isSimpleCard: isSimpleCard({ cardHeaderSrc, headerVisible }) },
+		extraClasses,
+	);
+
+	const cardInnerContainer = document.createElement('div');
+	cardInnerContainer.className = isSimpleCard({ cardHeaderSrc, headerVisible })
+		? 'gids-card__simple-card-inner-container'
+		: 'gids-card__advanced-card-inner-container';
+
+	if (cardHeaderSrc && cardHeaderSrc !== '' && headerVisible) {
+		const headerContainer = document.createElement('div');
+		headerContainer.className =
+			cardHeaderType === 'avatar'
+				? 'gids-card__header-container-avatar'
+				: 'gids-card__header-container-image';
+		if (cardHeaderType === 'avatar') {
+			headerContainer.appendChild(
+				GidsAvatarDom({
+					appearance: 'image',
+					size: 'xl',
+					imageSrc: cardHeaderSrc,
+				}),
+			);
+		} else {
+			const image = document.createElement('img');
+			image.src = cardHeaderSrc!;
+			image.setAttribute('alt', 'alt_text');
+			image.className = 'gids-card__image';
+			headerContainer.appendChild(image);
+		}
+		cardInnerContainer.appendChild(headerContainer);
+	}
+
+	const contentContainer = document.createElement('div');
+	contentContainer.className = 'gids-card__content-container';
+
+	if (heading && heading !== '') {
+		const headingElement = document.createElement('div');
+		headingElement.className = 'gids-card__heading';
+		appendAsChildren(headingElement, heading);
+		contentContainer.appendChild(headingElement);
+	}
+
+	if (subHeading && subHeading !== '') {
+		const subHeadingElement = document.createElement('div');
+		subHeadingElement.className = 'gids-card__subheading';
+		appendAsChildren(subHeadingElement, subHeading);
+		contentContainer.appendChild(subHeadingElement);
+	}
+
+	if (description && description !== '') {
+		const descriptionElement = document.createElement('p');
+		descriptionElement.className = 'gids-card__description';
+		appendAsChildren(descriptionElement, description);
+		contentContainer.appendChild(descriptionElement);
+	}
+
+	if (children) {
+		const childrenElement = document.createElement('div');
+		childrenElement.className = 'gids-card__children';
+
+		appendAsChildren(childrenElement, children);
+		contentContainer.appendChild(childrenElement);
+	}
+
+	if (
+		isContentContainerVisible({
+			heading,
+			subHeading,
+			description,
+			children,
+		})
+	) {
+		cardInnerContainer.appendChild(contentContainer);
+	}
+
+	card.appendChild(
+		GidsBaseCardDom({
+			children: cardInnerContainer,
+			cardType: 'content',
+			appearance: baseCardAppearance,
+			extraClasses: isSimpleCard({ cardHeaderSrc, headerVisible })
+				? 'gids-card__base-card-simple'
+				: 'gids-card__base-card-advanced',
+		}),
+	);
+
+	return card;
+};

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/GidsSwitch/GidsSwitch.ts

@@ -1,70 +1,73 @@
 import {
-    type ClassValue,
-    generateId,
-    type GidsSwitchWebProps,
-    GidsSwitchWebUtils,
+	type ClassValue,
+	generateId,
+	type GidsSwitchWebProps,
+	GidsSwitchWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 import { GidsSwitchControlDom } from '../_GidsSwitchControl/GidsSwitchControl.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 { getGidsSwitchClassNames } = GidsSwitchWebUtils;
 
 export interface GidsSwitchDomProps
-    extends GidsSwitchWebProps<DomChildren, DomNodeOrString> {
-    onChange?: (this: HTMLInputElement, event: Event) => void;
-    className?: ClassValue;
+	extends GidsSwitchWebProps<DomChildren, DomNodeOrString> {
+	onChange?: (this: HTMLInputElement, event: Event) => void;
+	className?: ClassValue;
 }
 
 export const GidsSwitchDom = ({
-    // Label props
-    children,
-    fieldRequirement,
-    fieldRequirementOptionalText,
-    fieldRequirementRequiredText,
-    info,
-    labelId,
+	// Label props
+	children,
+	fieldRequirement,
+	fieldRequirementOptionalText,
+	fieldRequirementRequiredText,
+	info,
+	labelId,
 
-    // Switch props
-    checked,
-    defaultChecked,
-    disabled,
-    inputId,
-    name,
-    value,
-    onChange,
+	// Switch props
+	checked,
+	defaultChecked,
+	disabled,
+	inputId,
+	name,
+	value,
+	onChange,
 
-    // SwitchWithLabel props
-    className,
+	// SwitchWithLabel props
+	className,
 }: GidsSwitchDomProps): HTMLDivElement => {
-    const switchElement = document.createElement('div');
-    switchElement.className = getGidsSwitchClassNames(className);
+	const switchElement = document.createElement('div');
+	switchElement.className = getGidsSwitchClassNames(className);
 
-    const realInputId = inputId ?? generateId();
+	const realInputId = inputId ?? generateId();
 
-    switchElement.appendChild(
-        GidsSwitchControlDom({
-            checked,
-            defaultChecked,
-            disabled,
-            inputId: realInputId,
-            name,
-            value,
-            onChange,
-        }),
-    );
-    switchElement.appendChild(
-        GidsLabelDom({
-            children,
-            disabled,
-            fieldRequirement,
-            fieldRequirementOptionalText,
-            fieldRequirementRequiredText,
-            htmlFor: realInputId,
-            info,
-            labelId,
-        }),
-    );
+	switchElement.appendChild(
+		GidsSwitchControlDom({
+			checked,
+			defaultChecked,
+			disabled,
+			inputId: realInputId,
+			name,
+			value,
+			onChange,
+		}),
+	);
+	switchElement.appendChild(
+		GidsLabelDom({
+			children,
+			disabled,
+			fieldRequirement,
+			fieldRequirementOptionalText,
+			fieldRequirementRequiredText,
+			htmlFor: realInputId,
+			info,
+			labelId,
+		}),
+	);
 
-    return switchElement;
+	return switchElement;
 };

package/src/components/_GidsCheckboxControl/GidsCheckboxControl.ts

@@ -3,7 +3,10 @@ import {
 	type GidsCheckboxControlWebProps,
 	GidsCheckboxControlWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils.js';
+import {
+	applyStatefulInputProps,
+	toggleAttribute,
+} from '../../utils/domUtils.js';
 import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
 
 const { getGidsCheckboxControlClassNames } = GidsCheckboxControlWebUtils;

package/src/components/_GidsPaginationItem/GidsPaginationItem.ts

@@ -0,0 +1,65 @@
+import {
+	GidsPaginationItemCommonProps,
+	GidsPaginationItemCommonUtils,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	ClassValue,
+	GidsPaginationItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	DomChildren,
+	DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsPaginationItemClassNames } = GidsPaginationItemWebUtils;
+const { getPaginationItemIconSize } = GidsPaginationItemCommonUtils;
+
+export interface GidsPaginationItemDomProps
+	extends GidsPaginationItemCommonProps<DomChildren, DomNodeOrString> {
+	extraClasses?: ClassValue;
+	onClickItem?: (event: MouseEvent) => void;
+}
+
+export const GidsPaginationItemDom = ({
+	selectColor = 'default',
+	variant = 'default',
+	shape = 'circled',
+	size = 'sm',
+	children,
+	isIcon = false,
+	icon,
+	disabled = false,
+	selected = false,
+	extraClasses,
+	onClickItem,
+}: GidsPaginationItemDomProps): HTMLButtonElement => {
+	const paginationItem = document.createElement('button');
+	paginationItem.className = getGidsPaginationItemClassNames(
+		{ selectColor, shape, size, variant, disabled, selected },
+		extraClasses,
+	);
+
+	if (!isIcon && children) {
+		appendAsChildren(paginationItem, children);
+	}
+
+	if (isIcon && icon && icon !== '' && icon !== '(none)') {
+		paginationItem.appendChild(
+			GidsIconDom({
+				size: getPaginationItemIconSize({ size }),
+				name: icon as IconName,
+				appearance: 'regular',
+				alt: '',
+			}),
+		);
+	}
+
+	if (onClickItem && !disabled) {
+		paginationItem.addEventListener('click', onClickItem);
+	}
+
+	return paginationItem;
+};

package/src/components/_GidsRadioControl/GidsRadioControl.ts

@@ -3,7 +3,10 @@ import {
 	type GidsRadioControlWebProps,
 	GidsRadioControlWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils.js';
+import {
+	applyStatefulInputProps,
+	toggleAttribute,
+} from '../../utils/domUtils.js';
 
 const { getGidsRadioControlClassNames } = GidsRadioControlWebUtils;
 

package/src/components/_GidsSwitchControl/GidsSwitchControl.ts

@@ -3,7 +3,10 @@ import {
 	type GidsSwitchControlWebProps,
 	GidsSwitchControlWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils.js';
+import {
+	applyStatefulInputProps,
+	toggleAttribute,
+} from '../../utils/domUtils.js';
 import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
 
 const { getGidsSwitchControlClassNames } = GidsSwitchControlWebUtils;

package/src/index.ts

@@ -34,6 +34,10 @@ export * from './components/GidsBox/GidsBox.js';
 export * from './components/GidsContainer/GidsContainer.js';
 export * from './components/GidsBreadcrumbItem/GidsBreadcrumbItem.js';
 export * from './components/GidsBreadcrumb/GidsBreadcrumb.js';
+export * from './components/GidsBaseCard/GidsBaseCard.js';
+export * from './components/GidsCard/GidsCard.js';
+export * from './components/_GidsPaginationItem/GidsPaginationItem.js';
+export * from './components/GidsPagination/GidsPagination.js';
 
 /**
  * Utilities