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

package/src/components/GidsDropdownField/GidsDropdownField.ts

@@ -0,0 +1,106 @@
+import {
+	GidsDropdownChangeEventDetail,
+	GidsInputAppearance,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	GidsDropdownFieldWebProps,
+	GidsDropdownFieldWebUtils,
+	GidsInputWebStatus,
+	GidsWebFieldStatus,
+} from '@ganpatiinfo/gids-web-shared';
+import { assignToSlot, DomChildren } from '../../utils/domUtils';
+
+const { getGidsDropdownFieldClassNames } = GidsDropdownFieldWebUtils;
+
+type NativeInputForwardedProps = Partial<
+	Omit<HTMLInputElement, 'value' | 'readOnly' | 'name' | 'disabled'>
+>;
+
+type GidsDropdownFieldElement = HTMLElement & {
+	label?: string;
+	helperText?: string;
+	statusText?: string;
+	status?: GidsWebFieldStatus;
+	appearance?: GidsInputAppearance;
+	expanded?: boolean;
+	inputProps?: NativeInputForwardedProps;
+	disabled?: boolean;
+	readOnly?: boolean;
+	loading?: boolean;
+	value?: string;
+	name?: string;
+	onSelectionChange?: (detail: GidsDropdownChangeEventDetail) => void;
+	required?: boolean;
+	state?: GidsInputWebStatus;
+};
+
+export interface GidsDropdownFieldDomProps extends GidsDropdownFieldWebProps<
+	DomChildren,
+	NativeInputForwardedProps,
+	DomChildren
+> {
+	children?: HTMLElement | HTMLElement[];
+	extraClasses?: string;
+}
+
+export const GidsDropdownFieldDom = ({
+	label,
+	helperText,
+	statusText,
+	status,
+	appearance,
+	expanded,
+	inputProps,
+	disabled,
+	readOnly,
+	loading,
+	value,
+	name,
+	children,
+	onSelectionChange,
+	required,
+	state,
+	extraClasses,
+	leadingIcon,
+	leadingAccessory,
+}: GidsDropdownFieldDomProps): HTMLElement => {
+	const dropdownField = document.createElement(
+		'gids-dropdown-field',
+	) as GidsDropdownFieldElement;
+
+	dropdownField.className = getGidsDropdownFieldClassNames(extraClasses);
+	dropdownField.label = label;
+	dropdownField.helperText = helperText;
+	dropdownField.statusText = statusText;
+	dropdownField.status = status;
+	dropdownField.appearance = appearance;
+	dropdownField.expanded = expanded;
+	dropdownField.inputProps = inputProps;
+	dropdownField.disabled = disabled;
+	dropdownField.readOnly = readOnly;
+	dropdownField.loading = loading;
+	dropdownField.value = value;
+	dropdownField.name = name;
+	const childrenNodes = children
+		? (Array.isArray(children) ? children : [children]).filter(
+				(node): node is HTMLElement => node != null,
+			)
+		: [];
+	if (childrenNodes.length > 0) {
+		dropdownField.append(...childrenNodes);
+	}
+	dropdownField.onSelectionChange = onSelectionChange;
+	dropdownField.required = required;
+	dropdownField.state = state;
+	if (leadingIcon) {
+		// @ts-expect-error expected err
+		assignToSlot(dropdownField, 'leadingIconDropdown', leadingIcon);
+	}
+
+	if (leadingAccessory) {
+		// @ts-expect-error expected err
+		assignToSlot(dropdownField, 'leadingAccessoryDropdown', leadingAccessory);
+	}
+
+	return dropdownField;
+};

package/src/components/GidsDropdownItem/GidsDropdownItem.ts

@@ -20,6 +20,7 @@ export interface GidsDropdownItemDomProps extends GidsDropdownItemWebProps<DomCh
 }
 
 export const GidsDropdownItemDom = ({
+	id,
 	title,
 	selected = false,
 	disabled = false,
@@ -30,16 +31,19 @@ export const GidsDropdownItemDom = ({
 	index,
 	defaultSelectedIndex,
 	leadingAccessory,
+	divider,
 }: GidsDropdownItemDomProps): HTMLButtonElement => {
 	return GidsListItemDom({
+		id: id,
 		children: title,
-		index,
+		index: index ?? 0,
 		defaultSelectedIndex,
 		selected,
 		disabled,
 		extraClasses: getGidsDropdownItemClassNames(extraClasses),
 		name,
 		leadingAccessory,
+		divider,
 		onPressListItem: (event: CustomEvent<GidsListItemSelectEventDetail>) => {
 			const customEvent = new CustomEvent<GidsDropdownItemSelectEventDetail>(
 				'onPressDropdownItem',
@@ -47,6 +51,7 @@ export const GidsDropdownItemDom = ({
 					bubbles: true,
 					composed: true,
 					detail: {
+						id,
 						title,
 						value,
 						disabled,

package/src/components/GidsDropdownMenuGroup/GidsDropdownMenuGroup.ts

@@ -3,6 +3,7 @@ import {
 	GidsDropdownMenuGroupWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsSpinnerDom } from '../GidsSpinner/GidsSpinner.js';
 
 const { getGidsDropdownMenuGroupClassNames } = GidsDropdownMenuGroupWebUtils;
 
@@ -11,14 +12,33 @@ export interface GidsDropdownMenuGroupDomProps extends GidsDropdownMenuGroupWebP
 }
 
 export const GidsDropdownMenuGroupDom = ({
+	type = 'no-options',
+	supportingText = 'No options',
 	children,
 	extraClasses,
 }: GidsDropdownMenuGroupDomProps): HTMLDivElement => {
 	const dropdownMenuGroup = document.createElement('div');
-	dropdownMenuGroup.className =
-		getGidsDropdownMenuGroupClassNames(extraClasses);
+	dropdownMenuGroup.className = getGidsDropdownMenuGroupClassNames(
+		{ type },
+		extraClasses,
+	);
 
-	if (children !== undefined && children !== null && children !== '') {
+	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);
 	}
 

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/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

@@ -31,6 +31,7 @@ export const GidsListItemDom = (
 	props: GidsListItemDomProps,
 ): HTMLButtonElement => {
 	const {
+		id,
 		index,
 		defaultSelectedIndex,
 		children,
@@ -48,8 +49,8 @@ export const GidsListItemDom = (
 		trailingParagraph,
 		divider,
 		extraClasses,
-		value,
 		name,
+		value,
 	} = props;
 
 	const listItem = document.createElement('button');
@@ -60,15 +61,12 @@ export const GidsListItemDom = (
 	);
 	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;
 	}
 
-	if (typeof value === 'string') {
-		listItem.value = value;
-	}
-
 	const mainContainer = document.createElement('div');
 	mainContainer.className = 'gids-list-item__main-container';
 
@@ -107,17 +105,17 @@ export const GidsListItemDom = (
 		'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') {
-			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';
 			leadingLabel.textContent = children;
-
-			appendAsChildren(leadingContentContainer, leadingLabel);
 		} else {
-			appendAsChildren(leadingContentContainer, children);
+			appendAsChildren(leadingLabel, children);
 		}
+
+		appendAsChildren(leadingContentContainer, leadingLabel);
 	}
 
 	if (
@@ -277,5 +275,19 @@ export const GidsListItemDom = (
 		});
 	}
 
+	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

@@ -8,7 +8,6 @@ import {
 	DomNodeOrString,
 } from '../../utils/domUtils.js';
 import { GidsHeadingDom } from '../GidsHeading/GidsHeading.js';
-import { testDomChildrenValidity } from '../../utils/childrenValidationUtils.js';
 
 const { getGidsMenuClassNames } = GidsMenuWebUtils;
 
@@ -46,13 +45,6 @@ export const GidsMenuDom = ({
 		);
 	}
 
-	testDomChildrenValidity({
-		children,
-		classNameToBeValidated: 'gids-list-item',
-		childrenNameToBeValidated: 'GidsListItemDom',
-		currentComponentName: 'GidsMenu',
-	});
-
 	if (children !== undefined && children !== null) {
 		const childrenContainer = document.createElement('div');
 		childrenContainer.className = 'gids-menu__children';

package/src/components/GidsMenuGroup/GidsMenuGroup.ts

@@ -4,7 +4,6 @@ import {
 } from '@ganpatiinfo/gids-web-shared';
 import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
 import { GidsSpinnerDom } from '../GidsSpinner/GidsSpinner.js';
-import { testDomChildrenValidity } from '../../utils/childrenValidationUtils.js';
 
 const { getGidsMenuGroupClassNames } = GidsMenuGroupWebUtils;
 
@@ -36,13 +35,6 @@ export const GidsMenuGroupDom = ({
 		appendAsChildren(menuGroup, noOptionText);
 	}
 
-	testDomChildrenValidity({
-		children,
-		classNameToBeValidated: 'gids-menu',
-		childrenNameToBeValidated: 'GidsMenuDom',
-		currentComponentName: 'GidsMenuGroup',
-	});
-
 	if (type === 'default' && children !== undefined && children !== null) {
 		appendAsChildren(menuGroup, children);
 	}

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/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;
+};