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

package/src/components/GidsCalendar/GidsCalendar.ts

@@ -0,0 +1,72 @@
+import {
+	GidsCalendarWebProps,
+	GidsCalendarWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsCalendarClassNames } = GidsCalendarWebUtils;
+
+type GidsCalendarElement = HTMLElement & GidsCalendarWebProps;
+
+export interface GidsCalendarDomProps extends GidsCalendarWebProps {
+	extraClasses?: string;
+}
+
+export const GidsCalendarDom = ({
+	width = 'intrinsic',
+	activeMonthNumber,
+	activeYear,
+	panelActionsAppearance,
+	selectedDate,
+	dotVisibleDates = [],
+	endYear,
+	startYear,
+	monthPickerDisabled,
+	nextDisabled,
+	panelDisabled,
+	previousDisabled,
+	yearPickerDisabled,
+	onNextChange,
+	onPreviousChange,
+	onPanelMonthChange,
+	onPanelYearChange,
+	onSelectionCalendarCell,
+	extraClasses,
+}: GidsCalendarDomProps): HTMLElement => {
+	const calendar = document.createElement(
+		'gids-calendar',
+	) as GidsCalendarElement;
+
+	calendar.width = width;
+	calendar.activeMonthNumber = activeMonthNumber;
+	calendar.activeYear = activeYear;
+	calendar.panelActionsAppearance = panelActionsAppearance;
+	calendar.selectedDate = selectedDate;
+	calendar.dotVisibleDates = dotVisibleDates;
+	calendar.startYear = startYear;
+	calendar.endYear = endYear;
+	calendar.monthPickerDisabled = monthPickerDisabled;
+	calendar.yearPickerDisabled = yearPickerDisabled;
+	calendar.nextDisabled = nextDisabled;
+	calendar.panelDisabled = panelDisabled;
+	calendar.previousDisabled = previousDisabled;
+
+	calendar.className = getGidsCalendarClassNames({ width }, extraClasses);
+
+	if (onNextChange) {
+		calendar.onNextChange = onNextChange;
+	}
+	if (onPreviousChange) {
+		calendar.onPreviousChange = onPreviousChange;
+	}
+	if (onPanelMonthChange) {
+		calendar.onPanelMonthChange = onPanelMonthChange;
+	}
+	if (onPanelYearChange) {
+		calendar.onPanelYearChange = onPanelYearChange;
+	}
+	if (onSelectionCalendarCell) {
+		calendar.onSelectionCalendarCell = onSelectionCalendarCell;
+	}
+
+	return calendar;
+};

package/src/components/GidsCalendarCell/GidsCalendarCell.ts

@@ -0,0 +1,95 @@
+import {
+	GidsCalendarCellWebProps,
+	GidsCalendarCellWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	GidsCalendarCellSelectEventDetail,
+	GidsDotAppearance,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsDotDom } from '../GidsDot/GidsDot';
+
+const { getGidsCalendarCellClassNames } = GidsCalendarCellWebUtils;
+
+export interface GidsCalendarCellDomProps extends GidsCalendarCellWebProps {
+	onPressCalendarCell?: (
+		event: CustomEvent<GidsCalendarCellSelectEventDetail>,
+	) => void;
+	extraClasses?: string;
+}
+
+export const GidsCalendarCellDom = ({
+	id,
+	name,
+	label,
+	dot,
+	disabled = false,
+	selected,
+	today,
+	onPressCalendarCell,
+	extraClasses,
+	cellType = 'effective',
+}: GidsCalendarCellDomProps): HTMLButtonElement => {
+	const calendarCell = document.createElement('button');
+	calendarCell.type = 'button';
+	calendarCell.className = getGidsCalendarCellClassNames(
+		{ disabled, selected, today, cellType, dot },
+		extraClasses,
+	);
+	calendarCell.setAttribute('role', 'gridcell');
+	calendarCell.setAttribute('aria-selected', selected ? 'true' : 'false');
+	calendarCell.disabled = disabled;
+	if (id) {
+		calendarCell.setAttribute('id', id);
+	}
+	if (name) {
+		calendarCell.name = name;
+	}
+
+	if (label) {
+		const childrenLabel = document.createElement('span');
+		childrenLabel.textContent = label;
+		calendarCell.appendChild(childrenLabel);
+	}
+
+	if (dot) {
+		let dotAppearance: GidsDotAppearance = 'subtle';
+		if (selected && !disabled) {
+			dotAppearance = 'static-inverse';
+		}
+		calendarCell.appendChild(
+			GidsDotDom({
+				appearance: dotAppearance,
+				disabled,
+				size: 'xs',
+			}),
+		);
+	}
+
+	const hasPressableContent = !disabled && cellType === 'effective';
+
+	calendarCell.addEventListener('click', (event: MouseEvent) => {
+		if (event.defaultPrevented || disabled || !hasPressableContent) {
+			return;
+		}
+		const customEvent = new CustomEvent<GidsCalendarCellSelectEventDetail>(
+			'onPressCalendarCell',
+			{
+				bubbles: true,
+				composed: true,
+				detail: {
+					cellValue: label,
+					selected,
+					disabled,
+					dot,
+					today,
+				},
+			},
+		);
+
+		if (onPressCalendarCell) {
+			onPressCalendarCell(customEvent);
+		}
+	});
+
+	return calendarCell;
+};

package/src/components/GidsCalendarDayCell/GidsCalendarDayCell.ts

@@ -0,0 +1,29 @@
+import {
+	type GidsCalendarDayCellWebProps,
+	GidsCalendarDayCellWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsCalendarCellDom } from '../GidsCalendarCell/GidsCalendarCell';
+
+const { getGidsCalendarDayCellClassNames } = GidsCalendarDayCellWebUtils;
+
+export interface GidsCalendarDayCellDomProps extends GidsCalendarDayCellWebProps {
+	extraClasses?: string;
+}
+
+export const GidsCalendarDayCellDom = ({
+	label,
+	id,
+	extraClasses,
+}: GidsCalendarDayCellDomProps): HTMLButtonElement => {
+	return GidsCalendarCellDom({
+		id,
+		name: label,
+		label,
+		dot: false,
+		disabled: false,
+		selected: false,
+		today: false,
+		cellType: 'non-effective',
+		extraClasses: getGidsCalendarDayCellClassNames(extraClasses),
+	});
+};

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