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

package/src/components/GidsListItem/GidsListItem.ts

@@ -31,8 +31,9 @@ export const GidsListItemDom = (
 	props: GidsListItemDomProps,
 ): HTMLButtonElement => {
 	const {
+		id,
 		index,
-		defaultSelectedIndex,
+		defaultSelected,
 		children,
 		disabled = false,
 		selected,
@@ -48,27 +49,32 @@ export const GidsListItemDom = (
 		trailingParagraph,
 		divider,
 		extraClasses,
-		value,
 		name,
+		value,
+		isPlaceholderItem,
 	} = props;
 
+	const isSelected = selected || defaultSelected;
+
 	const listItem = document.createElement('button');
 	listItem.type = 'button';
 	listItem.className = getGidsListItemClassNames(
-		{ disabled, selected },
+		{ disabled, selected: isSelected },
 		extraClasses,
 	);
 	listItem.setAttribute('role', 'list-item-option');
-	listItem.setAttribute('aria-selected', selected ? 'true' : 'false');
+	listItem.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+	listItem.setAttribute('id', id);
+	listItem.setAttribute('tabIndex', `${index}`);
+	listItem.setAttribute(
+		'is-placeholder-item',
+		isPlaceholderItem ? 'true' : 'false',
+	);
 	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 +113,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 (
@@ -223,7 +229,7 @@ export const GidsListItemDom = (
 	trailingAccessoryContainer.className = disabled
 		? 'gids-list-item__trailing-accessory-container gids-list-item__accessory-content-disabled'
 		: 'gids-list-item__trailing-accessory-container';
-	if (selected) {
+	if (isSelected) {
 		trailingAccessoryContainer.append(
 			GidsIconDom({
 				name: 'checkmark',
@@ -240,7 +246,7 @@ export const GidsListItemDom = (
 	}
 
 	appendAsChildren(listItem, mainContainer);
-	if (divider && !selected) {
+	if (divider && !isSelected) {
 		const dividerWrapper = document.createElement('div');
 		dividerWrapper.className = 'gids-list-item__divider';
 
@@ -267,7 +273,8 @@ export const GidsListItemDom = (
 					composed: true,
 					detail: {
 						selectedIndex: index,
-						defaultSelectedIndex, // Toggles or passes current state
+						defaultSelected, // Toggles or passes current state
+						isPlaceholderItem,
 					},
 				},
 			);
@@ -277,5 +284,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;
+};

package/src/index.ts

@@ -80,6 +80,29 @@ 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';
+export * from './components/GidsFilter/GidsFilter.js';
+export * from './components/GidsActionBar/GidsActionBar.js';
 
 /**
  * Utilities