import { Directionality } from '@angular/cdk/bidi';
import { CdkStepper, StepState } from '@angular/cdk/stepper';
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
import { QdPageFooterService } from '../page/shared/services/page-footer.service';
import { QdPageStoreService } from '../page/shared/services/page-store.service';
import { QdPageTabsConfig } from './model/page-tabs-config';
import { QdTabSelectionEvent } from './model/page-tabs-selection-event';
import { QdPageTabComponent } from './page-tab/page-tab.component';
import { ActivatedRoute, Router } from '@angular/router';
import * as i0 from "@angular/core";
/**
 * **QdPageTabsComponent** provides a non-linear tabbed navigation system within a **QdPage**.
 * It enables switching between different sections while maintaining form validation and controlled navigation.
 *
 * #### **Features**
 *
 * - **Non-linear Navigation**: Users can navigate freely between tabs, with validation checks where necessary.
 * - **Form Validation Support**: Ensures tabs display errors when necessary if form inputs are invalid.
 * - **Customizable Tab Configurations**: Each tab can have custom labels, validation, and counters for tracking states.
 * - **Dynamic Counters**: Displays numeric indicators to signal critical or positive states.
 * - **Standalone Compatibility**: Can be used independently or integrated within a larger **QdPage** structure.
 * - **Customizable Submit Button**: Allows configuration of an action handler and visibility settings.
 * - **Bookmarkable tabs**: Allows users to bookmark tabs and make them navigable.
 *
 * #### **Tab Configuration**
 *
 * Each tab inside `QdPageTabsComponent` can be configured using `QdPageTabConfig`, supporting:
 *
 * - **label**: A translatable label for the tab.
 * - **isDisabled**: Whether the tab should be interactable.
 * - **counters**: Displays numeric counters for **critical** (red) and **positive** (green) states.
 * - **name**: Unique name of this tab. Used for query param routing via `?tab=<tabName>`. Required when `connectWithRouter` in **QdPageTabsConfig** is enabled.
 *
 * #### **Form Handling**
 *
 * Tabs support form groups, which are passed using the `[tabControl]` input.
 * The system ensures that forms validate correctly before allowing navigation.
 *
 * #### **Error Handling**
 *
 * Error states appear when:
 *
 * - **A required form field is left empty**: The tab title changes to red.
 * - **Invalid data is entered**: The validation process changes the tab title to red.
 *
 * #### **Submit Button Configuration**
 *
 * The submit button at the bottom of the tab system can be configured via `QdPageTabsConfig`:
 *
 * - **i18n**: The translated label for the submit button.
 * - **handler**: A callback function that receives form data upon submission.
 * - **isDisabled**: Controls whether the button should be active or not.
 * - **isHidden**: Determines whether the button is visible.
 * - **connectWithRouter**: If set to true, the tab will be connected to the URL and will be bookmarked. It is obligatory to set the `name` attribute for each tab.
 *
 * #### **Usage**
 *
 * **Basic Example:**
 *
 * ```typescript
 * @Component({ ... })
 * export class MyPageTabsComponent {
 *   form = new FormGroup({
 *     firstName: new FormControl('', Validators.required),
 *     lastName: new FormControl(''),
 *     age: new FormControl('')
 *   });
 *
 *   config: QdPageTabsConfig = {
 *     submitButton: {
 *       handler: (values) => doSomethingWith(values)
 *     }
 *   };
 *
 *   firstTabConfig: QdPageTabConfig = {
 *     label: { i18n: 'Tab One' },
 *     counters: of({ positive: 3, critical: 1 })
 *   };
 *
 *   ...
 * }
 * ```
 *
 * ```html
 * <qd-page-tabs [config]="config">
 *   <qd-page-tab [config]="firstTabConfig" [tabControl]="form">
 *     <qd-section [config]="sectionConfig">
 *       <qd-grid [config]="gridConfig" [formGroup]="form">
 *         <qd-input formControlName="firstName"></qd-input>
 *         <qd-input formControlName="lastName"></qd-input>
 *         <qd-input formControlName="age"></qd-input>
 *       </qd-grid>
 *     </qd-section>
 *   </qd-page-tab>
 *
 *   <qd-page-tab ... >
 *     ...
 *   </qd-page-tab>
 * </qd-page-tabs>
 * ```
 *
 * **Bookmarkable Tabs Example: **
 *
 * To enable bookmarkable tabs that sync with the browser URL, set `connectWithRouter: true`
 * and provide a unique `name` for each tab:
 *
 * ```typescript
 * import { Component } from '@angular/core';
 * import { Router } from '@angular/router';
 * import { QdPageTabsConfig, QdPageTabConfig } from '@qd-ui/qd-ui';
 *
 * @Component({
 *   selector: 'app-bookmarkable-tabs',
 *   template: `
 *     <qd-page-tabs [config]="pageTabsConfig">
 *       <qd-page-tab [config]="overviewTabConfig">
 *         <qd-section>
 *           This is the overview tab content.
 *         </qd-section>
 *       </qd-page-tab>
 *
 *       <qd-page-tab [config]="detailTabConfig">
 *         <qd-section>
 *           This is the detail tab content.
 *         </qd-section>
 *       </qd-page-tab>
 *
 *       <qd-page-tab [config]="controlResultsTabConfig">
 *         <qd-section>
 *           This is the control results tab content.
 *         </qd-section>
 *       </qd-page-tab>
 *     </qd-page-tabs>
 *   `
 * })
 * export class BookmarkableTabsComponent {
 *   // Enable router connection for bookmarkable tabs
 *   pageTabsConfig: QdPageTabsConfig = {
 *     selectedIndex: 0,
 *     connectWithRouter: true
 *   };
 *
 *   // Each tab must have a unique 'name' when connectWithRouter is enabled
 *   overviewTabConfig: QdPageTabConfig = {
 *     label: { i18n: 'Overview' },
 *     name: 'overview' // Required for router connection
 *   };
 *
 *   detailTabConfig: QdPageTabConfig = {
 *     label: { i18n: 'Details' },
 *     name: 'details' // Required for router connection
 *   };
 *
 *   controlResultsTabConfig: QdPageTabConfig = {
 *     label: { i18n: 'Control Results' },
 *     name: 'controlResults' // Required for router connection
 *   };
 *
 *   constructor (private router: Router) {}
 * }
 * ```
 *
 * **Bookmarkable Tabs Behavior: **
 * - URLs will include query parameter: `?tab=overview`, `?tab=details`, `?tab=controlResults`
 * - Users can bookmark specific tabs and return directly to them
 * - Browser back/forward buttons work with tab navigation
 * - If an invalid tab name is provided in URL, the first available tab is selected
 * - If no tab parameter is present, the `selectedIndex` or first non-disabled tab is selected
 */
export declare class QdPageTabsComponent extends CdkStepper implements OnInit, OnChanges, AfterContentInit, AfterViewInit, OnDestroy {
    readonly footerService: QdPageFooterService;
    private pageStoreService;
    private readonly router;
    private readonly route;
    /**
     * Configuration of QdPageTabs.
     */
    config: QdPageTabsConfig;
    /**
     * A static test ID for integration tests can be set.
     */
    testId: string;
    readonly tabSelection: EventEmitter<QdTabSelectionEvent>;
    private _viewonly;
    private readonly destroyRef;
    get tabs(): QueryList<QdPageTabComponent>;
    get selected(): QdPageTabComponent | undefined;
    set selected(step: QdPageTabComponent | undefined);
    constructor(footerService: QdPageFooterService, _dir: Directionality, pageStoreService: QdPageStoreService<any>, router: Router, route: ActivatedRoute, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>);
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngAfterContentInit(): void;
    ngAfterViewInit(): void;
    private initializeTabSelection;
    private configureBookmarkableTabs;
    /**
     * Initializes the tab selection based on the URL parameter 'tab'.
     * @private
     */
    private initializeTabFromUrl;
    /**
     * If the user navigates to a page with a tab selected, the tab will be selected automatically in {@link initializeTabFromUrl()} method.
     * If the user navigates to a page without a tab selected, the first active tab will be selected.
     * @private
     */
    private initializeFirstTabSelection;
    ngOnDestroy(): void;
    _getIndicatorType(index: number, state?: StepState): StepState;
    private isTabSelectable;
    /**
     * Selects the first tab that is not disabled.
     * @param updateUrl if true, the URL will be updated to reflect the selected tab.
     */
    private selectFirstNotDisabledTab;
    save(): void;
    selectTab(tab: QdPageTabComponent): void;
    isSubmitButtonShown(): boolean;
    isSubmitButtonDisabled(): boolean | undefined;
    _getTabLabelId(i: number): string;
    private blockCdkInput;
    private mapSelectionChangeToTabSelectionOutput;
    static ɵfac: i0.ɵɵFactoryDeclaration<QdPageTabsComponent, [{ optional: true; }, { optional: true; }, null, null, { optional: true; }, null, null]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<QdPageTabsComponent, "qd-page-tabs", never, { "config": { "alias": "config"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; }, { "tabSelection": "tabSelection"; }, never, never, true, never>;
}
//# sourceMappingURL=page-tabs.component.d.ts.map