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

package/dist/index.js

@@ -71,8 +71,39 @@ export * from './components/GidsAccordionItemHeader/GidsAccordionItemHeader.js';
 export * from './components/GidsAccordionItemContent/GidsAccordionItemContent.js';
 export * from './components/GidsAccordionItem/GidsAccordionItem.js';
 export * from './components/GidsAccordion/GidsAccordion.js';
+export * from './components/GidsTooltip/GidsTooltip.js';
+export * from './components/GidsPopover/GidsPopover.js';
+export * from './components/GidsEditButton/GidsEditButton.js';
+export * from './components/GidsListItem/GidsListItem.js';
+export * from './components/GidsMenu/GidsMenu.js';
+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';
 /**
  * Utilities
  */
 export * from './utils/domUtils.js';
+export * from './utils/childrenValidationUtils.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAC1E,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qDAAqD,CAAC;AACpE,cAAc,qDAAqD,CAAC;AACpE,cAAc,wEAAwE,CAAC;AACvF,cAAc,6DAA6D,CAAC;AAC5E,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qDAAqD,CAAC;AACpE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,yDAAyD,CAAC;AACxE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,sEAAsE,CAAC;AACrF,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uDAAuD,CAAC;AACtE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,uDAAuD,CAAC;AACtE,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,iEAAiE,CAAC;AAChF,cAAc,mEAAmE,CAAC;AAClF,cAAc,qDAAqD,CAAC;AACpE,cAAc,6CAA6C,CAAC;AAE5D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/childrenValidationUtils.d.ts

@@ -0,0 +1,9 @@
+import { DomChildren } from './domUtils';
+export interface TestDomChildrenValidity {
+    children?: DomChildren;
+    classNameToBeValidated?: string;
+    childrenNameToBeValidated?: string;
+    currentComponentName?: string;
+}
+export declare const testDomChildrenValidity: ({ children, classNameToBeValidated, childrenNameToBeValidated, currentComponentName, }: TestDomChildrenValidity) => void;
+//# sourceMappingURL=childrenValidationUtils.d.ts.map

package/dist/utils/childrenValidationUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"childrenValidationUtils.d.ts","sourceRoot":"","sources":["../../src/utils/childrenValidationUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,uBAAuB;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,GAAI,wFAKrC,uBAAuB,SAgCzB,CAAC"}

package/dist/utils/childrenValidationUtils.js

@@ -0,0 +1,27 @@
+export const testDomChildrenValidity = ({ children, classNameToBeValidated, childrenNameToBeValidated, currentComponentName, }) => {
+    if (children !== undefined && children !== null) {
+        // --- STRICTOR DOM TYPE VALIDATION BLOCK ---
+        // Normalize children to an array to handle both single items and collections safely
+        const childrenArray = Array.isArray(children) ? children : [children];
+        for (const child of childrenArray) {
+            // 1. Ensure the child is a real DOM node/element (ignore raw strings if they aren't allowed)
+            if (child instanceof HTMLElement) {
+                // Standard Check A: Using a custom class list or dataset identifier if GidsListItem sets one
+                const isGidsListItem = child.classList.contains(classNameToBeValidated ?? '') ||
+                    child.dataset.component === childrenNameToBeValidated;
+                // Standard Check B (Alternative): If GidsListItem returns a custom web component type instance
+                // const isGidsListItem = child.tagName.toLowerCase() === 'gids-list-item';
+                if (!isGidsListItem) {
+                    throw new Error(`DOM Validation Error: ${currentComponentName} only accepts ${childrenNameToBeValidated} nodes as children. ` +
+                        `Received an element with class layout: "${child.className}".`);
+                }
+            }
+            else {
+                // If a string or a non-element node was passed illegally
+                throw new Error(`DOM Validation Error: Invalid type passed to children. Expected ${childrenNameToBeValidated} DOM elements.`);
+            }
+        }
+        // --- END OF VALIDATION BLOCK ---
+    }
+};
+//# sourceMappingURL=childrenValidationUtils.js.map

package/dist/utils/childrenValidationUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"childrenValidationUtils.js","sourceRoot":"","sources":["../../src/utils/childrenValidationUtils.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACvC,QAAQ,EACR,sBAAsB,EACtB,yBAAyB,EACzB,oBAAoB,GACK,EAAE,EAAE;IAC7B,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QACjD,6CAA6C;QAC7C,oFAAoF;QACpF,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QAEtE,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;YACnC,6FAA6F;YAC7F,IAAI,KAAK,YAAY,WAAW,EAAE,CAAC;gBAClC,6FAA6F;gBAC7F,MAAM,cAAc,GACnB,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,EAAE,CAAC;oBACtD,KAAK,CAAC,OAAO,CAAC,SAAS,KAAK,yBAAyB,CAAC;gBAEvD,+FAA+F;gBAC/F,2EAA2E;gBAE3E,IAAI,CAAC,cAAc,EAAE,CAAC;oBACrB,MAAM,IAAI,KAAK,CACd,yBAAyB,oBAAoB,iBAAiB,yBAAyB,sBAAsB;wBAC5G,2CAA2C,KAAK,CAAC,SAAS,IAAI,CAC/D,CAAC;gBACH,CAAC;YACF,CAAC;iBAAM,CAAC;gBACP,yDAAyD;gBACzD,MAAM,IAAI,KAAK,CACd,mEAAmE,yBAAyB,gBAAgB,CAC5G,CAAC;YACH,CAAC;QACF,CAAC;QACD,kCAAkC;IACnC,CAAC;AACF,CAAC,CAAC"}

package/package.json

@@ -1,47 +1,47 @@
 {
-  "name": "@ganpatiinfo/gids-web-dom-reference",
-  "version": "7.2.0",
-  "private": false,
-  "description": "DOM for components reference implementations",
-  "homepage": "https://ganpatiinfosystem.vercel.app/",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "clean": "del-cli dist/*",
-    "build": "tsc",
-    "release:manually": "npm run build && npm publish --access public"
-  },
-  "author": {
-    "name": "Ganpatiinfo Design System",
-    "email": "ganpatiinfosysystem0@gmail.com",
-    "url": "https://ganpatiinfosystem.vercel.app/"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ganpatiinfosystem/ganpatiinfo-design-system",
-    "directory": "packages/private/web-dom-reference"
-  },
-  "dependencies": {
-    "@ganpatiinfo/gids-core-shared": "7.1.0",
-    "@ganpatiinfo/gids-web-shared": "7.1.0"
-  },
-  "peerDependencies": {
-    "@ganpatiinfo/gids-web-theme-interface": "4.0.1",
-    "@jest/globals": "^30.2.0",
-    "@types/jasmine": "^5.1.15",
-    "expect": "^30.2.0"
-  },
-  "peerDependenciesMeta": {
-    "@jest/globals": {
-      "optional": true
-    },
-    "expect": {
-      "optional": true
-    },
-    "@types/jasmine": {
-      "optional": true
-    }
-  }
+	"name": "@ganpatiinfo/gids-web-dom-reference",
+	"version": "9.0.0",
+	"private": false,
+	"description": "DOM for components reference implementations",
+	"homepage": "https://ganpatiinfo-design-system.onrender.com/",
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"clean": "del-cli dist/*",
+		"build": "tsc",
+		"release:manually": "npm run build && npm publish --access public"
+	},
+	"author": {
+		"name": "Ganpatiinfo Design System",
+		"email": "ganpatiinfosysystem0@gmail.com",
+		"url": "https://ganpatiinfo-design-system.onrender.com/"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ganpatiinfosystem/ganpatiinfo-design-system",
+		"directory": "packages/private/web-dom-reference"
+	},
+	"dependencies": {
+		"@ganpatiinfo/gids-core-shared": "9.0.0",
+		"@ganpatiinfo/gids-web-shared": "9.0.0"
+	},
+	"peerDependencies": {
+		"@ganpatiinfo/gids-web-theme-interface": "5.0.0",
+		"@jest/globals": "^30.2.0",
+		"@types/jasmine": "^5.1.15",
+		"expect": "^30.2.0"
+	},
+	"peerDependenciesMeta": {
+		"@jest/globals": {
+			"optional": true
+		},
+		"expect": {
+			"optional": true
+		},
+		"@types/jasmine": {
+			"optional": true
+		}
+	}
 }

package/src/components/GidsActivityGauge/GidsActivityGauge.ts

@@ -0,0 +1,48 @@
+import {
+	GidsActivityGaugeWebProps,
+	GidsActivityGaugeWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsActivityGaugeClassNames } = GidsActivityGaugeWebUtils;
+
+type GidsActivityGaugeBaseWebProps = GidsActivityGaugeWebProps;
+
+type GidsActivityGaugeElement = HTMLElement & GidsActivityGaugeBaseWebProps;
+
+export interface GidsActivityGaugeDomProps extends GidsActivityGaugeBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsActivityGaugeDom = ({
+	label,
+	chartData = [],
+	legend = 'none',
+	breakpoint = 'desktop',
+	chartLoading = false,
+	chartLoaderSize,
+	chartLoadingSupportingText,
+	chartLoadingTitle,
+	size = 'xxs',
+	extraClasses,
+}: GidsActivityGaugeDomProps): HTMLElement => {
+	const activityGauge = document.createElement(
+		'gids-activity-gauge',
+	) as GidsActivityGaugeElement;
+
+	activityGauge.breakpoint = breakpoint;
+	activityGauge.size = size;
+	activityGauge.legend = legend;
+	activityGauge.label = label;
+	activityGauge.chartData = chartData;
+	activityGauge.chartLoading = chartLoading;
+	activityGauge.chartLoaderSize = chartLoaderSize;
+	activityGauge.chartLoadingTitle = chartLoadingTitle;
+	activityGauge.chartLoadingSupportingText = chartLoadingSupportingText;
+
+	activityGauge.className = getGidsActivityGaugeClassNames(
+		{ breakpoint },
+		extraClasses,
+	);
+
+	return activityGauge;
+};

package/src/components/GidsBarChart/GidsBarChart.ts

@@ -0,0 +1,47 @@
+import {
+	GidsBarChartWebProps,
+	GidsBarChartWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsBarChartClassNames } = GidsBarChartWebUtils;
+
+type GidsBarChartElement = HTMLElement & GidsBarChartWebProps;
+
+export interface GidsBarChartDomProps extends GidsBarChartWebProps {
+	extraClasses?: string;
+}
+
+export const GidsBarChartDom = ({
+	breakpoint = 'desktop',
+	legend = 'none',
+	chartData = [],
+	yAxisVisible = false,
+	xAxisLabel,
+	yAxisLabel,
+	dataPoints,
+	chartLoading,
+	chartLoaderSize,
+	chartLoadingTitle,
+	chartLoadingSupportingText,
+	extraClasses,
+}: GidsBarChartDomProps): HTMLElement => {
+	const barChart = document.createElement(
+		'gids-bar-chart',
+	) as GidsBarChartElement;
+
+	barChart.breakpoint = breakpoint;
+	barChart.legend = legend;
+	barChart.chartData = chartData;
+	barChart.yAxisVisible = yAxisVisible;
+	barChart.xAxisLabel = xAxisLabel;
+	barChart.yAxisLabel = yAxisLabel;
+	barChart.dataPoints = dataPoints;
+	barChart.chartLoading = chartLoading;
+	barChart.chartLoaderSize = chartLoaderSize;
+	barChart.chartLoadingTitle = chartLoadingTitle;
+	barChart.chartLoadingSupportingText = chartLoadingSupportingText;
+
+	barChart.className = getGidsBarChartClassNames({ breakpoint }, extraClasses);
+
+	return barChart;
+};

package/src/components/GidsButton/GidsButton.ts

@@ -25,6 +25,7 @@ export const GidsButtonDom = <
 	size,
 	disabled,
 	destructive,
+	positive,
 	loading,
 	width,
 	children,
@@ -41,7 +42,7 @@ export const GidsButtonDom = <
 	) as ButtonElement extends 'button' ? HTMLButtonElement : HTMLAnchorElement;
 
 	button.className = getGidsButtonClassNames(
-		{ appearance, size, width, destructive, loading },
+		{ appearance, size, width, destructive, loading, positive },
 		!children && nonEmpty(leadingIcon) && !nonEmpty(trailingIcon),
 	);
 

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