@vsn-ux/ngx-gaia 0.10.1 → 0.10.2

package/DOCS.md

@@ -1114,6 +1114,7 @@ Segmented control container component.
 #### Inputs:
 
 - `selected: any` - Selected value
+- `compareFn: (o1: any, o2: any) => boolean` - Comparison function for object values (default: `(a, b) => a === b`)
 
 #### Outputs:
 
@@ -1164,6 +1165,29 @@ Icon buttons
 </ga-segmented-control>
 ```
 
+Object values with compareFn
+
+```html
+<ga-segmented-control [(selected)]="selectedOption" [compareFn]="compareById">
+  <ga-segmented-control-text-button [value]="options[0]"
+    >{{ options[0].label }}</ga-segmented-control-text-button
+  >
+  <ga-segmented-control-text-button [value]="options[1]"
+    >{{ options[1].label }}</ga-segmented-control-text-button
+  >
+</ga-segmented-control>
+```
+
+```typescript
+options = [
+  { id: 1, label: 'Table' },
+  { id: 2, label: 'List' },
+];
+selectedOption = { id: 1, label: 'Table' };
+compareById = (a: typeOfOption | null, b: typeOfOption | null) =>
+  a?.id === b?.id;
+```
+
 ## Select
 
 Select components for dropdown selections with multi-select capabilities. Use for static selects where all options are loaded upfront.

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -1911,9 +1911,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 class GaSegmentedControlComponent {
     selected = model();
+    compareFn = input((a, b) => a === b);
     change = output();
+    safeCompareFn = computed(() => {
+        const compareFn = this.compareFn();
+        return (o1, o2) => {
+            if (o1 === null || o1 === undefined || o2 === null || o2 === undefined) {
+                return o1 === o2;
+            }
+            return compareFn(o1, o2);
+        };
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaSegmentedControlComponent, isStandalone: true, selector: "ga-segmented-control", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", change: "change" }, host: { attributes: { "role": "group" }, classAttribute: "ga-segmented-control" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaSegmentedControlComponent, isStandalone: true, selector: "ga-segmented-control", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", change: "change" }, host: { attributes: { "role": "group" }, classAttribute: "ga-segmented-control" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSegmentedControlComponent, decorators: [{
             type: Component,
@@ -1935,9 +1945,12 @@ class GaSegmentedControlButtonDirective {
     });
     value = input();
     selected = computed(() => {
-        return (this.value() !== undefined &&
-            this.group.selected() !== undefined &&
-            this.group.selected() === this.value());
+        const value = this.value();
+        const selectedValue = this.group.selected();
+        if (value === undefined || selectedValue === undefined) {
+            return false;
+        }
+        return this.group.safeCompareFn()(selectedValue, value);
     });
     onClick() {
         this.group.selected.set(this.value());