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

package/src/components/GidsCalendarHeaderPanel/GidsCalendarHeaderPanel.ts

@@ -0,0 +1,107 @@
+import {
+	GidsCalendarHeaderPanelWebProps,
+	GidsCalendarHeaderPanelWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsCalendarHeaderPanelClassNames } =
+	GidsCalendarHeaderPanelWebUtils;
+
+export interface GidsCalendarHeaderPanelToggleEventDetail {
+	expandedMonthPicker: boolean;
+	expandedYearPicker: boolean;
+	originalEvent?: Event;
+}
+
+type GidsCalendarHeaderPanelElement = HTMLElement &
+	GidsCalendarHeaderPanelWebProps;
+
+export interface GidsCalendarHeaderPanelDomProps extends GidsCalendarHeaderPanelWebProps {
+	onToggleMonthPicker?: (
+		detail: GidsCalendarHeaderPanelToggleEventDetail,
+	) => void;
+	onToggleYearPicker?: (
+		detail: GidsCalendarHeaderPanelToggleEventDetail,
+	) => void;
+	extraClasses?: string;
+}
+
+export const GidsCalendarHeaderPanelDom = ({
+	appearance = 'primary',
+	selectedMonthNumber,
+	startYear,
+	endYear,
+	selectedYear,
+	monthPickerDisabled = false,
+	yearPickerDisabled = false,
+	panelDisabled = false,
+	previousDisabled = false,
+	nextDisabled = false,
+	expandedMonthPicker = false,
+	expandedYearPicker = false,
+	onNextChange,
+	onPreviousChange,
+	onPanelMonthChange,
+	onPanelYearChange,
+	onToggleMonthPicker,
+	onToggleYearPicker,
+	extraClasses,
+}: GidsCalendarHeaderPanelDomProps): HTMLElement => {
+	const calendarHeaderPanel = document.createElement(
+		'gids-calendar-header-panel',
+	) as GidsCalendarHeaderPanelElement;
+
+	calendarHeaderPanel.appearance = appearance;
+	calendarHeaderPanel.selectedMonthNumber = selectedMonthNumber;
+	calendarHeaderPanel.selectedYear = selectedYear;
+	calendarHeaderPanel.monthPickerDisabled = monthPickerDisabled;
+	calendarHeaderPanel.yearPickerDisabled = yearPickerDisabled;
+	calendarHeaderPanel.panelDisabled = panelDisabled;
+	calendarHeaderPanel.previousDisabled = previousDisabled;
+	calendarHeaderPanel.nextDisabled = nextDisabled;
+	calendarHeaderPanel.expandedMonthPicker = expandedMonthPicker;
+	calendarHeaderPanel.expandedYearPicker = expandedYearPicker;
+	calendarHeaderPanel.startYear = startYear;
+	calendarHeaderPanel.endYear = endYear;
+
+	calendarHeaderPanel.className =
+		getGidsCalendarHeaderPanelClassNames(extraClasses);
+
+	if (onPanelMonthChange) {
+		calendarHeaderPanel.onPanelMonthChange = onPanelMonthChange;
+	}
+	if (onPanelYearChange) {
+		calendarHeaderPanel.onPanelYearChange = onPanelYearChange;
+	}
+
+	if (onNextChange) {
+		calendarHeaderPanel.onNextChange = onNextChange;
+	}
+	if (onPreviousChange) {
+		calendarHeaderPanel.onPreviousChange = onPreviousChange;
+	}
+
+	if (onToggleMonthPicker) {
+		calendarHeaderPanel.addEventListener(
+			'gidsCalendarHeaderPanelMonthToggle',
+			(event: Event) => {
+				onToggleMonthPicker(
+					(event as CustomEvent<GidsCalendarHeaderPanelToggleEventDetail>)
+						.detail,
+				);
+			},
+		);
+	}
+	if (onToggleYearPicker) {
+		calendarHeaderPanel.addEventListener(
+			'gidsCalendarHeaderPanelYearToggle',
+			(event: Event) => {
+				onToggleYearPicker(
+					(event as CustomEvent<GidsCalendarHeaderPanelToggleEventDetail>)
+						.detail,
+				);
+			},
+		);
+	}
+
+	return calendarHeaderPanel;
+};

package/src/components/GidsCalendarMonthList/GidsCalendarMonthList.ts

@@ -0,0 +1,56 @@
+import {
+	GidsCalendarMonthListWebProps,
+	GidsCalendarMonthListWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	GidsCalendarMonthListItemSelectEventDetail,
+	GidsMenuGroupType,
+} from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsCalendarMonthListClassNames } = GidsCalendarMonthListWebUtils;
+
+type GidsCalendarMonthListElement = HTMLElement & {
+	type?: GidsMenuGroupType;
+	noOptionsText?: string;
+	disabledIndices?: number[];
+	selectedMonthNumber?: number;
+	divider?: boolean;
+	onSelectionMonthChange?: (
+		detail: GidsCalendarMonthListItemSelectEventDetail,
+	) => void;
+};
+
+export interface GidsCalendarMonthListDomProps extends GidsCalendarMonthListWebProps {
+	extraClasses?: string;
+}
+
+export const GidsCalendarMonthListDom = ({
+	type = 'default',
+	noOptionsText,
+	onSelectionMonthChange,
+	disabledIndices = [],
+	divider = false,
+	selectedMonthNumber,
+	extraClasses,
+}: GidsCalendarMonthListDomProps): HTMLElement => {
+	const calendarMonthList = document.createElement(
+		'gids-calendar-month-list',
+	) as GidsCalendarMonthListElement;
+
+	calendarMonthList.type = type;
+	if (noOptionsText) {
+		calendarMonthList.noOptionsText = noOptionsText;
+	}
+	calendarMonthList.disabledIndices = disabledIndices;
+	calendarMonthList.divider = divider;
+	calendarMonthList.selectedMonthNumber = selectedMonthNumber;
+
+	calendarMonthList.className =
+		getGidsCalendarMonthListClassNames(extraClasses);
+
+	if (onSelectionMonthChange) {
+		calendarMonthList.onSelectionMonthChange = onSelectionMonthChange;
+	}
+
+	return calendarMonthList;
+};

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