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

package/package.json

@@ -1,47 +1,47 @@
 {
-  "name": "@ganpatiinfo/gids-web-dom-reference",
-  "version": "7.1.0",
-  "private": false,
-  "description": "DOM for components reference implementations",
-  "homepage": "https://ganpatiinfosystem.vercel.app/",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "clean": "del-cli dist/*",
-    "build": "tsc",
-    "release:manually": "npm run build && npm publish --access public"
-  },
-  "author": {
-    "name": "Ganpatiinfo Design System",
-    "email": "ganpatiinfosysystem0@gmail.com",
-    "url": "https://ganpatiinfosystem.vercel.app/"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ganpatiinfosystem/ganpatiinfo-design-system",
-    "directory": "packages/private/web-dom-reference"
-  },
-  "dependencies": {
-    "@ganpatiinfo/gids-core-shared": "7.0.0",
-    "@ganpatiinfo/gids-web-shared": "7.0.0"
-  },
-  "peerDependencies": {
-    "@ganpatiinfo/gids-web-theme-interface": "4.0.1",
-    "@jest/globals": "^30.2.0",
-    "@types/jasmine": "^5.1.15",
-    "expect": "^30.2.0"
-  },
-  "peerDependenciesMeta": {
-    "@jest/globals": {
-      "optional": true
-    },
-    "expect": {
-      "optional": true
-    },
-    "@types/jasmine": {
-      "optional": true
-    }
-  }
+	"name": "@ganpatiinfo/gids-web-dom-reference",
+	"version": "8.0.0",
+	"private": false,
+	"description": "DOM for components reference implementations",
+	"homepage": "https://ganpatiinfo-design-system.onrender.com/",
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"clean": "del-cli dist/*",
+		"build": "tsc",
+		"release:manually": "npm run build && npm publish --access public"
+	},
+	"author": {
+		"name": "Ganpatiinfo Design System",
+		"email": "ganpatiinfosysystem0@gmail.com",
+		"url": "https://ganpatiinfo-design-system.onrender.com/"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ganpatiinfosystem/ganpatiinfo-design-system",
+		"directory": "packages/private/web-dom-reference"
+	},
+	"dependencies": {
+		"@ganpatiinfo/gids-core-shared": "8.0.0",
+		"@ganpatiinfo/gids-web-shared": "8.0.0"
+	},
+	"peerDependencies": {
+		"@ganpatiinfo/gids-web-theme-interface": "5.0.0",
+		"@jest/globals": "^30.2.0",
+		"@types/jasmine": "^5.1.15",
+		"expect": "^30.2.0"
+	},
+	"peerDependenciesMeta": {
+		"@jest/globals": {
+			"optional": true
+		},
+		"expect": {
+			"optional": true
+		},
+		"@types/jasmine": {
+			"optional": true
+		}
+	}
 }

package/src/components/GidsAccordion/GidsAccordion.ts

@@ -0,0 +1,24 @@
+import { type GidsAccordionCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+	type ClassValue,
+	GidsAccordionWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsAccordionClassNames } = GidsAccordionWebUtils;
+
+export interface GidsAccordionDomProps extends GidsAccordionCommonProps<DomChildren> {
+	extraClasses?: ClassValue;
+}
+
+export const GidsAccordionDom = ({
+	children,
+	extraClasses,
+}: GidsAccordionDomProps): HTMLDivElement => {
+	const accordionEl = document.createElement('div');
+	accordionEl.className = getGidsAccordionClassNames(extraClasses);
+
+	appendAsChildren(accordionEl, children);
+
+	return accordionEl;
+};

package/src/components/GidsAccordionItem/GidsAccordionItem.ts

@@ -0,0 +1,37 @@
+import { GidsAccordionItemCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+	ClassValue,
+	GidsAccordionItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	DomChildren,
+	toggleAttribute,
+} from '../../utils/domUtils';
+
+const { getGidsAccordionItemClassNames } = GidsAccordionItemWebUtils;
+
+export interface GidsAccordionItemDomProps extends GidsAccordionItemCommonProps<DomChildren> {
+	onToggle?: (this: HTMLDetailsElement, even: Event) => void;
+	extraClasses?: ClassValue;
+}
+
+export const GidsAccordionItemDom = ({
+	open,
+	children,
+	onToggle,
+	extraClasses,
+}: GidsAccordionItemDomProps): HTMLDetailsElement => {
+	const accordionItem = document.createElement('details');
+	accordionItem.className = getGidsAccordionItemClassNames(extraClasses);
+	toggleAttribute(accordionItem, 'open', open ?? false);
+	accordionItem.open = open ?? false;
+
+	appendAsChildren(accordionItem, children);
+
+	if (onToggle) {
+		accordionItem.addEventListener('toggle', onToggle);
+	}
+
+	return accordionItem;
+};

package/src/components/GidsAccordionItemContent/GidsAccordionItemContent.ts

@@ -0,0 +1,25 @@
+import {
+	type ClassValue,
+	GidsAccordionItemContentWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsAccordionItemContentCommonProps } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsAccordionItemContentClassNames } =
+	GidsAccordionItemContentWebUtils;
+
+export interface GidsAccordionItemContentDomProps extends GidsAccordionItemContentCommonProps<DomChildren> {
+	extraClasses?: ClassValue;
+}
+
+export const GidsAccordionItemContentDom = ({
+	children,
+	extraClasses,
+}: GidsAccordionItemContentDomProps): HTMLDivElement => {
+	const content = document.createElement('div');
+	content.className = getGidsAccordionItemContentClassNames(extraClasses);
+
+	appendAsChildren(content, children);
+
+	return content;
+};

package/src/components/GidsAccordionItemHeader/GidsAccordionItemHeader.ts

@@ -0,0 +1,38 @@
+import { type GidsAccordionItemHeaderCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+	ClassValue,
+	GidsAccordionItemHeaderWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import { GidsIconDom } from '../GidsIcon/GidsIcon';
+
+const { getGidsAccordionItemHeaderClassNames } =
+	GidsAccordionItemHeaderWebUtils;
+
+export interface GidsAccordionItemHeaderDomProps extends GidsAccordionItemHeaderCommonProps<DomChildren> {
+	extraClasses?: ClassValue;
+}
+
+export const GidsAccordionItemHeaderDom = ({
+	children,
+	extraClasses,
+}: GidsAccordionItemHeaderDomProps): HTMLElement => {
+	const header = document.createElement('summary');
+	header.className = getGidsAccordionItemHeaderClassNames(extraClasses);
+
+	const content = document.createElement('div');
+	content.className = 'gids-accordion-item-header__content';
+	appendAsChildren(content, children);
+
+	header.append(content);
+	header.append(
+		GidsIconDom({
+			name: 'chevron-down',
+			size: 'md',
+			className: 'gids-accordion-item-header__indicator',
+			alt: '',
+		}),
+	);
+
+	return header;
+};

package/src/components/GidsButton/GidsButton.ts

@@ -25,6 +25,7 @@ export const GidsButtonDom = <
 	size,
 	disabled,
 	destructive,
+	positive,
 	loading,
 	width,
 	children,
@@ -41,7 +42,7 @@ export const GidsButtonDom = <
 	) as ButtonElement extends 'button' ? HTMLButtonElement : HTMLAnchorElement;
 
 	button.className = getGidsButtonClassNames(
-		{ appearance, size, width, destructive, loading },
+		{ appearance, size, width, destructive, loading, positive },
 		!children && nonEmpty(leadingIcon) && !nonEmpty(trailingIcon),
 	);
 

package/src/components/GidsDropdownItem/GidsDropdownItem.ts

@@ -0,0 +1,62 @@
+import {
+	type GidsDropdownItemWebProps,
+	GidsDropdownItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsListItemDom } from '../GidsListItem/GidsListItem.js';
+import {
+	GidsDropdownItemSelectEventDetail,
+	GidsListItemSelectEventDetail,
+} from '@ganpatiinfo/gids-core-shared';
+import { DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsDropdownItemClassNames } = GidsDropdownItemWebUtils;
+
+export interface GidsDropdownItemDomProps extends GidsDropdownItemWebProps<DomChildren> {
+	name?: string;
+	extraClasses?: string;
+	onPressDropdownItem?: (
+		event: CustomEvent<GidsDropdownItemSelectEventDetail>,
+	) => void;
+}
+
+export const GidsDropdownItemDom = ({
+	title,
+	selected = false,
+	disabled = false,
+	extraClasses,
+	name,
+	value,
+	onPressDropdownItem,
+	index,
+	defaultSelectedIndex,
+	leadingAccessory,
+}: GidsDropdownItemDomProps): HTMLButtonElement => {
+	return GidsListItemDom({
+		children: title,
+		index,
+		defaultSelectedIndex,
+		selected,
+		disabled,
+		extraClasses: getGidsDropdownItemClassNames(extraClasses),
+		name,
+		leadingAccessory,
+		onPressListItem: (event: CustomEvent<GidsListItemSelectEventDetail>) => {
+			const customEvent = new CustomEvent<GidsDropdownItemSelectEventDetail>(
+				'onPressDropdownItem',
+				{
+					bubbles: true,
+					composed: true,
+					detail: {
+						title,
+						value,
+						disabled,
+						...event.detail,
+					},
+				},
+			);
+			if (onPressDropdownItem) {
+				onPressDropdownItem(customEvent);
+			}
+		},
+	});
+};

package/src/components/GidsDropdownMenu/GidsDropdownMenu.ts

@@ -0,0 +1,43 @@
+import {
+	type GidsDropdownMenuWebProps,
+	GidsDropdownMenuWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsHeadingDom } from '../GidsHeading/GidsHeading.js';
+
+const { getGidsDropdownMenuClassNames } = GidsDropdownMenuWebUtils;
+
+export interface GidsDropdownMenuDomProps extends GidsDropdownMenuWebProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsDropdownMenuDom = ({
+	sectionLabel,
+	children,
+	extraClasses,
+}: GidsDropdownMenuDomProps): HTMLDivElement => {
+	const dropdownMenu = document.createElement('div');
+	dropdownMenu.className = getGidsDropdownMenuClassNames(extraClasses);
+
+	if (
+		sectionLabel !== undefined &&
+		sectionLabel !== null &&
+		sectionLabel !== ''
+	) {
+		dropdownMenu.append(
+			GidsHeadingDom({
+				supportingText: sectionLabel,
+				supportingTextTypography: 'eyebrow-medium',
+			}),
+		);
+	}
+
+	if (children !== undefined && children !== null) {
+		const childrenContainer = document.createElement('div');
+		childrenContainer.className = 'gids-dropdown-menu__children';
+		appendAsChildren(childrenContainer, children);
+		appendAsChildren(dropdownMenu, childrenContainer);
+	}
+
+	return dropdownMenu;
+};

package/src/components/GidsDropdownMenuGroup/GidsDropdownMenuGroup.ts

@@ -0,0 +1,26 @@
+import {
+	GidsDropdownMenuGroupWebProps,
+	GidsDropdownMenuGroupWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsDropdownMenuGroupClassNames } = GidsDropdownMenuGroupWebUtils;
+
+export interface GidsDropdownMenuGroupDomProps extends GidsDropdownMenuGroupWebProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsDropdownMenuGroupDom = ({
+	children,
+	extraClasses,
+}: GidsDropdownMenuGroupDomProps): HTMLDivElement => {
+	const dropdownMenuGroup = document.createElement('div');
+	dropdownMenuGroup.className =
+		getGidsDropdownMenuGroupClassNames(extraClasses);
+
+	if (children !== undefined && children !== null && children !== '') {
+		appendAsChildren(dropdownMenuGroup, children);
+	}
+
+	return dropdownMenuGroup;
+};

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

@@ -0,0 +1,68 @@
+import { type GidsFeedbackBlockCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsFeedbackBlockWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsButtonDockDom } from '../GidsButtonDock/GidsButtonDock.js';
+
+const { getGidsFeedbackBlockClassNames } = GidsFeedbackBlockWebUtils;
+
+export type GidsFeedbackBlockDomProps = GidsFeedbackBlockCommonProps<
+	DomNodeOrString,
+	DomNodeOrString,
+	DomNodeOrString
+>;
+
+export const GidsFeedbackBlockDom = ({
+	title,
+	supportingText,
+	image,
+	children,
+}: GidsFeedbackBlockDomProps): HTMLDivElement => {
+	const feedbackBlock = document.createElement('div');
+	feedbackBlock.className = getGidsFeedbackBlockClassNames();
+
+	const feedbackBlockInnerContainer = document.createElement('div');
+	feedbackBlockInnerContainer.className =
+		'gids-feedback-block__inner-container';
+
+	if (image) {
+		const imageEl = document.createElement('div');
+		imageEl.className = 'gids-feedback-block__image-container';
+		imageEl.append(image);
+		appendAsChildren(feedbackBlockInnerContainer, imageEl);
+	}
+
+	if (title) {
+		const titleEl = document.createElement('p');
+		const titleStrongEl = document.createElement('strong');
+		titleEl.className = 'gids-feedback-block__title';
+		if (title instanceof Node) {
+			titleStrongEl.append(title);
+		} else {
+			titleStrongEl.textContent = title;
+		}
+		appendAsChildren(titleEl, titleStrongEl);
+		appendAsChildren(feedbackBlockInnerContainer, titleEl);
+	}
+
+	if (supportingText) {
+		const supportingTextEl = document.createElement('div');
+		supportingTextEl.className = 'gids-feedback-block__supporting-text';
+		if (supportingText instanceof Node) {
+			supportingTextEl.append(supportingText);
+		} else {
+			supportingTextEl.textContent = supportingText;
+		}
+		appendAsChildren(feedbackBlockInnerContainer, supportingTextEl);
+	}
+
+	if (children) {
+		feedbackBlockInnerContainer.appendChild(
+			GidsButtonDockDom({
+				primaryChildren: children,
+			}),
+		);
+	}
+	appendAsChildren(feedbackBlock, feedbackBlockInnerContainer);
+
+	return feedbackBlock;
+};