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

package/src/components/GidsMenuGroup/GidsMenuGroup.ts

@@ -0,0 +1,43 @@
+import {
+	GidsMenuGroupWebProps,
+	GidsMenuGroupWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsSpinnerDom } from '../GidsSpinner/GidsSpinner.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);
+	}
+
+	if (type === 'default' && children !== undefined && children !== null) {
+		appendAsChildren(menuGroup, children);
+	}
+
+	return menuGroup;
+};

package/src/components/GidsPageTitle/GidsPageTitle.ts

@@ -0,0 +1,60 @@
+import {
+	GidsPageTitleWebProps,
+	GidsPageTitleWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	DomChildren,
+	DomNodeOrString,
+} from '../../utils/domUtils';
+
+const { getGidsPageTitleClassNames } = GidsPageTitleWebUtils;
+
+type GidsPageTitleBaseWebProps = GidsPageTitleWebProps<
+	DomChildren,
+	DomNodeOrString
+>;
+
+export interface GidsPageTitleDomProps extends GidsPageTitleBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsPageTitleDom = ({
+	level = 'parent',
+	children,
+	leadingAccessory,
+	trailingAccessory,
+	extraClasses,
+}: GidsPageTitleDomProps): HTMLDivElement => {
+	const pageTitle = document.createElement('div');
+	pageTitle.className = getGidsPageTitleClassNames(extraClasses);
+
+	if (leadingAccessory && level === 'child') {
+		const leadingAccContainer = document.createElement('div');
+		leadingAccContainer.className = 'gids-page-title__leading-accessory';
+		appendAsChildren(leadingAccContainer, leadingAccessory);
+		pageTitle.append(leadingAccContainer);
+	}
+
+	if (children) {
+		const h1El = document.createElement('h1');
+		h1El.className = 'gids-page-title__heading';
+
+		if (children instanceof Node) {
+			h1El.append(children);
+		} else {
+			h1El.textContent = children;
+		}
+
+		appendAsChildren(pageTitle, h1El);
+	}
+
+	if (trailingAccessory) {
+		const trailingAccContainer = document.createElement('div');
+		trailingAccContainer.className = 'gids-page-title__trailing-accessory';
+		appendAsChildren(trailingAccContainer, trailingAccessory);
+		pageTitle.append(trailingAccContainer);
+	}
+
+	return pageTitle;
+};

package/src/components/GidsPieChart/GidsPieChart.ts

@@ -0,0 +1,43 @@
+import {
+	GidsPieChartWebProps,
+	GidsPieChartWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsPieChartClassNames } = GidsPieChartWebUtils;
+
+type GidsPieChartBaseWebProps = GidsPieChartWebProps;
+
+type GidsPieChartElement = HTMLElement & GidsPieChartBaseWebProps;
+
+export interface GidsPieChartDomProps extends GidsPieChartBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsPieChartDom = ({
+	breakpoint = 'desktop',
+	chartLoading = false,
+	chartLoaderSize,
+	chartLoadingSupportingText,
+	chartLoadingTitle,
+	legendVisible,
+	size = 'xxs',
+	chartData = [],
+	extraClasses,
+}: GidsPieChartDomProps): HTMLElement => {
+	const pieChart = document.createElement(
+		'gids-pie-chart',
+	) as GidsPieChartElement;
+
+	pieChart.breakpoint = breakpoint;
+	pieChart.size = size;
+	pieChart.legendVisible = legendVisible;
+	pieChart.chartData = chartData;
+	pieChart.chartLoading = chartLoading;
+	pieChart.chartLoaderSize = chartLoaderSize;
+	pieChart.chartLoadingTitle = chartLoadingTitle;
+	pieChart.chartLoadingSupportingText = chartLoadingSupportingText;
+
+	pieChart.className = getGidsPieChartClassNames({ breakpoint }, extraClasses);
+
+	return pieChart;
+};

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

@@ -0,0 +1,46 @@
+import {
+	GidsProgressCircleWebProps,
+	GidsProgressCircleWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsProgressCircleClassNames } = GidsProgressCircleWebUtils;
+
+type GidsProgressCircleElement = HTMLElement & GidsProgressCircleWebProps;
+
+export interface GidsProgressCircleDomProps extends GidsProgressCircleWebProps {
+	extraClasses?: string;
+}
+
+export const GidsProgressCircleDom = ({
+	label,
+	shape = 'circle',
+	value = 0,
+	breakpoint = 'desktop',
+	chartLoading = false,
+	chartLoaderSize,
+	chartLoadingSupportingText,
+	chartLoadingTitle,
+	size = 'xxs',
+	extraClasses,
+}: GidsProgressCircleDomProps): HTMLElement => {
+	const progressCircle = document.createElement(
+		'gids-progress-circle',
+	) as GidsProgressCircleElement;
+
+	progressCircle.breakpoint = breakpoint;
+	progressCircle.size = size;
+	progressCircle.label = label;
+	progressCircle.value = value;
+	progressCircle.shape = shape;
+	progressCircle.chartLoading = chartLoading;
+	progressCircle.chartLoaderSize = chartLoaderSize;
+	progressCircle.chartLoadingTitle = chartLoadingTitle;
+	progressCircle.chartLoadingSupportingText = chartLoadingSupportingText;
+
+	progressCircle.className = getGidsProgressCircleClassNames(
+		{ breakpoint },
+		extraClasses,
+	);
+
+	return progressCircle;
+};

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

@@ -71,8 +71,39 @@ 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';
+export * from './components/GidsDropdown/GidsDropdown.js';
+export * from './components/GidsChevronButton/GidsChevronButton.js';
+export * from './components/GidsDropdownField/GidsDropdownField.js';
+export * from './components/GidsCalendarCell/GidsCalendarCell.js';
+export * from './components/GidsDot/GidsDot.js';
+export * from './components/GidsCalendarDayCell/GidsCalendarDayCell.js';
+export * from './components/GidsCalendarMonthList/GidsCalendarMonthList.js';
+export * from './components/GidsCalendarYearList/GidsCalendarYearList.js';
+export * from './components/GidsDropdownPicker/GidsDropdownPicker.js';
+export * from './components/GidsCalendarHeaderPanel/GidsCalendarHeaderPanel.js';
+export * from './components/GidsCalendar/GidsCalendar.js';
+export * from './components/GidsPageTitle/GidsPageTitle.js';
+export * from './components/GidsChartLegendItem/GidsChartLegendItem.js';
+export * from './components/GidsChartLegend/GidsChartLegend.js';
+export * from './components/GidsLineChart/GidsLineChart.js';
+export * from './components/GidsBarChart/GidsBarChart.js';
+export * from './components/GidsPieChart/GidsPieChart.js';
+export * from './components/GidsLevelGauge/GidsLevelGauge.js';
+export * from './components/GidsProgressCircle/GidsProgressCircle.js';
+export * from './components/GidsActivityGauge/GidsActivityGauge.js';
+export * from './components/GidsChart/GidsChart.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 ---
+	}
+};