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

package/src/components/GidsDropdown/GidsDropdown.ts

@@ -0,0 +1,149 @@
+import {
+	type GidsDropdownChangeEventDetail,
+	type GidsInputAppearance,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	type GidsDropdownWebProps,
+	GidsDropdownWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	assignToSlot,
+	DomChildren,
+} from '../../utils/domUtils.js';
+
+const { getGidsDropdownClassNames } = GidsDropdownWebUtils;
+
+type NativeInputForwardedProps = Partial<
+	Omit<HTMLInputElement, 'value' | 'readOnly' | 'name' | 'disabled'>
+>;
+
+type GidsDropdownInputA11yProps = NativeInputForwardedProps & {
+	role?: string | null;
+	'aria-expanded'?: string;
+	'aria-haspopup'?: string;
+	'aria-autocomplete'?: string;
+	'aria-controls'?: string;
+};
+
+export interface GidsDropdownToggleEventDetail {
+	expanded: boolean;
+	originalEvent?: Event;
+}
+
+type GidsDropdownElement = HTMLElement & {
+	appearance?: GidsInputAppearance;
+	expanded?: boolean;
+	inputProps?: NativeInputForwardedProps;
+	disabled?: boolean;
+	readOnly?: boolean;
+	loading?: boolean;
+	value?: string;
+	name?: string;
+	onSelectionChange?: (detail: GidsDropdownChangeEventDetail) => void;
+	required?: boolean;
+};
+
+export interface GidsDropdownDomProps extends GidsDropdownWebProps<
+	DomChildren,
+	NativeInputForwardedProps,
+	DomChildren
+> {
+	children?: HTMLElement | HTMLElement[];
+	onToggle?: (detail: GidsDropdownToggleEventDetail) => void;
+	extraClasses?: string;
+}
+
+export const GidsDropdownDom = ({
+	appearance,
+	expanded,
+	loading = false,
+	leadingIcon,
+	value,
+	name,
+	disabled = false,
+	readOnly = false,
+	children,
+	onSelectionChange,
+	inputProps,
+	onToggle,
+	extraClasses,
+	required = false,
+	leadingAccessory,
+}: GidsDropdownDomProps): HTMLElement => {
+	const dropdown = document.createElement(
+		'gids-dropdown',
+	) as GidsDropdownElement;
+
+	if (appearance) {
+		dropdown.appearance = appearance;
+	}
+	if (typeof expanded === 'boolean') {
+		dropdown.expanded = expanded;
+	}
+	dropdown.loading = loading;
+
+	if (leadingIcon) {
+		// @ts-expect-error expected err
+		assignToSlot(dropdown, 'leadingIconDropdown', leadingIcon);
+	}
+
+	if (leadingAccessory) {
+		// @ts-expect-error expected err
+		assignToSlot(dropdown, 'leadingAccessoryDropdown', leadingAccessory);
+	}
+
+	dropdown.disabled = disabled;
+	dropdown.readOnly = readOnly;
+	if (typeof value === 'string') {
+		dropdown.value = value;
+	}
+	if (name) {
+		dropdown.name = name;
+	}
+	dropdown.required = required;
+
+	const isInteractive = !(disabled || readOnly);
+	const isExpanded = Boolean(expanded) && isInteractive;
+	const hasMenuContent = children !== undefined;
+
+	const inputId =
+		typeof inputProps?.id === 'string' ? inputProps.id : undefined;
+	const menuId = typeof inputId === 'string' ? `${inputId}__menu` : undefined;
+	const inputPropsWithA11y: GidsDropdownInputA11yProps = {
+		...(inputProps ?? {}),
+	};
+
+	if (hasMenuContent) {
+		inputPropsWithA11y.role = 'combobox';
+		inputPropsWithA11y['aria-expanded'] = isExpanded ? 'true' : 'false';
+		inputPropsWithA11y['aria-haspopup'] = 'listbox';
+		inputPropsWithA11y['aria-autocomplete'] = 'list';
+		if (typeof menuId === 'string') {
+			inputPropsWithA11y['aria-controls'] = menuId;
+		}
+	}
+
+	dropdown.className = getGidsDropdownClassNames(
+		{ expanded: isExpanded },
+		extraClasses,
+	);
+
+	dropdown.inputProps = inputPropsWithA11y;
+
+	if (onSelectionChange) {
+		dropdown.onSelectionChange = onSelectionChange;
+	}
+
+	if (onToggle) {
+		dropdown.addEventListener('gidsDropdownToggle', (event: Event) => {
+			onToggle((event as CustomEvent<GidsDropdownToggleEventDetail>).detail);
+		});
+	}
+
+	if (children !== undefined && children !== null) {
+		appendAsChildren(dropdown, children);
+	}
+
+	return dropdown;
+};

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,
@@ -28,18 +29,23 @@ export const GidsDropdownItemDom = ({
 	value,
 	onPressDropdownItem,
 	index,
-	defaultSelectedIndex,
+	defaultSelected,
 	leadingAccessory,
+	divider,
+	isPlaceholderItem,
 }: GidsDropdownItemDomProps): HTMLButtonElement => {
 	return GidsListItemDom({
+		id: id,
 		children: title,
-		index,
-		defaultSelectedIndex,
+		index: index ?? 0,
+		defaultSelected,
 		selected,
 		disabled,
 		extraClasses: getGidsDropdownItemClassNames(extraClasses),
 		name,
 		leadingAccessory,
+		divider,
+		isPlaceholderItem,
 		onPressListItem: (event: CustomEvent<GidsListItemSelectEventDetail>) => {
 			const customEvent = new CustomEvent<GidsDropdownItemSelectEventDetail>(
 				'onPressDropdownItem',
@@ -47,10 +53,12 @@ export const GidsDropdownItemDom = ({
 					bubbles: true,
 					composed: true,
 					detail: {
+						id,
 						title,
 						value,
 						disabled,
 						...event.detail,
+						isPlaceholderItem,
 					},
 				},
 			);

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

@@ -0,0 +1,110 @@
+import {
+	GidsFilterWebProps,
+	GidsFilterWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils';
+import { GidsFilterToggleEventDetail } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsFilterClassNames } = GidsFilterWebUtils;
+
+type GidsFilterA11yProps = {
+	role?: string | null;
+	'aria-expanded'?: string;
+	'aria-haspopup'?: string;
+	'aria-controls'?: string;
+};
+
+type GidsFilterBaseWebProps = GidsFilterWebProps<
+	HTMLElement | HTMLElement[] | undefined
+>;
+
+type GidsFilterElement = HTMLElement &
+	GidsFilterA11yProps &
+	GidsFilterBaseWebProps & {
+		onToggle?: (detail: GidsFilterToggleEventDetail<Event>) => void;
+	};
+
+export interface GidsFilterDomProps
+	extends GidsFilterBaseWebProps, GidsFilterA11yProps {
+	onToggle?: (detail: GidsFilterToggleEventDetail<Event>) => void;
+	extraClasses?: string;
+}
+
+export const GidsFilterDom = ({
+	name,
+	filterId,
+	filterPickerId,
+	expanded = false,
+	type = 'none',
+	value,
+	filterSelected = false,
+	filterDefaultSelected = false,
+	children,
+	filterItemType = 'primary',
+	disabled = false,
+	size = 'sm',
+	loading = false,
+	filterIndex = 0,
+	onFilterMenuItemChange,
+	onToggle,
+	extraClasses,
+}: GidsFilterDomProps): HTMLElement => {
+	const filter = document.createElement('gids-filter') as GidsFilterElement;
+
+	filter.type = type;
+	filter.filterId = filterId;
+	filter.filterSelected = filterSelected;
+	filter.filterDefaultSelected = filterDefaultSelected;
+
+	if (typeof expanded === 'boolean') {
+		filter.expanded = expanded;
+	}
+	filter.loading = loading;
+
+	filter.disabled = disabled;
+	filter.size = size;
+	filter.filterItemType = filterItemType;
+	filter.filterIndex = filterIndex;
+	if (typeof value === 'string') {
+		filter.value = value;
+	}
+	if (name) {
+		filter.name = name;
+	}
+
+	const isInteractive = !disabled;
+	const isExpanded = Boolean(expanded) && isInteractive;
+	const hasMenuContent = children !== undefined && children !== null;
+
+	const pickerId =
+		typeof filterPickerId === 'string' ? filterPickerId : undefined;
+	const menuId = typeof pickerId === 'string' ? `${pickerId}__menu` : undefined;
+
+	if (hasMenuContent) {
+		filter.role = 'pickerbox';
+		filter['aria-expanded'] = isExpanded ? 'true' : 'false';
+		filter['aria-haspopup'] = 'pickerlistbox';
+		if (typeof menuId === 'string') {
+			filter['aria-controls'] = menuId;
+		}
+	}
+
+	filter.className = getGidsFilterClassNames(
+		{ expanded: isExpanded },
+		extraClasses,
+	);
+
+	if (onFilterMenuItemChange) {
+		filter.onFilterMenuItemChange = onFilterMenuItemChange;
+	}
+
+	if (onToggle) {
+		filter.onToggle = onToggle;
+	}
+
+	if (children !== undefined && children !== null) {
+		appendAsChildren(filter, children);
+	}
+
+	return filter;
+};

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