@vsn-ux/ngx-gaia 0.10.1 → 0.10.3

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());
@@ -5751,7 +5764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 class GaChipListboxComponent {
-    cdkListbox = inject(CdkListbox, { self: true });
+    cdkListbox = inject((CdkListbox), { self: true });
     orientation = input('horizontal');
     variant = input('default');
     valueChange = output();
@@ -5763,8 +5776,7 @@ class GaChipListboxComponent {
         this.cdkListbox.valueChange
             .pipe(takeUntilDestroyed())
             .subscribe((event) => {
-            const value = !this.cdkListbox.multiple ? event.value[0] : event.value;
-            this.valueChange.emit(value);
+            this.valueChange.emit(event.value);
         });
     }
     focus() {
@@ -5795,7 +5807,6 @@ class GaChipComponent {
     listbox = inject(GaChipListboxComponent);
     _isSelected = signal(null);
     selected = this._isSelected.asReadonly();
-    value = input.required();
     disabled = input(false, { transform: booleanAttribute });
     constructor() {
         afterEveryRender({
@@ -5807,7 +5818,7 @@ class GaChipComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaChipComponent, isStandalone: true, selector: "ga-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-quick-filter-button--transparent": "listbox.variant() === 'transparent'", "class.ga-quick-filter-button--disabled": "disabled() || listbox.disabled()", "class.ga-quick-filter-button--selected": "selected()" }, classAttribute: "ga-quick-filter-button" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled"] }], ngImport: i0, template: "<ng-content />\n", dependencies: [{ kind: "ngmodule", type: CdkListboxModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaChipComponent, isStandalone: true, selector: "ga-chip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-quick-filter-button--transparent": "listbox.variant() === 'transparent'", "class.ga-quick-filter-button--disabled": "disabled() || listbox.disabled()", "class.ga-quick-filter-button--selected": "selected()" }, classAttribute: "ga-quick-filter-button" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled"] }], ngImport: i0, template: "<ng-content />\n", dependencies: [{ kind: "ngmodule", type: CdkListboxModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipComponent, decorators: [{
             type: Component,