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

package/src/components/GidsCalendarYearList/GidsCalendarYearList.ts

@@ -0,0 +1,76 @@
+import {
+	GidsCalendarYearListWebProps,
+	GidsCalendarYearListWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	GidsCalendarYearListItemSelectEventDetail,
+	GidsMenuGroupType,
+} from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsCalendarYearListClassNames, isValidFourDigitYear } =
+	GidsCalendarYearListWebUtils;
+
+type GidsCalendarYearListElement = HTMLElement & {
+	type?: GidsMenuGroupType;
+	noOptionsText?: string;
+	disabledIndices?: number[];
+	selectedYear?: number;
+	divider?: boolean;
+	startYear?: number;
+	endYear?: number;
+	onSelectionYearChange?: (
+		detail: GidsCalendarYearListItemSelectEventDetail,
+	) => void;
+};
+
+export interface GidsCalendarYearListDomProps extends GidsCalendarYearListWebProps {
+	extraClasses?: string;
+}
+
+export const GidsCalendarYearListDom = ({
+	type = 'default',
+	noOptionsText,
+	disabledIndices = [],
+	divider = false,
+	selectedYear,
+	startYear,
+	endYear,
+	onSelectionYearChange,
+	extraClasses,
+}: GidsCalendarYearListDomProps): HTMLElement => {
+	const calendarYearList = document.createElement(
+		'gids-calendar-year-list',
+	) as GidsCalendarYearListElement;
+
+	calendarYearList.type = type;
+	if (noOptionsText) {
+		calendarYearList.noOptionsText = noOptionsText;
+	}
+	calendarYearList.disabledIndices = disabledIndices;
+	calendarYearList.divider = divider;
+	calendarYearList.selectedYear = selectedYear;
+
+	calendarYearList.className = getGidsCalendarYearListClassNames(extraClasses);
+
+	if (onSelectionYearChange) {
+		calendarYearList.onSelectionYearChange = onSelectionYearChange;
+	}
+
+	let newStartYear = 0;
+	let newEndYear = 0;
+	if (startYear && startYear > 0 && isValidFourDigitYear(startYear)) {
+		newStartYear = startYear;
+	} else {
+		newStartYear = new Date().getFullYear();
+	}
+	if (endYear && endYear > 0 && isValidFourDigitYear(endYear)) {
+		newEndYear = endYear;
+	} else {
+		newEndYear = newStartYear + 100;
+	}
+
+	calendarYearList.startYear = newStartYear;
+	calendarYearList.endYear = newEndYear;
+
+	return calendarYearList;
+};

package/src/components/GidsChart/GidsChart.ts

@@ -0,0 +1,41 @@
+import {
+	GidsChartWebProps,
+	GidsChartWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsChartClassNames } = GidsChartWebUtils;
+
+type GidsChartBaseWebProps = GidsChartWebProps;
+
+type GidsChartElement = HTMLElement & GidsChartBaseWebProps;
+
+export interface GidsChartDomProps extends GidsChartBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsChartDom = ({
+	breakpoint = 'desktop',
+	chartType = 'line-chart',
+	lineChartProps,
+	barChartProps,
+	pieChartProps,
+	activityGaugeProps,
+	levelGaugeProps,
+	progressCircleProps,
+	extraClasses,
+}: GidsChartDomProps): HTMLElement => {
+	const chart = document.createElement('gids-chart') as GidsChartElement;
+
+	chart.breakpoint = breakpoint;
+	chart.chartType = chartType;
+	chart.lineChartProps = lineChartProps;
+	chart.barChartProps = barChartProps;
+	chart.pieChartProps = pieChartProps;
+	chart.activityGaugeProps = activityGaugeProps;
+	chart.levelGaugeProps = levelGaugeProps;
+	chart.progressCircleProps = progressCircleProps;
+
+	chart.className = getGidsChartClassNames(extraClasses);
+
+	return chart;
+};

package/src/components/GidsChartLegend/GidsChartLegend.ts

@@ -0,0 +1,38 @@
+import {
+	GidsChartLegendWebProps,
+	GidsChartLegendWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const { getGidsChartLegendClassNames } = GidsChartLegendWebUtils;
+
+type GidsChartLegendElement = HTMLElement &
+	GidsChartLegendWebProps<DomChildren>;
+
+export interface GidsChartLegendDomProps extends GidsChartLegendWebProps<DomChildren> {
+	children?: HTMLElement | HTMLElement[];
+	extraClasses?: string;
+}
+
+export const GidsChartLegendDom = ({
+	children,
+	orientation = 'horizontal',
+	extraClasses,
+}: GidsChartLegendDomProps): HTMLElement => {
+	const chartLegend = document.createElement(
+		'gids-chart-legend',
+	) as GidsChartLegendElement;
+
+	if (children) {
+		appendAsChildren(chartLegend, children);
+	}
+
+	chartLegend.orientation = orientation;
+
+	chartLegend.className = getGidsChartLegendClassNames(
+		{ orientation },
+		extraClasses,
+	);
+
+	return chartLegend;
+};

package/src/components/GidsChartLegendItem/GidsChartLegendItem.ts

@@ -0,0 +1,40 @@
+import {
+	GidsChartLegendItemWebProps,
+	GidsChartLegendItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const { getGidsChartLegendItemClassNames } = GidsChartLegendItemWebUtils;
+
+type GidsChartLegendItemElement = HTMLElement &
+	GidsChartLegendItemWebProps<DomChildren>;
+
+export interface GidsChartLegendItemDomProps extends GidsChartLegendItemWebProps<DomChildren> {
+	children?: HTMLElement | HTMLElement[];
+	extraClasses?: string;
+}
+
+export const GidsChartLegendItemDom = ({
+	children,
+	seriesType = '1',
+	orientation = 'horizontal',
+	extraClasses,
+}: GidsChartLegendItemDomProps): HTMLElement => {
+	const chartLegendItem = document.createElement(
+		'gids-chart-legend-item',
+	) as GidsChartLegendItemElement;
+
+	if (children) {
+		appendAsChildren(chartLegendItem, children);
+	}
+
+	chartLegendItem.seriesType = seriesType;
+	chartLegendItem.orientation = orientation;
+
+	chartLegendItem.className = getGidsChartLegendItemClassNames(
+		{ seriesType, orientation },
+		extraClasses,
+	);
+
+	return chartLegendItem;
+};

package/src/components/GidsChevronButton/GidsChevronButton.ts

@@ -0,0 +1,55 @@
+import {
+	GidsChevronButtonWebProps,
+	GidsChevronButtonWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsButtonDomProps } from '../GidsButton/GidsButton';
+import { GidsButtonSize } from '@ganpatiinfo/gids-core-shared';
+// import { GidsIconDom } from '../GidsIcon/GidsIcon';
+
+const { getGidsChevronButtonClassNames } = GidsChevronButtonWebUtils;
+
+export interface GidsChevronButtonDomProps extends GidsChevronButtonWebProps {
+	extraClasses?: string;
+	gidsChevronButton?: (this: HTMLButtonElement, event: Event) => void;
+}
+
+type GidsChevronButtonElement = HTMLElement & {
+	size?: GidsButtonSize;
+	disabled?: boolean;
+	'aria-label'?: string;
+	'aria-expanded'?: string;
+	'aria-haspopup'?: string;
+	'aria-autocomplete'?: string;
+	'aria-controls'?: string;
+} & Pick<GidsButtonDomProps<'button'>, 'onClick'>;
+
+export const GidsChevronButtonDom = ({
+	size = 'xs',
+	disabled,
+	gidsChevronButton,
+	extraClasses,
+	ariaLabel,
+	ariaHaspopup,
+	ariaExpanded,
+	ariaControls,
+}: GidsChevronButtonDomProps): HTMLElement => {
+	const chevronButton = document.createElement(
+		'gids-chevron-button',
+	) as GidsChevronButtonElement;
+	chevronButton.className = getGidsChevronButtonClassNames(
+		{ size },
+		extraClasses,
+	);
+
+	chevronButton.size = size;
+	chevronButton.disabled = disabled;
+	chevronButton['aria-label'] = ariaLabel ?? '';
+	chevronButton['aria-haspopup'] = ariaHaspopup ?? '';
+	chevronButton['aria-expanded'] = ariaExpanded ?? '';
+	chevronButton['aria-controls'] = ariaControls ?? '';
+	if (gidsChevronButton) {
+		chevronButton.addEventListener('click', gidsChevronButton);
+	}
+
+	return chevronButton;
+};

package/src/components/GidsDot/GidsDot.ts

@@ -0,0 +1,42 @@
+import { GidsDotAppearance, GidsDotSize } from '@ganpatiinfo/gids-core-shared';
+import { GidsDotWebProps, GidsDotWebUtils } from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsDotClassNames } = GidsDotWebUtils;
+
+export interface GidsDotDomProps extends GidsDotWebProps {
+	extraClasses?: string;
+}
+
+type GidsDotElement = HTMLElement & {
+	appearance?: GidsDotAppearance;
+	size?: GidsDotSize;
+	disabled?: boolean;
+};
+
+export const GidsDotDom = ({
+	appearance = 'subtle',
+	disabled = false,
+	size = 'xs',
+	extraClasses,
+}: GidsDotDomProps): HTMLElement => {
+	const dot = document.createElement('gids-dot') as GidsDotElement;
+	dot.className = getGidsDotClassNames(
+		{ appearance, size, disabled },
+		extraClasses,
+	);
+
+	dot.setAttribute('appearance', appearance);
+	dot.setAttribute('size', size);
+
+	if (disabled) {
+		dot.setAttribute('disabled', '');
+	} else {
+		dot.removeAttribute('disabled');
+	}
+
+	dot.appearance = appearance;
+	dot.size = size;
+	dot.disabled = disabled;
+
+	return dot;
+};

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

@@ -0,0 +1,67 @@
+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 = ({
+	id,
+	title,
+	selected = false,
+	disabled = false,
+	extraClasses,
+	name,
+	value,
+	onPressDropdownItem,
+	index,
+	defaultSelectedIndex,
+	leadingAccessory,
+	divider,
+}: GidsDropdownItemDomProps): HTMLButtonElement => {
+	return GidsListItemDom({
+		id: id,
+		children: title,
+		index: index ?? 0,
+		defaultSelectedIndex,
+		selected,
+		disabled,
+		extraClasses: getGidsDropdownItemClassNames(extraClasses),
+		name,
+		leadingAccessory,
+		divider,
+		onPressListItem: (event: CustomEvent<GidsListItemSelectEventDetail>) => {
+			const customEvent = new CustomEvent<GidsDropdownItemSelectEventDetail>(
+				'onPressDropdownItem',
+				{
+					bubbles: true,
+					composed: true,
+					detail: {
+						id,
+						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;
+};