@ganpatiinfo/gids-web-dom-reference 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ganpatiinfo/gids-web-dom-reference
 
+## 3.1.0
+
+### Minor Changes
+
+- - Segmented Control and Segmented Tab Item components are ready
+
+### Patch Changes
+
+- Updated dependencies
+  - @ganpatiinfo/gids-web-theme-interface@3.1.0
+  - @ganpatiinfo/gids-core-shared@3.1.0
+  - @ganpatiinfo/gids-web-shared@3.1.0
+
 ## 3.0.0
 
 ### Major Changes

package/dist/components/GidsSectionNotice/GidsSectionNotice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GidsSectionNotice.d.ts","sourceRoot":"","sources":["../../../src/components/GidsSectionNotice/GidsSectionNotice.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,4BAA4B,EACjC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAEN,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,yBAChB,SAAQ,4BAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,oBAAoB,GAAI,+EAOlC,yBAAyB,KAAG,cA0E9B,CAAC"}
+{"version":3,"file":"GidsSectionNotice.d.ts","sourceRoot":"","sources":["../../../src/components/GidsSectionNotice/GidsSectionNotice.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,yBACf,SAAQ,4BAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,oBAAoB,GAAI,+EAOlC,yBAAyB,KAAG,cA0E9B,CAAC"}

package/dist/components/GidsSectionNotice/GidsSectionNotice.js.map

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

package/dist/components/GidsSegmentedControl/GidsSegmentedControl.d.ts

@@ -0,0 +1,9 @@
+import { GidsSegmentedTabItemPressedReturnedProps, type GidsSegmentedControlCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type ClassValue } from '@ganpatiinfo/gids-web-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+export interface GidsSegmentedControlDomProps extends GidsSegmentedControlCommonProps<DomNodeOrString, string> {
+    onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
+    className?: ClassValue;
+}
+export declare const GidsSegmentedControlDom: ({ width, tabItems, onPress, className, }: GidsSegmentedControlDomProps) => HTMLDivElement;
+//# sourceMappingURL=GidsSegmentedControl.d.ts.map

package/dist/components/GidsSegmentedControl/GidsSegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/GidsSegmentedControl/GidsSegmentedControl.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wCAAwC,EACxC,KAAK,+BAA+B,EACrC,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,KAAK,UAAU,EAEhB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAK/D,MAAM,WAAW,4BAA6B,SAAQ,+BAA+B,CACnF,eAAe,EACf,MAAM,CACP;IACC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,wCAAwC,KAAK,IAAI,CAAC;IACpE,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB,GAAI,0CAKrC,4BAA4B,KAAG,cAgDjC,CAAC"}

package/dist/components/GidsSegmentedControl/GidsSegmentedControl.js

@@ -0,0 +1,45 @@
+import { GidsSegmentedControlWebUtils, } from '@ganpatiinfo/gids-web-shared';
+import { GidsSegmentedTabItemDom } from '../GidsSegmentedTabItem/GidsSegmentedTabItem.js';
+const { getGidsSegmentedControlClassNames } = GidsSegmentedControlWebUtils;
+export const GidsSegmentedControlDom = ({ width = 'intrinsic', tabItems, onPress, className, }) => {
+    const segmentedControl = document.createElement('div');
+    segmentedControl.className = getGidsSegmentedControlClassNames({ width }, className);
+    if (tabItems && tabItems.length > 0) {
+        // This function renders (or re-renders) the tabs
+        const renderTabs = (selectedIndex) => {
+            // Clear existing tabs
+            segmentedControl.innerHTML = '';
+            if (tabItems && tabItems.length > 0) {
+                tabItems.forEach((tabItem, index) => {
+                    // Determine if this tab is selected
+                    // Priority: 1. The newly clicked index, 2. The initial tabItem.selected state
+                    let isSelected = false;
+                    if (selectedIndex !== undefined && selectedIndex !== null) {
+                        isSelected = index === selectedIndex;
+                    }
+                    else {
+                        isSelected = index === 0 ? true : false;
+                    }
+                    const tabElement = GidsSegmentedTabItemDom({
+                        ...tabItem,
+                        index,
+                        selected: isSelected,
+                        width: width,
+                        onPress: (returnedProps) => {
+                            // Re-render all tabs with the new selection
+                            renderTabs(returnedProps.selectedIndex);
+                            // Notify external listeners
+                            if (onPress)
+                                onPress(returnedProps);
+                        },
+                    });
+                    segmentedControl.appendChild(tabElement);
+                });
+            }
+        };
+        // Initial render
+        renderTabs();
+    }
+    return segmentedControl;
+};
+//# sourceMappingURL=GidsSegmentedControl.js.map

package/dist/components/GidsSegmentedControl/GidsSegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSegmentedControl.js","sourceRoot":"","sources":["../../../src/components/GidsSegmentedControl/GidsSegmentedControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,4BAA4B,GAC7B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AAE1F,MAAM,EAAE,iCAAiC,EAAE,GAAG,4BAA4B,CAAC;AAU3E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,KAAK,GAAG,WAAW,EACnB,QAAQ,EACR,OAAO,EACP,SAAS,GACoB,EAAkB,EAAE;IACjD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvD,gBAAgB,CAAC,SAAS,GAAG,iCAAiC,CAC5D,EAAE,KAAK,EAAE,EACT,SAAS,CACV,CAAC;IAEF,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACpC,iDAAiD;QACjD,MAAM,UAAU,GAAG,CAAC,aAAsB,EAAE,EAAE;YAC5C,sBAAsB;YACtB,gBAAgB,CAAC,SAAS,GAAG,EAAE,CAAC;YAEhC,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACpC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;oBAClC,oCAAoC;oBACpC,8EAA8E;oBAE9E,IAAI,UAAU,GAAG,KAAK,CAAC;oBACvB,IAAI,aAAa,KAAK,SAAS,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;wBAC1D,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC;oBACvC,CAAC;yBAAM,CAAC;wBACN,UAAU,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;oBAC1C,CAAC;oBAED,MAAM,UAAU,GAAG,uBAAuB,CAAC;wBACzC,GAAG,OAAO;wBACV,KAAK;wBACL,QAAQ,EAAE,UAAU;wBACpB,KAAK,EAAE,KAAK;wBACZ,OAAO,EAAE,CAAC,aAAa,EAAE,EAAE;4BACzB,4CAA4C;4BAC5C,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;4BACxC,4BAA4B;4BAC5B,IAAI,OAAO;gCAAE,OAAO,CAAC,aAAa,CAAC,CAAC;wBACtC,CAAC;qBACF,CAAC,CAAC;oBAEH,gBAAgB,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;gBAC3C,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,iBAAiB;QACjB,UAAU,EAAE,CAAC;IACf,CAAC;IAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC"}

package/dist/components/GidsSegmentedTabItem/GidsSegmentedTabItem.d.ts

@@ -0,0 +1,9 @@
+import { type GidsSegmentedTabItemPressedReturnedProps, type GidsSegmentedTabItemCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type ClassValue } from '@ganpatiinfo/gids-web-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+export interface GidsSegmentedTabItemDomProps extends GidsSegmentedTabItemCommonProps<DomNodeOrString, string> {
+    onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
+    className?: ClassValue;
+}
+export declare const GidsSegmentedTabItemDom: ({ index, label, selected, badge, badgeAccessibleText, badgeAppearance, onPress, className, width, }: GidsSegmentedTabItemDomProps) => HTMLButtonElement;
+//# sourceMappingURL=GidsSegmentedTabItem.d.ts.map

package/dist/components/GidsSegmentedTabItem/GidsSegmentedTabItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSegmentedTabItem.d.ts","sourceRoot":"","sources":["../../../src/components/GidsSegmentedTabItem/GidsSegmentedTabItem.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wCAAwC,EAC7C,KAAK,+BAA+B,EACrC,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,KAAK,UAAU,EAEhB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAK/D,MAAM,WAAW,4BAA6B,SAAQ,+BAA+B,CACnF,eAAe,EACf,MAAM,CACP;IACC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,wCAAwC,KAAK,IAAI,CAAC;IACpE,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB,GAAI,qGAUrC,4BAA4B,KAAG,iBA0CjC,CAAC"}

package/dist/components/GidsSegmentedTabItem/GidsSegmentedTabItem.js

@@ -0,0 +1,40 @@
+import { GidsSegmentedTabItemWebUtils, } from '@ganpatiinfo/gids-web-shared';
+import clsx from 'clsx';
+import { GidsBadgeDom } from '../GidsBadge/GidsBadge.js';
+const { getGidsSegmentedTabItemClassNames } = GidsSegmentedTabItemWebUtils;
+export const GidsSegmentedTabItemDom = ({ index, label, selected = false, badge = false, badgeAccessibleText, badgeAppearance = 'information', onPress, className, width = 'intrinsic', }) => {
+    const segmentedTabItem = document.createElement('button');
+    segmentedTabItem.className = getGidsSegmentedTabItemClassNames({ selected, width }, className);
+    segmentedTabItem.setAttribute('data-gids-segmented-item', 'true');
+    segmentedTabItem.setAttribute('aria-selected', selected.toString());
+    segmentedTabItem.addEventListener('click', () => {
+        if (onPress) {
+            onPress({
+                selectedIndex: index,
+            });
+        }
+    });
+    if (label && label !== '') {
+        if (typeof label === 'string') {
+            const labelElement = document.createElement('label');
+            labelElement.className = clsx('gids-segmented-tab-item__label', {
+                'gids-segmented-tab-item__selected-label': selected,
+            });
+            labelElement.textContent = label;
+            segmentedTabItem.appendChild(labelElement);
+        }
+        else {
+            segmentedTabItem.appendChild(label);
+        }
+    }
+    if (badge) {
+        segmentedTabItem.appendChild(GidsBadgeDom({
+            accessibleText: badgeAccessibleText,
+            appearance: badgeAppearance,
+            outline: false,
+            type: 'dot',
+        }));
+    }
+    return segmentedTabItem;
+};
+//# sourceMappingURL=GidsSegmentedTabItem.js.map

package/dist/components/GidsSegmentedTabItem/GidsSegmentedTabItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSegmentedTabItem.js","sourceRoot":"","sources":["../../../src/components/GidsSegmentedTabItem/GidsSegmentedTabItem.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,4BAA4B,GAC7B,MAAM,8BAA8B,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,MAAM,EAAE,iCAAiC,EAAE,GAAG,4BAA4B,CAAC;AAU3E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,KAAK,EACL,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,mBAAmB,EACnB,eAAe,GAAG,aAAa,EAC/B,OAAO,EACP,SAAS,EACT,KAAK,GAAG,WAAW,GACU,EAAqB,EAAE;IACpD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1D,gBAAgB,CAAC,SAAS,GAAG,iCAAiC,CAC5D,EAAE,QAAQ,EAAE,KAAK,EAAE,EACnB,SAAS,CACV,CAAC;IACF,gBAAgB,CAAC,YAAY,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;IAClE,gBAAgB,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEpE,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC;gBACN,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,KAAK,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QAC1B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACrD,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC,gCAAgC,EAAE;gBAC9D,yCAAyC,EAAE,QAAQ;aACpD,CAAC,CAAC;YACH,YAAY,CAAC,WAAW,GAAG,KAAK,CAAC;YACjC,gBAAgB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,gBAAgB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,gBAAgB,CAAC,WAAW,CAC1B,YAAY,CAAC;YACX,cAAc,EAAE,mBAAmB;YACnC,UAAU,EAAE,eAAe;YAC3B,OAAO,EAAE,KAAK;YACd,IAAI,EAAE,KAAK;SACZ,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC"}

package/dist/index.d.ts

@@ -38,6 +38,8 @@ export * from './components/GidsBaseCard/GidsBaseCard.js';
 export * from './components/GidsCard/GidsCard.js';
 export * from './components/_GidsPaginationItem/GidsPaginationItem.js';
 export * from './components/GidsPagination/GidsPagination.js';
+export * from './components/GidsSegmentedTabItem/GidsSegmentedTabItem.js';
+export * from './components/GidsSegmentedControl/GidsSegmentedControl.js';
 /**
  * Utilities
  */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","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;AAE9D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","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;AAE1E;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -38,6 +38,8 @@ export * from './components/GidsBaseCard/GidsBaseCard.js';
 export * from './components/GidsCard/GidsCard.js';
 export * from './components/_GidsPaginationItem/GidsPaginationItem.js';
 export * from './components/GidsPagination/GidsPagination.js';
+export * from './components/GidsSegmentedTabItem/GidsSegmentedTabItem.js';
+export * from './components/GidsSegmentedControl/GidsSegmentedControl.js';
 /**
  * Utilities
  */

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;AAE9D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}
+{"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;AAE1E;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"private": false,
 	"description": "DOM for components reference implementations",
 	"homepage": "https://ganpatiinfosystem.vercel.app/",
@@ -24,11 +24,11 @@
 		"directory": "packages/private/web-dom-reference"
 	},
 	"dependencies": {
-		"@ganpatiinfo/gids-core-shared": "3.0.0",
-		"@ganpatiinfo/gids-web-shared": "3.0.0"
+		"@ganpatiinfo/gids-core-shared": "3.1.0",
+		"@ganpatiinfo/gids-web-shared": "3.1.0"
 	},
 	"peerDependencies": {
-		"@ganpatiinfo/gids-web-theme-interface": "3.0.0",
+		"@ganpatiinfo/gids-web-theme-interface": "3.1.0",
 		"@jest/globals": "^30.2.0",
 		"@types/jasmine": "^5.1.15",
 		"expect": "^30.2.0"

package/src/components/GidsSectionNotice/GidsSectionNotice.ts

@@ -1,12 +1,12 @@
 import {
-	GidsSectionNoticeCommonUtils,
-	type GidsSectionNoticeCommonProps,
+  GidsSectionNoticeCommonUtils,
+  type GidsSectionNoticeCommonProps,
 } from '@ganpatiinfo/gids-core-shared';
 import { GidsSectionNoticeWebUtils } from '@ganpatiinfo/gids-web-shared';
 import {
-	appendAsChildren,
-	type DomChildren,
-	type DomNodeOrString,
+  appendAsChildren,
+  type DomChildren,
+  type DomNodeOrString,
 } from '../../utils/domUtils.js';
 import { type IconName } from '@ganpatiinfo/gids-web-theme-interface';
 import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
@@ -17,89 +17,89 @@ const { getGidsSectionNoticeClassNames } = GidsSectionNoticeWebUtils;
 const { getSectionNoticeIconName } = GidsSectionNoticeCommonUtils;
 
 export interface GidsSectionNoticeDomProps
-	extends GidsSectionNoticeCommonProps<DomNodeOrString, DomChildren> {
-	onClickDismiss?: (event: MouseEvent) => void;
+  extends GidsSectionNoticeCommonProps<DomNodeOrString, DomChildren> {
+  onClickDismiss?: (event: MouseEvent) => void;
 }
 
 export const GidsSectionNoticeDom = ({
-	appearance = 'information',
-	title,
-	supportingText,
-	children,
-	dismissible = true,
-	onClickDismiss,
+  appearance = 'information',
+  title,
+  supportingText,
+  children,
+  dismissible = true,
+  onClickDismiss,
 }: GidsSectionNoticeDomProps): HTMLDivElement => {
-	const sectionNotice = document.createElement('div');
-	sectionNotice.className = getGidsSectionNoticeClassNames({ appearance });
+  const sectionNotice = document.createElement('div');
+  sectionNotice.className = getGidsSectionNoticeClassNames({ appearance });
 
-	const innerContainer = document.createElement('div');
-	innerContainer.className = 'gids-section-notice__inner-container';
+  const innerContainer = document.createElement('div');
+  innerContainer.className = 'gids-section-notice__inner-container';
 
-	const leadingIconContainer = document.createElement('div');
-	leadingIconContainer.className =
-		'gids-section-notice__leading-icon-container';
+  const leadingIconContainer = document.createElement('div');
+  leadingIconContainer.className =
+    'gids-section-notice__leading-icon-container';
 
-	const leadingIconName = getSectionNoticeIconName({ appearance }) as IconName;
+  const leadingIconName = getSectionNoticeIconName({ appearance }) as IconName;
 
-	const leadingIcon = GidsIconDom({
-		size: 'md',
-		appearance: 'filled',
-		name: leadingIconName,
-		alt: '',
-		className: `gids-section-notice__${appearance}-icon`,
-	});
-	leadingIconContainer.appendChild(leadingIcon);
-	innerContainer.appendChild(leadingIconContainer);
+  const leadingIcon = GidsIconDom({
+    size: 'md',
+    appearance: 'filled',
+    name: leadingIconName,
+    alt: '',
+    className: `gids-section-notice__${appearance}-icon`,
+  });
+  leadingIconContainer.appendChild(leadingIcon);
+  innerContainer.appendChild(leadingIconContainer);
 
-	const contentContainer = document.createElement('div');
-	contentContainer.className = 'gids-section-notice__content-container';
+  const contentContainer = document.createElement('div');
+  contentContainer.className = 'gids-section-notice__content-container';
 
-	const titleElement = document.createElement('div');
-	titleElement.className = 'gids-section-notice__title';
-	appendAsChildren(titleElement, title);
-	contentContainer.appendChild(titleElement);
+  const titleElement = document.createElement('div');
+  titleElement.className = 'gids-section-notice__title';
+  appendAsChildren(titleElement, title);
+  contentContainer.appendChild(titleElement);
 
-	if (supportingText) {
-		const supportingTextElement = document.createElement('div');
-		supportingTextElement.className = 'gids-section-notice__supporting-text';
-		appendAsChildren(supportingTextElement, supportingText);
-		contentContainer.appendChild(supportingTextElement);
-	}
+  if (supportingText) {
+    const supportingTextElement = document.createElement('div');
+    supportingTextElement.className = 'gids-section-notice__supporting-text';
+    appendAsChildren(supportingTextElement, supportingText);
+    contentContainer.appendChild(supportingTextElement);
+  }
 
-	if (children) {
-		contentContainer.appendChild(
-			GidsButtonGroupDom({
-				layout: 'wrap',
-				children: children,
-			}),
-		);
-	}
+  if (children) {
+    contentContainer.appendChild(
+      GidsButtonGroupDom({
+        layout: 'wrap',
+        children: children,
+      }),
+    );
+  }
 
-	innerContainer.appendChild(contentContainer);
+  innerContainer.appendChild(contentContainer);
 
-	if (dismissible && onClickDismiss) {
-		const leadingIcon = GidsIconDom({
-			size: 'sm',
-			appearance: 'filled',
-			name: 'cross',
-			alt: '',
-		});
-		const crossButton = GidsButtonDom({
-			as: 'button',
-			type: 'button',
-			appearance: 'subtle',
-			size: 'sm',
-			width: 'intrinsic',
-			leadingIcon: leadingIcon,
-		});
-		crossButton.addEventListener('click', onClickDismiss);
-		const crossBtnContainer = document.createElement('div');
-		crossBtnContainer.className = 'gids-section-notice__cross-button-container';
-		crossBtnContainer.appendChild(crossButton);
-		innerContainer.appendChild(crossBtnContainer);
-	}
+  if (dismissible && onClickDismiss) {
+    const leadingIcon = GidsIconDom({
+      size: 'sm',
+      appearance: 'filled',
+      name: 'cross',
+      alt: '',
+    });
+    const crossButton = GidsButtonDom({
+      as: 'button',
+      type: 'button',
+      appearance: 'subtle',
+      size: 'sm',
+      width: 'intrinsic',
+      leadingIcon: leadingIcon,
+    });
+    crossButton.addEventListener('click', onClickDismiss);
+    const crossBtnContainer = document.createElement('div');
+    crossBtnContainer.className = 'gids-section-notice__cross-button-container';
+    crossBtnContainer.appendChild(crossButton);
+    innerContainer.appendChild(crossBtnContainer);
+  }
 
-	sectionNotice.appendChild(innerContainer);
+  sectionNotice.appendChild(innerContainer);
 
-	return sectionNotice;
+  return sectionNotice;
 };

package/src/components/GidsSegmentedControl/GidsSegmentedControl.ts

@@ -0,0 +1,75 @@
+import {
+  GidsSegmentedTabItemPressedReturnedProps,
+  type GidsSegmentedControlCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+  type ClassValue,
+  GidsSegmentedControlWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsSegmentedTabItemDom } from '../GidsSegmentedTabItem/GidsSegmentedTabItem.js';
+
+const { getGidsSegmentedControlClassNames } = GidsSegmentedControlWebUtils;
+
+export interface GidsSegmentedControlDomProps extends GidsSegmentedControlCommonProps<
+  DomNodeOrString,
+  string
+> {
+  onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
+  className?: ClassValue;
+}
+
+export const GidsSegmentedControlDom = ({
+  width = 'intrinsic',
+  tabItems,
+  onPress,
+  className,
+}: GidsSegmentedControlDomProps): HTMLDivElement => {
+  const segmentedControl = document.createElement('div');
+  segmentedControl.className = getGidsSegmentedControlClassNames(
+    { width },
+    className,
+  );
+
+  if (tabItems && tabItems.length > 0) {
+    // This function renders (or re-renders) the tabs
+    const renderTabs = (selectedIndex?: number) => {
+      // Clear existing tabs
+      segmentedControl.innerHTML = '';
+
+      if (tabItems && tabItems.length > 0) {
+        tabItems.forEach((tabItem, index) => {
+          // Determine if this tab is selected
+          // Priority: 1. The newly clicked index, 2. The initial tabItem.selected state
+
+          let isSelected = false;
+          if (selectedIndex !== undefined && selectedIndex !== null) {
+            isSelected = index === selectedIndex;
+          } else {
+            isSelected = index === 0 ? true : false;
+          }
+
+          const tabElement = GidsSegmentedTabItemDom({
+            ...tabItem,
+            index,
+            selected: isSelected,
+            width: width,
+            onPress: (returnedProps) => {
+              // Re-render all tabs with the new selection
+              renderTabs(returnedProps.selectedIndex);
+              // Notify external listeners
+              if (onPress) onPress(returnedProps);
+            },
+          });
+
+          segmentedControl.appendChild(tabElement);
+        });
+      }
+    };
+
+    // Initial render
+    renderTabs();
+  }
+
+  return segmentedControl;
+};

package/src/components/GidsSegmentedTabItem/GidsSegmentedTabItem.ts

@@ -0,0 +1,75 @@
+import {
+  type GidsSegmentedTabItemPressedReturnedProps,
+  type GidsSegmentedTabItemCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+  type ClassValue,
+  GidsSegmentedTabItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import clsx from 'clsx';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsBadgeDom } from '../GidsBadge/GidsBadge.js';
+
+const { getGidsSegmentedTabItemClassNames } = GidsSegmentedTabItemWebUtils;
+
+export interface GidsSegmentedTabItemDomProps extends GidsSegmentedTabItemCommonProps<
+  DomNodeOrString,
+  string
+> {
+  onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
+  className?: ClassValue;
+}
+
+export const GidsSegmentedTabItemDom = ({
+  index,
+  label,
+  selected = false,
+  badge = false,
+  badgeAccessibleText,
+  badgeAppearance = 'information',
+  onPress,
+  className,
+  width = 'intrinsic',
+}: GidsSegmentedTabItemDomProps): HTMLButtonElement => {
+  const segmentedTabItem = document.createElement('button');
+  segmentedTabItem.className = getGidsSegmentedTabItemClassNames(
+    { selected, width },
+    className,
+  );
+  segmentedTabItem.setAttribute('data-gids-segmented-item', 'true');
+  segmentedTabItem.setAttribute('aria-selected', selected.toString());
+
+  segmentedTabItem.addEventListener('click', () => {
+    if (onPress) {
+      onPress({
+        selectedIndex: index,
+      });
+    }
+  });
+
+  if (label && label !== '') {
+    if (typeof label === 'string') {
+      const labelElement = document.createElement('label');
+      labelElement.className = clsx('gids-segmented-tab-item__label', {
+        'gids-segmented-tab-item__selected-label': selected,
+      });
+      labelElement.textContent = label;
+      segmentedTabItem.appendChild(labelElement);
+    } else {
+      segmentedTabItem.appendChild(label);
+    }
+  }
+
+  if (badge) {
+    segmentedTabItem.appendChild(
+      GidsBadgeDom({
+        accessibleText: badgeAccessibleText,
+        appearance: badgeAppearance,
+        outline: false,
+        type: 'dot',
+      }),
+    );
+  }
+
+  return segmentedTabItem;
+};

package/src/index.ts

@@ -38,6 +38,8 @@ export * from './components/GidsBaseCard/GidsBaseCard.js';
 export * from './components/GidsCard/GidsCard.js';
 export * from './components/_GidsPaginationItem/GidsPaginationItem.js';
 export * from './components/GidsPagination/GidsPagination.js';
+export * from './components/GidsSegmentedTabItem/GidsSegmentedTabItem.js';
+export * from './components/GidsSegmentedControl/GidsSegmentedControl.js';
 
 /**
  * Utilities