@vsn-ux/ngx-gaia 0.10.0 → 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.
@@ -1315,6 +1339,116 @@ Switch with label
 <ga-switch [(ngModel)]="value" label="Dark mode" />
 ```
 
+## Tabs
+
+Tab components for organizing content into switchable panels.
+
+**Angular module: GaTabsModule**
+
+### `<ga-tabs>`
+
+Container component for managing tab selection and content display.
+
+#### Inputs:
+
+- `selectedIndex: number` - Index of the selected tab (default: 0)
+- `withKeyline: boolean` - Display keyline below tabs (default: false)
+- `orientation: 'horizontal' | 'vertical'` - Tab orientation (default: 'horizontal')
+- `aria-label: string` - Accessible label for tab list
+- `aria-labelledby: string` - ID of element labeling tab list
+
+#### Outputs:
+
+- `beforeTabChange(event: GaBeforeTabChangeEvent)` - Emitted before tab changes, can prevent change via event.preventChange()
+- `selectedIndexChange(index: number)` - Emitted when selected index changes
+- `selectedTabChange(event: GaTabChangeEvent)` - Emitted when selected tab changes
+
+### `<ga-tab>`
+
+Individual tab component for tab content.
+
+#### Inputs:
+
+- `title: string` - Tab label text (default: '')
+- `disabled: boolean` - Disabled state (default: false)
+- `rightIcon: GaIconData` - Icon displayed next to title
+- `rightIconColor: string` - Icon color
+
+### `[gaTabContent]`
+
+Directive for explicit tab content template definition.
+
+### Examples:
+
+Basic tabs
+
+```html
+<ga-tabs [(selectedIndex)]="selectedIndex">
+  <ga-tab title="First"><p>First tab content</p></ga-tab>
+  <ga-tab title="Second"><p>Second tab content</p></ga-tab>
+  <ga-tab title="Third" disabled><p>Disabled tab</p></ga-tab>
+</ga-tabs>
+```
+
+Vertical orientation with keyline
+
+```html
+<ga-tabs orientation="vertical" withKeyline>
+  <ga-tab title="Overview"><p>Overview content</p></ga-tab>
+  <ga-tab title="Settings"><p>Settings content</p></ga-tab>
+  <ga-tab title="Profile"><p>Profile content</p></ga-tab>
+</ga-tabs>
+```
+
+Tabs with icons
+
+```html
+<ga-tabs>
+  <ga-tab title="Home" [rightIcon]="HomeIcon">
+    <p>Home tab content</p>
+  </ga-tab>
+  <ga-tab title="Settings" [rightIcon]="SettingsIcon">
+    <p>Settings tab content</p>
+  </ga-tab>
+  <ga-tab
+    title="Alerts"
+    [rightIcon]="AlertIcon"
+    rightIconColor="var(--ga-color-warning)"
+  >
+    <p>Alerts tab content</p>
+  </ga-tab>
+</ga-tabs>
+```
+
+Preventing tab change
+
+```html
+<ga-tabs (beforeTabChange)="onBeforeChange($event)">
+  <ga-tab title="Tab 1"><p>Content 1</p></ga-tab>
+  <ga-tab title="Tab 2"><p>Content 2</p></ga-tab>
+</ga-tabs>
+```
+
+```typescript
+onBeforeChange(event: GaBeforeTabChangeEvent) {
+  if (!confirm('Change tab?')) {
+    event.preventChange();
+  }
+}
+```
+
+Explicit content template
+
+```html
+<ga-tabs>
+  <ga-tab title="Template Tab">
+    <ng-template gaTabContent>
+      <p>Content defined in explicit template</p>
+    </ng-template>
+  </ga-tab>
+</ga-tabs>
+```
+
 ## Text Area
 
 Text area directive for multi-line text input.

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

@@ -368,7 +368,7 @@ function provideGaAlertI18n(value) {
     ]);
 }
 
-let nextUniqueId$a = 0;
+let nextUniqueId$b = 0;
 class GaAlertComponent {
     i18n = inject(GaAlertI18n);
     dismissIcon = X;
@@ -396,7 +396,7 @@ class GaAlertComponent {
         return null;
     });
     title = contentChild(GaAlertTitleComponent);
-    progressId = `ga-alert-progress-${++nextUniqueId$a}`;
+    progressId = `ga-alert-progress-${++nextUniqueId$b}`;
     variantClass = computed(() => {
         return `ga-notification ga-notification--${this.variant()}`;
     });
@@ -657,10 +657,10 @@ const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
 };
 // Increasing integer for generating unique ids for checkbox components.
 // Inspired by @angular/components
-let nextUniqueId$9 = 0;
+let nextUniqueId$a = 0;
 class GaCheckboxComponent {
     /** @ignore */
-    _uniqueId = `ga-checkbox-${++nextUniqueId$9}`;
+    _uniqueId = `ga-checkbox-${++nextUniqueId$a}`;
     /** @ignore */
     implicitNgControlState = injectNgControlState();
     /** @ignore */
@@ -1262,9 +1262,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             type: Injectable
         }] });
 
-let nextUniqueId$8 = 0;
+let nextUniqueId$9 = 0;
 class GaInputDirective {
-    uniqueId = `ga-input-${++nextUniqueId$8}`;
+    uniqueId = `ga-input-${++nextUniqueId$9}`;
     formFieldConnector = inject(GaFormFieldConnector, {
         optional: true,
     });
@@ -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());
@@ -2186,7 +2199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 const GA_FORM_FIELD_ID = new InjectionToken('ga-form-field-id');
 
-let nextUniqueId$7 = 0;
+let nextUniqueId$8 = 0;
 class GaFormFieldComponent {
     uniqueId = inject(GA_FORM_FIELD_ID);
     formFieldConnector = inject(GaFormFieldConnector);
@@ -2204,7 +2217,7 @@ class GaFormFieldComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaFormFieldComponent, isStandalone: true, selector: "ga-form-field", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-form-field" }, providers: [
             {
                 provide: GA_FORM_FIELD_ID,
-                useFactory: () => `ga-form-field-${++nextUniqueId$7}`,
+                useFactory: () => `ga-form-field-${++nextUniqueId$8}`,
             },
             GaFormFieldConnector,
         ], queries: [{ propertyName: "fieldInfo", first: true, predicate: GaFieldInfoComponent, descendants: true, isSignal: true }, { propertyName: "fieldErrors", predicate: GaFieldErrorDirective, isSignal: true }], exportAs: ["gaFormField"], ngImport: i0, template: "<ng-content select=\"ga-label\" />\n<ng-content />\n<ga-field-callout />\n", dependencies: [{ kind: "component", type: GaFieldCalloutComponent, selector: "ga-field-callout" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -2216,13 +2229,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     }, providers: [
                         {
                             provide: GA_FORM_FIELD_ID,
-                            useFactory: () => `ga-form-field-${++nextUniqueId$7}`,
+                            useFactory: () => `ga-form-field-${++nextUniqueId$8}`,
                         },
                         GaFormFieldConnector,
                     ], template: "<ng-content select=\"ga-label\" />\n<ng-content />\n<ga-field-callout />\n" }]
         }] });
 
-let nextUniqueId$6 = 0;
+let nextUniqueId$7 = 0;
 /**
  * Internal tooltip component used by the gaTooltip directive.
  * This component is not intended for direct use in templates.
@@ -2230,7 +2243,7 @@ let nextUniqueId$6 = 0;
  * @internal
  */
 class GaTooltipComponent {
-    uniqueId = `ga-tooltip-${++nextUniqueId$6}`;
+    uniqueId = `ga-tooltip-${++nextUniqueId$7}`;
     mouseLeaveSubject = new Subject();
     afterMouseLeave = () => this.mouseLeaveSubject.asObservable();
     mouseOver = signal(false);
@@ -3548,10 +3561,10 @@ const RADIO_CONTROL_VALUE_ACCESSOR = {
     multi: true,
 };
 // Increasing integer for generating unique ids for radio components.
-let nextUniqueId$5 = 0;
+let nextUniqueId$6 = 0;
 class GaRadioGroupComponent {
     /** Name of the radio button group. All radio buttons inside this group will use this name. */
-    name = input(`ga-radio-group-${nextUniqueId$5++}`);
+    name = input(`ga-radio-group-${nextUniqueId$6++}`);
     /**
      * Value for the radio-group. Should equal the value of the selected radio button if there is
      * a corresponding radio button with a matching value. If there is not such a corresponding
@@ -3610,7 +3623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 // Increasing integer for generating unique ids for radio button components.
-let nextUniqueId$4 = 0;
+let nextUniqueId$5 = 0;
 class GaRadioButtonComponent {
     radioGroup = inject(GaRadioGroupComponent, {
         optional: true,
@@ -3619,7 +3632,7 @@ class GaRadioButtonComponent {
         optional: true,
     });
     implicitNgControlState = injectNgControlState();
-    _uniqueId = `ga-radio-button-${++nextUniqueId$4}`;
+    _uniqueId = `ga-radio-button-${++nextUniqueId$5}`;
     /** The value attribute of the native input element */
     value = input(null);
     inputId = input(null, { alias: 'id' });
@@ -3885,9 +3898,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     }, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n" }]
         }] });
 
-let nextUniqueId$3 = 0;
+let nextUniqueId$4 = 0;
 class GaSelectComponent {
-    _uniqueId = `ga-select-${++nextUniqueId$3}`;
+    _uniqueId = `ga-select-${++nextUniqueId$4}`;
     icons = { CircleX };
     _onTouched;
     _onModelChanged;
@@ -4734,9 +4747,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             args: [{ selector: 'ga-intersection-trigger', template: ``, styles: [":host{height:0px;display:block;flex-shrink:0}\n"] }]
         }], ctorParameters: () => [] });
 
-let nextUniqueId$2 = 0;
+let nextUniqueId$3 = 0;
 class GaDataSelectComponent {
-    _uniqueId = `ga-data-select-${++nextUniqueId$2}`;
+    _uniqueId = `ga-data-select-${++nextUniqueId$3}`;
     icons = { CircleX };
     _onTouched;
     _onModelChanged;
@@ -5353,13 +5366,13 @@ const SWITCH_CONTROL_VALUE_ACCESSOR = {
     multi: true,
 };
 // Increasing integer for generating unique ids for switch components.
-let nextUniqueId$1 = 0;
+let nextUniqueId$2 = 0;
 class GaSwitchComponent {
     icons = { Check };
     /** @ignore */
     implicitNgControlState = injectNgControlState();
     /** @ignore */
-    _uniqueId = `ga-switch-${++nextUniqueId$1}`;
+    _uniqueId = `ga-switch-${++nextUniqueId$2}`;
     /** @ignore */
     tabindex = input(0, {
         alias: 'tabindex',
@@ -5551,6 +5564,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+class GaTabContentDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaTabContentDirective, isStandalone: true, selector: "ng-template[gaTabContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[gaTabContent]',
+                }]
+        }] });
+class GaTabComponent {
+    title = input('');
+    disabled = input(false, { transform: booleanAttribute });
+    rightIcon = input();
+    rightIconColor = input();
+    /** @ignore */
+    explicitContent = contentChild(GaTabContentDirective, {
+        read: TemplateRef,
+    });
+    /** @ignore */
+    implicitContent = viewChild.required(TemplateRef);
+    /** @ignore */
+    contentTpl = computed(() => {
+        return this.explicitContent() ?? this.implicitContent();
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaTabComponent, isStandalone: true, selector: "ga-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconColor: { classPropertyName: "rightIconColor", publicName: "rightIconColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "explicitContent", first: true, predicate: GaTabContentDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-tab', template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
+        }] });
+
+// Increasing integer for generating unique id for tabpanels.
+let nextUniqueId$1 = 0;
+class GaTabsComponent {
+    /** @ignore */
+    uniqueId = `ga-tabs-${nextUniqueId$1++}`;
+    /** @ignore */
+    selectedTab = signal(null);
+    /** @ignore */
+    tabs = contentChildren(GaTabComponent);
+    withKeyline = input(false, { transform: booleanAttribute });
+    orientation = input('horizontal');
+    ariaLabel = input(undefined, { alias: 'aria-label' });
+    ariaLabelledby = input(undefined, {
+        alias: 'aria-labelledby',
+    });
+    selectedIndexInput = input(0, {
+        transform: numberAttribute,
+        alias: 'selectedIndex',
+    });
+    selectedIndex = linkedSignal(() => this.selectedIndexInput());
+    beforeTabChange = output();
+    selectedIndexChange = output();
+    selectedTabChange = output();
+    constructor() {
+        effect(() => {
+            const selectedIndex = this.selectedIndex();
+            untracked(() => this.selectTab(selectedIndex, false));
+        });
+        effect(() => {
+            const selectedTab = this.selectedTab();
+            const tabs = this.tabs();
+            if (selectedTab && !tabs.includes(selectedTab)) {
+                untracked(() => this.selectTab(this.selectedIndex(), true));
+            }
+        });
+    }
+    /** @ignore */
+    onTabClick(index) {
+        let canChange = true;
+        this.beforeTabChange.emit({
+            newIndex: index,
+            oldIndex: this.selectedIndex(),
+            preventChange: () => {
+                canChange = false;
+            },
+        });
+        if (canChange) {
+            this.selectTab(index, true);
+        }
+    }
+    selectTab(index, broadcastEvent) {
+        const tabs = this.tabs();
+        if (!tabs?.length) {
+            return;
+        }
+        const clampedTabIndex = Math.min(tabs.length - 1, Math.max(index || 0, 0));
+        const tabAtIndex = tabs.find((_, i) => i === clampedTabIndex);
+        if (tabAtIndex.disabled()) {
+            return;
+        }
+        if (clampedTabIndex !== this.selectedIndex()) {
+            this.selectedIndex.set(clampedTabIndex);
+            if (broadcastEvent) {
+                this.selectedIndexChange.emit(clampedTabIndex);
+            }
+        }
+        if (tabAtIndex !== this.selectedTab()) {
+            this.selectedTab.set(tabAtIndex);
+            if (broadcastEvent) {
+                this.selectedTabChange.emit({
+                    index: clampedTabIndex,
+                    tab: tabAtIndex,
+                });
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaTabsComponent, isStandalone: true, selector: "ga-tabs", inputs: { withKeyline: { classPropertyName: "withKeyline", publicName: "withKeyline", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { beforeTabChange: "beforeTabChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "class.ga-tabs-container--horizontal": "orientation() === 'horizontal'", "class.ga-tabs-container--vertical": "orientation() === 'vertical'" } }, queries: [{ propertyName: "tabs", predicate: GaTabComponent, isSignal: true }], ngImport: i0, template: "<ul\n  role=\"tablist\"\n  [attr.id]=\"uniqueId\"\n  class=\"ga-tabs\"\n  [class.ga-tabs--horizontal]=\"orientation() === 'horizontal'\"\n  [class.ga-tabs--vertical]=\"orientation() === 'vertical'\"\n  [class.ga-tabs--keyline]=\"withKeyline()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-orientation]=\"orientation()\"\n>\n  @for (tab of tabs(); track tab; let i = $index) {\n    <li\n      [attr.id]=\"uniqueId + '-tablabel-' + i\"\n      class=\"ga-tabs__tab\"\n      [class.ga-tabs__tab--selected]=\"i === selectedIndex()\"\n      [class.ga-tabs__tab--disabled]=\"tab.disabled()\"\n      role=\"tab\"\n      [tabindex]=\"tab.disabled() ? -1 : undefined\"\n      (click)=\"onTabClick(i); $event.preventDefault()\"\n      (keydown.enter)=\"onTabClick(i); $event.preventDefault()\"\n      (keydown.space)=\"onTabClick(i); $event.preventDefault()\"\n      [attr.aria-selected]=\"i === selectedIndex()\"\n      [attr.aria-disabled]=\"tab.disabled()\"\n      [attr.aria-controls]=\"uniqueId + '-tabpanel-' + i\"\n    >\n      {{ tab.title() }}\n      @let tabTitleIcon = tab.rightIcon();\n      @if (tabTitleIcon) {\n        <ga-icon\n          [icon]=\"tabTitleIcon\"\n          size=\"16\"\n          class=\"ga-tabs__tab-icon\"\n          [color]=\"tab.rightIconColor()\"\n        />\n      }\n    </li>\n  }\n</ul>\n\n@for (tab of tabs(); track tab; let i = $index) {\n  @if (tab === selectedTab()) {\n    <div\n      role=\"tabpanel\"\n      [attr.id]=\"uniqueId + '-tabpanel-' + i\"\n      [attr.aria-labelledby]=\"uniqueId + '-tablabel-' + i\"\n    >\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl()\"></ng-template>\n    </div>\n  }\n}\n", styles: [":host{display:flex}:host.ga-tabs-container--horizontal{flex-direction:column}:host.ga-tabs-container--vertical{flex-direction:row}:host .ga-tabs{overflow:auto;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-tabs', imports: [NgTemplateOutlet, GaIconComponent], host: {
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                        '[class.ga-tabs-container--horizontal]': "orientation() === 'horizontal'",
+                        '[class.ga-tabs-container--vertical]': "orientation() === 'vertical'",
+                    }, template: "<ul\n  role=\"tablist\"\n  [attr.id]=\"uniqueId\"\n  class=\"ga-tabs\"\n  [class.ga-tabs--horizontal]=\"orientation() === 'horizontal'\"\n  [class.ga-tabs--vertical]=\"orientation() === 'vertical'\"\n  [class.ga-tabs--keyline]=\"withKeyline()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-orientation]=\"orientation()\"\n>\n  @for (tab of tabs(); track tab; let i = $index) {\n    <li\n      [attr.id]=\"uniqueId + '-tablabel-' + i\"\n      class=\"ga-tabs__tab\"\n      [class.ga-tabs__tab--selected]=\"i === selectedIndex()\"\n      [class.ga-tabs__tab--disabled]=\"tab.disabled()\"\n      role=\"tab\"\n      [tabindex]=\"tab.disabled() ? -1 : undefined\"\n      (click)=\"onTabClick(i); $event.preventDefault()\"\n      (keydown.enter)=\"onTabClick(i); $event.preventDefault()\"\n      (keydown.space)=\"onTabClick(i); $event.preventDefault()\"\n      [attr.aria-selected]=\"i === selectedIndex()\"\n      [attr.aria-disabled]=\"tab.disabled()\"\n      [attr.aria-controls]=\"uniqueId + '-tabpanel-' + i\"\n    >\n      {{ tab.title() }}\n      @let tabTitleIcon = tab.rightIcon();\n      @if (tabTitleIcon) {\n        <ga-icon\n          [icon]=\"tabTitleIcon\"\n          size=\"16\"\n          class=\"ga-tabs__tab-icon\"\n          [color]=\"tab.rightIconColor()\"\n        />\n      }\n    </li>\n  }\n</ul>\n\n@for (tab of tabs(); track tab; let i = $index) {\n  @if (tab === selectedTab()) {\n    <div\n      role=\"tabpanel\"\n      [attr.id]=\"uniqueId + '-tabpanel-' + i\"\n      [attr.aria-labelledby]=\"uniqueId + '-tablabel-' + i\"\n    >\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl()\"></ng-template>\n    </div>\n  }\n}\n", styles: [":host{display:flex}:host.ga-tabs-container--horizontal{flex-direction:column}:host.ga-tabs-container--vertical{flex-direction:row}:host .ga-tabs{overflow:auto;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [] });
+
+class GaTabsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaTabsModule, imports: [GaTabsComponent, GaTabComponent, GaTabContentDirective], exports: [GaTabsComponent, GaTabComponent, GaTabContentDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabsModule, imports: [GaTabsComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [GaTabsComponent, GaTabComponent, GaTabContentDirective],
+                    exports: [GaTabsComponent, GaTabComponent, GaTabContentDirective],
+                }]
+        }] });
+
 let nextUniqueId = 0;
 class GaTextAreaDirective {
     implicitNgControlState = injectNgControlState();
@@ -5710,5 +5858,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_DATA_SELECT_I18N_FACTORY, GA_DATA_SELECT_REQUIRED_VALIDATOR, GA_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaChipComponent, GaChipListboxComponent, GaChipModule, GaDataSelectComponent, GaDataSelectI18n, GaDataSelectI18nDefault, GaDataSelectModule, GaDataSelectOptgroupLabelDirective, GaDataSelectOptionLabelDirective, GaDataSelectRequiredValidator, GaDataSelectValueDirective, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDataSelectI18n, provideGaDatepickerI18n, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_DATA_SELECT_I18N_FACTORY, GA_DATA_SELECT_REQUIRED_VALIDATOR, GA_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaChipComponent, GaChipListboxComponent, GaChipModule, GaDataSelectComponent, GaDataSelectI18n, GaDataSelectI18nDefault, GaDataSelectModule, GaDataSelectOptgroupLabelDirective, GaDataSelectOptionLabelDirective, GaDataSelectRequiredValidator, GaDataSelectValueDirective, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTabComponent, GaTabContentDirective, GaTabsComponent, GaTabsModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDataSelectI18n, provideGaDatepickerI18n, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map