@vsn-ux/ngx-gaia 0.9.17 → 0.10.1

package/DOCS.md

@@ -1315,6 +1315,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,
     });
@@ -2186,7 +2186,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 +2204,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 +2216,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 +2230,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);
@@ -2940,6 +2940,68 @@ class GaModalRef {
 
 const GA_MODAL_DATA = new InjectionToken('GaModalData');
 
+class GaModalOptions {
+    /**
+     * Defines the predefined size of the modal.
+     *
+     * @default `md`
+     */
+    size;
+    /**
+     * Defines the type of the modal:
+     *  - `none` for no icon.
+     *  - `information` for info dialog.
+     *  - `danger` for danger dialog.
+     *  - `warning` for warning dialog.
+     *  - `success` for success dialog.
+     */
+    type;
+    /**
+     * The ARIA role of the dialog element.
+     *
+     * @default `dialog`
+     */
+    role;
+    /**
+     * Defines the vertical position of the modal.
+     *  - `center` centers the modal vertically in the viewport (default).
+     *  - `top` positions the modal at the top with a calculated offset.
+     *
+     * @default `center`
+     */
+    verticalPosition;
+    /**
+     * Defines if the modal should be closed when the escape key is pressed.
+     *
+     * @default `true`
+     */
+    closeOnEscape;
+    /**
+     * Defines if the modal should be closed when the backdrop is clicked.
+     *
+     * @default `true`
+     */
+    closeOnOutsideClick;
+    /**
+     * Defines if the modal should be closed when the route changes.
+     *
+     * @default `true`
+     */
+    closeOnNavigation;
+}
+const DEFAULT_MODAL_OPTIONS = {
+    role: 'dialog',
+    type: 'none',
+    size: 'md',
+    verticalPosition: 'center',
+    closeOnEscape: true,
+    closeOnOutsideClick: true,
+    closeOnNavigation: true,
+};
+function provideGaModalOptions(options) {
+    return { provide: GaModalOptions, useValue: options };
+}
+
 class GaModalService {
     /** @ignore */
     overlay = inject(Overlay);
@@ -2952,6 +3014,8 @@ class GaModalService {
     });
     /** @ignore */
     openModalsAtThisLevel = signal([]);
+    /** @ignore */
+    positionStrategy;
     get activeModals() {
         if (this.parentModalService) {
             return this.parentModalService.activeModals;
@@ -2976,15 +3040,23 @@ class GaModalService {
         const modalRef = new GaModalRef();
         const injector = this.createInjector(this.injector, overlayRef, modalRef, data);
         const modalPortal = new ComponentPortal(component, null, injector);
-        const result = overlayRef.attach(modalPortal);
-        modalRef.instance = result.instance;
+        const { instance: modalComponent } = overlayRef.attach(modalPortal);
+        modalRef.instance = modalComponent;
+        // Update position and size if verticalPosition is 'top'
+        const verticalPosition = modalComponent.options.verticalPosition ??
+            DEFAULT_MODAL_OPTIONS.verticalPosition;
+        if (verticalPosition === 'top') {
+            const modalStackIndex = this.activeModals().length + 1;
+            this.positionStrategy?.top(`calc(4rem * var(--ga-base-scaling-factor, 1) * ${modalStackIndex})`);
+            overlayRef.updateSize({
+                maxHeight: `calc(100vh - 4rem * var(--ga-base-scaling-factor, 1) * (2 + ${modalStackIndex}))`,
+            });
+        }
         this.activeModals.update((modals) => {
-            modals.push(modalRef.instance);
+            modals.push(modalComponent);
             return modals;
         });
-        modalRef.instance
-            .afterClosed({ closeOnUnsubscribe: false })
-            .subscribe(() => {
+        modalComponent.afterClosed({ closeOnUnsubscribe: false }).subscribe(() => {
             const index = this.activeModals().indexOf(modalRef.instance);
             if (index > -1) {
                 this.activeModals.update((modals) => {
@@ -2993,26 +3065,25 @@ class GaModalService {
                 });
             }
         });
-        return result.instance;
+        return modalComponent;
     }
     /** @ignore */
     createOverlay() {
-        const modalStackIndex = this.activeModals().length;
-        const positionStrategy = this.overlay
+        this.positionStrategy = this.overlay
             .position()
             .global()
             .centerHorizontally()
-            .top(`calc(4rem * var(--ga-base-scaling-factor, 1) * ${modalStackIndex + 1})`);
+            .centerVertically();
         const scrollStrategy = this.overlay.scrollStrategies.block();
         return this.overlay.create({
-            positionStrategy,
+            positionStrategy: this.positionStrategy,
             scrollStrategy,
             hasBackdrop: true,
             backdropClass: 'ga-modal__backdrop',
             // NOTE: handled manually inside the modal component
             disposeOnNavigation: false,
             height: 'auto',
-            maxHeight: `calc(100vh - 4rem * var(--ga-base-scaling-factor, 1) * (2 + ${modalStackIndex}))`,
+            maxHeight: `calc(100vh - 4rem * var(--ga-base-scaling-factor, 1) * 2)`,
         });
     }
     /** @ignore */
@@ -3034,59 +3105,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-class GaModalOptions {
-    /**
-     * Defines the predefined size of the modal.
-     *
-     * @default `md`
-     */
-    size;
-    /**
-     * Defines the type of the modal:
-     *  - `none` for no icon.
-     *  - `information` for info dialog.
-     *  - `danger` for danger dialog.
-     *  - `warning` for warning dialog.
-     *  - `success` for success dialog.
-     */
-    type;
-    /**
-     * The ARIA role of the dialog element.
-     *
-     * @default `dialog`
-     */
-    role;
-    /**
-     * Defines if the modal should be closed when the escape key is pressed.
-     *
-     * @default `true`
-     */
-    closeOnEscape;
-    /**
-     * Defines if the modal should be closed when the backdrop is clicked.
-     *
-     * @default `true`
-     */
-    closeOnOutsideClick;
-    /**
-     * Defines if the modal should be closed when the route changes.
-     *
-     * @default `true`
-     */
-    closeOnNavigation;
-}
-const DEFAULT_MODAL_OPTIONS = {
-    role: 'dialog',
-    type: 'none',
-    size: 'md',
-    closeOnEscape: true,
-    closeOnOutsideClick: true,
-    closeOnNavigation: true,
-};
-function provideGaModalOptions(options) {
-    return { provide: GaModalOptions, useValue: options };
-}
-
 class GaModalComponent {
     closeSubject = new Subject();
     overlayRef = inject(OverlayRef);
@@ -3530,10 +3548,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
@@ -3592,7 +3610,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,
@@ -3601,7 +3619,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' });
@@ -3867,9 +3885,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;
@@ -4716,9 +4734,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;
@@ -5335,13 +5353,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',
@@ -5533,6 +5551,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();
@@ -5692,5 +5845,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