import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
import { DialogRef } from '@angular/cdk/dialog';
import { BehaviorSubject, Observable } from 'rxjs';
import { QdDialogService } from '../dialog/dialog.module';
import { QdPageStepperAdapterDirective } from '../page-stepper/adaptors/page-stepper-adapter.directive';
import { QdPageStepperComponent } from '../page-stepper/page-stepper.component';
import { QdPageTabsAdapterDirective } from '../page-tabs/adaptors/page-tabs-adapter.directive';
import { QdPageTabsComponent } from '../page-tabs/page-tabs.component';
import { QdSectionComponent } from '../section/section.component';
import { QdPageControlPanelComponent } from './control-panel/page-control-panel.component';
import { QdPageInfoBannerComponent } from './info-banner/page-info-banner.component';
import { QdInspectOperationMode, QdPageConfig } from './model/page-config.interface';
import { QdFormGroupManagerService } from './shared/services/form-group-manager.service';
import { QdPageFooterService } from './shared/services/page-footer.service';
import { QdPageStoreService } from './shared/services/page-store.service';
import { QdPageSubmitActionService } from './shared/services/page-submit-action.service';
import * as i0 from "@angular/core";
/**
 * **QdPage** serves as the central structural element within the hierarchy under the **QdShell**.
 * Integration is done through the Angular Routing Module, and QdPage is designed to be responsive across various screen sizes right out of the box.
 *
 * #### **Page Types**
 *
 * QdPage uses page types to decide how the page looks and works. Each page type has its own settings and actions.
 *
 * - **overview**: Displays a summary or a list of objects, providing an overview of multiple business cases.
 * - **create**: Allows the creation of a new object, representing a business case.
 * - **inspect**: Enables viewing, editing, and executing additional actions related to the object, which also represents a business case.
 * - **custom**: Provides a way to implement unique functionality that doesn’t fit the other predefined page types.
 *
 * **Note that the 'custom' page type should be used only as a fallback for very specific cases. If you encounter such a situation, please contact the Quadrel team.**
 *
 * #### **Facets**
 *
 * These are extra pieces of information shown in the page header. They give context specific to the current object model being viewed or edited. There are several types of facets, including `status`, `value`, `criticality`, `references`, `progress`, `date`, `singleSelect`, and `multiSelect`. Each type has its own options. For more details, see the `QdPageHeaderFacet` interface.
 *
 * #### **Context**
 *
 * The `context` acts as a filter that can be selected on the overview page and provides the business context, which remains consistent throughout the entire application. On create and inspect pages, the context is displayed as read-only. For more details, check the dedicated chapter in Storybook.
 *
 *
 * #### **Page Info Banners**
 *
 * To insert a page info banner under the page header, just put a `qd-page-info-banner` component inside the `qd-page`. Multiple consecutive info banners of the same type will be merged into one banner container. Page info banners have the same appearance like notifications.
 *
 * #### **Control Panel**
 *
 * The control panel is located on the right side of the page and is used to display additional information and functions relevant to a specific business case, which is linked to a specific object model. For further information, please consult the dedicated chapter in Storybook.
 *
 * #### **Actions**
 *
 * These are interactive elements that perform specific functions. Functions for these actions can be set up through configurations. Custom actions can be added to any page type. Additionally, all actions can be configured and customized with your own text, which will override the default texts.
 *
 * Please check the relevant interfaces for each page type: `QdPageConfigOverview`, `QdPageConfigCreate`, `QdPageConfigInspect`, and `QdPageConfigCustom`.
 *
 * #### **Validation/Parameterization**
 *
 * Validation and parameterization are covered in a dedicated chapter in the Storybook. Please check the "Validation" section for more information.
 *
 * #### **Resolver**
 *
 * Using a resolver to fetch page object data is essential to the page concept. Add the resolver to the component's providers and use the `QD_PAGE_OBJECT_RESOLVER_TOKEN` token. This approach enables type safety and user feedback by effectively managing the necessary data for the page.
 *
 * ```ts
 * interface MyObjectModel {
 *   // Metadata displayed in the ObjectHeader
 *   state: MyState;
 *   countryOfDestination: MyCountryOfDestination;
 *   // Appears not in the ObjectHeader
 *   payload: MyPayload;
 * }
 *
 * type MyObjectMetadata = 'state' | 'countryOfDestination';
 *
 * @Injectable()
 * class MyObjectModelResolver implements QdPageObjectResolver<MyObjectModel> {
 *   constructor(private http: HttpClient) {}
 *
 *   resolve(): Observable<MyObjectModel> {
 *     return this.http
 *       .get<MyObjectModel>('my-api')
 *       .pipe(tap((data: MyObjectModel) => doSomethingWith(data)));
 *   }
 * }
 *
 * @Component({
 *   selector: 'my-page',
 *   templateUrl: './my-page.component.html',
 *   providers: [
 *     {
 *       provide: QD_PAGE_OBJECT_RESOLVER_TOKEN,
 *       useClass: MyObjectModelResolver
 *     }
 *   ]
 * })
 * class MyPageComponent {
 *   pageConfig: QdPageConfig<Pick<MyObjectModel, MyObjectMetadata>> = {
 *     title: { i18n: 'i18n.page.title' },
 *     pageType: 'inspect',
 *     headerFacets: [
 *       {
 *         name: 'status',
 *         label: {
 *           i18n: 'i18n.status.label'
 *         },
 *         options: {
 *           type: 'status'
 *         }
 *       },
 *       {
 *         name: 'countryOfDestination',
 *         label: {
 *           i18n: 'i18n.countryOfDestination.label'
 *         },
 *         options: {
 *           type: 'value'
 *         }
 *       }
 *     ],
 *     pageTypeConfig: {
 *       cancel: {
 *         handler: () => handleCancel()
 *       },
 *       save: {
 *         handler: (formValues) => handleSave(formValues)
 *       }
 *     }
 *   };
 * }
 * ```
 *
 * #### **Updating Facets**
 *
 * Typically, the values of the facets on a create or inspect page are set to read-only. However, there may be cases where, for example, a status change is needed, such as through a dialog. For this purpose, we have provided an update method. In the resolver service, define an empty method called `updateMetadata`. Inject this service using its type, and then call the `updateMetadata` method with the required parameter.
 *
 * **Please note: These values should not be modified directly within a QdPage.**
 *
 * ```ts
 * @Injectable()
 * class MyObjectModelResolver implements QdPageObjectResolver<MyObjectModel> {
 *   config: QdPageObjectResolverConfig = {
 *     // your configuration options here
 *   }
 *
 *   constructor(private http: HttpClient) {}
 *
 *   resolve(): Observable<MyObjectModel> {
 *     // your implementation here
 *   }
 *
 *   updateMetadata(metadata: Partial<MyObjectModel>) {
 *     // leave empty here & call in your component
 *   }
 * }
 *
 * @Component({
 *   // ...
 *   providers: [
 *     {
 *       provide: QD_PAGE_OBJECT_RESOLVER_TOKEN,
 *       useClass: MyObjectModelResolver
 *     }
 *   ]
 * })
 * class MyPageComponent {
 *   constructor(@Inject(QD_PAGE_OBJECT_RESOLVER_TOKEN) private objectResolver: MyObjectModelResolver) {}
 *
 *   updateStatus() {
 *     this.objectResolver.updateMetadata({ state: 'Updated' });
 *   }
 * }
 * ```
 *
 * #### **Overview Page**
 *
 * On an overview page, a list of business cases can be displayed. Typically, this is done in a **QdTable**, including filters and/or search options. There are actions that handle routing to the related detail pages, where the business cases, represented by a business object model, can be viewed, edited, or newly created.
 *
 * ```ts
 * const overviewPageConfig: QdPageConfig<MyObjectType> = {
 *   title: { i18n: 'i18n.my-page.title' },
 *   pageType: 'overview',
 *   pageTypeConfig: {
 *     customActions: [
 *       {
 *         i18n: 'i18n.custom.action',
 *         handler: () => doSomething()
 *       }
 *     ]
 *   }
 * };
 * ```
 *
 * ```html
 * <qd-page [config]="pageConfig">
 *   <qd-section [config]="sectionConfig">
 *     <qd-table [config]="tableConfig"></qd-table>
 *   </qd-section>
 * </qd-page>
 * ```
 *
 * To configure contexts for a page, you can easily set contexts in the configuration for the overview page. They are then selectable on the overview page:
 *
 * ```ts
 * const overviewPageConfig: QdPageConfig<MyObjectType> = {
 *   // ...
 *   contexts: [
 *     {
 *       id: 'typeOfTraffic',
 *       label: { i18n: 'Verkehrsart' },
 *       type: 'single',
 *       selected: {
 *         label: { i18n: 'Schiene' },
 *         value: 'rail'
 *       },
 *       options: [
 *         {
 *           value: 'rail',
 *           label: { i18n: 'Schiene' }
 *         },
 *         {
 *           value: 'air',
 *           label: { i18n: 'Luft' }
 *         }
 *       ]
 *     }
 *   ]
 *   // ...
 * };
 * ```
 *
 * #### **Create Page**
 *
 * On the create page, a new business case can be created. This page typically includes forms for entering data. The submit button is parameterized with the form data and is validated through the QdPageStepper.
 * The click on the submit button should submit the creation of the business case or object. You can define a specific handler in the submit button's configuration to create the object.
 * If only one step is needed, the single-step mode can be used. In single-step mode, the stepper is visually hidden and behaves like a **QdSection**.
 *
 * ```ts
 * const createPageConfig: QdPageConfig<MyObjectType> = {
 *   title: { i18n: 'i18n.page.title' },
 *   pageType: 'create',
 *   pageTypeConfig: {
 *     submit: {
 *       handler: (formValues) => handleSubmit(formValues)
 *     }
 *   }
 * };
 * ```
 *
 * ```html
 * <!-- For "Quick Add" use PageStepper in single-step mode -->
 * <qd-page [config]="pageConfig">
 *   <qd-page-stepper [config]="stepperConfig">
 *     <qd-page-step [config]="stepConfigOne">
 *       <qd-section [config]="sectionConfig">
 *         <qd-grid [config]="gridConfig" [formGroup]="myForms" qdConnectFormStateToPage="myForms">
 *           <!-- your qd-form-components here -->
 *         </qd-grid>
 *       </qd-section>
 *     </qd-page-step>
 *   </qd-page-stepper>
 * </qd-page>
 *
 * <!-- With PageStepper using multiple steps -->
 * <qd-page [config]="pageConfig">
 *   <qd-page-stepper [config]="stepperConfig">
 *     <qd-page-step [config]="stepConfigOne">
 *       <qd-section [config]="sectionConfig">
 *         <qd-grid [config]="gridConfig" [formGroup]="myFormsOne" qdConnectFormStateToPage="myFormsOne">
 *           <!-- your qd-form-components here -->
 *         </qd-grid>
 *       </qd-section>
 *     </qd-page-step>
 *     <qd-page-step [config]="stepConfigTwo">
 *       <qd-section [config]="sectionConfig">
 *         <qd-grid [config]="gridConfig" [formGroup]="myFormsTwo" qdConnectFormStateToPage="myFormsTwo">
 *           <!-- your qd-form-components here -->
 *         </qd-grid>
 *       </qd-section>
 *     </qd-page-step>
 *   </qd-page-stepper>
 * </qd-page>
 * ```
 *
 * To allow resolving asynchronous operations when going to next step, you can provide a resolver of type QdPageStepResolver:
 *
 * ```ts
 * class MyResolver implements QdPageStepResolver {
 *   ...
 *
 *   resolve(index: number): Observable<void> {
 *     return this.http.post("next-step.com");
 *   }
 * }
 *
 * @Component({
 *   selector: 'qd-ui-page-create',
 *   templateUrl: './create.component.html',
 *   providers: [
 *     {
 *       provide: QD_PAGE_STEP_RESOLVER_TOKEN,
 *       useClass: PageStepResolver
 *     }
 *   ]
 * })
 * export class CreateComponent {
 * ```
 *
 * #### **Inspect Page**
 *
 * On an inspect page, a specific business case is displayed and may be edited or submitted. Depending on your needs you can hide the submit button.
 * In contrast to a create page, an existing object is shown and potentially updated.
 *
 * The page operates in one of two modes - `view` or `edit` - as defined by the `operationMode` configuration key.
 *
 * The `viewonly` behavior defined by the operation mode is automatically propagated to all nested QdSection components that are part of a QLS,
 * as well as to functional patterns such as QdTable, QdTree, QdFileCollector, and QdQuickEdit.
 * All forms are rendered either in viewonly or editable mode accordingly.
 *
 * This behavior can be explicitly overridden in each component’s configuration - for example, to allow certain fields to remain editable.
 *
 * - **view**: A submit action can optionally be added for process-related operations such as status updates.
 *   The action receives the current form values and supports validation and parameterization.
 *
 * - **edit**: Typically includes a save button to persist changes made in editable fields.
 *
 * ```ts
 * const inspectPageConfig: QdPageConfig<MyObjectType> = {
 *   title: { i18n: 'i18n.page.title' },
 *   pageType: 'inspect',
 *   pageTypeConfig: {
 *     operationMode: 'edit',
 *     cancel: {
 *       handler: () => handleCancel()
 *     },
 *     save: {
 *       handler: (formValues) => handleSave(formValues)
 *     }
 *   }
 * };
 * ```
 *
 * ```html
 * <!-- with Section -->
 * <qd-page [config]="pageConfig">
 *   <qd-section [config]="sectionConfig">
 *     <qd-grid [config]="gridConfig" [formGroup]="myForms" qdConnectFormStateToPage="myForms">
 *       <!-- your qd-form-components here -->
 *     </qd-grid>
 *   </qd-section>
 * </qd-page>
 *
 * <!-- with PageTabs -->
 * <qd-page [config]="pageConfig">
 *   <qd-page-tabs [config]="stepperConfig">
 *     <qd-page-tab [config]="tabConfigOne">
 *       <qd-section [config]="sectionConfig">
 *         <qd-grid [config]="gridConfig" [formGroup]="myFormsOne" qdConnectFormStateToPage="myFormsOne">
 *           <!-- your qd-form-components here -->
 *         </qd-grid>
 *       </qd-section>
 *     </qd-page-tab>
 *     <qd-page-tab [config]="tabConfigTwo">
 *       <qd-section [config]="sectionConfig">
 *         <qd-grid [config]="gridConfig" [formGroup]="myFormsTwo" qdConnectFormStateToPage="myFormsTwo">
 *           <!-- your qd-form-components here -->
 *         </qd-grid>
 *       </qd-section>
 *     </qd-page-tab>
 *   </qd-page-tabs>
 * </qd-page>
 * ```
 *
 * #### **Custom Page**
 *
 * ```ts
 * const customPageConfig: QdPageConfig<MyObjectType> = {
 *   title: { i18n: 'i18n.page.title' },
 *   pageType: 'custom',
 *   pageTypeConfig: {
 *     customActions: [
 *       {
 *         i18n: 'i18n.custom.action',
 *         handler: () => doSomething()
 *       }
 *     ]
 *   }
 * };
 * ```
 *
 * ```html
 * <qd-page [config]="pageConfig">
 *   <!-- Place content here that doesn’t fit the other page types -->
 * </qd-page>
 * ```
 */
export declare class QdPageComponent<T extends object> implements OnInit, OnChanges, AfterViewInit, OnDestroy {
    private readonly pageStoreService;
    private readonly footerService;
    private readonly formGroupManagerService;
    private readonly submitActionService;
    private readonly dialog;
    private bottomOffset$?;
    private readonly dialogRef?;
    /**
     * This property defines the configuration for the QdPage component, including the page type,
     * title, and specific configurations for each type of page.
     */
    config: QdPageConfig<T>;
    /**
     * A static test ID for integration tests can be set. <br />
     * The value for the HTML attribute [data-test-id].
     */
    testId?: string;
    /**
     * This event is emitted when the operation mode of the inspect page is changed.
     */
    operationModeChanged: EventEmitter<QdInspectOperationMode>;
    sections: QueryList<QdSectionComponent>;
    controlPanel: QdPageControlPanelComponent;
    stepperComponent?: QdPageStepperComponent;
    tabsComponent?: QdPageTabsComponent;
    stepperAdapterDirective?: QdPageStepperAdapterDirective;
    tabsAdapterDirective?: QdPageTabsAdapterDirective;
    infoBanners: QueryList<QdPageInfoBannerComponent>;
    footerHasContent$: Observable<boolean>;
    isFooterVisible: boolean | undefined;
    projectionGuardMessage: string;
    private _isInitialized;
    private _destroyed$;
    private _cancelSubmitValidation$;
    get isControlPanelVisible(): boolean;
    get isControlPanelBroad(): boolean;
    get hasNavigation(): boolean;
    get footerVisible(): boolean | undefined;
    get hasInfoBanners(): boolean;
    constructor(pageStoreService: QdPageStoreService<T>, footerService: QdPageFooterService, formGroupManagerService: QdFormGroupManagerService, submitActionService: QdPageSubmitActionService, dialog: QdDialogService, bottomOffset$?: BehaviorSubject<number>, dialogRef?: DialogRef<unknown>);
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    private checkConfigValidity;
    private setupCreatePageFooterActions;
    private handleCancelActionWithFormChanges;
    private initSaveDraftFooterAction;
    private updateInspectPageOperationMode;
    private generateFooterActionHandler;
    private setupSubmitActionValidation;
    private initSubmitValidation;
    private setupPageDialogCloseContract;
    static ɵfac: i0.ɵɵFactoryDeclaration<QdPageComponent<any>, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<QdPageComponent<any>, "qd-page", never, { "config": { "alias": "config"; "required": true; }; "testId": { "alias": "data-test-id"; "required": false; }; }, { "operationModeChanged": "operationModeChanged"; }, ["controlPanel", "stepperComponent", "tabsComponent", "stepperAdapterDirective", "tabsAdapterDirective", "sections", "infoBanners"], ["qd-page-info-banner", "qd-page-stepper", "[qdPageStepperAdapter]", "qd-page-tabs", "[qdPageTabsAdapter]", "qd-section", "[qdSectionAdapter]", "[qdPageFooter]", "qd-page-control-panel", "*"], false, never>;
}
//# sourceMappingURL=page.component.d.ts.map