@ganpatiinfo/gids-web-dom-reference 15.0.0 → 16.0.0

package/dist/index.js

@@ -1,6 +1,9 @@
 /**
  * Referenced to DOM components
  */
+export * from './components/_GidsCarouselControl/GidsCarouselControl.js';
+export * from './components/_GidsCarouselPagination/GidsCarouselPagination.js';
+export * from './components/_GidsCarouselPaginationItem/GidsCarouselPaginationItem.js';
 export * from './components/_GidsCheckboxControl/GidsCheckboxControl.js';
 export * from './components/_GidsDialogControl/GidsDialogControl.js';
 export * from './components/_GidsNotificationContainer/GidsNotificationContainer.js';
@@ -26,6 +29,7 @@ export * from './components/GidsBasicTableBody/GidsBasicTableBody.js';
 export * from './components/GidsBasicTableHead/GidsBasicTableHead.js';
 export * from './components/GidsBasicTableHeader/GidsBasicTableHeader.js';
 export * from './components/GidsBasicTableRow/GidsBasicTableRow.js';
+export * from './components/GidsBentoCard/GidsBentoCard.js';
 export * from './components/GidsBox/GidsBox.js';
 export * from './components/GidsBreadcrumb/GidsBreadcrumb.js';
 export * from './components/GidsBreadcrumbItem/GidsBreadcrumbItem.js';
@@ -40,6 +44,7 @@ export * from './components/GidsCalendarHeaderPanel/GidsCalendarHeaderPanel.js';
 export * from './components/GidsCalendarMonthList/GidsCalendarMonthList.js';
 export * from './components/GidsCalendarYearList/GidsCalendarYearList.js';
 export * from './components/GidsCard/GidsCard.js';
+export * from './components/GidsCarousel/GidsCarousel.js';
 export * from './components/GidsChart/GidsChart.js';
 export * from './components/GidsChartLegend/GidsChartLegend.js';
 export * from './components/GidsChartLegendItem/GidsChartLegendItem.js';
@@ -63,6 +68,8 @@ export * from './components/GidsDropdownItem/GidsDropdownItem.js';
 export * from './components/GidsDropdownMenu/GidsDropdownMenu.js';
 export * from './components/GidsDropdownMenuGroup/GidsDropdownMenuGroup.js';
 export * from './components/GidsDropdownPicker/GidsDropdownPicker.js';
+export * from './components/GidsEcosystemCard/GidsEcosystemCard.js';
+export * from './components/GidsEcosystemIcon/GidsEcosystemIcon.js';
 export * from './components/GidsEditButton/GidsEditButton.js';
 export * from './components/GidsExpansion/GidsExpansion.js';
 export * from './components/GidsExpansionBodyList/GidsExpansionBodyList.js';
@@ -71,10 +78,12 @@ export * from './components/GidsExpansionGroup/GidsExpansionGroup.js';
 export * from './components/GidsFeedbackBlock/GidsFeedbackBlock.js';
 export * from './components/GidsField/GidsField.js';
 export * from './components/GidsFilter/GidsFilter.js';
+export * from './components/GidsFlyoutPanel/GidsFlyoutPanel.js';
 export * from './components/GidsHeaderNavigation/GidsHeaderNavigation.js';
 export * from './components/GidsHeaderNavigationItem/GidsHeaderNavigationItem.js';
 export * from './components/GidsHeading/GidsHeading.js';
 export * from './components/GidsIcon/GidsIcon.js';
+export * from './components/GidsIconMarker/GidsIconMarker.js';
 export * from './components/GidsInput/GidsInput.js';
 export * from './components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.js';
 export * from './components/GidsInputTag/GidsInputTag.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "15.0.0",
+	"version": "16.0.0",
 	"private": false,
 	"description": "DOM for components reference implementations",
 	"homepage": "https://ganpatiinfo-design-system.onrender.com/",
@@ -24,8 +24,8 @@
 		"directory": "packages/private/web-dom-reference"
 	},
 	"dependencies": {
-		"@ganpatiinfo/gids-core-shared": "15.0.0",
-		"@ganpatiinfo/gids-web-shared": "13.1.1"
+		"@ganpatiinfo/gids-core-shared": "16.0.0",
+		"@ganpatiinfo/gids-web-shared": "14.0.0"
 	},
 	"peerDependencies": {
 		"@ganpatiinfo/gids-web-theme-interface": "7.0.0",

package/src/components/GidsBentoCard/GidsBentoCard.ts

@@ -0,0 +1,80 @@
+import {
+	GidsBentoCardWebProps,
+	GidsBentoCardWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	assignToSlot,
+	DomChildren,
+} from '../../utils/domUtils';
+
+const { getGidsBentoCardClassNames } = GidsBentoCardWebUtils;
+
+export type GidsBentoCardBaseWebProps = GidsBentoCardWebProps<
+	DomChildren,
+	DomChildren
+>;
+
+type GidsBentoCardElement = HTMLElement & GidsBentoCardBaseWebProps;
+
+export interface GidsBentoCardDomProps extends GidsBentoCardBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsBentoCardDom = ({
+	heading,
+	label,
+	supportingText,
+	description,
+	icon,
+	children,
+	accessory,
+	appearance = 'default',
+	iconDirection = 'column',
+	bgGradient,
+	primaryTextColor,
+	secondaryTextColor,
+	tertiaryTextColor,
+	extraClasses,
+}: GidsBentoCardDomProps): HTMLElement => {
+	const bentoCard = document.createElement(
+		'gids-bento-card',
+	) as GidsBentoCardElement;
+
+	bentoCard.heading = heading;
+	if (label) {
+		bentoCard.label = label;
+	}
+	if (supportingText) {
+		bentoCard.supportingText = supportingText;
+	}
+	if (description) {
+		bentoCard.description = description;
+	}
+
+	bentoCard.appearance = appearance;
+	bentoCard.bgGradient = bgGradient;
+	bentoCard.primaryTextColor = primaryTextColor;
+	bentoCard.secondaryTextColor = secondaryTextColor;
+	bentoCard.tertiaryTextColor = tertiaryTextColor;
+	bentoCard.iconDirection = iconDirection;
+
+	bentoCard.className = getGidsBentoCardClassNames(
+		{ appearance },
+		extraClasses,
+	);
+
+	if (children) {
+		appendAsChildren(bentoCard, children);
+	}
+
+	if (icon) {
+		assignToSlot(bentoCard, 'bentoCardIcon', icon as HTMLElement);
+	}
+
+	if (accessory) {
+		assignToSlot(bentoCard, 'bentoCardAccessory', accessory as HTMLElement);
+	}
+
+	return bentoCard;
+};

package/src/components/GidsCarousel/GidsCarousel.ts

@@ -0,0 +1,54 @@
+import {
+	GidsCarouselWebProps,
+	GidsCarouselWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsCarouselClassNames } = GidsCarouselWebUtils;
+
+export type GidsCarouselBaseWebProps = GidsCarouselWebProps;
+
+type GidsCarouselElement = HTMLElement & GidsCarouselBaseWebProps;
+
+export interface GidsCarouselDomProps extends GidsCarouselBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsCarouselDom = ({
+	slides = [],
+	labelTitle,
+	autoplay = false,
+	autoplayInterval = 5000,
+	loop = true,
+	showControls = false,
+	showPagination = false,
+	pauseOnHover = true,
+	extraClasses,
+}: GidsCarouselDomProps): HTMLElement => {
+	const carousel = document.createElement(
+		'gids-carousel',
+	) as GidsCarouselElement;
+
+	if (labelTitle) {
+		carousel.setAttribute('title', labelTitle);
+	}
+
+	carousel.labelTitle = labelTitle;
+
+	carousel.slides = slides;
+
+	carousel.autoplay = autoplay;
+
+	carousel.autoplayInterval = autoplayInterval;
+
+	carousel.loop = loop;
+
+	carousel.showControls = showControls;
+
+	carousel.showPagination = showPagination;
+
+	carousel.pauseOnHover = pauseOnHover;
+
+	carousel.className = getGidsCarouselClassNames(extraClasses);
+
+	return carousel;
+};

package/src/components/GidsEcosystemCard/GidsEcosystemCard.ts

@@ -0,0 +1,68 @@
+import {
+	GidsEcosystemCardWebUtils,
+	GidsEcosystemCardWebProps,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsEcosystemIconDom } from '../GidsEcosystemIcon/GidsEcosystemIcon';
+
+const { getGidsEcosystemCardClassNames } = GidsEcosystemCardWebUtils;
+
+type GidsEcosystemCardBaseWebProps = GidsEcosystemCardWebProps<
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsEcosystemCardDomProps extends GidsEcosystemCardBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsEcosystemCardDom = ({
+	iconName,
+	size = 'md',
+	iconAppearance = 'filled',
+	ecosystemIconColor,
+	label,
+	cardBackgroundColor,
+	labelColor,
+	extraClasses,
+}: GidsEcosystemCardDomProps): HTMLDivElement => {
+	const ecosystemCard = document.createElement('div');
+	ecosystemCard.className = getGidsEcosystemCardClassNames(extraClasses);
+
+	if (cardBackgroundColor && cardBackgroundColor !== '') {
+		ecosystemCard.style.setProperty(
+			'--gidsEcosystemCardBg-color',
+			`${cardBackgroundColor}`,
+		);
+	}
+	if (labelColor && labelColor !== '') {
+		ecosystemCard.style.setProperty(
+			'--gidsEcosystemCardLabel-color',
+			`${labelColor}`,
+		);
+	}
+
+	if (iconName) {
+		ecosystemCard.appendChild(
+			GidsEcosystemIconDom({
+				iconName,
+				iconAppearance,
+				size,
+				appearance: 'subtle',
+				ecosystemIconColor,
+			}),
+		);
+	}
+
+	if (label && label !== '') {
+		const labelEl = document.createElement('span');
+		labelEl.textContent = label;
+
+		ecosystemCard.appendChild(labelEl);
+	}
+
+	return ecosystemCard;
+};

package/src/components/GidsEcosystemIcon/GidsEcosystemIcon.ts

@@ -0,0 +1,63 @@
+import {
+	GidsEcosystemIconWebProps,
+	GidsEcosystemIconWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsIconDom } from '../GidsIcon/GidsIcon';
+
+const { getGidsEcosystemIconClassNames } = GidsEcosystemIconWebUtils;
+
+type GidsEcosystemIconBaseWebProps = GidsEcosystemIconWebProps<
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsEcosystemIconDomProps extends GidsEcosystemIconBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsEcosystemIconDom = ({
+	iconName,
+	appearance = 'default',
+	size = 'md',
+	iconAppearance = 'filled',
+	ecosystemColor,
+	ecosystemIconColor,
+	extraClasses,
+}: GidsEcosystemIconDomProps): HTMLDivElement => {
+	const ecosystemIcon = document.createElement('div');
+	ecosystemIcon.className = getGidsEcosystemIconClassNames(
+		{ appearance },
+		extraClasses,
+	);
+	ecosystemIcon.setAttribute('data-appearance', appearance);
+	if (ecosystemColor && appearance === 'custom') {
+		ecosystemIcon.style.setProperty(
+			'--gidsEcosystemIconEcosystem-color',
+			`${ecosystemColor}`,
+		);
+	}
+
+	if (ecosystemIconColor && appearance === 'custom') {
+		ecosystemIcon.style.setProperty(
+			'--gidsEcosystemIcon-color',
+			`${ecosystemIconColor}`,
+		);
+	}
+
+	if (iconName && iconName.toString() !== '') {
+		ecosystemIcon.appendChild(
+			GidsIconDom({
+				name: iconName,
+				appearance: iconAppearance,
+				size: size,
+				alt: '',
+			}),
+		);
+	}
+
+	return ecosystemIcon;
+};

package/src/components/GidsFlyoutPanel/GidsFlyoutPanel.ts

@@ -0,0 +1,34 @@
+import {
+	GidsFlyoutPanelWebProps,
+	GidsFlyoutPanelWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const { getGidsFlyoutPanelClassNames } = GidsFlyoutPanelWebUtils;
+
+type GidsFlyoutPanelBaseWebProps = GidsFlyoutPanelWebProps<DomChildren>;
+
+export interface GidsFlyoutPanelDomProps extends GidsFlyoutPanelBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsFlyoutPanelDom = ({
+	placement,
+	htmlFor,
+	children,
+	extraClasses,
+}: GidsFlyoutPanelDomProps): HTMLElement => {
+	const flyoutPanel = document.createElement('gids-flyout-panel');
+	flyoutPanel.className = getGidsFlyoutPanelClassNames(extraClasses);
+
+	if (placement !== undefined) {
+		flyoutPanel.setAttribute('placement', placement);
+	}
+	if (htmlFor !== undefined) {
+		flyoutPanel.setAttribute('for', htmlFor);
+	}
+
+	appendAsChildren(flyoutPanel, children);
+
+	return flyoutPanel;
+};

package/src/components/GidsIconMarker/GidsIconMarker.ts

@@ -0,0 +1,38 @@
+import {
+	GidsIconMarkerWebProps,
+	GidsIconMarkerWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const { getGidsIconMarkerClassNames } = GidsIconMarkerWebUtils;
+
+type GidsIconMarkerBaseWebProps = GidsIconMarkerWebProps<DomChildren>;
+
+export interface GidsIconMarkerDomProps extends GidsIconMarkerBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsIconMarkerDom = ({
+	children,
+	appearance = 'default',
+	customColor,
+	extraClasses,
+}: GidsIconMarkerDomProps): HTMLDivElement => {
+	const iconMarker = document.createElement('div');
+	iconMarker.className = getGidsIconMarkerClassNames(
+		{ appearance },
+		extraClasses,
+	);
+
+	iconMarker.setAttribute('data-appearance', appearance);
+
+	if (customColor && customColor !== '' && appearance === 'custom') {
+		iconMarker.style.setProperty('--gidsIconMarker-color', `${customColor}`);
+	}
+
+	if (children) {
+		appendAsChildren(iconMarker, children);
+	}
+
+	return iconMarker;
+};

package/src/components/_GidsCarouselControl/GidsCarouselControl.ts

@@ -0,0 +1,115 @@
+import {
+	GidsCarouselControlWebProps,
+	GidsCarouselControlWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import { GidsIconDom } from '../GidsIcon/GidsIcon';
+
+const {
+	getGidsCarouselControlClassNames,
+	getGidsCarouselControlBtnClassNames,
+} = GidsCarouselControlWebUtils;
+
+export type GidsCarouselControlBaseWebProps = GidsCarouselControlWebProps<
+	Event,
+	DomChildren
+>;
+
+export interface GidsCarouselControlDomProps extends GidsCarouselControlBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsCarouselControlDom = ({
+	leftControlDisabled,
+	rightControlDisabled,
+	leftControlIcon,
+	rightControlIcon,
+	size = 'md',
+	onClick,
+	extraClasses,
+}: GidsCarouselControlDomProps): HTMLDivElement => {
+	const carouselControl = document.createElement('div');
+	carouselControl.className = getGidsCarouselControlClassNames(extraClasses);
+
+	if (leftControlIcon) {
+		const leftControlBtn = document.createElement('button');
+		leftControlBtn.type = 'button';
+		leftControlBtn.setAttribute('aria-label', 'Left control');
+		leftControlBtn.className = leftControlDisabled
+			? `${getGidsCarouselControlBtnClassNames({ size })} gids-carousel-control__disabled`
+			: `${getGidsCarouselControlBtnClassNames({ size })}`;
+		leftControlBtn.disabled = Boolean(leftControlDisabled);
+
+		leftControlBtn.addEventListener('click', (event: Event) => {
+			if (onClick) {
+				onClick({
+					originalEvent: event,
+					controlType: 'left',
+				});
+			}
+		});
+
+		leftControlBtn.setAttribute('type', 'button');
+		if (leftControlDisabled) {
+			leftControlBtn.setAttribute('disabled', 'true');
+		} else {
+			leftControlBtn.removeAttribute('disabled');
+		}
+
+		if (leftControlIcon) {
+			appendAsChildren(leftControlBtn, leftControlIcon);
+		} else {
+			leftControlBtn.appendChild(
+				GidsIconDom({
+					name: 'arrow-left',
+					size: size !== 'xl' ? size : 'lg',
+					appearance: 'regular',
+				}),
+			);
+		}
+
+		carouselControl.appendChild(leftControlBtn);
+	}
+
+	if (rightControlIcon) {
+		const rightControlBtn = document.createElement('button');
+		rightControlBtn.type = 'button';
+		rightControlBtn.setAttribute('aria-label', 'Right control');
+		rightControlBtn.className = rightControlDisabled
+			? `${getGidsCarouselControlBtnClassNames({ size })} gids-carousel-control__disabled`
+			: `${getGidsCarouselControlBtnClassNames({ size })}`;
+		rightControlBtn.disabled = Boolean(rightControlBtn);
+
+		rightControlBtn.addEventListener('click', (event: Event) => {
+			if (onClick) {
+				onClick({
+					originalEvent: event,
+					controlType: 'right',
+				});
+			}
+		});
+
+		rightControlBtn.setAttribute('type', 'button');
+		if (rightControlDisabled) {
+			rightControlBtn.setAttribute('disabled', 'true');
+		} else {
+			rightControlBtn.removeAttribute('disabled');
+		}
+
+		if (rightControlIcon) {
+			appendAsChildren(rightControlBtn, rightControlIcon);
+		} else {
+			rightControlBtn.appendChild(
+				GidsIconDom({
+					name: 'arrow-left',
+					size: size !== 'xl' ? size : 'lg',
+					appearance: 'regular',
+				}),
+			);
+		}
+
+		carouselControl.appendChild(rightControlBtn);
+	}
+
+	return carouselControl;
+};

package/src/components/_GidsCarouselPagination/GidsCarouselPagination.ts

@@ -0,0 +1,59 @@
+import {
+	GidsCarouselPaginationWebProps,
+	GidsCarouselPaginationWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsCarouselPaginationItemDom } from '../_GidsCarouselPaginationItem/GidsCarouselPaginationItem';
+import { GidsCarouselPaginationItemEvent } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsCarouselPaginationClassNames } = GidsCarouselPaginationWebUtils;
+
+export type GidsCarouselPaginationBaseWebProps =
+	GidsCarouselPaginationWebProps<Event>;
+
+export interface GidsCarouselPaginationDomProps extends GidsCarouselPaginationBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsCarouselPaginationDom = ({
+	numberOfItems = 1,
+	currentIndex,
+	size = 'md',
+	onClickPagination,
+	extraClasses,
+}: GidsCarouselPaginationDomProps): HTMLDivElement => {
+	const carouselPagination = document.createElement('div');
+	carouselPagination.className =
+		getGidsCarouselPaginationClassNames(extraClasses);
+
+	carouselPagination.setAttribute('number-of-items', `${numberOfItems}`);
+	carouselPagination.setAttribute('current-index', `${currentIndex}`);
+
+	Array.from({ length: numberOfItems }, (_, indexI) => {
+		const itemId = `carousel-pagination-item-${indexI + 1}`;
+		const isActive = indexI === currentIndex;
+
+		carouselPagination.appendChild(
+			GidsCarouselPaginationItemDom({
+				id: itemId,
+				index: indexI,
+				active: isActive,
+				size,
+				onClickPaginationItem: (
+					event: GidsCarouselPaginationItemEvent<Event>,
+				) => {
+					if (onClickPagination) {
+						onClickPagination({
+							originalEvent: event?.originalEvent,
+							id: itemId,
+							index: indexI,
+							active: isActive,
+							currentIndex,
+						});
+					}
+				},
+			}),
+		);
+	});
+
+	return carouselPagination;
+};

package/src/components/_GidsCarouselPaginationItem/GidsCarouselPaginationItem.ts

@@ -0,0 +1,57 @@
+import {
+	GidsCarouselPaginationItemWebProps,
+	GidsCarouselPaginationItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsCarouselPaginationItemClassNames } =
+	GidsCarouselPaginationItemWebUtils;
+
+export type GidsCarouselPaginationItemBaseWebProps =
+	GidsCarouselPaginationItemWebProps<Event>;
+
+export interface GidsCarouselPaginationItemDomProps extends GidsCarouselPaginationItemBaseWebProps {
+	extraClasses?: string;
+}
+
+export const GidsCarouselPaginationItemDom = ({
+	id = 'carousel-pagination-item-1',
+	active = false,
+	index = 0,
+	size = 'sm',
+	onClickPaginationItem,
+	extraClasses,
+}: GidsCarouselPaginationItemDomProps): HTMLButtonElement => {
+	const carouselPaginationItem = document.createElement('button');
+	carouselPaginationItem.className = getGidsCarouselPaginationItemClassNames(
+		{
+			active,
+			size,
+		},
+		extraClasses,
+	);
+
+	carouselPaginationItem.setAttribute('id', id);
+	carouselPaginationItem.setAttribute('type', 'button');
+	carouselPaginationItem.setAttribute('role', 'tab');
+	carouselPaginationItem.setAttribute('aria-label', `Go to slide ${index + 1}`);
+	if (active) {
+		carouselPaginationItem.setAttribute('aria-selected', 'true');
+	} else {
+		carouselPaginationItem.removeAttribute('aria-selected');
+	}
+	carouselPaginationItem.type = 'button';
+	carouselPaginationItem.role = 'tab';
+
+	carouselPaginationItem.addEventListener('click', (event: Event) => {
+		if (onClickPaginationItem) {
+			onClickPaginationItem({
+				originalEvent: event,
+				id,
+				index,
+				active,
+			});
+		}
+	});
+
+	return carouselPaginationItem;
+};